原文地址:https://segmentfault.com/a/1190000020956789
问题描述
最近在使用 element-ui
的el-transfer
时候遇到一问题:
穿梭框一行显示一条数据,但是有的数据比较长,一行显示不下,那就要把超出的部分用 ...
展示,鼠标放上去的时候展示完整内容。
一般的做法呢,就是通过 css
控制 ...
显示,同时元素的 title
属性,这样鼠标放上去的时候可以悬浮展示完整数据。
放在 el-transfer
的场景下就是通过组件提供的 render-content
来自定义每行内容的渲染,给每行元素加一个 title
属性。
但是呢,render-content
的返回内容得是 JSX
语法。
官方文档 demo code 是这么写的:
renderFunc(h, option) {return <span>{ option.key} - {option.label}</span>;
}
还有一些注释:
注意:由于 jsfiddle 不支持 JSX 语法,所以使用 render-content 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中,只要正确地配置了相关依赖,就可以正常运行。
简单说就是要用 render-content
这个方法需要额外安装一些依赖。我丢,为了这么个小玩意儿我还要装一些依赖!不能忍,不能装,一定要想办法解决。于是我开始琢磨解决方法。
尝试方法
css 方案
一开始我想用 css
来解决。利用 :hover
、:after
或者 :before
、content
、attr()
这些东西来自己实现一个 title
悬浮效果。但是翻遍了各种文档没找到怎么通过 atrr()
来获取元素文本值。然后这个方案就进行不下去了,只能换方法。
js 方案
从 js 层面看,其实这个问题的核心就是给元素设置 title
属性嘛,我手动给他加一个不就完了。我的做法是这样的:通过监听元素的 onmouseover
事件,当鼠标移动到元素上面时,获取元素的文本值设置给元素的 title 属性。
示例代码如下:
<el-transfer @mouseover.native="addTitle"></el-transfer>
addTitle (e) {
// 手动给鼠标滑过的元素加一个 title
let target_el = e.target;
if (target_el.title) return;
if (/* 满足一定条件时候 */) {target_el.title = target_el.innerText;}
}
这样这个问题就解决了。
小思考
做完这个东西,我有了一点小思考。
在我们使用框架的时候,思维有时候很容易被框架绑架,反而忘记了一些原生的东西,而这些原生的东西有时候解决起来问题反倒是更简单、更直接。所以,虽然我们在使用框架做东西,但是解决问题的时候不要局限在框架内,有时候不妨跳出框架看看有没有更直接、更简单的方法。