element transfer 不使用render-content方法给每一行加title的一种思路

2019-11-10 admin

原文地址:https://segmentfault.com/a/1190000020956789

问题描述

最近在使用element-uiel-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或者:beforecontentattr()这些东西来自己实现一个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;
    }
}

这样这个问题就解决了。

小思考

做完这个东西,我有了一点小思考。 在我们使用框架的时候,思维有时候很容易被框架绑架,反而忘记了一些原生的东西,而这些原生的东西有时候解决起来问题反倒是更简单、更直接。所以,虽然我们在使用框架做东西,但是解决问题的时候不要局限在框架内,有时候不妨跳出框架看看有没有更直接、更简单的方法。

[转载]原文链接:https://segmentfault.com/a/1190000020956789

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78869.html

文章标题:element transfer 不使用render-content方法给每一行加title的一种思路

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
回到顶部