更新记录
1.0.2(2024-07-06)
1、修复了部分bug 2、完善了组件展示 3、新增了选项标签、选项值、自选项的自定义配置
1.0.1(2024-05-27)
1、箭头展示bug 2、添加弹窗阴影 3、添加操作按钮颜色
1.0.0(2024-05-24)
多选级联菜单
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
wx-cascader
1.购买插件,选择该插件绑定的项目。
2.根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
3.本插件
API
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
options | Array | [] | 选择器列表(值:{label: '',value: '',children: []}) |
value | Array, String, Number | [] | 选择器的初始内容 |
placeholder | String | '' | 初始内容为空时占位符 |
props | Object | - | 选择器配置项 |
props 选项属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
multiple | Boolean | false | 是否开启多选 |
checkStrictly | Boolean | false(只有最后一列可选) | 选择器的每一列是否都可选 |
disabled | Boolean | false | 是否禁用选择器 |
label | String | 'label' | 自定义选项标签的属性 |
value | String | 'value' | 自定义选项值的属性 |
children | String | 'children' | 自定义子选项属性 |
代码示例
<template>
<view class='wx-cascader-main'>
<view class="wx-cascader-cell">
<text>区域选择:</text>
<view>
<wx-cascader
:options="options"
v-model="list"
:props="{
disabled: false,
multiple: false,
checkStrictly: false,
label: 'label',
value: 'value',
children: 'children'
}"
placeholder="请选择"
@change="onChange"></wx-cascader>
</view>
</view>
</view>
</template>
<script>
import WxCascader from './components/wx-cascader/wx-cascader.vue'
export default {
components: {
WxCascader
},
data() {
return {
options: [
{
label: '中国',
value: '1',
children: [
{
label: '湖南',
value: '2',
children: [
{
label: '长沙',
value: '4',
},
{
label: '张家界',
value: '5',
}
]
},
{
label: '广东',
value: '3',
children: [
{
label: '东莞',
value: '6',
},
{
label: '佛山',
value: '7',
}
]
}
]
}
],
list: [4,5]
}
},
onLoad () {
},
methods: {
onChange (e) {
console.log(e)
}
}
}
</script>
<style lang='scss' scoped>
.wx-cascader-main {
width: 100%;
height: 100%;
.wx-cascader-cell {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
margin-top: 20rpx;
> view {
width: 500rpx;
border: 1rpx solid #ccc;
border-radius: 10rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
}
}
</style>