-
el-scrollbar 优化滚动条样式
2019-12-03 19:33:16element-ui 隐藏组件 el-scrollbar 优化滚动条样式博客地址:http://www.globm.top/blog/1/detail/30
配置需求
导入element-ui效果图
页面引入
<el-scrollbar> <div>内容</div> </el-scrollbar>
// 修改页面底部滚动条显示效果,可根据实际需要引入 /deep/.el-scrollbar{ height: 100%; .el-scrollbar__wrap { overflow-x: hidden; } .el-scrollbar__bar{ // 默认展示滚动条 opacity: 1; } .el-scrollbar__thumb{ // 改变滚动条颜色 background: #ED4040; } }
注: 父元素需设置高度
-
el-dialog 拖拽及居中效果
2019-11-28 16:39:04el-dialog拖拽及改变大小 1.新建directive.js import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el) { //备注:可以改变类名使其它元素也实现拖拽效果 //鼠标...博客地址:http://www.globm.top/blog/1/detail/35
el-dialog拖拽及改变大小1.新建directive.js
import Vue from 'vue';
只能在窗口内拖拽
// v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind (el) { // 备注:可以改变类名使其它元素也实现拖拽效果 // 鼠标点击拖拽区域 const dialogHeaderEl = el.querySelector('.el-dialog__header') // 被拖拽元素主题 const dragDom = el.querySelector('.el-dialog') dialogHeaderEl.style.cursor = 'move' // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) dialogHeaderEl.onmousedown = (e) => { // 鼠标按下,计算当前元素距离可视区的距离 const disX = e.clientX - dialogHeaderEl.offsetLeft const disY = e.clientY - dialogHeaderEl.offsetTop const screenWidth = document.body.clientWidth // body当前宽度 const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度,可某些环境下无法获取) const dragDomWidth = dragDom.offsetWidth // 对话框宽度 const dragDomheight = dragDom.offsetHeight // 对话框高度 const minDragDomLeft = dragDom.offsetLeft const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth const minDragDomTop = dragDom.offsetTop const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight // 获取到的值带px 正则匹配替换 let styL, styT // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px if (sty.left.includes('%')) { // eslint-disable-next-line no-useless-escape styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100) // eslint-disable-next-line no-useless-escape styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100) } else { styL = +sty.left.split('px')[0] styT = +sty.top.split('px')[0] } document.onmousemove = function (e) { // 通过事件委托,计算移动的距离 let left = e.clientX - disX let top = e.clientY - disY // 边界处理 if (-(left) > minDragDomLeft) { left = -(minDragDomLeft) } else if (left > maxDragDomLeft) { left = maxDragDomLeft } if (-(top) > minDragDomTop) { top = -(minDragDomTop) } else if (top > maxDragDomTop) { top = maxDragDomTop } // 移动当前元素 dragDom.style.transform = 'none' dragDom.style.left = `${left + styL}px` dragDom.style.top = `${top + styT}px` // 将此时的位置传出去 // binding.value({x:e.pageX,y:e.pageY}) } document.onmouseup = function () { document.onmousemove = null document.onmouseup = null } } } })
可以移出窗口
// v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el) { //备注:可以改变类名使其它元素也实现拖拽效果 //鼠标点击拖拽区域 const dialogHeaderEl = el.querySelector('.el-dialog__header'); //被拖拽元素主题 const dragDom = el.querySelector('.el-dialog'); dialogHeaderEl.style.cursor = 'move'; // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); dialogHeaderEl.onmousedown = (e) => { // 鼠标按下,计算当前元素距离可视区的距离 const disX = e.clientX - dialogHeaderEl.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop; // 获取到的值带px 正则匹配替换 let styL, styT; // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px if(sty.left.includes('%')) { // eslint-disable-next-line no-useless-escape styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100); // eslint-disable-next-line no-useless-escape styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100); }else { styL = +sty.left.split('px')[0]; styT = +sty.top.split('px')[0]; } document.onmousemove = function (e) { // 通过事件委托,计算移动的距离 const l = e.clientX - disX; const t = e.clientY - disY; // 移动当前元素 dragDom.style.left = `${l + styL}px`; dragDom.style.top = `${t + styT}px`; //将此时的位置传出去 //binding.value({x:e.pageX,y:e.pageY}) }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; } } })
弹窗宽度拖大 拖小
// v-dialogDragWidth: 弹窗宽度拖大 拖小 Vue.directive('dialogDragWidth', { bind(el, binding) { const dragDom = binding.value.$el.querySelector('.el-dialog'); el.onmousedown = (e) => { // 鼠标按下,计算当前元素距离可视区的距离 const disX = e.clientX - el.offsetLeft; document.onmousemove = function (e) { e.preventDefault(); // 移动时禁用默认事件 // 通过事件委托,计算移动的距离 const l = e.clientX - disX; dragDom.style.width = `${l}px`; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; } } })
2.在main.js中引入directive.js
3.在el-dialog标签的开始位置加入v-dialogDrag或 v-dialogDragWidth就可以实现相应的效果el-dialog居中显示效果
// 推荐直接使用js实现 this.$nextTick(_ => { this.$refs.dialog.style.marginTop = `calc((100vh${this.$refs.dialog.clientHeight}px) / 2)` })
//配合dialog自带属性实现效果,不建议使用,固定定位元素受动画影响 .el-dialog{ transform: translateY(-50%); margin-top: 0!important; top: 50%; }
//使用弹性布局,兼容性较差 .el-dialog{ display: flex; flex-direction: column; margin:0 !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /*height:600px;*/ max-height:calc(100% - 30px); max-width:calc(100% - 30px); } .el-dialog .el-dialog__body{ flex:1; overflow: auto; }
-
ElementUI响应式布局bug、其中中el-col-sm-0会导致响应式布局失效得解决方法
2020-09-05 22:57:26如下布局,如果将:sm="0"则会...el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col> <el-col :xs="0" :sm="0" :md="7" :lg="5" :xl="4" >456</el-col> 完整得例子 新建一个demo如下布局,如果将
:sm="0"
则会导致456始终不显示
下面得响应式布局目的就是希望在sm也就是屏幕宽度在小于992px时将456隐藏,不显示,但是如果这样做就会出现bug<el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20">123</el-col> <el-col :xs="0" :sm="0" :md="7" :lg="5" :xl="4" >456</el-col>
完整得例子
新建一个
demo.html
文件内容如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试页面</title> <!-- cdn引入ElementUI样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> * { margin: 0; padding: 0; } .myclass1 { height: 200px; background-color: slategray; } .myclass2 { height: 200px; background-color: #867090; } </style> </head> <body> <div id="app"> <el-row> <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col> <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" class="myclass2" >456</el-col> </el-row> </div> <!--cdn引入ElementUI组件必须先引入Vue--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- cdn引入ElementUI组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script type="text/javascript"> const vm = new Vue({ // 配置对象 options // 配置选项(option) el: '#app', // element: 指定用vue来管理页面中的哪个标签区域 data: { screenWidth: 992 }, }) </script> </body> </html>
会发现456不会显示,虽然宽度有了但是内容456却不显示
将sm得值设置非0则正常,但是屏幕宽度为sm时会导致456被挤下去如下
解决方法,通过vue得
v-if
或者v-show
首先、将sm不要设置为0,例如设置为1
其次、为了解决这个sm=1的问题,通过js获取屏幕宽度,当屏幕<992时就不显示即可
当屏幕小于992px时将其隐藏掉
<el-row> <el-col :xs="24" :sm="24" :md="17" :lg="19" :xl="20" class="myclass1">123</el-col> <el-col :xs="0" :sm="1" :md="7" :lg="5" :xl="4" class="myclass2" v-show="screenWidth >= 992">456</el-col> </el-row>
以及通过vue获取屏幕宽度
const vm = new Vue({ // 配置对象 options // 配置选项(option) el: '#app', // element: 指定用vue来管理页面中的哪个标签区域 data: { screenWidth: 992 }, mounted(){ const that = this window.onresize = () => { return (() => { window.screenWidth = document.body.clientWidth that.screenWidth = window.screenWidth })() } } })
效果
-
ElementUI中的el-table表格设置全透明(组件化开发和html两种方式)
2020-10-28 04:50:02.el-table, .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ .el-table th, .el-table tr, .el-table td { background-color: transparent; } 组件化开发 less则需要加上/deep...html中使用,css中加入如下代码即可
/*最外层透明*/ .el-table, .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ .el-table th, .el-table tr, .el-table td { background-color: transparent; }
组件化开发
less则需要加上
/deep/
生效,还有注意作用域要是scoped<style scoped>
如下/*最外层透明*/ /deep/ .el-table, /deep/ .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td { background-color: transparent; }
stylus则用
>>>
替代,注意需要有scoped,
也就是<style scoped lang="stylus" rel="stylessheet/stylus">
需要加上scoped否则深度作用>>>
不生效/*最外层透明*/ >>> .el-table, >>> .el-table__expanded-cell background-color transparent /* 表格内背景颜色 */ >>> .el-table th, >>> .el-table tr, >>> .el-table td background-color transparent
有效果的,点个赞,让更多人知道怎么处理。
关于表格的其它一些操作
去除最底层表格的下划线
/* 删除表格下最底层的横线 */ .el-table::before { left: 0; bottom: 0; width: 100%; height: 0px; }
设置表格头的字体颜色
/* 表格表头字体颜色 */ .el-table thead { color: #ffffff; font-weight: 500; }
设置滚动条样式
/*表格滚动条和字体颜色*/ .el-table border-bottom 0 color hsla(0,0%,100%,.6) /* 设置滚动条的样式 */ ::-webkit-scrollbar width 5px;/*滚动条粗细*/ /* 滚动槽 */ ::-webkit-scrollbar-track -webkit-box-shadow inset006pxrgba(0, 0, 0, 0.3) border-radius 10px /* 滚动条滑块 */ ::-webkit-scrollbar-thumb border-radius 10px background rgba(0, 0, 0, 0.3) -webkit-box-shadow inset006pxrgba(0, 0, 0, 0.5)
移除默认的hover样式
这个贼坑,社区中很早以前就提过了,一直没有解决。
给el-table
元素设置一个id,我这里叫做playList
,你可以随意,注意下面的getElementById中一致即可,放在钩子函数即可,例如setInterval时间为0,就是一直去除,因为这个熟悉似乎是动态加上去的,如果直接使用document.getElementById("playList").classList.remove("el-table--enable-row-hover")
会造成移除了又被添加进去了mounted() { setInterval(() => { // (也可以使用`this.$ref`获得表格元素让母后`.classList.remove("el-table--enable-row-hover")`) document.getElementById("playList").classList.remove("el-table--enable-row-hover") }) }
附上整体效果截图
-
elementUI框架的 el-row el-col 与 el-table-column 用法区别!
2020-05-02 16:00:28el-row> <el-col> 与<el-table-column>用法区别! 初学者可能很容易混淆它们的用法,其实是没有认真看官方文档,下面总结一下: <el-row> <el-col>标签是属于element的Layout布局控件... -
EL表达式
2019-06-26 16:10:55EL表达式极大地简化了JSP表达式 功能:在页面上显示数据。 示例如下: 运行结果: EL表达式运算符: empty运算符: 判断一个对象是否为空 -
EL表达式详解
2018-04-08 12:27:28该篇博客主要关于EL表达式,废话不多说=-=进入正题 博客目录 1、EL表达式介绍 2、EL获取数据 3、EL中的内置对象 4、EL访问Bean的属性 5、EL访问数组中的数据 6、EL获取list中数据 7、EL访问... -
el-row和el-col问题汇总
2020-03-16 16:49:04一、el-col为空不显示 <el-row> <el-col :span="7">啊啊啊</el-col> <el-col :span="1"></el-col> <el-col :span="7">哦哦哦</el-col> <el-col :span="1">&... -
Vue el-tree与el-transfer的结合使用之el-tree-transfer
2019-07-24 10:48:22npm install el-tree-transfer --save 或 npm i el-tree-transfer -S 结果如下即成功: 然后引入: <script> import treeTransfer from 'el-tree-transfer' // 引入 export defu... -
element-ui el-checkbox的一些坑
2018-08-01 09:31:54el-checkbox @change="handleCheckedCitiesChange" v-model="checkAll" :label="list.eventtypeid" >全选</el-checkbox> <el-checkbox-group v-model=&... -
el-radio el-select el-checkbox在对话框选择时页面抖动
2019-11-07 09:51:25直接写在没有scoped的....reprint-remark-form .el-form-item__error { transition: none!important; } 2.多选框选中时页面抖动 .el-checkbox ::after { transition: none!important; } 3.单选框选中时页面... -
什么是EL表达式,EL举例,EL使用,EL概念
2009-04-11 19:42:00什么是EL表达式?EL表达式:expression language,即表达语言,它是为了便于存取数据而定义的一种语言,JSP2.0之后才成为一种标准。形式:以“${”开头,以“}”结尾,通过PAGE指令来说明是否支持EL表达式,具体举例:... -
关于Vue Element组件el-checkbox与el-select默认选中值的几点注意事项
2020-01-08 10:28:29el-select 示例: 代码: <el-select v-model="doc.zhic" placeholder="请选择"> <el-option v-for="(item,index) in zhicdata" :key="index" :l... -
Vue+element ,el-form 中加el-col或el-row布局,无法获得光标
2019-05-21 23:04:06在一个Vue+element 的项目中做表单操作,加入el-col后出现了,输入框点击无效的情况 <div id="app"> <el-form ref="form" :model="form" label-width="80px">...el-form-item label=... -
el-tabs事件绑定(Element UI)
2018-04-27 18:57:21el-tabs v-model=&quot;activeName&quot;&amp;gt; &amp;lt;el-tab-pane name=&quot;0&quot; label=&quot;标签1&quot;&amp;gt;&... -
JAVA EL表达式
2019-06-09 20:31:36JAVA中用于取值的语言叫EL表达式。 EL为表达式语言(Expression Language),可以简化对变量对象的访问,它的表达式以"${“开始,以”}"结束。 EL表达式的操作内容可以是:常量、变量、jsp隐含对象 EL表达式提供... -
EL表达式与JSTL简单入门
2018-06-04 08:46:17EL概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本的编写。 简单来说EL表达式就是让程序员,简化了代码的书写量。在学EL表达式之前我们必须... -
el-select实现change事件
2019-08-20 10:34:43官网提供了el-select的change事件,但是并没有提供使用示例,但是最近在vue项目中却要使用到。 直接上代码,HTML部分 <el-select @change="selectChanged" v-model="devType" size=small> <el-option v... -
Vue ElementUI在el-table中使用el-popover
2020-05-11 15:55:19el-table-column width="100" align="center" label="操作"> <template slot-scope="scope"> <el-popover width="160" :ref="`popover-${scope.$index}`"> <p>确定删除该项吗?& -
EL表达式语法
2018-12-25 21:01:01EL(是Expression Language的缩写),使用EL对JSP输出进行优化,可以使得页面结构更加清晰,代码可读性高,也更加便于维护。 使用EL表达式的目的:从作用域中获取指定属性名的共享数据 <%@ page isELIgnored=... -
vue el-form 一行里面放置多个 el-form-item
2019-09-19 19:03:38最近用到 element-ui 的 el-form,要求一行里面放置多个 el-form-item。 其实很简单,用 layout 布局就可以简单实现。 layout 布局是通过基础的24分栏,从而迅速简洁地创建布局。 代码实现如下: <el-form size... -
关于el5,el6和el7是什么
2017-07-11 07:33:46What does el5, el6, and el7 mean?EL is short for Red Hat Enterprise Linux (EL). - EL6 is the download for Red Hat 6.x, CentOS 6.x, and CloudLinux 6.x. - EL5 is the download for Red Hat 5.x, CentO -
element-ui 在el-table的el-form里面添加el-tree导致表格错位问题
2019-10-23 14:44:33最近做管理后台的时候,遇到一个很恶心的事情,就是el-table的el-form里面加了el-tree导致表格错位,一开始定位是我的布局有问题,处理了几个小时都没有处理好。百度上也没有解决方案,可能我这坑掉的人比较少吧。...
-
(新)备战2021软考软件设计师顺利通关套餐
-
广州大学概率论与数理统计学习资料.zip
-
Excel高级图表技巧
-
RabbitMQ消息中间件实战(附讲义和源码)
-
MTA软件连线使用说明书
-
(新)备战2021软考网络工程师培训学习套餐
-
鸿蒙开发笔记十:剪切板
-
程序员离职、创业、副业
-
flutter插件调用APP页面、使用原生aar,framework库
-
python数据分析基础
-
浙江、江苏移动数码SM代工M301H 不拆机room
-
linux进程的最大线程数 及最大进程数.zip
-
【数据分析-随到随学】Spark理论及实战
-
gostudy_zip dos下怎么样才能下go棋
-
linux java 命令安装好找不到
-
360360安全卫士.e
-
2021.1.17寒假打卡Day13
-
web前端开发规范
-
JS_01-JavaScript基础
-
MFC开发简单聊天程序