开关按钮
Tag
<fd-wh000010></fd-wh000010>
Attributes
name
开关按钮的标识
state
开关按钮的状态
1 为开。0 为关
duration
开关按钮的开关的速度
Methods
open
无参。打开开关。
close
无参。关闭开关。
Events
fdwe-change
监听开关状态的变化
返回值
{ name: '控件的name属性', state: '0或1,0表示关闭，1表示打开' }
Example
可以通过getAttribute(‘state’)来获取控件的状态 通过控制控件节点的背景色来控制开关的颜色 通过控制控件节点的宽高来控制开关的大小 通过控制控件节点的border-radius，来设置开关的圆角
html
<style>
.widget {
width: 80px;
height: 40px;
border-radius: 50px;
background-color: green;
}
</style>
<fd-wh000010 data-feidao-id='widget-001' class="widget" name='123' state='1'></fd-wh000010>
<input data-feidao-id="btn" type="button" value='toogle'>
js
require.config({
packages: [{
name: 'lodash-ts',
location: './node_modules/lodash-ts/umd'
},{
name: '@dfeidao/animation',
location: './node_modules/@dfeidao/animation/umd',
main: "index"
}]
});
require(['fd-wh000010'], function () {
const widget = document.querySelector('[data-feidao-id="widget-001"]');
const btn = document.querySelector('[data-feidao-id="btn"]');
console.log(widget);
widget.addEventListener('fdwe-change', (e) => {
console.log('****************', e);
});
btn.addEventListener('click', ()=>{
const state = widget.getAttribute('state');
console.log( state );
if(state === '1'){
widget.close();
}else{
widget.open();
}
});
});