FormPreview

表单预览。

引入

import { FormPreview } from 'we-vue'

Vue.use(FormPreview)
1
2
3

例子

<template>
  <div class="page">
    <wv-form-preview class="preview-item" title="订单详情" value="100.00" :dataItems="dataItems" :buttons="buttons1"/>
    <wv-form-preview class="preview-item" title="订单详情" value="100.00" :dataItems="dataItems" :buttons="buttons2"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataItems: [
        {
          label: '商品',
          value: '电动打蛋机'
        },
        {
          label: '标题标题',
          value: '名字名字名字'
        },
        {
          label: '标题标题',
          value: '很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字'
        }
      ],
      buttons1: [
        {
          text: '操作',
          type: 'primary',
          action: function () {
            console.log('执行主要操作……')
          }
        }
      ],
      buttons2: [
        {
          text: '辅助操作',
          type: 'default',
          action: function () {
            console.log('执行辅助操作……')
          }
        },
        {
          text: '操作',
          type: 'primary',
          action: function () {
            console.log('执行主要操作……')
          }
        }
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

API

参数 类型 说明 可选值 默认值
title String 标题
value String 金额
data-items Array 表单数据项
buttons Array 按钮
中国联通
20.45