xy-uicheckbox
多项选择器。用于替代原生input[type=checkbox]。
使用方式
html
<!-- 引入 -->
<script type="module">
import '../../components/checkbox/index.js'
</script>
<!-- 使用 -->
<xy-checkbox>checkbox</xy-checkbox>
禁用disabled
通过disabled可以禁用开关。
html
<xy-checkbox disabled>checkbox</xy-checkbox>
JavaScript操作
js
checkbox.disabled;//获取
checkbox.disabled = false;
checkbox.disabled = true;
//原生属性操作
checkbox.setAttribute('disabled','');
checkbox.removeAttribute('disabled');
选中checked
checked属性表示选中。
html
<xy-checkbox checked>checkbox</xy-checkbox>
通常多个出现，有一个相同的name，表示同一组，可以通过name来获取当前组的选中（通过dom获取即可）。
html
<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>
JavaScript操作
js
checkbox.checked;//获取
checkbox.checked = false;
checkbox.checked = true;
//原生属性操作
checkbox.setAttribute('checked','');
checkbox.removeAttribute('checked');
不确定状态indeterminate
可以通过JavaScript设置xy-checkbox的不确定状态
JavaScript操作get、set
js
checkbox.indeterminate;//获取
checkbox.indeterminate = false;
checkbox.indeterminate = true;
自定义样式::part(checkbox)
需要注意的是，xy-checkcbox本身不包含任意样式，如果需要自定义多选框本身样式，需要深入到shadow dom中，这里暴露了内置伪元素::part(checkcbox)用来自定义样式
内部结构如下（可查看控制台）：
html
<xy-checkbox>
# shadow-root
<input type="checkbox" part="checkbox">
<label>
<slot></slot>
</label>
比如，可以将多选框变成一个圆形
css
xy-checkbox::part(checkbox){
border-radius: 50%
}
或者将多选框放在文本的后面(通过flex排序即可实现)
css
xy-checkbox::part(checkbox){
order: 2
}
多选框组 xy-checkbox-group
表示同一组，支持以下特性
- 设置和获取
disabled - 设置和获取
value（数组格式） - 支持
change事件
html
<xy-checkbox-group name="lang" disabled value="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
js
checkboxgroup.value;//获取
checkboxgroup.value = ['React','Vue'];
//原生属性操作（字符串形式）
checkboxgroup.getAttribute('value');
checkboxgroup.setAttribute('value',`'React','Vue'`);
默认是横向排列，如果需要纵向排列，可以设置flex-direction
css
xy-checkbox-group{
flex-direction: column
}
事件event
onchange
在切换完成时触发。
html
<xy-checkbox onchange="console.log('当前状态checked:'+this.checked)">checkbox</xy-checkbox>
js
checkbox.onchange = function(ev){
//获取checked的几种方式
console.log(this.checked);
console.log(ev.target.checked);
}
checkbox.addEventListener('change',function(ev){
console.log(this.checked);
console.log(ev.target.checked);
})
xy-checkbox-group支持change事件
js
checkboxgroup.onchange = function(ev){
//获取value的几种方式
console.log(this.value);//["React","Angular"]
console.log(ev.target.value);
}
checkboxgroup.addEventListener('change',function(ev){
console.log(this.value);
console.log(ev.target.value);
})