1

components/hr-chip/hr-chip.uvue

@@ -0,0 +1,52 @@
+<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>