更新记录

1.0.3(2022-10-24) 下载此版本

更新样式

1.0.2(2022-10-24) 下载此版本

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

1.0.1(2022-10-23) 下载此版本

增加自定义和标准组件

查看更多

平台兼容性

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

一、使用插件

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

参数 说明 类型 默认值 可选值
dropdownKey 菜单标识key选择菜单事件 String default String
options 下拉菜单数据 Number [
{value:1,label:'默认排序'},
{value:2,label:'价格升序'},
{value:3,label:'价格降序'}
]
Number
forward 菜单携带返回箭头 Boolean true Boolean
change 点击菜单事件 Function Function Function
type 是否使用自定义菜单 String '' custom

Event

事件名 说明 回调参数
change 点击下拉菜单click事件 e:点击后打印的对象,会返回dropdownKey值和value

五、联系QQ群

QQ群:191105440

隐私、权限声明

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

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

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

许可协议

MIT协议

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