button.js

// 没有组建依赖关系,依赖vue、图标按钮依赖fontawesome

Vue.component("cc-button", {
    props: {
        type: {
            type: String,
            default: "button",
            validator: function (value) {
                var arr = ["button", "submit", "reset"];
                return arr.indexOf(value) > -1
            }
        },
        classType: {
            type: String,
            default: "default",
            validator: function (value) {
                var arr = ["default", "primary", "success", "info", "warn", "error", "bordered", "dashed", "link", "circle", "large", "small"];
                return arr.indexOf(value) > -1
            }
        },
        icon: String,
        shape: {
            type: String,
            validator: function (value) {
                var arr = ["circle"];
                return arr.indexOf(value) > -1
            }
        },
        size: {
            type: String,
            validator: function (value) {
                var arr = ["large", "small"];
                return arr.indexOf(value) > -1
            }
        },
        loading: Boolean,
        disabled: Boolean
    },
    template: '\
    <button :type="type" :class="classTypeStr" :disabled="disabled" @click="handleEvent">\
        <i :class="icon" v-if="!!icon"></i>\
        <span v-if="loading"><i class="fa fa-spinner fa-spin"></i><span class="loadingText">loading</span></span>\
        <span v-else="loading"><slot></slot></span>\
    </button>\
    ',
    computed: {
        classTypeStr: function () {
            var defaultClass = "cc-btn",
                result = defaultClass,
                propsArray = [this.classType, this.size, this.shape];
            for (var i = 0; i < propsArray.length; i++) {
                var item = propsArray[i];
                if(!!item){
                    result += " " + defaultClass + "-" + item
                }
            }
            if (this.loading) {
                result += " " + defaultClass + "-loading"
            }
            if (this.disabled) {
                result += " " + defaultClass + "-disabled"
            }
            return result
        }
    },
    methods: {
        handleEvent(event) {
            this.$emit("click", event);
        }
    }
});