archives/src/global/components/hc-tooltip/index.vue

<template>
    <el-tooltip v-if="btn_Info" :content="btn_Info.textInfo" placement="top" :disabled="!isBubble || !btn_Info.textInfo">
        <slot />
    </el-tooltip>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
//参数
const props = defineProps({
    keys: {
        type: String,
        default: '',
    },
})

const useAppState = useAppStore()

//变量
const btn_Info = ref(false)
const btn_key = ref(props.keys)
const isBubble = ref(useAppState.getBubble)

//监听
watch(() => [
    props.keys, useAppState.getBubble, useAppState.getButtons,
], ([keys, bubble, btns]) => {
    btn_key.value = keys
    isBubble.value = bubble
    btn_Info.value = getButtonsVal(keys)
}, { deep: true })

//渲染完成
onMounted(()=> {
    if (props.keys) {
        btn_Info.value = getButtonsVal(props.keys)
    }
})

//获取气泡数据
const getButtonsVal = (value) => {
    return useAppState.getButtonsVal(value)
}
</script>