• 富文本(bui-richcell)
    • 用法
    • 属性
    • 事件

    富文本(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 和 当前小组件的对象数据