Skip to content

SelectPopup 下拉弹窗

参数

参数说明类型可选值默认值
modelValue / v-model绑定值boolean
title标题string
scrollerHeight滚动高度number
scrollerMaxHeight最大滚动高度number600
options选项列表array
multiple是否多选boolean
showPicker是否显示选择器booleantrue
showFooter是否显示底部booleantrue
required是否必填boolean

事件

事件名称说明回调参数
change绑定值变化时触发的事件value
confirm点确认按钮触发

插槽

插槽说明参数
confirm确认按钮
list列表区域

示例

基础用法

html
<cl-select-popup v-model="v1" title="选择歌曲" :options="list" />

多选

html
<cl-select-popup v-model="v2" multiple title="选择歌曲" :options="list" />

必填

html
<cl-select-popup v-model="v3" required title="选择歌曲" :options="list" />

自定义

html
<cl-select-popup v-model="v4" required title="选择歌曲" :options="list">
	<template #item="{ item }"> {{ item }} </template>

	<template #default="{ label, value }">
		<cl-select-inner round background-color="#f7f7f7">
			<cl-text value="你选择了" :size="24" color="info" />
			<cl-tag round size="small" :margin="[0, 0, 0, 20]">{{ label }}</cl-tag>
		</cl-select-inner>
	</template>
</cl-select-popup>