日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

Checkbox-group和Checkbox

Checkbox-group是由一組單選或者多選Checkbox組件組成，效果如下圖所示。

創(chuàng)新新互聯(lián)，憑借十年的網(wǎng)站制作、做網(wǎng)站經(jīng)驗(yàn)，本著真心·誠(chéng)心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計(jì)網(wǎng)站有成百上千家案例。做網(wǎng)站建設(shè)，選成都創(chuàng)新互聯(lián)。

引入組件

在 page.json 中引入組件

{
  "usingComponents": {
    "mp-checkbox-group": "../../components/checkbox-group/checkbox-group",
    "mp-checkbox": "../../components/checkbox/checkbox",
    "mp-cells": "../../components/cells/cells"
  }
}

示例代碼

// page.js示例代碼
Page({
    data: {
        radioItems: [
            {name: 'cell standard', value: '0', checked: true},
            {name: 'cell standard', value: '1'}
        ],
        checkboxItems: [
            {name: 'standard is dealt for u.', value: '0', checked: true},
            {name: 'standard is dealicient for u.', value: '1'}
        ],
    },
    radioChange: function (e) {
        console.log('radio發(fā)生change事件，攜帶value值為：', e.detail.value);

        var radioItems = this.data.radioItems;
        for (var i = 0, len = radioItems.length; i < len; ++i) {
            radioItems[i].checked = radioItems[i].value == e.detail.value;
        }

        this.setData({
            radioItems: radioItems,
            [`formData.radio`]: e.detail.value
        });
    },
    checkboxChange: function (e) {
        console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value);

        var checkboxItems = this.data.checkboxItems, values = e.detail.value;
        for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
            checkboxItems[i].checked = false;

            for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
                if(checkboxItems[i].value == values[j]){
                    checkboxItems[i].checked = true;
                    break;
                }
            }
        }

        this.setData({
            checkboxItems: checkboxItems,
            [`formData.checkbox`]: e.detail.value
        });
    },
});

checkbox-group組件屬性列表

屬性	類型	默認(rèn)值	必填	說明
ext-class	string		否	添加在組件內(nèi)部結(jié)構(gòu)的class，可用于修改組件內(nèi)部的樣式
multi	boolean	true	否	單選還是多選
prop	string		否	Form表單組件校驗(yàn)的字段名
bindchange	eventhandler		否	Checkbox-group發(fā)生改變時(shí)候觸發(fā)的事件，detail為{value}，單選的value為checkbox的值，多選的value為選中的checkbox的值組成的數(shù)組

checkbox-group的Slot

名稱	描述
默認(rèn)	內(nèi)容slot

checkbox組件屬性列表

屬性	類型	默認(rèn)值	必填	說明
ext-class	string		否	添加在組件內(nèi)部結(jié)構(gòu)的class，可用于修改組件內(nèi)部的樣式
multi	boolean	true	否	單選還是多選
checked	boolean		否	是否選中
value	string		否	checkbox的值
bindchange	eventhandler		否	Checkbox發(fā)生改變時(shí)候觸發(fā)的事件，detail為{value}，value為checkbox的值

新聞名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序WeUI·Checkbox-group
網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/ccoeidh.html