decision-plugin-demos/basic/文字标签_输入框.md

文字标签+输入框

绘制表单提交数据是常用的业务逻辑.本例实现一个最基础的文字标签+输入框的示例. 通过查阅label组件-bi.label和输入框-bi.text_editor,和水平垂直居中布局-bi.vertical_adapt布局,我们组件一个水平方向垂直居中的标签+输入框

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);