Skip to content

Latest commit

 

History

History
332 lines (251 loc) · 9.08 KB

xy-checkbox.md

File metadata and controls

332 lines (251 loc) · 9.08 KB
Raw

xy-checkbox

多项选择器。用于替代原生input[type=checkbox]。

使用方式

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-checkbox.js';
</script>
<!-- 使用 -->
<xy-checkbox>checkbox</xy-checkbox>

禁用disabled

通过disabled可以禁用开关。

checkbox 

<xy-checkbox disabled>checkbox</xy-checkbox>

JavaScript操作

checkbox.disabled;//获取
checkbox.disabled = false;
checkbox.disabled = true;
//原生属性操作
checkbox.setAttribute('disabled','');
checkbox.removeAttribute('disabled');

值value

返回value。

通常xy-checkbox会有一个value属性，类似于id，如果不存在则返回文本内容textContent。

checkbox 获取value

<xy-checkbox value="AAA">checkbox</xy-checkbox>
<xy-button type="primary" onclick="XyMessage.info(this.previousElementSibling.value)">获取value</xy-button>

JavaScript操作

checkbox.value;//获取
//原生属性操作
checkbox.getAttribute('value');

选中checked

checked属性表示选中。

checkbox 

<xy-checkbox checked>checkbox</xy-checkbox>

通常多个出现，有一个相同的name，表示同一组，可以通过name来获取当前组的选中（通过dom获取即可）。

Html Css Javascript Python Php Dart Swift 获取选中状态

<xy-checkbox name="lang" checked>Html</xy-checkbox>
<xy-checkbox name="lang">Css</xy-checkbox>
<xy-checkbox name="lang">Javascript</xy-checkbox>
<xy-checkbox name="lang">Python</xy-checkbox>
<xy-checkbox name="lang">Php</xy-checkbox>
<xy-checkbox name="lang">Dart</xy-checkbox>
<xy-checkbox name="lang">Swift</xy-checkbox>
<xy-button type="primary" onclick="XyMessage.info(Array.from(document.querySelectorAll('xy-checkbox[name=lang][checked]')).map(el=>el.textContent))">获取选中状态</xy-button>

JavaScript操作

checkbox.checked;//获取
checkbox.checked = false;
checkbox.checked = true;
//原生属性操作
checkbox.setAttribute('checked','');
checkbox.removeAttribute('checked');

现新增xy-checkbox-group组件，表示同一组，

  • defaultvalue设置初始选中项，格式为defaultvalue="React,Angular"
  • 设置和获取disabled
  • 设置和获取vaule（数组格式）
  • 支持change事件
React Vue Angular Flutter Swift 选中Vue、Flutter 
<xy-checkbox-group name="books" disabled defaultvalue="React,Angular">
    <xy-checkbox>React</xy-checkbox>
    <xy-checkbox>Vue</xy-checkbox>
    <xy-checkbox>Angular</xy-checkbox>
    <xy-checkbox>Flutter</xy-checkbox>
    <xy-checkbox>Swift</xy-checkbox>
</xy-checkbox-group>

JavaScript操作get、set

radiogroup.value;//获取
radiogroup.value = ['React','Vue'];
//原生属性操作
radiogroup.getAttribute('value');
radiogroup.setAttribute('value',['React','Vue']);

不确定状态indeterminate

可以通过JavaScript设置xy-checkbox的不确定状态

indeterminate 设置indeterminate

JavaScript操作get、set

checkbox.indeterminate;//获取
checkbox.indeterminate = false;
checkbox.indeterminate = true;

必填项required

表单验证属性，表示必填，可作用于xy-checkbox或者xy-checkbox-group上

I agree

<xy-checkbox required>I agree</xy-checkbox>

常用于同意用户协议等功能，默认提示信息为"如果要继续，请选中此框"，可用errortips自定义提示。

如果是在xy-checkbox-group上，则表示必须要选一项。

配合checkValidity()方法可以主动校验

最少项min、最多项max

表单验证属性，表示最少选中和最多选中项目

React Vue Angular Flutter Swift 
<xy-checkbox-group name="books" required min="2" max="3" defaultvalue="React,Angular">
    <xy-checkbox>React</xy-checkbox>
    <xy-checkbox>Vue</xy-checkbox>
    <xy-checkbox>Angular</xy-checkbox>
    <xy-checkbox>Flutter</xy-checkbox>
    <xy-checkbox>Swift</xy-checkbox>
</xy-checkbox-group>

合法性validity

可以通过属性validity来获取多选框的合法性。

React Vue Angular Flutter Swift 合法性

JavaScript操作get

checkbox.validity;//获取

事件event

onchange

在切换完成时触发。

checkbox

<xy-checkbox onchange="XyMessage.info('当前状态checked:'+this.checked)">checkbox</xy-checkbox>
checkbox.onchange = function(ev){
    //获取checked的几种方式
    /*
    event:{
        detail:{
            checked,
        }
    }
    */
    console.log(this.checked);
    console.log(ev.target.checked);
    console.log(ev.detail.checked);
}

checkbox.addEventListener('change',function(ev){
    console.log(this.checked);
    console.log(ev.target.checked);
    console.log(ev.detail.checked);
})

xy-checkbox-group支持change事件

React Vue Angular Flutter Swift 
checkboxgroup.onchange = function(ev){
    //获取value的几种方式
    /*
    event:{
        detail:{
            value,
        }
    }
    */
    console.log(this.value);//["React","Angular"]
    console.log(ev.target.value);
    console.log(ev.detail.value);
}

checkboxgroup.addEventListener('change',function(ev){
    console.log(this.value);
    console.log(ev.target.value);
    console.log(ev.detail.value);
})

onfocus、onblur

focus、blur后的回调事件。

与xy-button使用方式一致。

方法function

focus

用于主动聚焦focus，聚焦以后可以响应键盘事件，Enter或者Space切换选中状态。

checkbox 主动聚焦

checkbox.focus();

reset

复原选项，回到默认值。

React Vue Angular Flutter Swift reset 
checkboxgroup.reset();

checkValidity

用于主动校验，弹出提示信息。

React Vue Angular Flutter Swift 主动校验 
checkboxgroup.checkValidity();