rich-text.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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. <!-- #ifndef MP-ALIPAY -->
  13. <view class="uni-title uni-common-mt">
  14. 字符串类型
  15. <text>\nnodes属性为String</text>
  16. </view>
  17. <view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
  18. <rich-text :nodes="strings"></rich-text>
  19. </view>
  20. <!-- #endif -->
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. title: 'rich-text',
  29. nodes: [{
  30. name: 'div',
  31. attrs: {
  32. class: 'div-class',
  33. style: 'line-height: 60px; color: red; text-align:center;'
  34. },
  35. children: [{
  36. type: 'text',
  37. text: 'Hello&nbsp;uni-app!'
  38. }]
  39. }],
  40. strings: '<div style="text-align:center;"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/ceb770c0-5164-11eb-8a36-ebb87efcf8c0.png"/></div>'
  41. }
  42. }
  43. }
  44. </script>