wxc-rich-text

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

规则

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

Demo

使用方法

  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>
    9.   10. </template>
    11. <script>
    12.   import icon from './type.js';
    13.   import { WxcRichText,WxcSpecialRichText } from 'weex-ui';
    14.   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>Click to copy

更详细代码可以参考 demo

可配置参数

Please feel free to use and contribute to the development.

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