介绍
组合了列表选择、弹出框组件,实现了便捷快速的选择功能。
引入
js
import SelectPopout from 'sard-uniapp/components/select-popout/select-popout.vue'代码演示
基础使用
使用 v-model 双向绑定当前值,使用 v-model:visible 控制弹出框显隐。
vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<sar-select-option
v-for="item in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440000 (广东省)"
arrow
hover
@click="value = 440000"
/>
<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'
const regionData = getRegionData()
const visible = ref(false)
const value = ref<number>()
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<sar-select-option
v-for="item in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440000 (广东省)"
arrow
hover
@click="value = 440000"
/>
<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();
const onChange = (value2) => {
console.log("change", value2);
};
</script>选项分组
你可以使用 SelectOptionGroup 组件对选项进行分组,label 属性为分组名。
vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<sar-select-option-group
v-for="group in regionData"
:key="group.code"
:label="group.name"
:value="group.code"
>
<sar-select-option
v-for="item in group.children"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-option-group>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440100 (广州市)"
arrow
hover
@click="value = 440100"
/>
<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'
const regionData = getRegionData().slice(16, 20)
const visible = ref(false)
const value = ref<number | undefined>(450100)
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<sar-select-option-group
v-for="group in regionData"
:key="group.code"
:label="group.name"
:value="group.code"
>
<sar-select-option
v-for="item in group.children"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-option-group>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440100 (广州市)"
arrow
hover
@click="value = 440100"
/>
<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().slice(16, 20);
const visible = ref(false);
const value = ref(450100);
const onChange = (value2) => {
console.log("change", value2);
};
</script>多选
设置 multiple 属性即可开启多选。
vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
multiple
@change="onChange"
>
<sar-select-option
v-for="item in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:[440000, 450000] (广东省,广西)"
arrow
hover
@click="value = [440000, 450000]"
/>
<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'
const regionData = getRegionData()
const visible = ref(false)
const value = ref<number[]>()
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
multiple
@change="onChange"
>
<sar-select-option
v-for="item in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:[440000, 450000] (广东省,广西)"
arrow
hover
@click="value = [440000, 450000]"
/>
<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();
const onChange = (value2) => {
console.log("change", value2);
};
</script>显示工具栏
多选时,可是设置 show-toolbar 显示工具栏,工具栏提供“选择所有”和“清空选择”功能按钮,并显示当前所有的个数。
vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
multiple
show-toolbar
@change="onChange"
>
<sar-select-option
v-for="item in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:[440000, 450000] (广东省,广西)"
arrow
hover
@click="value = [440000, 450000]"
/>
<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'
const regionData = getRegionData()
const visible = ref(false)
const value = ref<number[]>()
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
multiple
show-toolbar
@change="onChange"
>
<sar-select-option
v-for="item in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:[440000, 450000] (广东省,广西)"
arrow
hover
@click="value = [440000, 450000]"
/>
<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();
const onChange = (value2) => {
console.log("change", value2);
};
</script>最多选择个数
多选时,可以设置 multiple-limit 属性限制最多选择个数。
vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
multiple
show-toolbar
:multiple-limit="3"
@change="onChange"
>
<sar-select-option
v-for="item in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:[440000, 450000] (广东省,广西)"
arrow
hover
@click="value = [440000, 450000]"
/>
<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'
const regionData = getRegionData()
const visible = ref(false)
const value = ref<number[]>()
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
multiple
show-toolbar
:multiple-limit="3"
@change="onChange"
>
<sar-select-option
v-for="item in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:[440000, 450000] (广东省,广西)"
arrow
hover
@click="value = [440000, 450000]"
/>
<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();
const onChange = (value2) => {
console.log("change", value2);
};
</script>禁用选项
设置选项的 disabled 属性,可以禁止选择此选项。
vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<sar-select-option
v-for="(item, i) in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
:disabled="i % 4 === 0"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440000 (广东省)"
arrow
hover
@click="value = 440000"
/>
<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'
const regionData = getRegionData()
const visible = ref(false)
const value = ref<number>()
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<sar-select-option
v-for="(item, i) in regionData"
:key="item.code"
:label="item.name"
:value="item.code"
:disabled="i % 4 === 0"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440000 (广东省)"
arrow
hover
@click="value = 440000"
/>
<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();
const onChange = (value2) => {
console.log("change", value2);
};
</script>自定义选项标签
默认选项标签只能设置文字,如果要自定义结构,可以使用选项的 label 插槽。
vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<sar-select-option
v-for="item in colors"
:key="item.value"
:value="item.value"
>
<template #label>
<view class="flex gap-16">
<view
class="size-48 rounded-sm"
:style="{ background: item.value }"
></view>
<view>{{ item.label }}</view>
</view>
</template>
</sar-select-option>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:#FFDE0A (yellow)"
arrow
hover
@click="value = '#FFDE0A'"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const colors = [
{
value: '#E63415',
label: 'red',
},
{
value: '#FF6600',
label: 'orange',
},
{
value: '#FFDE0A',
label: 'yellow',
},
{
value: '#1EC79D',
label: 'green',
},
{
value: '#14CCCC',
label: 'cyan',
},
{
value: '#4167F0',
label: 'blue',
},
{
value: '#6222C9',
label: 'purple',
},
]
const visible = ref(false)
const value = ref<string>()
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<sar-select-option
v-for="item in colors"
:key="item.value"
:value="item.value"
>
<template #label>
<view class="flex gap-16">
<view
class="size-48 rounded-sm"
:style="{ background: item.value }"
></view>
<view>{{ item.label }}</view>
</view>
</template>
</sar-select-option>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:#FFDE0A (yellow)"
arrow
hover
@click="value = '#FFDE0A'"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const colors = [
{
value: "#E63415",
label: "red"
},
{
value: "#FF6600",
label: "orange"
},
{
value: "#FFDE0A",
label: "yellow"
},
{
value: "#1EC79D",
label: "green"
},
{
value: "#14CCCC",
label: "cyan"
},
{
value: "#4167F0",
label: "blue"
},
{
value: "#6222C9",
label: "purple"
}
];
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
console.log("change", value2);
};
</script>自定义整个选项
如果要自定义整个选项结构,可以使用默认插槽,并设置选项的 plain 属性来清除默认样式。
vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<view class="grid grid-cols-2 gap-16 px-32">
<sar-select-option
v-for="item in colors"
:key="item.value"
:value="item.value"
plain
>
<template #default="{ selected }">
<view
class="box-border flex-1 flex p-16 border border-base border-solid gap-16 rounded"
:class="{ 'border-primary': selected }"
style="width: calc((100vw - 32rpx * 2 - 16rpx) / 2)"
>
<view
class="size-48 rounded-sm"
:style="{ background: item.value }"
></view>
<view>{{ item.label }}</view>
</view>
</template>
</sar-select-option>
</view>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:#FFDE0A (yellow)"
arrow
hover
@click="value = '#FFDE0A'"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const colors = [
{
value: '#E63415',
label: 'red',
},
{
value: '#FF6600',
label: 'orange',
},
{
value: '#FFDE0A',
label: 'yellow',
},
{
value: '#1EC79D',
label: 'green',
},
{
value: '#14CCCC',
label: 'cyan',
},
{
value: '#4167F0',
label: 'blue',
},
]
const visible = ref(false)
const value = ref<string>()
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
@change="onChange"
>
<view class="grid grid-cols-2 gap-16 px-32">
<sar-select-option
v-for="item in colors"
:key="item.value"
:value="item.value"
plain
>
<template #default="{ selected }">
<view
class="box-border flex-1 flex p-16 border border-base border-solid gap-16 rounded"
:class="{ 'border-primary': selected }"
style="width: calc((100vw - 32rpx * 2 - 16rpx) / 2)"
>
<view
class="size-48 rounded-sm"
:style="{ background: item.value }"
></view>
<view>{{ item.label }}</view>
</view>
</template>
</sar-select-option>
</view>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:#FFDE0A (yellow)"
arrow
hover
@click="value = '#FFDE0A'"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const colors = [
{
value: "#E63415",
label: "red"
},
{
value: "#FF6600",
label: "orange"
},
{
value: "#FFDE0A",
label: "yellow"
},
{
value: "#1EC79D",
label: "green"
},
{
value: "#14CCCC",
label: "cyan"
},
{
value: "#4167F0",
label: "blue"
}
];
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
console.log("change", value2);
};
</script>筛选选项
如果选项数量太多,可以设置 filterable 属性显示筛选输入框;并设置 filter-method 属性,这个属性是一个回调函数,会在输入框值改变时触发,并接收输入框值作为参数。筛选逻辑需自行实现。
vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
filterable
filter-placeholder="请输入过滤关键词"
:filter-method="filterMethod"
@change="onChange"
>
<sar-select-option
v-for="item in filteredData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440000 (广东省)"
arrow
hover
@click="value = 440000"
/>
<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'
const regionData = getRegionData()
const filteredData = ref(regionData)
const visible = ref(false)
const value = ref<number>()
const filterMethod = (query: string) => {
filteredData.value = query
? regionData.filter((item) => item.name.includes(query))
: regionData
}
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
filterable
filter-placeholder="请输入过滤关键词"
:filter-method="filterMethod"
@change="onChange"
>
<sar-select-option
v-for="item in filteredData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440000 (广东省)"
arrow
hover
@click="value = 440000"
/>
<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 filteredData = ref(regionData);
const visible = ref(false);
const value = ref();
const filterMethod = (query) => {
filteredData.value = query ? regionData.filter((item) => item.name.includes(query)) : regionData;
};
const onChange = (value2) => {
console.log("change", value2);
};
</script>远程
如果需要从远程服务器获取数据,可以设置 filterable 显示输入框,设置 remote 属性启动远程逻辑,设置 remote-method 属性处理远程数据获取逻辑。
remote-method 属性是一个回调函数,接收输入框值、当前页码和表示是否刷新的布尔值作为参数,并返回 Promise<boolean> 类型值,Promise 的布尔类型泛型参数表示是否已获取全部数据。
Select 组件远程功能使用到了 LoadMore 组件和 useLoadMore 钩子函数,会在触底时加载下一页数据。
vue
<template>
<view>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
filterable
filter-placeholder="请输入过滤关键词"
remote
:remote-method="remoteMethod"
@change="onChange"
>
<sar-select-option
v-for="item in listData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440100 (广州市)"
arrow
hover
@click="value = 440100"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { mapCities } from 'region-data'
import { sleep } from 'sard-uniapp'
const visible = ref(false)
const value = ref<number>()
const onChange = (value: any) => {
console.log('change', value)
}
// server
const cities = Object.entries(mapCities).map(([code, name]) => ({
code: +code,
name,
}))
const mockRequest = async (query: string, page = 1, pageSize = 10) => {
await sleep(300)
const filteredData = query
? cities.filter((item) => item.name.includes(query))
: cities
const offset = (page - 1) * pageSize
return {
list: filteredData.slice(offset, offset + pageSize),
total: filteredData.length,
}
}
// client
const listData = ref<
{
code: number
name: string
}[]
>([])
const remoteMethod = async (
query: string,
page: number,
isRefresh: boolean,
) => {
return mockRequest(query, page).then(({ list = [], total = 0 }) => {
if (isRefresh) {
listData.value = [...list]
} else {
listData.value = [...listData.value, ...list]
}
return listData.value.length >= total || list.length === 0
})
}
</script>vue
<template>
<view>
<sar-select-popout
v-model="value"
v-model:visible="visible"
title="请选择"
filterable
filter-placeholder="请输入过滤关键词"
remote
:remote-method="remoteMethod"
@change="onChange"
>
<sar-select-option
v-for="item in listData"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</sar-select-popout>
<sar-list card>
<sar-list-item arrow hover @click="visible = true">
<template #title>
{{ value ? JSON.stringify(value) : '请选择' }}
</template>
</sar-list-item>
<sar-list-item
title="设置为:440100 (广州市)"
arrow
hover
@click="value = 440100"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</view>
</template>
<script setup lang="js">
import { ref } from "vue";
import { mapCities } from "region-data";
import { sleep } from "sard-uniapp";
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
console.log("change", value2);
};
const cities = Object.entries(mapCities).map(([code, name]) => ({
code: +code,
name
}));
const mockRequest = async (query, page = 1, pageSize = 10) => {
await sleep(300);
const filteredData = query ? cities.filter((item) => item.name.includes(query)) : cities;
const offset = (page - 1) * pageSize;
return {
list: filteredData.slice(offset, offset + pageSize),
total: filteredData.length
};
};
const listData = ref([]);
const remoteMethod = async (query, page, isRefresh) => {
return mockRequest(query, page).then(({ list = [], total = 0 }) => {
if (isRefresh) {
listData.value = [...list];
} else {
listData.value = [...listData.value, ...list];
}
return listData.value.length >= total || list.length === 0;
});
};
</script>API
SelectPopoutProps
继承 SelectProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| popout-class | 弹窗框根元素类名 | string | - |
| popout-style | 弹窗框根元素样式 | StyleValue | - |
| visible (v-model) | 是否显示弹出框 | boolean | - |
| title | 弹出框标题 | string | - |
| show-confirm 1.27.1+ | 单选时是否显示确定按钮,隐藏按钮可用于快捷选择 | boolean | true |
| validate-event | 是否触发表单验证 | boolean | true |
| resettable | 关闭弹出框后,是否可复位弹出框值 | boolean | false |
SelectPopoutSlots
继承 SelectSlots
SelectPopoutEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| update:model-value | 组件值改变时触发 | (value: any) => void |
| change | 组件值改变时触发 | (value: any) => void |
| update:visible | 弹出框显隐时触发 | (visible: boolean) => void |
| confirm | 点击确定按钮时触发 | () => void |
| visible-hook | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void |
| before-enter | 入场动画开始前触发 | () => void |
| enter | 入场动画开始时触发 | () => void |
| after-enter | 入场动画结束时触发 | () => void |
| enter-cancelled | 入场动画取消时触发 | () => void |
| before-leave | 退场动画开始前触发 | () => void |
| leave | 退场动画开始时触发 | () => void |
| after-leave | 退场动画结束时触发 | () => void |
| leave-cancelled | 退场动画取消时触发 | () => void |