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