generated from thzxcx/vue3
78 lines
1.3 KiB
Vue
78 lines
1.3 KiB
Vue
<!--
|
|
* @Author: peerless_hero peerless_hero@outlook.com
|
|
* @Date: 2023-07-11 02:12:08
|
|
* @LastEditors: peerless_hero peerless_hero@outlook.com
|
|
* @LastEditTime: 2023-07-11 03:15:44
|
|
* @FilePath: \uni\packages\tag\index.vue
|
|
* @Description:
|
|
*
|
|
-->
|
|
<template>
|
|
<text
|
|
class="th-tag"
|
|
:class="className"
|
|
text-center
|
|
inline-block
|
|
min-w-128rpx
|
|
h-48rpx
|
|
fs-24
|
|
font-500
|
|
leh-48
|
|
border-2rpx
|
|
border-solid
|
|
rounded-16rpx
|
|
>
|
|
{{ text }}
|
|
</text>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="Tag">
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
/** 类型 */
|
|
type?: 'default' | 'error' | 'warning'
|
|
/** 显示文本 */
|
|
text?: string
|
|
}>(),
|
|
{
|
|
type: 'default',
|
|
},
|
|
)
|
|
|
|
const className = computed(() => {
|
|
switch (props.type) {
|
|
case 'error':
|
|
return 'th-tag-error'
|
|
case 'warning':
|
|
return 'th-tag-warning'
|
|
default:
|
|
return 'th-tag-default'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.th-tag {
|
|
|
|
&.th-tag-default {
|
|
background-color: #f9f9f9;
|
|
border-color: #cccccc;
|
|
color: #393939;
|
|
}
|
|
|
|
&.th-tag-error {
|
|
background-color: #fef0f0;
|
|
border-color: #fbc7c7;
|
|
color: #e43d33;
|
|
}
|
|
|
|
&.th-tag-warning {
|
|
background-color: #fff6e8;
|
|
border-color: #f6ddb8;
|
|
color: #f3a73f;
|
|
}
|
|
}
|
|
</style>
|