42 lines
1012 B
Vue
42 lines
1012 B
Vue
<template>
|
||
<!-- 你的自定义受控组件-->
|
||
<div>
|
||
<el-tag :type="randomType">{{ data }}</el-tag>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import {watch, ref} from "vue";
|
||
|
||
const props = defineProps({
|
||
modelValue: String || Object,
|
||
displayLabel: {
|
||
type:String,
|
||
default: ""
|
||
}
|
||
})
|
||
|
||
// template上使用data
|
||
const data = ref()
|
||
watch(() => {
|
||
return props.modelValue
|
||
}, // 监听modelValue的变化，
|
||
(value) => {
|
||
if (typeof value === "string") {
|
||
data.value = value
|
||
} else if (typeof value === "object") {
|
||
const {displayLabel} = props
|
||
data.value = value ? value[displayLabel] : null
|
||
} else {
|
||
data.value = null
|
||
}
|
||
|
||
}, // 当modelValue值触发后，同步修改data.value的值
|
||
{immediate: true} // 立即触发一次，给data赋值初始值
|
||
)
|
||
|
||
const tagType = ['success', 'info', 'warning', 'danger']
|
||
const randomType = (): string => {
|
||
return tagType[Math.floor(Math.random() * tagType.length)];
|
||
}
|
||
</script>
|