布局之悬浮显示更多文本并增加箭头指示效果前端

记录一个界面交互的小功能

UI效果图

文章图片

文章图片

需求描述

文本只显示一行，超出显示省略号
文本超出显示省略号的同时，在右侧显示箭头指示，否则，不显示箭头
鼠标悬浮展示全部文本，箭头转向

思路分析

先不考虑右侧"箭头"，单纯的鼠标悬浮展示全部不难实现（前面【卡片布局...】一文中已经实现过，本文代码是在上篇之上修改）
控制箭头交互的时候，把文本元素和箭头元素分别设置宽度
通过过渡（transtion）控制鼠标悬浮箭头转向
通过自定义指令控制“箭头”显示隐藏

代码展示

card 组件

html
less

.textCard { border-radius: 8px; cursor: pointer; background-color: chartreuse; height: 36px; position: relative; margin-right: 16px; margin-top: 16px; color: #333; .card-name { position: absolute; top: 0; left: 0; display: inline-block; max-width: calc(100% - 20px); // width: 100%; padding: 8px 0 8px 14px; border-radius: 8px; line-height: 20px; box-sizing: border-box; } &:hover { .card-name { white-space: normal !important; overflow: unset !important; background-color: chartreuse; box-shadow: 0 6px 20px rgba(72, 88, 183, 0.2); z-index: 9; width: 100%; max-width: unset !important; padding-right: 14px; } .icon_down { z-index: 10; transform: translateY(-50%) rotate(180deg); transition: transform 0.1s; } } .icon_down { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(0deg); transform-origin: center; width: 20px; font-size: 12px; text-align: center; } }

自定义指令控制箭头

// 注册全局自定义指令 `v-moreIcon` import Vue from "vue"; Vue.directive("moreIcon", { // 被绑定 bind: function () {}, // 绑定元素插入到DOM节点 inserted: function (el) { // 绑定元素的父元素 const p_w = el.parentNode.offsetWidth; // 绑定元素的上一个兄弟元素 const s_w = el.previousElementSibling.offsetWidth; // 20: icon 的宽度；文本的最大宽度 calc(100% - 20px) if (p_w - s_w <= 20) { // 一行文本已满格，显示icon } else { // 文本没有满一行，隐藏icon el.style.display = 'none' } }, // 组件更新调用 update: function () {}, // 组件更新完成 componentUpdated: function () {}, // 解绑 unbind: function () {}, });

实现效果在已有功能上实现的类似UI图的效果