71 lines
2.1 KiB
Markdown
71 lines
2.1 KiB
Markdown
# zb-dropdown-menu 向下弹出的菜单列表
|
||
|
||
### 微信=》 19550102670 拉进群
|
||
|
||
### 友情链接
|
||
#### 在线预览点击 —— [企业级、通用型中后台前端解决方案 ](http://182.61.5.190:8889/)
|
||
#### vue-admin-perfect —— [企业级、通用型中后台前端解决方案（基于vue3.0+TS+Element-Plus 最新版，同时支持电脑，手机，平板)](https://github.com/zouzhibin/vue-admin-perfect)
|
||
|
||
|
||
### DropdownMenu Props 属性
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |是否必须|
|
||
| ------ | ------ | ------ | ------ | ------ |------ |
|
||
| active-color | 菜单标题和选项的选中态颜色 | string |-- | #ee0a24 |必须 |
|
||
| z-index | 选项数组 | 菜单栏 z-index 层级,一个页面存在多个下拉选项的时候可以通过这个设置 |number/string | -- | |
|
||
|
||
|
||
### DropdownItem Props 属性
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |是否必须|
|
||
| ------ | ------ | ------ | ------ | ------ |------ |
|
||
| value | 当前选中项对应的 value，可以通过v-model双向绑定 | number ,string |-- | -- |必须 |
|
||
| options | 选项数组 | Option[] |-- | -- |必须 |
|
||
| name | 必须指定，判断唯一值,不能重复 | String|Number |-- | -- |必须 |
|
||
|
||
|
||
##3 DropdownItem Events
|
||
| 参数 | 说明 | 回调参数 |
|
||
| ------ | ------ | ------ | ------ | ------ |------ |
|
||
| change | 点击选项导致 value 变化时触发 | item |
|
||
|
||
### 注意 小程序没有window对象，需要自己在外层进行手动关闭
|
||
```
|
||
this.$refs.dropdown.close()
|
||
```
|
||
|
||
### 使用示例
|
||
```
|
||
<zb-dropdown-menu style="width: 100%">
|
||
<zb-dropdown-item
|
||
name="first"
|
||
:options="option"
|
||
v-model="value1"
|
||
@change="change1"
|
||
></zb-dropdown-item>
|
||
<zb-dropdown-item
|
||
name="two"
|
||
:options="option2"
|
||
v-model="value2"
|
||
@change="change2"
|
||
></zb-dropdown-item>
|
||
</zb-dropdown-menu>
|
||
```
|
||
|
||
### 数据格式
|
||
```
|
||
option: [
|
||
{
|
||
text: '全部商品',
|
||
value: 0
|
||
},
|
||
{
|
||
text: '新款商品',
|
||
value: 1
|
||
},
|
||
{
|
||
text: '活动商品',
|
||
value: 2
|
||
},
|
||
],
|
||
```
|
||
|