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

相关推荐
仰望.2 分钟前
vxe-table vue 表格复选框多选数据,实现快捷键 Shift 批量选择功能
vue.js·vxe-table
弓长三虎6 分钟前
linux 命令审计
linux·运维·服务器·前端
武昌库里写JAVA6 分钟前
iview组件库:关于分页组件的使用与注意点
java·vue.js·spring boot·学习·课程设计
EndingCoder9 分钟前
React Native 导航系统实战(React Navigation)
前端·react native·react.js·前端框架·跨端
EndingCoder9 分钟前
React Native 基础语法与核心组件:深入指南
javascript·react native·react.js·跨端
程序员小刘10 分钟前
基于 React Native for HarmonyOS5 的跨平台组件库开发指南,以及组件示例
javascript·react native·react.js·harmonyos
中微子17 分钟前
React 避坑指南:如何正确获取自定义组件的 DOM 引用?
前端
guang光19 分钟前
Windows上通过gitbash使用Rsync
前端
小华同学ai20 分钟前
真香,Cursor懂的都懂(学习用哈),22.5k一键重置Cursor试用限制!被全网疯狂收藏!
前端·后端·github