更新记录

1.0.6(2022-05-09)

优化

1.0.5(2022-05-09)

增加readme.md

1.0.4(2022-05-09)

优化切换点击遮罩层关闭按钮

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

zb-dropdown-menu 向下弹出的菜单列表

微信=》 19550102670 拉进群

友情链接

在线预览点击 —— 企业级、通用型中后台前端解决方案

vue-admin-perfect —— 企业级、通用型中后台前端解决方案(基于vue3.0+TS+Element-Plus 最新版,同时支持电脑,手机,平板)

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
        },
    ],

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问