wxc-rich-text

Weex 富文本的通用解决方案，支持 文字、图标、链接、标签 形式的混排

规则

  • 使用统一规范，前后端约定相关字段
  • wxc-rich-text用于支持一行通用图文混排情况
  • wxc-special-rich-text用于支持两行特殊情况（一个 tag 或 icon 加两行文本情况） wxc-rich-text 富文本 - 图1

Demo

wxc-rich-text 富文本 - 图2 wxc-rich-text 富文本 - 图3

使用方法

  1. <template>
  2.   <div class="container">
  3.     <wxc-rich-text :config-list="configList"
  4.                    @wxcRichTextLinkClick="wxcRichTextLinkClick"></wxc-rich-text>
  5.      <div class="special-rich">
  6.        <wxc-special-rich-text :config-list="specialConfigList"></wxc-special-rich-text>
  7.      </div>
  8.   </div>
  10. </template>
  11. <script>
  12.   import icon from './type.js';
  13.   import { WxcRichText,WxcSpecialRichText } from 'weex-ui';
  15.   export default {
  16.     components: { WxcRichText, WxcSpecialRichText },
  17.     data: () => ({
  18.       configList: [{
  19.         type: 'icon',
  20.         src: 'https//gw.alicdn.com/tfs/TB1RRVWQXXXXXasXpXXXXXXXXXX-24-22.png',
  21.         style: {
  22.           height: 22
  23.         }
  24.       }, {
  25.         type: 'text',
  26.         value: '黄色主题',
  27.         theme: 'yellow'
  28.       }, {
  29.         type: 'link',
  30.         value: '自定义颜色link',
  31.         href: '//h5.m.taobao.com',
  32.         style: {
  33.           color: '#546E7A'
  34.         }
  35.       }, {
  36.         type: 'icon',
  37.         src: icon.fliggy
  38.       }, {
  39.         type: 'tag',
  40.         value: '满100减20',
  41.         theme: 'red'
  42.       }, {
  43.         type: 'tag',
  44.         value: '自定义标签',
  45.         style: {
  46.           fontSize: 26,
  47.           color: '#ffffff',
  48.           borderColor: '#3d3d3d',
  49.           backgroundColor: '#546E7A',
  50.           height: 36
  51.         }
  52.       }],
  53.       specialConfigList: [
  54.         {
  55.           type: 'tag',
  56.           value: '自由行',
  57.           style: {
  58.             fontSize: 24,
  59.             color: '#3D3D3D',
  60.             borderColor: '#FFC900',
  61.             backgroundColor: '#FFC900',
  62.             borderRadius: 14,
  63.           }
  64.         },
  65.         {
  66.           type: 'text',
  67.           value: '春秋旅游广州-泰国曼谷6天往返单机票自由行自由春秋旅游广州-泰国曼谷6天往返单机票自由行自由行…',
  68.           theme: 'black',
  69.           style: {
  70.             fontSize: 28
  71.           }
  72.         }
  73.       ],
  74.     }),
  75.     methods: {
  76.       wxcRichTextLinkClick () {}
  77.     }
  78.   };
  79. </script>

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
config-list Array Y [] 富文本配置 可参考 规则图 和 Demo
has-text-margin Boolean N 'true' 文字相互之间是否有 margin

事件回调

  1. @wxcRichTextLinkClick="wxcRichTextLinkClick"

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-rich-text/