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

项目场景:

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


解决方案:

vue代码:

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

js:

javascript 复制代码
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。

相关推荐
小桥风满袖9 分钟前
极简三分钟ES6 - ES9中对象扩展
前端·javascript
云舟吖17 分钟前
基于 electron-vite 实现一个 RPA 网页自动化工具
前端·架构
用户94818176754420 分钟前
超越NAT:如何构建高效、安全的内网穿透隧道
前端
明天的明23 分钟前
vue双向数据绑定失效
前端
bug_kada26 分钟前
前端路由:深入理解History模式
前端·面试
LIUENG27 分钟前
快速开发一个 VSCode 插件
前端·visual studio code
bug_kada27 分钟前
前端路由:Hash vs History,一篇讲明白!
前端·面试
城中的雾28 分钟前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
李明卫杭州30 分钟前
CSS 中 nth-child 选择器的详细用法和示例
前端
会豪30 分钟前
CSS 动画属性精讲:从基础到实战
前端·css