2020-10-11 10:51:13 +08:00
|
|
|
// 启用状态标签
|
2020-09-27 15:26:11 +08:00
|
|
|
Vue.component("label-on", {
|
|
|
|
|
props: ["v-is-on"],
|
2020-10-08 17:54:57 +08:00
|
|
|
template: '<div><span v-if="vIsOn" class="ui label tiny green basic">已启用</span><span v-if="!vIsOn" class="ui label tiny red basic">已停用</span></div>'
|
2020-10-11 10:51:13 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 文字代码标签
|
|
|
|
|
Vue.component("code-label", {
|
2021-09-20 16:37:41 +08:00
|
|
|
methods: {
|
|
|
|
|
click: function (args) {
|
|
|
|
|
this.$emit("click", args)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
template: `<span class="ui label basic tiny" style="padding: 3px;margin-left:2px;margin-right:2px" @click.prevent="click"><slot></slot></span>`
|
2020-10-31 15:21:24 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// tiny标签
|
|
|
|
|
Vue.component("tiny-label", {
|
|
|
|
|
template: `<span class="ui label tiny" style="margin-bottom: 0.5em"><slot></slot></span>`
|
2020-11-16 15:26:27 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
Vue.component("tiny-basic-label", {
|
|
|
|
|
template: `<span class="ui label tiny basic" style="margin-bottom: 0.5em"><slot></slot></span>`
|
|
|
|
|
})
|
|
|
|
|
|
2020-11-26 16:39:01 +08:00
|
|
|
// 更小的标签
|
|
|
|
|
Vue.component("micro-basic-label", {
|
|
|
|
|
template: `<span class="ui label tiny basic" style="margin-bottom: 0.5em; font-size: 0.7em; padding: 4px"><slot></slot></span>`
|
|
|
|
|
})
|
2021-08-18 09:24:03 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
// 灰色的Label
|
|
|
|
|
Vue.component("grey-label", {
|
2022-01-05 10:45:28 +08:00
|
|
|
props: ["color"],
|
|
|
|
|
data: function () {
|
|
|
|
|
let color = "grey"
|
|
|
|
|
if (this.color != null && this.color.length > 0) {
|
|
|
|
|
color = "red"
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
labelColor: color
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
template: `<span class="ui label basic tiny" :class="labelColor" style="margin-top: 0.4em; font-size: 0.7em; border: 1px solid #ddd!important; font-weight: normal;"><slot></slot></span>`
|
2021-08-18 09:24:03 +08:00
|
|
|
})
|
