当前位置: 首页> 文旅> 美景 > 郑州市建委_秦皇岛海港区疫情最新消息_线上营销的优势_搜外seo视频 网络营销免费视频课程

郑州市建委_秦皇岛海港区疫情最新消息_线上营销的优势_搜外seo视频 网络营销免费视频课程

时间:2025/8/23 12:52:26来源:https://blog.csdn.net/weixin_45003732/article/details/143465842 浏览次数:0次
郑州市建委_秦皇岛海港区疫情最新消息_线上营销的优势_搜外seo视频 网络营销免费视频课程

项目场景:

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

关键字:郑州市建委_秦皇岛海港区疫情最新消息_线上营销的优势_搜外seo视频 网络营销免费视频课程

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: