4.6.201908051154 • Published 5 years ago
@dfeidao/fd-w000008 v4.6.201908051154
时间选择
https://dfeidao.gitee.io/widgets/
Installation
yarn add --dev @dfeidao/fd-w000008
Tag
<fd-w000008></fd-w000008>
Attributes
z-index
该控件所处的页面层级,为空则默认没有设置 【string】
Methods
show
无参数
控件默认为隐藏状态,调用可使控件显示。
html
<div id="fd-w000008-002" style="height: 2rem;background: rgb(40, 219, 36);line-height: 2rem;"></div>
<fd-w000008 id="fd-w000008-001" style="width:50em;height:30em;display:block;position: absolute;">
</fd-w000008>
js
const fd_w000008_001 = document.querySelector('#fd-w000008-001');
const fd_w000008_002 = document.querySelector('#fd-w000008-002');
fd_w000008_002.addEventListener('click', () => {
fd_w000008_001.show();
});
fd_w000008_001.addEventListener('fdwe-select-time', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000008_002.innerHTML = content;
});
hide
无参数
使控件呈现为隐藏状态。
html
<button id="fd-w000008-005">hide_btn</button>
<div id="fd-w000008-004" style="height: 2rem;background: rgb(40, 219, 36);line-height: 2rem;"></div>
<fd-w000008 id="fd-w000008-003" style="width:50em;height:30em;display:block;position: absolute;">
</fd-w000008>
js
const fd_w000008_003 = document.querySelector('#fd-w000008-003');
const fd_w000008_004 = document.querySelector('#fd-w000008-004');
const fd_w000008_005 = document.querySelector('#fd-w000008-005');
fd_w000008_004.addEventListener('click', () => {
fd_w000008_003.show();
});
fd_w000008_005.addEventListener('click', () => {
fd_w000008_003.hide();
});
Events
feidao-web事件绑定示例
<fd-w000008 data-feidao-actions="fdwe-select-time:a001">
</fd-w000008>
fdwe-select-time
参数示例
{"start_str": "05:59", "end_str": "20:59"}
选择时间区间后,控件发出的事件,输出参数为:start_str,end_str
Solt
time
在自定义控件内添加新节点,设置其属性为 solt="time" ,即可产生新的时间选择区间。同时需要给新节点添加的属性入下
属性名 | 作用 |
---|---|
slot | 固定值solt="time", 用来标示自定义时间区间 |
interval | 设置间隔【string】 |
is-before | 设置时间选择区间在此刻之前还是之后。true之前,false为之后 |
btn-sure
在自定义控件内添加新节点,设置其属性为 solt="btn-sure" ,即可自定义“确定按钮”,自动绑定确定事件,不用使用者再添加绑定事件。
btn-cancle
在自定义控件内添加新节点,设置其属性为 solt="btn-cancle" ,即可自定义“取消按钮”,自动绑定取消事件,不用使用者再添加绑定事件。
Example
设置页面层级
<fd-w000008 style="width:50em;height:30em;display:block;position: absolute;" z-index=9999></fd-w000008>
选择区间
参数说明:interval为分钟时长,以分钟为单位;is-before是否是之前时间,包括现在在内的之前都为true,今天之后的为false;
html
<div id="fd-w000008-007" style="height: 2rem;background: rgb(40, 219, 36);line-height: 2rem;"></div>
<fd-w000008 id="fd-w000008-006" style="width:50em;height:30em;display:block;position: absolute;">
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
slot="time">
现在
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="10" is-before="true"
slot="time">
之前10分钟
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="50" is-before="true"
slot="time">
之前50分钟
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="50" is-before="false"
slot="time">
之后50分钟
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="300" is-before="false"
slot="time">
之后300分钟
</div>
</fd-w000008>
js
const fd_w000008_007 = document.querySelector('#fd-w000008-007');
const fd_w000008_006 = document.querySelector('#fd-w000008-006');
fd_w000008_007.addEventListener('click', () => {
fd_w000008_006.show();
});
fd_w000008_006.addEventListener('fdwe-select-time', (res) => {
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000008_007.innerHTML = content;
});
确定按钮
自定义的确定按钮必须具有 solt 属性,solt="btn-sure"
<fd-w000008 style="width:50em;height:30em;display:block;position: absolute;">
<div slot="btn-sure" style="width: 10em;height: 3em;background: lightgoldenrodyellow;display: block;line-height: 3em;text-align: center;">确定</div>
</fd-w000008>
取消按钮
自定义的取消按钮必须具有 solt 属性,solt="btn-cancle"
<fd-w000008 style="width:50em;height:30em;display:block;position: absolute;">
<div slot="btn-cancle" style="width: 10em;height: 3em;background: lightgoldenrodyellow;display: block;line-height: 3em;text-align: center;">取消</div>
</fd-w000008>
完整功能示例
html
传入要测试的控件的html代码。例:
<link href="../node_modules/purecss/build/grids.css" type="text/css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/feidao-css/feidao.css" type="text/css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/feidao-css/theme/blue.css" type="text/css" rel="stylesheet">
<div class="pure-g">
<div class="pure-u-1">
<section>
<div id="fd-w000008-009" style="height: 2rem;background: rgb(40, 219, 36);line-height: 2rem;"></div>
<fd-w000008 id="fd-w000008-008" style="width:50em;height:30em;display:block;position: absolute;" z-index=9999>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="1" is-before="true"
slot="time">
现在
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="10" is-before="true"
slot="time">
之前10分钟
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="50" is-before="true"
slot="time">
之前50分钟
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="50" is-before="false"
slot="time">
之后50分钟
</div>
<div style="width: 10em;height: 1.5em;background: whitesmoke;line-height: 1.5em;margin:0.2em" interval="300" is-before="false"
slot="time">
之后300分钟
</div>
</fd-w000008>
</section>
</div>
</div>
js
传入要测试的控件的js代码。例:
const fd_w000008_008 = document.querySelector('#fd-w000008-008');
const fd_w000008_009 = document.querySelector('#fd-w000008-009');
fd_w000008_009.addEventListener('click', () => {
console.log('-------- show -------');
fd_w000008_008.show();
});
fd_w000008_008.addEventListener('fdwe-select-time', (res) => {
console.log('---------', res);
const start_str = res.start_str;
const end_str = res.end_str;
const content = start_str + ' - ' + end_str;
fd_w000008_009.innerHTML = content;
});