cascade-picker

定义一个兼容 app，小程序的三级联动地址选择器组件

开发者：646690173@qq.com

属性

属性名称 类型 默认值 是否必填 说明
showPicker boolean false 是 是否隐藏显示整个组件
bgColor String #fff 否 显示选择器的背景颜色
radius String 0 否 选择器的左上角及右上角的圆角大小,单位=>px
title String 否 选择器的标题内容
titleSize String 4.2666666667vw 否 选择器的标题文字大小,最大不能超过9,组件自动限制最高为9 单位=>vw
titleColor String #000 否 选择器的标题文字颜色
activeOtherColor String #ff5014 否 激活项左侧标记的颜色
activeTextColor String #ff5014 否 激活文字颜色
defaultTextColor String #000 否 默认文字颜色
cityTextSize String 3.7333333333vw 否 城市文字字体大小 单位=>vw

事件

事件名 是否必填 说明
clickMask 否 手指点击灰色遮罩部分后,触发的事件
close 是 手指点击选择器关闭按钮后,触发的事件
selectFinsh 是 正确选择省市区三级信息后,触发的事件

示例代码

页面代码
<template>
    <view class="page">
        <button class="button" @click="show">
            显示三级联动
        </button>
        <cascade-picker
            :showPicker="showModel"
            bgColor="#fff"
            radius="20"
            title="请选择所在地区"
            titleSize="6"
            titleColor=""
            activeOtherColor=""
            activeTextColor="#ff5014"
            defaultTextColor="#000"
            cityTextSize="3.5"
            @clickMask="hidden"
            @close="hidden"
            @selectFinsh="sub"
        />
    </view>
</template>
<script>
import CascadePicker from '../../components/cascade-picker/cascade-picker.stml'
export default {
    name: "main",
    apiready() {

    },
    data() {
        return {
            showModel: false
        };
    },
    mounted() {

    },
    computed: {

    },
    methods: {
        sub(e) {
            this.hidden()
        },
        hidden() {
            this.showModel = false;
        },
        show() {
            this.showModel = !this.showModel;
        },
    }
};
</script>
<style>
.page {
    height: 100%;
    width: 100%;
}
.button {
    margin-top: 100px;
    height: 100px;
}
.test-abs {
    width: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 30px;
    z-index: 3;
    /* background-color: #ff5014; */
}
.test-pel {
    width: 10px;
    height: 10px;
    background: #000;
    position: relative;
}
</style>
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18