佛山模板网站建设输入关键词搜索

项目场景：

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

解决方案：

vue：

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

js：

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