jff-downmenu
介绍
向下弹出的菜单列表
使用方法
import "../../components/jff-downmenu/jff-downmenu.stml";
例子
<jff-downmenu
@tag-click="tag"
:left-array="list"
:right-array="list2"
activeColor="#12abe7"
defaultColor="black"
/>
data() {
return {
list: [
{
title: '第一项',
id: 1
},{
title: '第二项',
id: 2
},{
title: '第三项',
id: 3
}
],
list2:[
{
title: '上架时间',
id: 5
},
{
title: '销售数额',
id: 6
}
]
};
},
tag(e){
console.log(JSON.stringify(e));
}
props 属性
参数 |
说明 |
类型 |
默认值 |
active-color |
选中状态颜色,选填 |
String |
red |
default-color |
未选中状态颜色,选填 |
String |
black |
bg-color |
选项背景色,选填 |
String |
#fff |
left-array |
左侧选项数据,必填 |
Array |
[] |
right-array |
右侧选项数据,必填 |
Array |
[] |
tab-array |
菜单数据(菜单数据必须同示例一致),必填 |
Array |
[] |
|
|
|
|
events 事件
事件名 |
说明 |
回调参数 |
tag-click |
点击菜单栏时触发 |
- |
list-click |
点击菜单列表项时触发 |
- |
bg-click |
点击蒙板关闭时触发 |
- |
参数示例
/** 菜单示例,ID必须从 1 开始 **/
tab-array: [
{
title: '全部菜单',
id: 1
},
{
title: '更多菜单',
id: 2
}
]