机械类网站模板百度网站介绍显示图片

项目场景：

在渲染select选择器后，当文字过长的时候，多出来的部分会显示成省略号，这使我们不能很清晰的看到该条数据的完整信息，就需要加一个鼠标悬停展示完整内容。

解决方案：

vue代码：

 <n-select clearable filterable v-model:value="value" :render-option="renderOption"  :options="options" label-field="label" value-field="value" placeholder="请选择"></n-select>

js：

const value= ref<string>('01')
const options= ref<any[]>( [{label: 'Everybody\'s Got Something to Hide Except Me and My Monkey',value: 'song0',disabled: true},{label: 'Drive My Car',value: 'song1'},])接下来展示render-option的方法如何使用
import type { SelectOption } from 'naive-ui';
import { NTooltip } from 'naive-ui';//定义了renderOption的函数，它接受两个参数：node和option。
//node是一个虚拟节点
//option是一个SelectOption类型的对象
const renderOption = ({ node, option }: { node: VNode; option: SelectOption }) =>
//调用了h函数，这是Vue.js中用于创建虚拟节点的函数。
//h函数的第一个参数是NTooltip，这是一个组件，它是一个自定义的Vue组件，用于显示提示信息。
//第二个参数null表示没有额外的属性需要传递给NTooltip组件。
//第三个参数是一个对象，它定义了NTooltip组件的插槽内容。h(NTooltip, null, {
//trigger属性是一个函数，它返回node。这个函数的作用是定义触发NTooltip显示的事件。在这个例子中，当用户与node交互（例如鼠标悬停）时，NTooltip组件将被触发显示。trigger: () => node,//default属性也是一个函数，它返回另一个调用h函数的结果。这次h函数创建了一个span标签的虚拟节点。//span标签的style属性设置了一个对象，该对象包含一个color属性，其值为#00acbb，这是文本的颜色。//option.name as string是span标签的文本内容，这里使用了类型断言as string来确保option.name被当作字符串处理。default: () => {return h('span', {style: {color: "#00acbb",}}, option.name as string)},})

总结起来，这段代码定义了一个函数renderOption，它创建了一个NTooltip组件的虚拟节点，当用户与传入的node交互时，会显示一个提示框，提示框中包含一个span标签，显示option.name的文本内容，并且文本颜色为#00acbb。