介绍

组合了复选弹出框、列表、输入框组件，实现了在弹出框中多选的功能。

引入

import CheckboxInput from 'sard-uniapp/components/checkbox-input/checkbox-input.vue'

代码演示

基础使用

通过 title 和 placeholder 属性设置弹出框标题和输入框占位文本， 通过 options 属性设置可选项。

vue lang="ts"

<template>
  <sar-list card>
    <sar-list-item>
      <sar-checkbox-input
        v-model="value"
        title="请选择"
        placeholder="请选择"
        clearable
        :options="options"
        @change="onChange"
      />
    </sar-list-item>

    <sar-list-item
      title="当前值："
      :value="JSON.stringify(value) ?? 'undefined'"
    />
    <sar-list-item
      title="设置为：['option2', 'option3']"
      arrow
      hover
      @click="value = ['option2', 'option3']"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-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 lang="js"

<template>
  <sar-list card>
    <sar-list-item>
      <sar-checkbox-input
        v-model="value"
        title="请选择"
        placeholder="请选择"
        clearable
        :options="options"
        @change="onChange"
      />
    </sar-list-item>

    <sar-list-item
      title="当前值："
      :value="JSON.stringify(value) ?? 'undefined'"
    />
    <sar-list-item
      title="设置为：['option2', 'option3']"
      arrow
      hover
      @click="value = ['option2', 'option3']"
    />
    <sar-list-item title="清空" arrow hover @click="value = undefined" />
  </sar-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: `\u9009\u9879${i + 1}`
  };
});
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

API

CheckboxInputProps

继承 CheckboxPopoutProps 并有以下额外属性：

属性	描述	类型	默认值
root-class	弹出式输入框根元素类名	string	-
root-style	弹出式输入框根元素样式	StyleValue	-
clearable	是否显示清空按钮	boolean	false
placeholder	输入框占位符内容	string	-
value-on-clear 1.19.2+	设置点击清除按钮后的值	() => any	() => undefined
arrow 1.22+	自定义箭头图标名	string	'caret-right'
arrow-family 1.22+	自定义箭头图标字体	string	'sari'
input-props 1.22+	自定义输入框组件属性	InputProps	-

CheckboxInputSlots

继承 PopoutInputSlots

CheckboxInputEmits

继承 CheckboxPopoutEmits