更新记录

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>

隐私、权限声明

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

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

插件不采集任何数据

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

暂无用户评论。

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