question_store

1.vue3中路由跳转动画，页面级需要root标签(div)

<router-view v-slot="{ Component,route }">
    <transition  name="fade-transform" mode="out-in">
        <keep-alive :include="keepAlive">
            <component :is="Component" :key="route.fullPath"/>
        </keep-alive>
    </transition>
</router-view>

2.element tooltip 自动计算是否展示title

<template>
    <el-tooltip
        v-bind="$attrs"
        effect="light"
        :disabled="disabled">
        <template #content>
            <div class="tooltip" :class="{wrap:wrap}">{{ content }}</div>
        </template>
        <p ref="tooltipRef"
           @mouseenter="onMouseover"
           :style="{'max-width':width}"
           class="text"
           :id="index">{{ content }}</p>
    </el-tooltip>
</template>

<script lang='ts'>
import { defineComponent, PropType, ref } from "vue";

export default defineComponent({
    name: "Text",
    props: {
        wrap: {
            type: Boolean as PropType<boolean>,
            default: false
        },
        content: {
            type: String as PropType<string>,
            required: true
        },
        width: {
            type: String as PropType<string>,
            default: '100%'
        },
        index: { // 路由缓存tab 右键 特殊参数
            type: Number as PropType<number>
        }
    },
    setup() {
        const tooltipRef = ref();
        const disabled = ref(true);
        const onMouseover = () => {
            disabled.value = tooltipRef.value.scrollWidth <= tooltipRef.value.offsetWidth;
        }

        return {
            onMouseover,
            tooltipRef,
            disabled
        }
    }
})
</script>

<style scoped lang='scss'>
.text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
}

.tooltip {
    white-space: nowrap;

    &.wrap {
        white-space: pre-wrap;
        word-break: break-all;
    }
}

</style>

3.element-plu el-message 全局配置showCLose方法

// main.ts 文件中
import ElementPlus, { messageProps } from 'element-plus'
// 全局配置ElMessage的showClose属性 (带关闭按钮)
interface MessageProps{
    showClose:{
        default: boolean
    }
}
(messageProps as MessageProps).showClose.default = true;
const app = creatApp(App).use(ElementPlus)

4.beforeRouteEnter不执行

beforeRouteEnter 属于组件路由，需要在路由表中引入的才能执行（eq:App.vue中无法执行）

5.vue3 echarts 设置tooltip鼠标移入不生效

const chartsDom = document.getElementById('chart-line') as HTMLElement;
const echarts = ref<ECharts>();
// 关键 使用markRaw 去绑定dom
echarts.value = markRaw(Echarts.init(visualChartsDom));

6.使用vue-clipboard3报错

Uncaught TypeError: element.hasAttribute is not a function

import useClipboard from "vue-clipboard3";

const { toClipboard } = useClipboard();
const handleCopy = (value:string) => { //value必须是字符串 否则会报错
    toClipboard(value).then(() => {
        ElMessage.success('复制成功');
        popoverShow.value = false;
    })
}
```