xy-uiswitch
开关选择器。
使用方式
html
<!-- 引入 -->
<script type="module">
import '../components/switch/index.js';
</script>
<!-- 使用 -->
<xy-switch></xy-switch>
禁用disabled
通过disabled可以禁用开关。
html
<xy-switch disabled></xy-switch>
JavaScript操作
js
switch.disabled;//获取
switch.disabled = false;
switch.disabled = true;
//原生属性操作
switch.setAttribute('disabled','');
switch.removeAttribute('disabled');
选中checked
checked属性表示选中。
html
<xy-switch checked></xy-switch>
JavaScript操作
js
switch.checked;//获取
switch.checked = false;
switch.checked = true;
//原生属性操作
switch.setAttribute('checked','');
switch.removeAttribute('checked');
switch.toggleAttribute('checked', [force]);
尺寸size
小号开关。
html
<xy-switch checked></xy-switch>
<xy-switch checked size="small"></xy-switch>
自定义样式::part(switch)
xy-switch元素本身不包含任意样式，如果需要自定义样式，可以通过内置伪元素::part(switch)
内部结构如下（可查看控制台）：
html
<xy-switch>
# shadow-root
<input part="switch" type="checkbox">
html
<style>
.custom-switch::part(switch){
width: 60px;
height: 30px;
padding: 4px;
}
.custom-switch::part(switch)::after{
background: yellow
}
</style>
<xy-switch class="custom-switch" checked></xy-switch>
事件event
onchange
在切换完成时触发。
html
<xy-switch onchange="console.log(this.checked)"></xy-switch>
js
switch.onchange = function(ev){
//获取checked的方式
console.log(this.checked);
console.log(ev.target.checked);
}
switch.addEventListener('change',function(ev){
console.log(this.checked);
console.log(ev.target.checked);
})