Add File
This commit is contained in:
252
uni_modules/uni-tag/components/uni-tag/uni-tag.vue
Normal file
252
uni_modules/uni-tag/components/uni-tag/uni-tag.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Tag 标签
|
||||
* @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=35
|
||||
* @property {String} text 标签内容
|
||||
* @property {String} size = [default|small|mini] 大小尺寸
|
||||
* @value default 正常
|
||||
* @value small 小尺寸
|
||||
* @value mini 迷你尺寸
|
||||
* @property {String} type = [default|primary|success｜warning｜error] 颜色类型
|
||||
* @value default 灰色
|
||||
* @value primary 蓝色
|
||||
* @value success 绿色
|
||||
* @value warning 黄色
|
||||
* @value error 红色
|
||||
* @property {Boolean} disabled = [true|false] 是否为禁用状态
|
||||
* @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
|
||||
* @property {Boolean} circle = [true|false] 是否为圆角
|
||||
* @event {Function} click 点击 Tag 触发事件
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "UniTag",
|
||||
emits: ['click'],
|
||||
props: {
|
||||
type: {
|
||||
// 标签类型default、primary、success、warning、error、royal
|
||||
type: String,
|
||||
default: "default"
|
||||
},
|
||||
size: {
|
||||
// 标签大小 normal, small
|
||||
type: String,
|
||||
default: "normal"
|
||||
},
|
||||
// 标签内容
|
||||
text: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
disabled: {
|
||||
// 是否为禁用状态
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
inverted: {
|
||||
// 是否为空心
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
circle: {
|
||||
// 是否为圆角样式
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
mark: {
|
||||
// 是否为标记样式
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
const {
|
||||
type,
|
||||
disabled,
|
||||
inverted,
|
||||
circle,
|
||||
mark,
|
||||
size,
|
||||
isTrue
|
||||
} = this
|
||||
const classArr = [
|
||||
'uni-tag--' + type,
|
||||
'uni-tag--' + size,
|
||||
isTrue(disabled) ? 'uni-tag--disabled' : '',
|
||||
isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '',
|
||||
isTrue(circle) ? 'uni-tag--circle' : '',
|
||||
isTrue(mark) ? 'uni-tag--mark' : '',
|
||||
// type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
|
||||
isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '',
|
||||
size === 'small' ? 'uni-tag-text--small' : ''
|
||||
]
|
||||
// 返回类的字符串，兼容字节小程序
|
||||
return classArr.join(' ')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isTrue(value) {
|
||||
return value === true || value === 'true'
|
||||
},
|
||||
onClick() {
|
||||
if (this.isTrue(this.disabled)) return
|
||||
this.$emit("click");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-success: #18bc37 !default;
|
||||
$uni-warning: #f3a73f !default;
|
||||
$uni-error: #e43d33 !default;
|
||||
$uni-info: #8f939c !default;
|
||||
|
||||
|
||||
$tag-default-pd: 4px 7px;
|
||||
$tag-small-pd: 2px 5px;
|
||||
$tag-mini-pd: 1px 3px;
|
||||
|
||||
.uni-tag {
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 200;
|
||||
padding: $tag-default-pd;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
background-color: $uni-info;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $uni-info;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
|
||||
// size attr
|
||||
&--default {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--default--inverted {
|
||||
color: $uni-info;
|
||||
border-color: $uni-info;
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: $tag-small-pd;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
padding: $tag-mini-pd;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// type attr
|
||||
&--primary {
|
||||
background-color: $uni-primary;
|
||||
border-color: $uni-primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: #fff;
|
||||
background-color: $uni-success;
|
||||
border-color: $uni-success;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: #fff;
|
||||
background-color: $uni-warning;
|
||||
border-color: $uni-warning;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: #fff;
|
||||
background-color: $uni-error;
|
||||
border-color: $uni-error;
|
||||
}
|
||||
|
||||
&--primary--inverted {
|
||||
color: $uni-primary;
|
||||
border-color: $uni-primary;
|
||||
}
|
||||
|
||||
&--success--inverted {
|
||||
color: $uni-success;
|
||||
border-color: $uni-success;
|
||||
}
|
||||
|
||||
&--warning--inverted {
|
||||
color: $uni-warning;
|
||||
border-color: $uni-warning;
|
||||
}
|
||||
|
||||
&--error--inverted {
|
||||
color: $uni-error;
|
||||
border-color: $uni-error;
|
||||
}
|
||||
|
||||
&--inverted {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// other attr
|
||||
&--circle {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&--mark {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-tag-text {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
|
||||
&--primary {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
&--success {
|
||||
color: $uni-success;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: $uni-warning;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: $uni-error;
|
||||
}
|
||||
|
||||
&--small {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user