富文本(bui-richcell)

目前组件支持 文本,图标,图片的混合展示。对于较长的文本,暂时无法自动换行。 富文本(bui-richcell) - 图1 富文本(bui-richcell) - 图2

用法

  1.  <bui-richcell :content='content' @click="richClick"></bui-richcell>


  1. data: function () {
    2.     return {
    3.         leftItem: {
    4.             icon: 'ion-chevron-left'
    5.         },
    6.         content:[
    7.             {
    8.                 type: 'text',
    9.                 value: '@张指导',
    10.                 theme: 'blue',
    11.             },
    12.             {
    13.                 type: 'text',
    14.                 value: '今天去深圳市局开会,与会人数近30人,领导人'
    15.             },
    16.             {
    17.                 type: 'text',
    18.                 value: '@鲁琳',
    19.                 theme: 'blue'
    20.             },
    21.             {
    22.                 type: 'text',
    23.                 value: '局长对此系统高度重视,请加快'
    24.             },
    25.             {
    26.                 type: 'text',
    27.                 value: '#云指挥系统#',
    28.                 theme: 'red',
    29.             },
    30.             {
    31.                 type: 'text',
    32.                 value: '项目建设'
    33.             },
    34.             {
    35.                 type:'icon',
    36.                 icon:'ion-checkmark-circled',
    37.                 color:'red',
    38.             },
    39.             {
    40.                 type: 'text',
    41.                 value: '关键未来信息化建设的高度我们成为行业领头羊的关键!'
    42.             },
    43.         ]
    44.     }
    45. },
    46. methods: {
    47.     richClick(e,obj){
    48.         this.$toast(JSON.stringify(obj));
    49.     }
    50. }

Example: bui-image-slider

属性

Prop Type Required Default Description
content array Y 内容数组
hasTextMargin boolean N true 设置是文本是否有右边距
* content 目前支持三种类型,icon,text,image

text: 1. { 2. type: 'text', 3. value: '@张指导', 4. style:{}, 5. theme: 'blue' //内置了black,blue,gray,red,yellow 6. }

icon: 1. { 2. type: 'icon', 3. icon:'ion-checkmark-circled', 4. color:'red', 5. size:48 6. }

image: 1. { 2. type:'image', 3. width: 100, 4. height: 100 5. }

事件

  • @click: content中的每个组件的点击事件,返回 event 和 当前小组件的对象数据