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

宋小土2024-11-04 20:56

项目场景：

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