index.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view class="container main">
  3. <view class="one">
  4. <rich-text :nodes="formatRichText(config.agreement)"></rich-text>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. components: {},
  11. data() {
  12. return {
  13. config: {},
  14. }
  15. },
  16. onLoad: async function(e) {
  17. const that = this;
  18. that.searchConfig();
  19. },
  20. methods: {
  21. searchConfig() {
  22. const that = this;
  23. try {
  24. const res = uni.getStorageSync('config');
  25. if (res) that.$set(that, `config`, res);
  26. } catch (e) {}
  27. },
  28. // 处理富文本
  29. formatRichText(html) {
  30. if (html) {
  31. // 富文本内容格式化
  32. return html && html.replace(/<img[^>]*>/gi, function(match, capture) {
  33. // 查找所有的 img 元素
  34. return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi,
  35. '')
  36. // 删除找到的所有 img 元素中的 style 属性
  37. }).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性,并设置宽度为 100%
  38. }
  39. },
  40. }
  41. }
  42. </script>
  43. <style lang="scss" scoped>
  44. .main {
  45. .one {
  46. padding: 2vw 4vw;
  47. .rich-img {
  48. width: 100% !important;
  49. display: block;
  50. }
  51. }
  52. }
  53. </style>