更新记录

1.0.2(2024-05-10) 下载此版本

修复attrs问题

1.0.1(2024-05-09) 下载此版本

修复异步 默认值回填 问题

1.0.0(2024-05-01) 下载此版本

1.0.0

查看更多

平台兼容性

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

jia-cascader (内部携带最新省市区编码 需要可自取)

Props

属性名 类型 说明 默认值
readonly Boolean 只读 |false
border Boolean 边框 | true
clearIcon Boolean 清除按钮 | true
placeholder String 默认提示 |请选择
popupTitle String 弹窗标题 |请选择
itemList Array 级联数据, 如果下一级是请求返回,则为第一级数据,否则为所有数据 [ ]
defaultItemList Array 初始化默认选中数据,当一次性传入所有数据时,默认值可为字符串数组,如:['安徽省','阜阳市','颍上县'] [ ]
defaultKey V1.7.2+ String 默认值字段key,可传值:text,value,仅当一次性传入所有数据时有效 text
headerLine Boolean 是否显示header底部细线 true
headerBgColor String header背景颜色 #FFFFFF
tabsHeight String 顶部标签栏高度 88rpx
text String 默认显示文字 请选择
size Number tabs 文字大小 28
color String tabs 文字颜色 #555
activeColor String 选中颜色 #5677fc
bold Boolean 选中后文字加粗 true
showLine Boolean 选中后是否显示底部线条 true
lineColor String 线条颜色 #5677fc
checkMarkSize Number icon 大小 15
checkMarkColor String icon 颜色 #5677fc
imgWidth String item 图片宽度 40rpx
imgHeight String item 图片高度 40rpx
radius String 图片圆角 50%
textColor String item text颜色 #333
textActiveColor String item text选中后颜色 #333
textBold Boolean 选中后字体是否加粗 true
textSize Number item text字体大小 28
nowrap Boolean text 是否不换行 false
subTextColor String item subText颜色 #999
subTextSize Number item subText字体大小 24
padding String item padding 20rpx 30rpx
firstItemTop String 占位高度,第一条数据距离顶部距离 20rpx
height String swiper 高度 300px
backgroundColor String item swiper 内容部分背景颜色 #FFFFFF
request Boolean 子级数据是否请求返回(默认false,一次性返回所有数据) false
receiveData Array 子级数据(当有改变时,默认为当前选中项新增子级数据,request为true时生效) [ ]
reset [Number, String] 改变reset值则重置所有数据

事件方法

属性 类型 说明 返回值
popupopened Events 弹框打开时触发
popupclosed Events 弹框关闭时触发
completeChange Events 选择器中item项点击时触发
inputChange Events 选择结果数据

inputChange事件回调参数说明:

  • layer 当前所属层级
  • subIndex 当前层级点击项索引值
  • subItem项 当前层级点击项所有数据,由父组件传入的数据

completeChange事件回调参数说明:

  • result 当前选择的结果
  • text 所有层级选择的text值拼接数据,如:安徽省合肥市庐阳区
  • value 最后一级点击项的value值
  • subText 最后一级点击项的text值
  • src 最后一级点击项的src值

temList 属性Object参数说明

属性 receiveData 数据格式与 itemList中子集数据一致,数据为约定格式,尽量保持一致。

[{
    src: "", //图标地址
    text: "",//主文本
    subText: "",//副文本
    value: 0, //value值 
    children:[{
      text: "",//主文本
      subText: "",//副文本
      value: 0,//value值
      children:[] //子级数据 如果数据长度为0则表示没有下一级数据了
     }] //子级数据
}]

defaultItemList 属性Object参数说明

数据为约定格式,尽量保持一致,当一次性传入所有数据时,默认值可为字符串数组。

[{
    text: "", //选中的text
    subText: '', //选中的subText
    value: '', //选中的value
    src: '', //选中的src,没有则传空或不传
    index: 0, //选中数据在当前layer索引
    list: [{
        src: "",//图标地址
        text: "", //主文本
        subText: "",//副文本
        value: 101 //value值 
     }] //当前layer下所有数据集合
}]

使用方法示例

在template中使用

<template>
<template>
    <view>
        <jia-cascader request :itemList="itemList" :receiveData="receiveData" :defaultItemList="defaultItemList" @completeChange="complete" @inputChange="change"></jia-cascader>
    </view>
</template>

<script>
// data 数据 及 方法
export default {
    data() {
        return {
            itemList: [],
            receiveData: [],
            defaultItemList: [
                {
                    src: '',
                    text: '高一(3)班',
                    subText: '30人',
                    value: 102,
                    index: 1, //选中数据在当前layer索引
                    list: [
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(3)班',
                            subText: '30人',
                            value: 103
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        }
                    ] //当前layer下所有数据集合
                },
                {
                    text: '周小小', //选中的text
                    subText: '女', //选中的subText
                    value: 11103, //选中的value
                    src: '', //选中的src,没有则传空或不传
                    index: 2, //选中数据在当前layer索引
                    list: [
                        {
                            text: '张三',
                            subText: '男',
                            value: 11101
                        },
                        {
                            text: '王五',
                            subText: '男',
                            value: 11102
                        },
                        {
                            text: '周小小',
                            subText: '女',
                            value: 11103
                        },
                        {
                            text: '周小小',
                            subText: '女',
                            value: 11103
                        },
                        {
                            text: '周小小',
                            subText: '女',
                            value: 11103
                        }
                    ] //当前layer下所有数据集合
                }
            ]
        };
    },
    onLoad() {
        this.itemList = [
            {
                src: ' ',
                text: '高一(1)班',
                subText: '30人',
                value: 101
            },
            {
                src: ' ',
                text: '高一(2)班',
                subText: '30人',
                value: 102
            },
            {
                src: ' ',
                text: '高一(3)班',
                subText: '30人',
                value: 103
            },
            {
                src: ' ',
                text: '高一(4)班',
                subText: '28人',
                value: 104
            },
            {
                src: ' ',
                text: '高一(5)班',
                subText: '28人',
                value: 105
            },
            {
                src: ' ',
                text: '高一(6)班',
                subText: '28人',
                value: 106
            },
            {
                src: ' ',
                text: '高一(7)班',
                subText: '28人',
                value: 107
            },
            {
                src: ' ',
                text: '高一(8)班',
                subText: '38人',
                value: 108
            },
            {
                src: ' ',
                text: '高一(9)班',
                subText: '38人',
                value: 109
            },
            {
                src: ' ',
                text: '高一(10)班',
                subText: '38人',
                value: 110
            },
            {
                src: ' ',
                text: '高一(11)班',
                subText: '38人',
                value: 111
            },
            {
                src: ' ',
                text: '高一(12)班',
                subText: '38人',
                value: 112
            }
        ];
    },
    methods: {
        change(e) {
            console.log(e);
            /**
         *   layer: 0  第几级 index
             src: '/static/images/basic/color.png'
             subIndex: 2   //当前层级下选中项index
             subText: '30人'  //选中项数据
             text: '高一(3)班'
             value: 103 //选中项value数据
         * */

            // 模拟请求
            let value = e.value;
            let layer = e.layer;
            if (layer === 7) {
                //实际中以请求数据为准,无下级数据则传空数组
                this.receiveData = [];
            } else {
                uni.showLoading({
                    title: '请稍候...'
                });
                setTimeout(() => {
                    uni.hideLoading();
                    //请求完成后将数据处理成以下格式,传入,最后一级没有则传空数组
                    switch (layer) {
                        case 0:
                            this.receiveData = [
                                {
                                    text: '张三',
                                    subText: '男',
                                    value: 11101
                                },
                                {
                                    text: '王五',
                                    subText: '男',
                                    value: 11102
                                },
                                {
                                    text: '周小小',
                                    subText: '女',
                                    value: 11103
                                },
                                {
                                    text: '周小小',
                                    subText: '女',
                                    value: 11103
                                },
                                {
                                    text: '周小小',
                                    subText: '女',
                                    value: 11103
                                }
                            ];
                            break;
                        case 1:
                            this.receiveData = [
                                {
                                    text: '他(她)说',
                                    value: 11101
                                }
                            ];
                            break;
                        case 2:
                            this.receiveData = [
                                {
                                    text: '这是一个',
                                    value: 11101
                                }
                            ];
                            break;
                        case 3:
                            this.receiveData = [
                                {
                                    text: '级联选择器',
                                    value: 11101
                                }
                            ];
                            break;
                        case 4:
                            this.receiveData = [
                                {
                                    text: '测试例子',
                                    value: 11101
                                }
                            ];
                            break;
                        case 5:
                            this.receiveData = [
                                {
                                    text: '总共',
                                    value: 11101
                                }
                            ];
                            break;
                        case 6:
                            this.receiveData = [
                                {
                                    text: '8级数据',
                                    value: 11101
                                }
                            ];
                            break;
                        default:
                            break;
                    }
                }, 800);
            }
        },
        complete(e) {
            console.log(e);
            console.log('您选择的数据为:' + e.text);
        }
    }
};
</script>

隐私、权限声明

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

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

暂无

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

许可协议

MIT协议

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