Tags 组件设置方法
发布：2023-11-15 (15:26:09)
编辑
搜索记录 或 标签类的组件
属性介绍
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
flowOptions | Object | 空 | 是 | 流式布局的基本属性，包含以下属性： |
flowList | Array | 空 | 是 | 流式布局展示的数据数组。包含两种数据类型：1、String类型数组。2、Obj类型数组。 |
flowItemValue | String | 空 | 否 | 流式布局Item展示数据的参数名。1、当flowList为String类型时，可不填或''。2、当flowList为Obj类型时，必填，值为Obj展示到流式布局的属性名。 |
flowItemBgColor | String | #868686 | 否 | 流式布局Item背景色。 |
flowItemTextColor | String | #ffffff | 否 | 流式布局Item字体颜色。 |
flowItemTextSize | String | 13 | 否 | 流式布局Item字体大小，单位px。 |
flowItemMargin | String | 5 | 否 | 流式布局Item外边距，单位px。 |
flowItemRadius | String | 0 | 否 | 流式布局圆角弧度。为0时=直角矩形，不为0时=圆角矩形。 |
事件介绍
| 事件名 | 说明 |
|---|---|
@flowItemClickBack | 流式布局Item点击事件回调。回调值event:{clickIndex:index},clickIndex为流式布局Item下标。 |
组件：
<view> <Dtags :flowOptions="tags" @flowItemClickBack="handleItemClick"> </Dtags> </view>
方法：
data() {
return {
tags:{
flowList:[
// { // 为Obj类型
// type:'',
// name:'Android'
// },
'Android','IOS'
],
flowItemValue：'',//String类型可不填或空 Obj类型时必填，以上为例，填name
flowItemMargin:'5',
flowItemRadius:'8'
}
}
},methods: {
handleItemClick(e){//item点击事件回调
console.log(e)//{clickIndex: 18}
}
}
举报
相关帖子
