更新记录

1.0.3（2022-10-24）

更新样式

1.0.2（2022-10-24）

新增自定义组件：sxs-dropdown-custom childList数据优化

1.0.1（2022-10-23）

增加自定义和标准组件

平台兼容性

一、使用插件

template

<sxs-dropdown :menuList='menuList' :style='styleList'>
    <sxs-dropdown-item dropdownKey='region' :options='options1'></sxs-dropdown-item>
    <sxs-dropdown-item dropdownKey='default' :options='options2'></sxs-dropdown-item>
    <sxs-dropdown-item dropdownKey='brand' :options='options3'></sxs-dropdown-item>
</sxs-dropdown>

----自定义可用----
<sxs-dropdown-item
        dropdownKey='region' 
        :options='options1' 
        type='custom'
        @change='hanlderClick'
></sxs-dropdown-item>

数据

export default {
    data () {
        return {
        menuList:[
          {title:'区域',dropdownKey:'region'},
          {title:'默认排序',dropdownKey:'default'},
          {title:'品牌',dropdownKey:'brand'}
        ],
        styleList:{
          height:'100rpx'
        },
        //下拉菜单子集
        options1:[
          {value:1,label:'区域1'},
          {value:2,label:'区域2'},
          {value:3,label:'区域3'}
        ],
        options2:[
          {value:1,label:'默认1'},
          {value:2,label:'默认2'},
          {value:3,label:'默认3'}
        ],
        options3:[
          {value:1,label:'品牌1'},
          {value:2,label:'品牌2'},
          {value:3,label:'品牌3'}
                ]
        }
    }
}

二、相关依赖

2.1 uni-icons

参考网址：https://ext.dcloud.net.cn/plugin?name=uni-icons
图标选择：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#

2.2 uni-transition

参考网址：https://ext.dcloud.net.cn/plugin?id=985

2.3 使用步骤

1. 到参考网址，把对应插件添加到项目中
2. 在“自己的项目中”pages.json进行以下配置
{
    "easycom": {
        "autoscan": true,
        "custom": {
            "^sxs-(.*)": "@/components/sxs-$1/sxs-$1.vue" //重点在这里
        }
    },
    pages...
}

三、标准组件和自定义组件

标准组件为：sxs-drodown-item
自定义组件为：sxs-dropdown-custom

四、相关API配置

Props

Event

五、联系QQ群

QQ群：191105440