// 没有组建依赖关系,依赖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);
}
}
});
button.js
猜你喜欢
转载自my.oschina.net/u/3288561/blog/1558266
今日推荐
周排行