建设部安全B证查询网站长沙seo公司

前端很大一部工作就是还原UI，虽然现在Vue3 响应式框架很厉害了，但是依然有不少小伙伴手搓html代码，就像下面这段，费时费力。在echarts的tooltip组件中使用vue3自定义组件，可以增加不少摸鱼时间。

tooltip: {show: true,trigger: "item",borderWidth: 0,formatter: (params) => {return `<div class="top"></div>`
},

优化方法一

使用vue3 的render方法。

const containter = document.createElement("div")
// Tooltip 是一个组件
// data 是props属性
render(createVNode(Tooltip, data ), containter)

用在echarts当中如下：

tooltip: {show: true,trigger: "item",borderWidth: 0,formatter: (params) => {const containter = document.createElement("div")// 子组件直接接收params动态渲染。render(createVNode(Tooltip, params), containter)return containter}
},

优化方法二

使用我的开源库，在一个组件内完成这个操作（不过仅支持typescript项目，如果您使用JavaScript，就无缘了）

1. npm i @howuse/freedom-dialog
2. 导入函数

import { createFreedomDialog } from "@howuse/freedom-dialog"

3. 创建方法

这里的define是一个vue组件，可以在组件内定义模板组件，不会渲染在页面上。renderContainer，返回一个html，便于使用。

 const [define, renderContainer] = createFreedomDialog()

4. 使用

这里数据的获取从默认插槽中获得即可，具体数据是从renderContainer传入，参看下面完整代码。

 <define><template #default="data"><div class=" custom-tooltip">😄<div><span v-html="data.marker"></span>{{ data.value }}</div></div></template></define>

5.完整代码

<template><define><template #default="data"><div class=" custom-tooltip">😄<div><span v-html="data.marker"></span>{{ data.value }}</div></div></template></define><div style="width: 100%;height: 350px;"><how-bar-chart :option="option" /></div>
</template>
<script setup lang="ts">import { createFreedomDialog } from "@howuse/freedom-dialog"import { HowBarChart } from "@howuse/echarts"import type { EChartsOption } from "echarts"import { computed } from "vue"const [define, renderContainer] = createFreedomDialog()const option = computed<EChartsOption>(() => {return {tooltip: {className: 'echarts-tooltip echarts-tooltip-dark',formatter(data) {return renderContainer(data)}},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar'}]}})
</script>
<style scoped>:global(.echarts-tooltip) {border: none !important;padding: 5px;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}:global(.echarts-tooltip-dark) {background-color: #333 !important;color: #fff;}
</style>

组件还有其它的特别用法，具体可以参考网站https://howuse.yigechengzi.com/freedom-dialog/