You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
3.5 KiB
92 lines
3.5 KiB
5 years ago
|
# 如何定义一个组件
|
||
|
|
在[FineUI开发指南](http://fanruan.design/fineui-doc/index.html#/docs/learn/giud)中已经介绍过了怎么创建一个FineUI组件,获取组件实例,监听和发送事件.这里我们针对插件开发进行更灵活的定义.
|
||
|
|
这里我们以一个简单的日期选择控件为例,引用了jquerui控件库.
|
||
|
|
|
||
|
|
## 创建一个日期选择框
|
||
|
|
首先在组件的render方法中将一段文本和一个输入框插入组件中,然后在组件挂载到dom上之后调用jqueryui的.datepicker方法使之成为一个日期选择框.
|
||
|
|
```
|
||
|
|
// 用Jquery创建一个日期选择框
|
||
|
|
var Datepicker = BI.inherit(BI.Widget, {
|
||
|
|
props: {
|
||
|
|
baseCls: "plugin-date-picker",
|
||
|
|
text: "" // 提供一个text参数来自定义日期选择框前的文字
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted: function () {
|
||
|
|
$("#datepicker").datepicker();
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
var datePicker = $("<p>" + this.options.text + "：<input type=\"text\" id=\"datepicker\"></p>");
|
||
|
|
this.element.append(datePicker);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.shortcut("dec.plugin.datepicker", Datepicker);
|
||
|
|
```
|
||
|
|
|
||
|
|
## 定义并触发事件
|
||
|
|
根据jqueryui的api,在日期选择框的onClese回调中向外发送名为"EVENT_SELECT"的事件.携带参数为选择值
|
||
|
|
```
|
||
|
|
// 用Jquery创建一个日期选择框
|
||
|
|
var Datepicker = BI.inherit(BI.Widget, {
|
||
|
|
props: {
|
||
|
|
baseCls: "plugin-date-picker",
|
||
|
|
text: ""
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted: function () {
|
||
|
|
var self = this;
|
||
|
|
$("#datepicker").datepicker({
|
||
|
|
onClose: function (selectedDate) {
|
||
|
|
self.fireEvent(Datepicker.EVENT_SELECT, selectedDate);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
var datePicker = $("<p>" + this.options.text + "：<input type=\"text\" id=\"datepicker\"></p>");
|
||
|
|
this.element.append(datePicker);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
Datepicker.EVENT_SELECT = "EVENT_SELECT";
|
||
|
|
BI.shortcut("dec.plugin.datepicker", Datepicker);
|
||
|
|
```
|
||
|
|
## 好了,组件可以拿去用了
|
||
|
|
这里使用了bi.vertical布局容纳了我们自定义日期选择框和FineUI中基础控件bi.label.通过监听日期选择框的事件动态的为label赋值.
|
||
|
|
```
|
||
|
|
var DatepickerDemo = BI.inherit(BI.Widget, {
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: "bi.vertical", // 使用垂直方向布局
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "dec.plugin.datepicker", // 日期选择控件
|
||
|
|
text: "选择日期",
|
||
|
|
listeners: [
|
||
|
|
{
|
||
|
|
eventName: "EVENT_SELECT", // 监听事件,并将选择的日期设置到label上
|
||
|
|
action: function (selectedDate) {
|
||
|
|
self.label.setValue(selectedDate);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}, {
|
||
|
|
type: "bi.label", // 一个label组件,以ref的方式获取组件实例.
|
||
|
|
ref: function (_ref) {
|
||
|
|
self.label = _ref;
|
||
|
|
},
|
||
|
|
text: "日期将在这里显示",
|
||
|
|
height: 24
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.shortcut("dec.plugin.datepicker_demo", DatepickerDemo);
|
||
|
|
```
|
||
|
|
|
||
|
|
## 最终效果预览
|
||
|
|
|