Neurological Phenomenon Multiplexer

    @cloud-ui/u-region-select.vue

    0.9.0 • Public • Published

    URegionSelect 地区选择

    UI 组件, 表单控件, 块级展示

    该组件从 UCascadeSelect 继承,仅填充了中国的行政区数据,其他功能与 UCascadeSelect 相同。

    示例

    基本用法

    <u-linear-layout direction="vertical">
        <u-region-select></u-region-select>
        <u-region-select value="浙江,杭州,滨江区"></u-region-select>
    </u-linear-layout>

    双向绑定

    使用v-model进行双向绑定。

    <template>
        <u-region-select v-model="address"></u-region-select>
    </template>
    <script>
    export default {
        data() {
            return {
                address: '',
            };
        },
    };
    </script>

    Placeholder

    <u-region-select :categories="[
        { label: '省', placeholder: '请选择省份' },
        { label: '市', placeholder: '请选择城市' },
        { label: '区', placeholder: '请选择县区' },
    ]"></u-region-select>

    隐藏空列表

    <u-region-select hide-empty :categories="[
        { label: '省', placeholder: '请选择省份' },
        { label: '市', placeholder: '请选择城市' },
        { label: '区', placeholder: '请选择县区' },
    ]"></u-region-select>

    API

    Props/Attrs

    Prop/Attr Type Options Default Description
    data Array<{ text, value }> '数据' 数据列表
    value.sync, v-model any 当前选择的值
    categories Array<{ label, key, placeholder }> '数据' 多级分类
    hide-empty boolean false 是否隐藏空列表
    converter string, object 'join' value 与 values 的转换器。可选值:'join'表示将 values 数组 join 之后变成 value,'join.number'join类似,只是会考虑它为数字的情况。也可以用:修改分隔符,类似 Vue 的指令参数,'last-value'表示以最后一项的值作为 value。也可以传入一个包含 { get, set } 的一个对象
    field string 'value' 显示文本字段
    readonly boolean false 是否只读
    disabled boolean false 是否禁用

    Events

    @input

    选择某一项时触发

    Param Type Description
    $event any 选择项的值
    senderVM URegionSelect 发送事件实例

    @select

    选择某一项时触发

    Param Type Description
    $event.level number 选择的层级
    $event.value any 改变后的值
    $event.values Array 改变后每项值的数组
    $event.item object 选择项相关对象
    $event.itemVM ListViewItem 选择项子组件
    senderVM URegionSelect 发送事件实例

    @change

    选择值改变时触发

    Param Type Description
    $event.value any 改变后的值
    $event.oldValue any 旧的值
    $event.values Array 改变后每项值的数组
    $event.oldValues Array 旧的每项值的数组
    senderVM URegionSelect 发送事件实例

    Install

    npm i @cloud-ui/u-region-select.vue

    DownloadsWeekly Downloads

    4

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    245 kB

    Total Files

    21

    Last publish

    Collaborators

    • lip966
    • damowangdexiaogenban
    • lifuquan
    • rainfore
    • zhangxiaoyudaisy