当前位置：首页 > article >正文

Naive UI 选择器 Select 的:render-option怎么使用（Vue3 + TS）（鼠标悬停该条数据的时候展示全部内容）

article 2024/11/5 5:49:12

项目场景：

在渲染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)
    },
  })