Preview

预览

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

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

效果

preview01