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

项目场景:

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


解决方案:

vue:

javascript 复制代码
<n-cascader clearable v-model:value="unit" placeholder="所属地市" :title="unit" :options="options" check-strategy="child" @update-value="handleUpdateValue" :render-label="renderlabel" />

js:

javascript 复制代码
const unit = ref<string>()
const options = ref<CascaderOption[]>([
    {
      "value": "1",
      "label": "选项1",
      "disabled": false,
      "children": [
        {
          "value": "1-1",
          "label": "子选项1-1",
          "disabled": false,
          "children": [
            {
              "value": "1-1-1",
              "label": "孙选项1-1-1",
              "disabled": false
            }
          ]
        }
      ]
    },
    {
      "value": "2",
      "label": "选项2",
      "disabled": true,
      "children": [
        {
          "value": "2-1",
          "label": "子选项2-1",
          "disabled": false
        }
      ])
//这里其实就是创建了虚拟节点,这里就不赘述了,可以看前两篇笔记,有详细的解释
//这里解释一下 placement: 'left-end'  为什么可以在这里加这句话
//是因为Naive的 弹出提示 Tooltip组件支持placement属性,即popover 的弹出位置,
//我们这里是创建了一个NTooltip弹出提示的虚拟节点,传入的属性必须是这个NTooltip组件支持的属性才可以生效,
//换句话说就是h创建虚拟DOM的第二个参数设置的属性是传递给组件的,
const renderlabel = (option: { value?: string | number, label?: string }) => {
    return h(NTooltip, {
        placement: 'left-end'
    }, {
        trigger: () => h('span', option.label),
        default: () => {
            return h('span', {
                style: {
                    color: '#526ade',
                }
            }, option.label as string)
        },
    })
}
const handleUpdateValue = function (value: string, option: CascaderProps) {
 
}

总结来说,renderLabel 函数创建了一个带有提示的标签,当用户将鼠标悬停在标签上时,会显示一个提示框,提示框的内容和标签文本相同,但颜色可能会根据主题的不同而变化。这个函数通常用于下拉选择框组件中,为每个选项提供一个带有提示的标签。

相关推荐
前端开发爱好者3 分钟前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者4 分钟前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
脚踏实地的大梦想家23 分钟前
【Go】P2 Golang 常量与变量
开发语言·后端·golang
张璐月23 分钟前
go docker-compose启动前后端分离项目 踩坑之旅
开发语言·docker·golang
weixin_4569042725 分钟前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu27 分钟前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_4233919330 分钟前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_4233919330 分钟前
React Hooks 钩子
前端·javascript·react.js
CUGGZ30 分钟前
第三代 React,怎么玩?
前端·javascript·react.js
星哥说事33 分钟前
狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表
前端