介绍
组合了复选弹出框、列表、输入框组件，实现了在弹出框中多选的功能。
代码演示
基础使用
通过 title 和 placeholder 属性设置弹出框标题和输入框占位文本， 通过 options 属性设置可选项。
vue
<template>
<s-list card>
<s-list-item>
<s-checkbox-input
v-model="value"
title="请选择"
placeholder="请选择"
clearable
:options="options"
@change="onChange"
/>
</s-list-item>
<s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
<s-list-item
title="设置为：['option2', 'option3']"
arrow
hover
@click="value = ['option2', 'option3']"
/>
<s-list-item title="清空" arrow hover @click="value = undefined" />
</s-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref<string[]>()
const options = Array(10)
.fill(0)
.map((_, i) => {
return {
value: `option${i + 1}`,
label: `选项${i + 1}`,
}
})
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<s-list card>
<s-list-item>
<s-checkbox-input
v-model="value"
title="请选择"
placeholder="请选择"
clearable
:options="options"
@change="onChange"
/>
</s-list-item>
<s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
<s-list-item
title="设置为：['option2', 'option3']"
arrow
hover
@click="value = ['option2', 'option3']"
/>
<s-list-item title="清空" arrow hover @click="value = undefined" />
</s-list>
</template>
<script setup lang="js">
import { ref } from 'vue'
const value = ref()
const options = Array(10)
.fill(0)
.map((_, i) => {
return {
value: `option${i + 1}`,
label: `选项${i + 1}`,
}
})
const onChange = (value) => {
console.log('change', value)
}
</script>API
CheckboxInputProps
继承 CheckboxPopoutProps 和 PopoutInputProps。