搜索 K

深色模式

多选框 Checkbox ​

提示

可以结合 pure-checkbox-group 使用,也可以单独使用。

兼容性 ​

  • 兼容：✅
  • 不兼容：❌
  • 未知：❔
H5安卓苹果微信支付宝百度抖音QQ快手飞书京东
✅✅✅✅✅✅✅✅✅✅✅
小红书鸿蒙360华为快应用快应用联盟
✅❔❔❔❔

插件市场地址 ​

DCloud 插件市场地址

基础使用 ​

  • 通过 v-model 给 pure-checkbox-group 绑定选中的值。
  • 通过 value 给 pure-checkbox 绑定当前项的值。
  • 通过 label 给 pure-checkbox 绑定当前项的文字。
vue
<template>
    <pure-checkbox-group v-model="checkedValue">
        <pure-checkbox v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></pure-checkbox>
    </pure-checkbox-group>
</template>

<script setup>
import { ref } from "vue";

// 选项列表
const options = [
	{ label: "橘子", value: 1 },
	{ label: "苹果", value: 2 },
	{ label: "香蕉", value: 3 },
	{ label: "西瓜", value: 4 },
	{ label: "草莓", value: 5 },
	{ label: "葡萄", value: 6 },
	{ label: "哈密瓜", value: 7 },
	{ label: "榴莲", value: 8 },
	{ label: "芒果", value: 9 },
	{ label: "柠檬", value: 10 },
	{ label: "柚子", value: 11 },
	{ label: "葡萄", value: 12 },
];

// 选中值
const checkedValue = ref([1, 2, 3, 4, 5]);
</script>

异步切换 ​

  • 通过 async 属性设置是否开启异步切换。
  • 通过 @asyncChange 事件手动控制绑定的选中项的值。
  • 也可以通过 asyncFunc 属性设置开启异步切换后的处理函数,
    • 该函数可以返回
      • 布尔值: true 表示更新值; false 表示不更新值。
      • Promise: resolve 表示更新值; reject 表示不更新值。
    • 该函数的参数:
      • value: 当前被点击项的值。
      • isChecked: 当前被点击项的当前选中状态。
vue
<template>
    <pure-checkbox-group v-model="checkedValue" async :asyncFunc="handleAsyncChange">
        <pure-checkbox v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></pure-checkbox>
    </pure-checkbox-group>
</template>

<script setup>
import { ref } from "vue";

// 选项列表
const options = [
	{ label: "橘子", value: 1 },
	{ label: "苹果", value: 2 },
	{ label: "香蕉", value: 3 },
	{ label: "西瓜", value: 4 },
	{ label: "草莓", value: 5 },
	{ label: "葡萄", value: 6 },
	{ label: "哈密瓜", value: 7 },
	{ label: "榴莲", value: 8 },
	{ label: "芒果", value: 9 },
	{ label: "柠檬", value: 10 },
	{ label: "柚子", value: 11 },
	{ label: "葡萄", value: 12 },
];

// 选中值
const checkedValue = ref([1, 2, 3, 4, 5]);

// 异步切换
function handleAsyncChange(value, isChecked) {
    console.log("被点击项的值:", value);
    console.log("被点击项的当前选中状态:", isChecked);

    return new Promise((resolve, reject) => {
        uni.showModal({
            title: "提示",
            content: "是否确认切换选中项？",
            success: (res) => {
                if (res.confirm) {
                    resolve();
                }
                if (res.cancel) {
                    reject();
                }
            },
        });
    });
}
</script>

主题 ​

  • 通过添加对应的辅助类实现。

提示

辅助类使用规则

vue
<template>
    <!-- 给同组所有多选框设置 -->
    <pure-checkbox-group class="pure-checkbox-primary" v-model="checkedValue">
        <pure-checkbox label="橘子" :value="1"></pure-checkbox>
    </pure-checkbox-group>

    <!-- 给单独的多选框设置 -->
    <pure-checkbox label="橘子" :value="1" class="pure-checkbox-primary"></pure-checkbox>
    <pure-checkbox label="橘子" :value="1" class="pure-checkbox-success"></pure-checkbox>
    <pure-checkbox label="橘子" :value="1" class="pure-checkbox-danger"></pure-checkbox>
    <pure-checkbox label="橘子" :value="1" class="pure-checkbox-warning"></pure-checkbox>
    <pure-checkbox label="橘子" :value="1" class="pure-checkbox-info"></pure-checkbox>
</template>

禁用 ​

  • 给 pure-checkbox 添加 disabled 属性。
vue
<template>
    <!-- 给同组所有多选框设置 -->
    <pure-checkbox-group class="pure-checkbox-primary" v-model="checkedValue">
        <pure-checkbox label="橘子" :value="1" disabled></pure-checkbox>
    </pure-checkbox-group>
</template>

圆形框 ​

  • 添加辅助类名 pure-checkbox-circle 即可使用。

提示

辅助类使用规则

vue
<template>
    <!-- 给同组所有多选框设置 -->
    <pure-checkbox-group class="pure-checkbox-circle" v-model="checkedValue">
        <pure-checkbox label="橘子" :value="1"></pure-checkbox>
    </pure-checkbox-group>

    <!-- 给单独的多选框设置 -->
    <pure-checkbox label="橘子" :value="1" class="pure-checkbox-square"></pure-checkbox>
</template>

浅化背景 ​

  • 添加辅助类名 pure-checkbox-light 即可使用。

提示

辅助类使用规则

vue
<template>
    <!-- 给同组所有多选框设置 -->
    <pure-checkbox-group class="pure-checkbox-light" v-model="checkedValue">
        <pure-checkbox label="橘子" :value="1"></pure-checkbox>
    </pure-checkbox-group>

    <!-- 给单独的多选框设置 -->
    <pure-checkbox label="橘子" :value="1" class="pure-checkbox-light"></pure-checkbox>
</template>

反转布局 ​

  • 添加辅助类名 pure-checkbox-reversal 即可使用。默认布局是图标在左，文字在右边，反转布局是图标在右，文字在左边。

提示

辅助类使用规则

vue
<template>
    <!-- 给同组所有多选框设置 -->
    <pure-checkbox-group class="pure-checkbox-reversal" v-model="checkedValue">
        <pure-checkbox label="橘子" :value="1"></pure-checkbox>
    </pure-checkbox-group>

    <!-- 给单独的多选框设置 -->
    <pure-checkbox label="橘子" :value="1" class="pure-checkbox-reversal"></pure-checkbox>
</template>

块级布局 ​

  • 添加辅助类名 pure-checkbox-block 即可使用。此时组件宽度为 100%。
  • 使用块级布局后，因为默认文字左对齐，可能还需要添加 pure-text-right，让文字右对齐，具体看个人需要。

提示

辅助类使用规则

vue
<template>
    <!-- 给同组所有多选框设置 -->
    <pure-checkbox-group class="pure-checkbox-block" v-model="checkedValue">
        <pure-checkbox label="橘子" :value="1"></pure-checkbox>
    </pure-checkbox-group>

    <!-- 给单独的多选框设置 -->
    <pure-checkbox label="橘子" :value="1" class="pure-checkbox-block pure-text-right"></pure-checkbox>
</template>

单独使用 ​

  • 通过 alone 属性开启单独使用的方式。
  • 通过 v-model:value 给 pure-checkbox 绑定选中状态。
vue
<template>
    <pure-checkbox alone label="单独使用" v-model:value="aloneValue"></pure-checkbox>
</template>

<script setup>
import { ref } from "vue";

// 选中状态
const aloneValue = ref(false);
</script>

Props ​

pure-checkbox-group ​

属性名说明类型默认值可选值版本
v-model选中项的值Array""-+1.0.0
async是否开启异步控制Booleanfalsetrue+1.0.0
asyncFunc异步控制的处理函数,详见上方说明Functionundefined-+1.0.0
disabledClass组内所有多选框禁用类名Stringpure-disabled-+1.0.0

pure-checkbox ​

属性名说明类型默认值可选值版本
value当前项的值[String, Number]undefined-+1.0.0
label显示文字String--+1.0.0
icon多选框图标String__gouxuan-+1.0.0
alone是否单独使用Booleanfalsetrue+1.0.0
v-model:value单独使用的选中状态Booleanfalsetrue+1.0.0
async是否开启异步控制,单独使用时有效Booleanfalsetrue+1.0.0
disabled禁用状态Booleanfalsetrue+1.0.0
disabledClass禁用类名Stringpure-disabled-+1.0.0

Event ​

pure-checkbox-group ​

事件名说明回调参数版本
change切换事件value: 被点击的多选框的值+1.0.0
asyncChange异步切换事件value: 被点击的多选框的值+1.0.0

pure-checkbox ​

事件名说明回调参数版本
onClick多选框项点击事件value: 被点击的多选框的值+1.0.0
asyncChange异步切换事件,只在单独使用时有效value: 被点击的多选框的值+1.0.0

Slots ​

名称说明参数版本
default文本、文字-+1.0.0

基于 MIT 许可发布

版权所有 © 2024-2029 济南晨霜信息技术有限公司