Vue 实现会话列表【文字+按钮】文字自动隐藏效果：利用文字遮罩实现无感切换

我想实现的效果在很多应用中列表项通常会同时存在两个元素左侧标题右侧操作按钮例如聊天历史记录鼠标移入我希望达到一种更自然的效果平时按钮隐藏标题尽量显示更多内容hover 后按钮出现标题自动给按钮让出空间整个过程不发生布局跳动。这个 Demo 提供了一种实现方式使用双层文字结构将文字布局和文字显示分离。示例代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title聊天列表文字遮罩效果/titlestyle*{box-sizing:border-box;}body{background:#f7f7f7;font-family:Arial,Microsoft YaHei,sans-serif;}/* 会话列表 */.history-item{position:relative;width:320px;height:38px;padding:0 10px;display:flex;align-items:center;border-radius:8px;cursor:pointer;user-select:none;color:#303133;transition:background-color .2s;}.history-item:hover{background:#eeeeee;}/* 图标 */.history-icon{width:20px;flex-shrink:0;}/* 标题容器 真实文字透明 只负责撑开布局 */.title{position:relative;flex:1;margin-left:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:transparent;}/* 可见文字层 模拟遮罩区域 */.overlay{pointer-events:none;position:absolute;left:0;top:0;width:calc(100% - 70px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#303133;}/* hover时扩大显示区域 给右侧按钮腾位置 */.history-item:hover .overlay{width:100%;}/* 操作按钮 */.more{width:26px;height:26px;margin-left:4px;display:flex;justify-content:center;align-items:center;border:none;background:transparent;border-radius:6px;cursor:pointer;opacity:0;transition:.2s;}.history-item:hover .more{opacity:1;}.more:hover{background:#ddd;}/* 第二个按钮 *//style/headbodyh3聊天列表文字遮罩效果/h3divclasshistory-itemspanclasshistory-icon/spanspanclasstitle这是一个非常非常非常非常非常非常非常长的聊天标题用来测试文字截断效果spanclassoverlay这是一个非常非常非常非常非常非常非常长的聊天标题用来测试文字截断效果/span/spanbuttonclassmore/buttonbuttonclassmore⋮/button/div/body/html