CheckboxPopout

介绍

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

代码演示

基础使用

使用 v-model 双向绑定当前值，使用 v-model:visible 控制弹出框显隐。

vue tsvue js

vue

<template>
  <s-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    @change="onChange"
  />

  <s-list card>
    <s-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </s-list-item>
    <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 options = Array(10)
  .fill(0)
  .map((_, i) => {
    return {
      value: `option${i + 1}`,
      label: `选项${i + 1}`,
    }
  })

const visible = ref(false)
const value = ref<string[]>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue

<template>
  <s-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    @change="onChange"
  />

  <s-list card>
    <s-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </s-list-item>
    <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 options = Array(10)
  .fill(0)
  .map((_, i) => {
    return {
      value: `option${i + 1}`,
      label: `选项${i + 1}`,
    }
  })
const visible = ref(false)
const value = ref()
const onChange = (value) => {
  console.log('change', value)
}
</script>

全选

使用 show-check-all 显示全选框，可用于快速选择所有或取消选择。

vue tsvue js

vue

<template>
  <s-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    show-check-all
    @change="onChange"
  />

  <s-list card>
    <s-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </s-list-item>
    <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 options = Array(10)
  .fill(0)
  .map((_, i) => {
    return {
      value: `option${i + 1}`,
      label: `选项${i + 1}`,
    }
  })

const visible = ref(false)
const value = ref<string[]>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue

<template>
  <s-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    show-check-all
    @change="onChange"
  />

  <s-list card>
    <s-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </s-list-item>
    <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 options = Array(10)
  .fill(0)
  .map((_, i) => {
    return {
      value: `option${i + 1}`,
      label: `选项${i + 1}`,
    }
  })
const visible = ref(false)
const value = ref()
const onChange = (value) => {
  console.log('change', value)
}
</script>

禁用选项

设置了 disabled 的选项可禁止选择。

vue tsvue js

vue

<template>
  <s-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    show-check-all
    @change="onChange"
  />

  <s-list card>
    <s-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </s-list-item>
    <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 options = Array(10)
  .fill(0)
  .map((_, i) => {
    return {
      value: `option${i + 1}`,
      label: `选项${i + 1}`,
      disabled: i > 5,
    }
  })

const visible = ref(false)
const value = ref<string[]>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue

<template>
  <s-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    show-check-all
    @change="onChange"
  />

  <s-list card>
    <s-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </s-list-item>
    <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 options = Array(10)
  .fill(0)
  .map((_, i) => {
    return {
      value: `option${i + 1}`,
      label: `选项${i + 1}`,
      disabled: i > 5,
    }
  })
const visible = ref(false)
const value = ref()
const onChange = (value) => {
  console.log('change', value)
}
</script>

可搜索的

使用 searchable 显示搜索框，可用于过滤选项列表。

vue tsvue js

vue

<template>
  <s-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    searchable
    filter-placeholder="请输入过滤关键词"
    @change="onChange"
  />

  <s-list card>
    <s-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </s-list-item>
    <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 options = Array(10)
  .fill(0)
  .map((_, i) => {
    return {
      value: `option${i + 1}`,
      label: `选项${i + 1}`,
    }
  })

const visible = ref(false)
const value = ref<string[]>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue

<template>
  <s-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    searchable
    filter-placeholder="请输入过滤关键词"
    @change="onChange"
  />

  <s-list card>
    <s-list-item arrow hover @click="visible = true">
      <template #title>
        {{ value ? JSON.stringify(value) : '请选择' }}
      </template>
    </s-list-item>
    <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 options = Array(10)
  .fill(0)
  .map((_, i) => {
    return {
      value: `option${i + 1}`,
      label: `选项${i + 1}`,
    }
  })
const visible = ref(false)
const value = ref()
const onChange = (value) => {
  console.log('change', value)
}
</script>

API

CheckboxPopoutProps

继承 CheckboxGroupProps 和 FormPopoutProps。

属性	描述	类型	默认值
show-check-all	是否显示全选	boolean	false
searchable	是否可搜索	boolean	false
filter-placeholder	搜索输入框占位符内容	string	-
icon-position	可定义复选框的位置	'left' \| 'right'	'left'

CheckboxPopoutEmits

继承 MotionEmits。

事件	描述	类型
update:visible	弹出框显隐时触发	`(visible: boolean) => void`
update:modelValue	复选输入组件值改变时触发	`(value: any[] \| undefined) => void`
change	复选输入组件值改变时触发	`(value: any[] \| undefined) => void`
confirm	点击确定按钮时触发	`(value: any[] \| undefined) => void`

主题定制

样式变量

CSS 变量	值
`--s-checkbox-popout-max-height`	`320px`
`--s-checkbox-popout-toolbar-gap`	`var(--s-size-xs)`
`--s-checkbox-popout-toolbar-padding`	`var(--s-size-xs) var(--s-size)`
`--s-checkbox-popout-check-all-font-size`	`var(--s-font-size-sm)`
`--s-checkbox-popout-check-all-color`	`var(--s-text-color-tertiary)`

介绍 ​

代码演示 ​

基础使用 ​

全选 ​

禁用选项 ​

可搜索的 ​

API ​

CheckboxPopoutProps ​

CheckboxPopoutEmits ​

主题定制 ​

样式变量 ​

介绍

代码演示

基础使用

全选

禁用选项

可搜索的

API

CheckboxPopoutProps

CheckboxPopoutEmits

主题定制

样式变量