rich-text.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <view class="content">
  3. <page-head :title="title"></page-head>
  4. <view class="uni-padding-wrap">
  5. <view class="uni-title uni-common-mt">
  6. 数组类型
  7. <text>\nnodes属性为Array</text>
  8. </view>
  9. <view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
  10. <rich-text :nodes="nodes"></rich-text>
  11. </view>
  12. <view class="uni-title uni-common-mt">
  13. 字符串类型
  14. <text>\nnodes属性为String</text>
  15. </view>
  16. <view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
  17. <rich-text :nodes="strings"></rich-text>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. title: 'rich-text',
  27. nodes: [{
  28. name: 'div',
  29. attrs: {
  30. class: 'div-class',
  31. style: 'line-height: 60px; color: red; text-align:center;'
  32. },
  33. children: [{
  34. type: 'text',
  35. text: 'Hello&nbsp;uni-app!'
  36. }]
  37. }],
  38. strings: '<div style="text-align:center;"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/></div>'
  39. }
  40. }
  41. }
  42. </script>