更新记录
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