4.6.201908271452 • Published 5 years ago
@dfeidao/fd-w000027 v4.6.201908271452
日历控件
https://dfeidao.gitee.io/widgets/
Installation
yarn add --dev @dfeidao/fd-w000027Attribute
| 属性 | 描述 |
|---|---|
| item-tpl | 渲染每一格使用的dot模板 |
| current-date | 设置要渲染的月份 |
| multiple | 是否多选 |
| hide-title | 隐藏日历头部 |
Method
| 方法 | 描述 | 说明 |
|---|---|---|
| set_month | 设置要显示的月份 | 传参年月 |
| render_item | 使用自定义数据渲染某一天 | 传入某一天的数据，数据内的date字段标示当天的日期。定制化不高的话可以不设置 |
| current_date | 设置选中 | 状态不会保留 |
| restore | 恢复选中的内容 |
Event
| 事件 | 描述 | 返回值格式 |
|---|---|---|
| fdwe-select | 选中日历触发的事件 | { year, month, date_str } |
| fdwe-change | 日历月份切换是触发的事件 | { select_date } |
使用规范
尽量使用px设置控件大小
item-tpl
使用item-tpl属性，使用者可以灵活得定义表格内每一项的内容,
{{? it.holiday}}
<span>{{=it.holiday}}<span>
{{?? it.disable}}
<span>不可选中<span>
{{?? it.color}}
<span style='background-color: {{=it.color}}'>{{=it.day}}￥<span>
{{??}}
<span>{{=it.day}}￥<span>
{{?}}Example
渲染事件a001
import { IFeidaoAiBrowserComponent } from '@dfeidao/atom-web/interfaces';
import render from '@dfeidao/atom-web/render/render';
import p001 from './p001';
export default async function a001(fd: IFeidaoAiBrowserComponent) {
const obj = {
tpl: `
{{? it.holiday}}
<span>{{=it.holiday}}<span>
{{?? it.disable}}
<span>不可选中<span>
{{?? it.color}}
<span style='background-color: {{=it.color}}'>{{=it.day}}￥<span>
{{??}}
<span>{{=it.day}}￥<span>
{{?}}
`
};
render(fd, obj, p001, 'p001', 'inner');
}P块
<fd-w000027 data-feidao-id="w000027" style="width:800px;height:400px;" item-tpl="{{=it.tpl}}"
data-feidao-actions='fdwe-change:a002'>
</fd-w000027>