UI效果图
需求描述
- 文本只显示一行，超出显示省略号
- 文本超出显示省略号的同时，在右侧显示箭头指示，否则，不显示箭头
- 鼠标悬浮展示全部文本，箭头转向
思路分析
- 先不考虑右侧"箭头"，单纯的鼠标悬浮展示全部不难实现（前面【卡片布局...】一文中已经实现过，本文代码是在上篇之上修改）
- 控制箭头交互的时候，把文本元素和箭头元素分别设置宽度
- 通过过渡（transtion）控制鼠标悬浮箭头转向
- 通过自定义指令控制“箭头”显示隐藏
代码展示
- card 组件
- html
<template> <div class="textCard"> <div class="ellipsis card-name">{{cardData.name}}</div> <!-- 箭头通过自定义指令控制 --> <i v-moreIcon class="el-icon-arrow-down icon_down"></i> </div> </template>
- 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图的效果
