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.
40 lines
1.8 KiB
40 lines
1.8 KiB
5 years ago
|
# 文字标签+输入框
|
||
|
|
绘制表单提交数据是常用的业务逻辑.本例实现一个最基础的文字标签+输入框的示例.
|
||
|
|
通过查阅[label组件-bi.label](http://fanruan.design/fineui-doc/index.html#/docs/components/label)和[输入框-bi.text_editor](http://fanruan.design/fineui-doc/index.html#/docs/components/textEditor),和[水平垂直居中布局-bi.vertical_adapt](http://fanruan.design/fineui-doc/index.html#/docs/components/layout)布局,我们组件一个水平方向垂直居中的标签+输入框
|
||
|
|
## js
|
||
|
|
```
|
||
|
|
// 创建一个文字+输入框组件
|
||
|
|
var LabelEditor = BI.inherit(BI.Widget, {
|
||
|
|
props: {
|
||
|
|
baseCls: "plugin-label-editor"
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
type: "bi.vertical_adapt", // 首先是垂直居中布局容纳两个子元素
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "bi.label", // label文字标签
|
||
|
|
text: "姓名:",
|
||
|
|
height: 24
|
||
|
|
}, {
|
||
|
|
type: "bi.text_editor", // 输入框
|
||
|
|
width: 200,
|
||
|
|
height: 24,
|
||
|
|
watermark: "请输入内容",
|
||
|
|
listeners: [
|
||
|
|
{
|
||
|
|
eventName: "EVENT_CONFIRM", // 监听输入框组件的输入完成事件,然后获取输入框的值抛送给外部.
|
||
|
|
action: function () {
|
||
|
|
self.fireEvent("EVENT_CONFIRM", this.getValue());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.shortcut("dec.plugin.label_editor", LabelEditor);
|
||
|
|
```
|