更新记录

1.0.2（2020-09-06）

修改自定义模式的启用方式，实现分栏目自定义内容

1.0.1（2020-08-29）

1. 修复自定义模式header不切换选项的bug

1.0.0（2020-08-28）

一个简单美观的下拉菜单组件

平台兼容性

一、使用说明

1. 解压下载的压缩包，将组件放在项目的components目录下

2. 引用组件

   <wyb-drop-down 
    ref="dropDown"
    :options="options"
    @change="onHeaderSelect"
    @select="onItemSelect">
       <!-- 自定义模式开启时，这里可以放内容 -->
   </wyb-drop-down>

   import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue'
   export default {
       components: {
           wybDropDown
       },
       data() {
           return {
               options: [{
                   header: '栏目一',
                   // contents在自定义开启时可以不用传
                   contents: ['选项1', '选项2', '选项3', '选项4'], 
                   custom: true // 该栏目开启自定义模式
               }, {
                   header: '栏目二',
                   contents: ['选项5', '选项6', '选项7', '选项8']
               }, {
                   header: '栏目三',
                   contents: ['选项9', '选项10', '选项11', '选项12']
               }]
           }
       }
   }

   this.$refs.dropDown.close() // 关闭

3. Demo体验地址：点我访问（请用手机访问，或用桌面浏览器启动手机调试模式）

4. 如果觉得我的插件还不错，可以下载我的插件的示例集合Demo => 传送门，里面有我全部的插件以及全部插件的示例工程

二、参数说明

1. Props

   参数名	类型	默认值	说明	可选值
   options	Array	[{header: 'A', contents: ['1', '2']}]	筛选功能的选项参数，格式见上方	见上方
   default-index-list	Array	均为第一个选项	默认选中的选项，不传默认都是第一项，格式见下方说明	见下方说明
   auto-height	Boolean	true	是否自适应高度	true, false
   min-height	String, Number	10	当auto-height=true时为最小高度； 当auto-height=false时为高度（单位：rpx）
   max-height	String, Number	600	当且仅当auto-height=true时生效，最大高度（单位：rpx）
   scroll	Boolean	true	是否开启纵向滚动	true, false
   radius	String, Number	0	底边角的圆角值（单位：px）
   active-color	HexColor, RgbColor	'#2979ff'	选中的颜色
   active-weight	Boolean	true	选中是否加粗	true, false
   default-color	HexColor, RgbColor	'#333'	未选中的颜色
   bg-color	Object	{header:'#fff', content: '#fff'}	栏目部分的背景色与内容部分的背景色
   drop-icon	String	'fill'	下拉图标的样式	fill, line
   font-size	Object	{header:30, content: 30}	栏目部分的字体大小与内容部分的字体大小（单位：rpx）
   mask-alpha	String, Number	0.5	遮罩通明度
   z-index	Number	500	同css
   custom	Boolean	false	1.0.2版本后弃用，已挪到参数options中 是否开启自定义模式	true, false

   部分参数说明：

   (1) default-index-list

   // 开启自定义模式的栏目不用写在数组里
   [{
       headerIndex: 0, // 栏目索引值
       index: 1        // 该栏目默认选中的索引
   }, {
       headerIndex: 1,
       index: 2
   }, {
       headerIndex: 2, 
       index: 3
   }]

2. Event

   事件名	说明	返回值
   @select	点击栏目下的选项时触发（仅当该栏目为非自定义模式有效）	见下方代码块
   @change	点击栏目时触发（仅当该栏目为自定义模式有效）	见下方代码块
   @show	下拉菜单展开后触发
   @hide	下拉菜单收起后触发

   @select的返回值

   {
       header: "栏目二",  // 栏目名
       headerIndex: 1,   // 栏目索引
       content: "选项6",  // 选项名
       contentIndex: 1,  // 选项索引
       "contentActiveIndexList": [   // 当前所有栏目下选中的索引
           {
               "headerIndex": 0,
           "custom": true
           },
       {
               "headerIndex": 1,
               "index": 0
           },
           {
               "headerIndex": 2,
               "custom": true
           }
       ]
   }

   @change的返回值

   {
       header: "栏目二",  // 栏目名
       headerIndex: 1   // 栏目索引
   }