网站图片上传不了怎么办,免费开店无押金的平台,郑州做网站哪家最好,wordpress模板详解项目场景#xff1a;
在渲染Cascader级联选择器后#xff0c;当文字过长的时候#xff0c;多出来的部分会显示成省略号#xff0c;这使我们不能很清晰的看到该条数据的完整信息#xff0c;就需要加一个鼠标悬停展示完整内容。 解决方案#xff1a;
vue#xff1a; 在渲染Cascader级联选择器后当文字过长的时候多出来的部分会显示成省略号这使我们不能很清晰的看到该条数据的完整信息就需要加一个鼠标悬停展示完整内容。 解决方案
vue
n-cascader clearable v-model:valueunit placeholder所属地市 :titleunit :optionsoptions check-strategychild update-valuehandleUpdateValue :render-labelrenderlabel /
js
const unit refstring()
const options refCascaderOption[]([{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 函数创建了一个带有提示的标签当用户将鼠标悬停在标签上时会显示一个提示框提示框的内容和标签文本相同但颜色可能会根据主题的不同而变化。这个函数通常用于下拉选择框组件中为每个选项提供一个带有提示的标签。
