Checkbox 复选框

复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便

平台兼容性

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

基本使用

vue

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // 基本案列数据
            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // 基本案列数据
            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

自定义形状

可以通过设置 shape 为 square 或者 circle ，将复选框设置为方形或者圆形

vue

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            shape="circle"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // 基本案列数据
            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            shape="circle"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // 基本案列数据
            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

禁用checkbox

设置 disabled 为 true ，即可禁用某个组件，让用户无法点击，禁用分为两种状态，一是未勾选前禁用，这时只显示一个灰色的区域。二是已勾选后再禁用，会有灰色的已勾选的图标，但此时依然是不可操作的。

vue

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
                :disabled="item.disabled"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // 基本案列数据
            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: true
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
                :disabled="item.disabled"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // 基本案列数据
            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: true
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

自定义颜色

此处所指的颜色，为 checkbox 选中时的背景颜色，参数为 activeColor

html

<wu-checkbox-group v-model="checked">
	<wu-checkbox  activeColor="red" label="光影"></wu-checkbox>
</wu-checkbox-group>

<wu-checkbox-group v-model="checked">
	<wu-checkbox  activeColor="red" label="光影"></wu-checkbox>
</wu-checkbox-group>

横向排列形式

可以通过设置 placement 为 row 或者 column ，将复选框设置为横向排列或者竖向排列。

html

<wu-checkbox-group v-model="checked" placement="row">
	<wu-checkbox activeColor="red" label="红色"></wu-checkbox>
	<wu-checkbox activeColor="green" label="绿色"></wu-checkbox>
</wu-checkbox-group>

<wu-checkbox-group v-model="checked" placement="row">
	<wu-checkbox activeColor="red" label="红色"></wu-checkbox>
	<wu-checkbox activeColor="green" label="绿色"></wu-checkbox>
</wu-checkbox-group>

横向两端排列形式

可以通过设置 iconPlacement 为 left 或者 right ，将复选框勾选图标的对齐设置为左对齐或者右对齐

html

<wu-checkbox-group 
    v-model="checked"
    iconPlacement="right" 
    placement="row">
	<wu-checkbox activeColor="red" label="红色"></wu-checkbox>
	<wu-checkbox activeColor="green" label="绿色"></wu-checkbox>
</wu-checkbox-group>

<wu-checkbox-group 
    v-model="checked"
    iconPlacement="right" 
    placement="row">
	<wu-checkbox activeColor="red" label="红色"></wu-checkbox>
	<wu-checkbox activeColor="green" label="绿色"></wu-checkbox>
</wu-checkbox-group>

API

Checkbox Props

注意：radio 和 radio-group 二者同名参数中，radio的参数优先级更高。

属性名	说明	类型	默认值	可选值
name	checkbox的名称	String / Number	-	-
shape	形状，square为方形，circle为圆型	String	square	square / circle
size	整体的大小	String / Number	-	-
checked	是否默认选中	Boolean	false	true / false
disabled	是否禁用	Boolean	-	-
activeColor	选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值	String	-	-
inactiveColor	未选中的颜色	String	-	-
iconSize	图标的大小，单位px	String / Number	-	-
iconColor	图标颜色	String	-	-
label	label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式	String / Number	-	-
labelSize	label的字体大小，px单位	String / Number	-	-
labelColor	label的颜色	String	-	-
labelDisabled	是否禁止点击提示语选中复选框	String / Boolean	-	-

CheckboxGroup Props

属性名	说明	类型	默认值	可选值
name	标识符	String	-	-
value / modelValue	绑定的值	String / Number / Boolean	''	-
shape	形状，circle-圆形，square-方形	String	circle	circle / square
disabled	是否禁用全部radio	Boolean	false	true
activeColor	选中状态下的颜色，如子组件设置此值，将会覆盖本值	String	#2979ff	-
inactiveColor	未选中的颜色	String	#c8c9cc	-
size	整个组件的尺寸，默认px	String / Number	18	-
placement	布局方式，row-横向，column-纵向	String	row	column
labelSize	label的字体大小，px单位	String / Number	14	-
labelColor	label的字体颜色	String	#303133	-
labelDisabled	是否禁止点击文本操作	Boolean	false	true / false
iconColor	图标颜色	String	#ffffff	-
iconSize	图标的大小，单位px	String / Number	12	-
iconPlacement	勾选图标的对齐方式，left-左边，right-右边	String	left	left / right
borderBottom	竖向配列时，是否显示下划线	Boolean	false	true / false

CheckboxGroup Event

方法名	说明	回调参数
change	任意一个 `checkbox` 状态发生变化时触发	detail = array( [元素为被选中的 `checkbox` 的 `name`] )

插槽名	说明
default	自定义内容
icon	自定义选中图标

Checkbox 复选框 ​

平台兼容性 ​

基本使用 ​

自定义形状 ​

禁用checkbox ​

自定义颜色 ​

横向排列形式 ​

横向两端排列形式 ​

API ​

Checkbox Props ​

CheckboxGroup Props ​

CheckboxGroup Event ​

Popup Slots ​

Checkbox 复选框

平台兼容性

基本使用

自定义形状

禁用checkbox

自定义颜色

横向排列形式

横向两端排列形式

API

Checkbox Props

CheckboxGroup Props

CheckboxGroup Event

Popup Slots