Vue 单文件原件 — vCheckBox

简书原文

做东西一向奉行的是致简原则，一定要让使用者简单

这是我在使用 Vue 一段时间后尝试制作的一个小玩意

我希望可以做一堆这样的小玩意，随意组合使用，感觉挺好的

源码在最后

演示DEMO

示例：

• html

<input type="checkbox" id="test1"/>

• JavaScript

var test1 = new vCheckBox({
    el: "#test1",
    data: {
        text: "测试多选框"
    }
});

• 效果

部分设计思路

template

图片使用base64方式写入css，css写入行内样式

使用template变量保存默认模版，在extend中{ template: template }，然后再赋值给全局对象 vCheckBox.template1 = template;

以后可以预制更多不同样式的 template， 在使用中只需要 new vCheckBox( { template : vCheckBox.templateN } )

同样的，如果不想使用任何样式也可以 new vCheckBox( { template : null } )

(function (window) {
    if (window == null || window.Vue == null) {
        return;
    }
    var version = "1.1.0.0";
    var template = '<div style="......" ....>\
            <ins :style="....." style="...background-image: url(data:image/png;base64,iVBORw0KGgoAA......gg==);..."></ins>\
        <span style="display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;">{{text}}</span>\
        <slot></slot>\
</div>';
    var vue = window.Vue;

    var vCheckBox = vue.extend({
        ... ...
        template: template
    };
    vCheckBox.template1 = template;
    vCheckBox.version = version;
    window.vCheckBox = vCheckBox;
})(window);

作为子组件

当vCheckbox做为子组件使用时，props: ["checked", "text", "disabled"] 三个属性可以由父组件传入；

由于Vue本身的限制，当属于由props传入时则无法被赋值（会变为只读），这个限制可以参考官方文档

所以在data部分需要对prop进行判断

data: function () {
    var props = this.$options.propsData;
    var data = {
        _hover: 0,
        _readonly: {
            text: props && props.hasOwnProperty("text"),
            disabled: props && props.hasOwnProperty("disabled"),
            checked: props && props.hasOwnProperty("checked")
        }
    };
    if (!data._readonly.text) {
        data.text = "";
    }
    if (!data._readonly.disabled) {
        data.disabled = false;
    }
    if (!data._readonly.checked) {
        data.checked = false;
    }
    return data;
}

在toggle操作的时也需要注意

methods: {
    toggle: function () {
        if (this.disabled) {
            return;
        }
        var value = this.checked == null ? false : !this.checked;
        if (this.$data._readonly.checked) {
            this.onChanged(value);
            return;
        }
        this.checked = value;
    },

全选

为了方便在使用时操作全选和判断全选

写了2个独立的函数供调用，可以在判断时指定需要判断的字段的名称field参数，默认为判断对象的checked字段

另外checked状态还提供了额外的半选状态（常见于全选的部分选中，另外一部分未选中）

半选状态返回null，不影响true和false的判断 null在if中也会被认为是false，兼容只有2个状态的情况

vCheckBox.checkAll = function (value, objects, field) {
    if (typeof value !== "boolean" || objects == null) {
        return;
    }
    if (typeof field !== "string") {
        field = "checked";
    }
    for (var key in objects) {
        if (objects.hasOwnProperty(key)) {
            var obj = objects[key];
            if (obj && obj.hasOwnProperty(field) && obj[field] !== value) {
                obj[field] = value;
            }
        }
    }
};
vCheckBox.isCheckAll = function (objects, field) {
    if (objects == null) {
        return false;
    }
    if (typeof field !== "string") {
        field = "checked";
    }
    var value = null;
    for (var key in objects) {
        if (objects.hasOwnProperty(key)) {
            var obj = objects[key];
            if (obj && obj.hasOwnProperty(field)) {
                if (value == null) {
                    value = obj[field];
                } else if (value !== obj[field]) {
                    return null;
                }
            }
        }
    }
    return value;
};

github