Preview

预览

preview 用于实现表单预览,类似于微信支付账单之类的。表单预览分为 head(weui-form-preview__hd),body(weui-form-preview__bd)和 foot(weui-form-preview__ft)这三大部分,因此实现这一功能加上weui.css的一些类即可,示例代码如下:

  1. <template>
  2. <divclass="page">
  3. <divclass="weui-form-preview">
  4. <divclass="weui-form-preview__hd">
  5. <divclass="weui-form-preview__item">
  6. <divclass="weui-form-preview__label">付款金额</div>
  7. <divclass="weui-form-preview__value_in-hd">¥2400.00</div>
  8. </div>
  9. </div>
  10. <divclass="weui-form-preview__bd">
  11. <divclass="weui-form-preview__item">
  12. <divclass="weui-form-preview__label">商品</div>
  13. <divclass="weui-form-preview__value">电动打蛋机</div>
  14. </div>
  15. <divclass="weui-form-preview__item">
  16. <divclass="weui-form-preview__label">标题标题</div>
  17. <divclass="weui-form-preview__value">名字名字名字</div>
  18. </div>
  19. <divclass="weui-form-preview__item">
  20. <divclass="weui-form-preview__label">标题标题</div>
  21. <divclass="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</div>
  22. </div>
  23. </div>
  24. <divclass="weui-form-preview__ft">
  25. <navigatorurl=""class="weui-form-preview__btn weui-form-preview__btn_primary"hover-class="weui-form-preview__btn_active">操作</navigator>
  26. </div>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. import base64 from '../../../static/images/base64';
  32. exportdefault{
  33. data(){
  34. return{
  35. icon60: base64.icon60
  36. }
  37. },
  38. }
  39. </script>
  40. <style>
  41. page {
  42. margin-top:50px;
  43. }
  44. </style>

效果

preview01