一、效果展示
vue3自定义不同样式的tooltip
二、实现思路
1.ts文件
在ts文件中创建一个全局容器
import一个容器组件，用于存放自定义的各式组件
创建一个指令并获取到指令传递的数据，并为容器组件传值
2.容器组件
用于存放自定义Tooltip样式的组件，同时在这里会设置容器位置。
3.各种子组件
写自己需要的样式
三、使用方式
1.传递一个字符串
v-Tooltip.mode1="'15615'"
2.传递一个变量
v-Tooltip.mode2="item.name"
<template><div class="page"><div class="box"><div v-for="item in fileList" v-Tooltip.mode1="item.name" class="item">{{ item.name }}</div><div v-for="item in fileList2" v-Tooltip.mode2="'165'" class="item">{{ item.name }}</div></div></div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { vTooltip } from "./components/toolTip/toolTip";const fileList = ref([{ id: 1, name: "一天两夜只吃了三顿饭" },{ id: 2, name: "求下联" },{ id: 3, name: "七荤八素还喝了九瓶酒" },{ id: 4, name: "求横批" },{ id: 5, name: "十分难受" },
]);
const fileList2 = ref([{ id: 1, name: "2727teg" },{ id: 2, name: "78657twrw" },{ id: 3, name: "3278wssssssssssssssssssssssssssssrfrf" },{ id: 4, name: "fsreg74" },{ id: 5, name: "fewferg54" },
]);
</script>
<style scoped>
.page {width: 100%;height: 100vh;display: flex;justify-content: space-around;align-items: center;background-color: #0b0c0e;
}
.item {background-color: #ecaeae;
}
</style>
