Sard Uniapp

Appearance

在新窗口打开⤴

CheckboxPopout复选弹出框1.16+

介绍 ​

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

引入 ​

js
import CheckboxPopout from 'sard-uniapp/components/checkbox-popout/checkbox-popout.vue'

代码演示 ​

基础使用 ​

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

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

  <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="设置为：['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 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>
  <sar-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    @change="onChange"
  />

  <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="设置为：['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 options = Array(10).fill(0).map((_, i) => {
  return {
    value: `option${i + 1}`,
    label: `\u9009\u9879${i + 1}`
  };
});
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

全选 1.20+ ​

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

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

  <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="设置为：['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 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>
  <sar-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    show-check-all
    @change="onChange"
  />

  <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="设置为：['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 options = Array(10).fill(0).map((_, i) => {
  return {
    value: `option${i + 1}`,
    label: `\u9009\u9879${i + 1}`
  };
});
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

禁用选项 1.20+ ​

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

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

  <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="设置为：['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 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>
  <sar-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    show-check-all
    @change="onChange"
  />

  <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="设置为：['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 options = Array(10).fill(0).map((_, i) => {
  return {
    value: `option${i + 1}`,
    label: `\u9009\u9879${i + 1}`,
    disabled: i > 5
  };
});
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

可搜索的 1.20+ ​

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

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

  <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="设置为：['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 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>
  <sar-checkbox-popout
    v-model="value"
    v-model:visible="visible"
    title="请选择"
    :options="options"
    searchable
    filter-placeholder="请输入过滤关键词"
    @change="onChange"
  />

  <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="设置为：['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 options = Array(10).fill(0).map((_, i) => {
  return {
    value: `option${i + 1}`,
    label: `\u9009\u9879${i + 1}`
  };
});
const visible = ref(false);
const value = ref();
const onChange = (value2) => {
  console.log("change", value2);
};
</script>

API ​

CheckboxPopoutProps ​

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

属性描述类型默认值
popout-class弹窗框根元素类名string-
popout-style弹窗框根元素样式StyleValue-
visible (v-model)是否显示弹出框boolean-
title弹出框标题string-
show-check-all 1.20+是否显示全选booleanfalse
searchable 1.20+是否可搜索booleanfalse
filter-placeholder 1.20+搜索输入框占位符内容string-
resettable 1.23.3+关闭弹出框后，是否可复位弹出框值booleanfalse
icon-position 1.24.1+可定义复选框的位置'left' | 'right''left'

CheckboxPopoutEmits ​

事件描述类型
update:model-value复选输入组件值改变时触发(value: any[] | undefined) => void
change 1.9.2+复选输入组件值改变时触发(value: any[] | undefined) => void
update:visible弹出框显隐时触发(visible: boolean) => void
confirm 1.22.1+点击确定按钮时触发() => void
visible-hook 1.22.1+入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.22.1+入场动画开始前触发() => void
enter 1.22.1+入场动画开始时触发() => void
after-enter 1.22.1+入场动画结束时触发() => void
enter-cancelled 1.22.1+入场动画取消时触发() => void
before-leave 1.22.1+退场动画开始前触发() => void
leave 1.22.1+退场动画开始时触发() => void
after-leave 1.22.1+退场动画结束时触发() => void
leave-cancelled 1.22.1+退场动画取消时触发() => void

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-checkbox-popout-max-height: 640rpx;
}

Released under the MIT License.

Copyright © 2023-present wuzhitao