日常开发过程中避免不了需要显示一些内容,但是内容超长了需要显示...,鼠标悬停需要显示完整内容,原生的title
属性虽然可以做到上述的需求,但是完整内容无法复制,也不适用于隐藏的内容是非纯文本的情况,一般 UI 组件都会提供 ToolTip 的组件,我们就可以利用这个组件控制鼠标悬停显示完整内容。下面记录下实际开发过程中使用 Element UI 或者 Ant Design Vue 实现该需求过程。
2023年3月13日大约 5 分钟
日常开发过程中避免不了需要显示一些内容,但是内容超长了需要显示...,鼠标悬停需要显示完整内容,原生的title
属性虽然可以做到上述的需求,但是完整内容无法复制,也不适用于隐藏的内容是非纯文本的情况,一般 UI 组件都会提供 ToolTip 的组件,我们就可以利用这个组件控制鼠标悬停显示完整内容。下面记录下实际开发过程中使用 Element UI 或者 Ant Design Vue 实现该需求过程。
由于项目老平台使用的 UI 框架是 Ant Vue 1.x 的版本,首先考虑的就是官方自己的Pro Admin平台的方案,由于 Ant Admin 的方案只支持了主题色换肤,而内容项目平台是需要支持多种颜色换肤,如主题色、各个功能色,超链接等颜色换肤。既然官方的 Admin 平台支持换肤,咱们就去具体研究下怎么实现的,既然支持一种那应该也支持多种颜色的换肤的。