FormPreview

表单预览。

引入

  1. import { FormPreview } from 'we-vue'
  2. Vue.use(FormPreview)

例子

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

API

参数类型说明可选值默认值
titleString标题
valueString金额
data-itemsArray表单数据项
buttonsArray按钮