53 lines
1.5 KiB
Plaintext
53 lines
1.5 KiB
Plaintext
<template>
|
||
<text :class="chipClass" :style="chipStyle" @click="onClick">{{ text }}</text>
|
||
</template>
|
||
|
||
<script lang="uts" setup>
|
||
import { computed } from 'vue'
|
||
|
||
/**
|
||
* 标签 / 筛选片
|
||
* theme：default / red / amb / grn ；active 为选中态（主色实底）
|
||
*/
|
||
const props = defineProps({
|
||
text : { type: String, default: '' },
|
||
active : { type: Boolean, default: false },
|
||
/** default / red / amb / grn / pri */
|
||
theme : { type: String, default: 'default' },
|
||
/** 是否大号（作业页 40px 高） */
|
||
large : { type: Boolean, default: false },
|
||
/** 自定义背景 / 文字 / 边线（传空取 theme 值） */
|
||
bg : { type: String, default: '' },
|
||
color : { type: String, default: '' },
|
||
border : { type: String, default: '' }
|
||
})
|
||
|
||
const emits = defineEmits<{
|
||
(e : 'click') : void
|
||
}>()
|
||
|
||
const chipClass = computed(() : string => {
|
||
let c = 'hr-chip'
|
||
if (props.large) { c += ' hr-chip-lg' }
|
||
if (props.active) { c += ' hr-chip-active' }
|
||
if (!props.active) {
|
||
if (props.theme == 'red') { c += ' hr-chip-red' }
|
||
if (props.theme == 'amb') { c += ' hr-chip-amb' }
|
||
if (props.theme == 'grn') { c += ' hr-chip-grn' }
|
||
}
|
||
return c
|
||
})
|
||
|
||
const chipStyle = computed(() : string => {
|
||
let s = ''
|
||
if (props.bg != '') { s += `background-color:${props.bg};` }
|
||
if (props.color != '') { s += `color:${props.color};` }
|
||
if (props.border != '') { s += `border:1px solid ${props.border};` }
|
||
return s
|
||
})
|
||
|
||
function onClick() : void {
|
||
emits('click')
|
||
}
|
||
</script>
|