54 lines
1023 B
Vue
54 lines
1023 B
Vue
<template>
|
|
<div
|
|
class="kl-tag"
|
|
:style="{
|
|
color,
|
|
background: bgColor,
|
|
borderRadius,
|
|
border: showBorder ? '1px solid' : '',
|
|
borderColor: borderColor ? borderColor : color,
|
|
}"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { PropType } from 'vue'
|
|
defineProps({
|
|
color: {
|
|
//文字颜色
|
|
type: String as PropType<string>,
|
|
default: '#3A84F0',
|
|
},
|
|
bgColor: {
|
|
//背景色
|
|
type: String as PropType<string>,
|
|
default: '#EAF1FF',
|
|
},
|
|
showBorder: {
|
|
//是否需要边框
|
|
type: Boolean as PropType<boolean>,
|
|
default: false,
|
|
},
|
|
borderColor: {
|
|
//边框颜色
|
|
type: String as PropType<string>,
|
|
default: '',
|
|
},
|
|
borderRadius: {
|
|
//圆角大小
|
|
type: String as PropType<string>,
|
|
default: '4px',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.kl-tag {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
padding: 1px 4px;
|
|
}
|
|
</style>
|