SOURCE

console 命令行工具 X clear

                    
>
console
cola.defineWidget(cola.AbstractEditor, {
        tagName: "c-number",
        attributes: {
            min: null, max: null
        },
        template: {
            tagName: "div", class: "ui number",
            content: [
                {
                    tagName: "i", class: "prev icon angle left",
                    "c-onclick": "_change($dom)"
                },
                {
                    tagName: "span", "c-bind": "@bind", class: "number"
                },
                {
                    tagName: "i", class: "next icon angle right",
                    "c-onclick": "_change($dom,true)"
                }
            ]
        },
        _refreshDom: function () {
            var min = this._min, max = this._max,
                value = this._value, dom = this._dom;
            var pNum = value - 1, nNum = value + 1;

            $(dom).find(".prev").toggleClass("disable", !!(min && pNum < min ));
            $(dom).find(".next").toggleClass("disable", !!(max && nNum > max));
        },
        _change: function (dom, plus) {
            if ($(dom).hasClass("disable")) {
                return
            }
            var value = this._value;
            this.set("value", plus ? ++value : --value);
        }
    });

    cola(function (model) {
        model.action({
            vChange: function (self, arg) {
                console.log(self.get("value"))
            }
        });
        model.set({num: 5,min:1,max:10});
    });
<c-number bind="num" max="{{max}}" min="{{min}}" change="vChange"></c-number>
.ui.number {
    background-color: #e6e6e6;
    line-height: 1.5em;
    font-size: 80px;
    display: inline-block;
}

.ui.number i, .ui.number span {
    line-height: 1.5em;
}

.ui.number i {
    margin: 0 !important;
}

.ui.number i.disable {
    opacity: 0.2;
}

本项目引用的自定义外部资源