布局之悬浮显示更多文本并增加箭头指示效果
记录一个界面交互的小功能
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图的效果
🎈🎈🎈
🌹 持续更文,关注我,你会发现一个踏实努力的宝藏前端😊,让我们一起学习,共同成长吧。
🎉 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 😉
🎁 欢迎大家评论交流, 蟹蟹😊
本文来自博客园,作者:甜点cc,转载请注明原文链接:https://www.cnblogs.com/all-smile/p/xixi.html