弹窗
Tag
需设置控件的宽高，并设置控件样式display:none;
<fd-wh000013 style="width:800px;height:500px;display:none;"></fd-wh000013>
Attributes
header
弹窗标题
<fd-wh000013 header='弹窗标题'>
</fd-wh000013>
header-bgc
弹窗的表头背景色
## Slot
header
设置弹窗头部内容。
设置header slot之后，title属性将无效。
<fd-wh000013 id='widget' header-bgc='coral' title='弹窗标题' style="width:800px;height:500px;display:none;">
<div slot='header'>
<p>弹窗标题</p>
</div>
</fd-wh000013>
content
设置弹窗主题内容。
<fd-wh000013 id='widget' header-bgc='coral' title='弹窗标题' style="width:800px;height:500px;display: none;">
<div slot='content'>
<p>表单</p>
<form action="#">
<p>姓名</p>
<input name="name" type="text" value=''>
<p>性别</p>
<input name="sex" type="text" value=''>
<p>出生日期</p>
<input name="birth" type="date" value=''>
</form>
</div>
</fd-wh000013>
footer
设置弹窗底部内容。
设置footer slot之后，控件的事件将不会被触发。
<fd-wh000013 id='widget' header-bgc='coral' title='弹窗标题' style="width:800px;height:500px;display:none;">
<div slot='footer'>
<input data-widget-id='sure' type="button" value="确定" />
<input data-widget-id='cancel' type="button" value="取消" />
</div>
</fd-wh000013>
Methods
show
把弹窗显示，无参
close
隐藏弹窗请调用此close方法，避免键盘事件失效
把弹窗隐藏，无参
set_data
设置弹窗的form标签内form元素的内容。【Array】
属性值为input的name值。
widget.set_data([{ "name": "212121", "sex": "2112", "birth": "2018-08-05" }, { "great": 12, "class": 1627 }]);
Events
fdwe-sure
监听弹窗的确定按钮事件。
可通过返回值的data属性，拿到弹窗内form标签的内容
html
<fd-wh000013 id='widget' header-bgc='coral' title='弹窗标题' style="width:800px;height:500px;display:none;">
<div slot='content'>
<p>表单一</p>
<form action="#">
<p>姓名</p>
<input name="name" type="text" value=''>
<p>性别</p>
<input name="sex" type="text" value=''>
<p>出生日期</p>
<input name="birth" type="date" value=''>
</form>
<p>表单二</p>
<form action="#">
<p>年级</p>
<input name="great" type="text" value=''>
<p>班级</p>
<input name="class" type="text" value=''>
</form>
</div>
</fd-wh000013>
typescript
const widget = document.querySelector('#widget');
widget.addEventListener('fdwe-sure', (e) => {
console.log('---------- sure -------', e.data);
// [{"name":"","sex":"","birth":""},{"great":"","class":""}]
});
fdwe-cancel
监听弹窗的取消按钮事件。
Example
html
<fd-wh000013 id='widget' class="display-n" header-bgc='coral' title='弹窗标题' style="width:800px;height:500px;display: none;">
<div slot='content'>
<p style="background: cornflowerblue;">表单一</p>
<form action="#" style="border:1px solid;">
<p>姓名</p>
<input name="name" type="text" value=''>
<p>性别</p>
<input name="sex" type="text" value=''>
<p>出生日期</p>
<input name="birth" type="date" value=''>
</form>
<br>
<p style="background: cornflowerblue;">表单二</p>
<form action="#" style="border:1px solid;">
<p>年级</p>
<input name="great" type="text" value=''>
<p>班级</p>
<input name="class" type="text" value=''>
</form>
<br>
<textarea name="msz" type="text">form标签之外的input的值将不会被获取到</textarea>
<input data-feidao-id="close" type="button" value="调用close()方法，让弹窗关闭" />
<input data-feidao-id="open" type="button" value="打开第二个弹窗" />
<input id='set_data' type='button' value='填充数据' />
<input id='clear_data' type='button' value='清空数据' />
</div>
</fd-wh000013>
<fd-wh000013 id='widget2' class="display-n" style="width:400px;height:200px;">
<div slot='content'>
第二个弹出层
</div>
<div slot='footer'>
</div>
</fd-wh000013>
<input id='btn' type='button' value='打开弹窗' />
js
const widget = document.querySelector('#widget');
const widge2 = document.querySelector('#widge2');
const btn = document.querySelector('#btn');
const set_data = document.querySelector('#set_data');
const clear_data = document.querySelector('#clear_data');
const close = document.querySelector('[data-feidao-id="close"]');
const open = document.querySelector('[data-feidao-id="open"]');
widget.addEventListener('fdwe-sure', (e) => {
console.log('---------- sure -------', JSON.stringify(e.data));
});
widget.addEventListener('fdwe-cancel', (e) => {
console.log('---------- cancel -------', e);
});
widget2.addEventListener('fdwe-cancel', (e) => {
widget2.close();
});
btn.addEventListener('click', (e) => {
widget.show();
});
close.addEventListener('click', () => {
widget.close();
});
open.addEventListener('click', () => {
widget2.show();
});
set_data.addEventListener('click', () => {
widget.set_data([{ "name": "212121", "sex": "2112", "birth": "2018-08-05" }, { "great": 12, "class": 1627 }]);
});
clear_data.addEventListener('click', () => {
widget.set_data([{ "name": "", "sex": "", "birth": "" }, { "great": '', "class": '' }]);
});