uniapp中组件库的Checkbox 复选框 的丰富使用方法

发布时间:2024年01月03日

目录

#平台差异说明

#基本使用

#自定义形状

#禁用checkbox

#自定义形状

#自定义颜色

#横向排列形式

#横向两端排列形式

API

#Checkbox Props

#CheckboxGroup Props

#CheckboxGroup Event


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

#平台差异说明

App(vue)App(nvue)H5小程序

#基本使用

<template>
    <view>
        <u-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <u-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </u-checkbox>
        </u-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>

copy

#自定义形状

  • 通过shape可以设置选择形状
<template>
    <view>
        <u-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <u-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </u-checkbox>
        </u-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>

copy

#禁用checkbox

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

<template>
    <view>
        <u-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <u-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
                :disabled="item.disabled"
            >
            </u-checkbox>
        </u-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>

copy

#自定义形状

可以通过设置shapesquare或者circle,将复选框设置为方形或者圆形

<u-checkbox-group>
	<u-checkbox v-model="checked" shape="circle" label="明月"></u-checkbox>
</u-checkbox-group>

copy

#自定义颜色

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

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

copy

#横向排列形式

可以通过设置placementrow或者column,将复选框设置为横向排列或者竖向排列

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

copy

#横向两端排列形式

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

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

API

#Checkbox Props

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

#CheckboxGroup Props

参数说明类型默认值可选值
name标识符String--
value绑定的值Array[]-
shape形状,circle-圆形,square-方形Stringsquarecircle
disabled是否禁用全部checkboxBooleanfalsetrue
activeColor选中状态下的颜色,如子Checkbox组件设置此值,将会覆盖本值String#2979ff-
inactiveColor未选中的颜色String#c8c9cc-
size整个组件的尺寸,默认pxString18-
placement布局方式,row-横向,column-纵向Booleanrowcolumn
labelSizelabel的字体大小,px单位String \ Number14-
labelColorlabel的字体颜色String#303133-
labelDisabled是否禁止点击文本操作Booleanfalsetrue
iconColor图标颜色String#ffffff-
iconSize图标的大小,单位pxString \ Number12-
iconPlacement勾选图标的对齐方式,left-左边,right-右边Stringleftright
borderBottom竖向配列时,是否显示下划线Booleanfalsetrue

#CheckboxGroup Event

事件名说明回调参数版本
change任一个checkbox状态发生变化时触发,回调为一个对象detail = array( [元素为被选中的checkboxname] )-
文章来源:https://blog.csdn.net/m0_72603435/article/details/135365497
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。