介绍
组合了级联选择、弹出框组件,实现了便捷快速的级联选择功能。
引入
js
import CascaderPopout from 'sard-uniapp/components/cascader-popout/cascader-popout.vue'代码演示
基础使用
使用 v-model 双向绑定当前值,使用 v-model:visible 控制弹出框显隐。
vue
<template>
<sar-cascader-popout
v-model="value"
v-model:visible="visible"
title="请选择省市区"
:options="regionData"
:field-keys="{ label: 'name', value: 'code' }"
@change="onChange"
/>
<sar-list card>
<sar-list-item>
<sar-button @click="visible = true">
{{ value ? value : '请选择' }}
</sar-button>
</sar-list-item>
<sar-list-item
title="设置为:440111 (广东省/广州市/白云区)"
arrow
hover
@click="value = 440111"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'
import { type CascaderOption } from 'sard-uniapp'
const regionData = getRegionData()
const visible = ref(false)
const value = ref<number | undefined>(150102)
const onChange = (value: any, selectedOptions: CascaderOption[]) => {
console.log('change', value, selectedOptions)
}
</script>vue
<template>
<sar-cascader-popout
v-model="value"
v-model:visible="visible"
title="请选择省市区"
:options="regionData"
:field-keys="{ label: 'name', value: 'code' }"
@change="onChange"
/>
<sar-list card>
<sar-list-item>
<sar-button @click="visible = true">
{{ value ? value : '请选择' }}
</sar-button>
</sar-list-item>
<sar-list-item
title="设置为:440111 (广东省/广州市/白云区)"
arrow
hover
@click="value = 440111"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const visible = ref(false);
const value = ref(150102);
const onChange = (value2, selectedOptions) => {
console.log("change", value2, selectedOptions);
};
</script>多选
设置 multiple 可进行多选。
vue
<template>
<sar-cascader-popout
v-model="value"
v-model:visible="visible"
title="请选择省市区"
:options="regionData"
:field-keys="{ label: 'name', value: 'code' }"
multiple
all-levels
check-strictly
@change="onChange"
/>
<sar-list card>
<sar-list-item
:title="value ? JSON.stringify(value) : '请选择'"
arrow
hover
@click="visible = true"
/>
<sar-list-item
title="设置为:[[440000, 440100, 440106], [440000, 440100, 440111]] ([天河区, 白云区])"
arrow
hover
@click="
value = [
[440000, 440100, 440106],
[440000, 440100, 440111],
]
"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getRegionData } from 'region-data'
import { type CascaderOption, type CascaderValue } from 'sard-uniapp'
const regionData = getRegionData()
const visible = ref(false)
const value = ref<CascaderValue | undefined>([
[440000, 440100, 440106],
[440000, 440100, 440111],
])
const onChange = (value: any, selectedOptions: CascaderOption[]) => {
console.log('change', value, selectedOptions)
}
</script>vue
<template>
<sar-cascader-popout
v-model="value"
v-model:visible="visible"
title="请选择省市区"
:options="regionData"
:field-keys="{ label: 'name', value: 'code' }"
multiple
all-levels
check-strictly
@change="onChange"
/>
<sar-list card>
<sar-list-item
:title="value ? JSON.stringify(value) : '请选择'"
arrow
hover
@click="visible = true"
/>
<sar-list-item
title="设置为:[[440000, 440100, 440106], [440000, 440100, 440111]] ([天河区, 白云区])"
arrow
hover
@click="
value = [
[440000, 440100, 440106],
[440000, 440100, 440111],
]
"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
import { getRegionData } from "region-data";
const regionData = getRegionData();
const visible = ref(false);
const value = ref([
[44e4, 440100, 440106],
[44e4, 440100, 440111]
]);
const onChange = (value2, selectedOptions) => {
console.log("change", value2, selectedOptions);
};
</script>API
CascaderPopoutProps
继承 CascaderProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| popout-class | 弹窗框根元素类名 | string | - |
| popout-style | 弹窗框根元素样式 | StyleValue | - |
| visible (v-model) | 是否显示弹出框 | boolean | - |
| title | 弹出框标题 | string | - |
| show-confirm | 是否显示确定按钮,隐藏按钮可用于快捷选择 | boolean | true |
| validate-event | 是否触发表单验证 | boolean | true |
| resettable 1.23.3+ | 关闭弹出框后,是否可复位弹出框值 | boolean | false |
CascaderPopoutSlots
CascaderPopoutEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| update:model-value | 级联输入组件值改变时触发 | (value: string | number, selectedOptions: CascaderOption[]) => void |
| change | 级联输入组件值改变时触发 | (value: string | number, selectedOptions: CascaderOption[]) => void |
| select | 选择级联选择某一项时触发 | (option: CascaderOption, tabIndex: number) => void |
| update:visible | 弹出框显隐时触发 | (visible: boolean) => void |
| confirm 1.22.1+ | 点击确定按钮时触发 | () => void |
| visible-hook 1.22.1+ | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void |
| before-enter 1.22.1+ | 入场动画开始前触发 | () => void |
| enter 1.22.1+ | 入场动画开始时触发 | () => void |
| after-enter 1.22.1+ | 入场动画结束时触发 | () => void |
| enter-cancelled 1.22.1+ | 入场动画取消时触发 | () => void |
| before-leave 1.22.1+ | 退场动画开始前触发 | () => void |
| leave 1.22.1+ | 退场动画开始时触发 | () => void |
| after-leave 1.22.1+ | 退场动画结束时触发 | () => void |
| leave-cancelled 1.22.1+ | 退场动画取消时触发 | () => void |