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

用法
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 和 当前小组件的对象数据
