记录一个界面交互的小性能
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图的成果
继续更文，关注我，你会发现一个虚浮致力的宝藏前端，让咱们一起学习，独特成长吧。
喜爱的小伙伴记得点赞关注珍藏哟，回看不迷路
欢送大家评论交换, 蟹蟹