记录--`ElementUI` 中的奇技淫巧
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
在ElementUI的世界中，不仅有基础的组件和功能，还有一些让你眼前一亮、*得不能再*的高级技巧和窍门。本文将揭示这些技巧，让你在前端开发的舞台上独领风骚。无论你是一个勇敢的创新者还是一个喜欢调皮捣蛋的开发者，这些技巧都将让你的ElementUI应用更加酷炫和有趣！
直接进入正题
el-scrollbar滚动条
自定义滚动条的原理
warp：滚动的可显示区域，滚动内容就是在这个区域中滚动；
view：实际的滚动内容，超出warp可显示区域的内容将被隐藏；
track：滚动条的滚动滑块；
thumb：上下滚动的轨迹。
<el-scrollbar>
<li v-for="user in userList" :key="user.id">{{user.name}}</li>
</el-scrollbar>
管理弹出层的z-index：PopupManager
ElementUI的弹出层在元素定位上，都有两种实现方式，分别是：
append-to-body：此模式下，弹出层会被放在<body>元素上，通过position: fixed定位，配合动态的top和left属性，完成弹出元素的定位。- 非
append-to-body：此模式下，弹出层通过position: absolute定位，配合其父元素position: relative来完成弹出元素的定位。
在大多数情况下，ElementUI都是默认使用append-to-body，因为非append-to-body存在严重副作用，只有迫不得已的情况下才需要使用。
具体有什么副作用，可以把你们的理解打在评论区。
ElementUI弹出层的核心实现机制： 只要让新出现的弹出层，永远比之前所有弹出层的层级要高，就不会有新弹层被旧弹层遮盖的事情发生。
PopupManager：为弹出层提供获取实例、注册、注销等各种能力，但其最重要的能力，是提供了z-index的层级管理能力。
ElementUI为其内置了一个弹出层z-index基数（2000），但可以进行修改。// 修改弹出层的`z-index`从3000开始递增
Vue.use(Element, {zIndex: 3000})
<template>
<div class="container">
<el-button @click="onClick">增加</el-button>
z-index: {{ value }}
</div>
</template>
<script>
import { PopupManager } from 'element-ui/src/utils/popup'
export default {
data() {
return {
value: 0
}
},
methods: {
onClick() {
// 使用
this.value = PopupManager.nextZIndex()
}
}
}
</script>
实战：一个更灵活的全屏组件
众所周知，浏览器是有官方的全屏
API的：Element.requestFullscreen()，它可以让一个元素立刻铺满视窗，并且置于所有元素之上。官方全屏是设定层级高于一切，那些append-to-body的弹窗，无论z-index多高，也绝对不会被显示出来。而那些非append-to-body模式的弹出层，确实会在某些业务场景不符合要求。
符合ElementUI层级标准的全屏组件
和浏览器官方
API实现全屏的思路基本一致，但不同的地方在于：
- 官方全屏会默认置顶，
z-index无限大；- 封装的全屏组件，
z-index符合PopupManager管家的规范。
示例代码
<template>
<div :class="{ 'custom-full-screen': isFullScreen }" :style="{zIndex: currentZIndex}">
<slot></slot>
</div>
</template>
<script>
import { PopupManager } from 'element-ui/src/utils/popup'
export default {
data() {
return {
isFullScreen: false,
currentZIndex: null
}
},
methods: {
request() {
this.isFullScreen = true
this.currentZIndex = PopupManager.nextZIndex()
}
}
}
</script>
<style>
.custom-full-screen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
}
</style>
万能弹出组件：vue-popper
ElementUI中的大部分弹出层都是基于vue-popper组件来实现的。比如select、data-picker、cascader、dropdown、popver、tooltip等。
如何使用vue-popper
通常来说，它的主要用法是混入（mixins）。
可以参考
ElementUI select-dropdown中对它的具体使用。
实战：完全自定义的弹出层
引入
vue-popper，在模板中引入该组件，并定义一个弹出层元素，一个定位元素。
<template>
<!-- 定位元素 -->
<div class="custom-picker">
<!-- vue-popper组件 -->
<Popper ref="popper" v-model="showPopper"></Popper>
<!-- 弹出组件 -->
<div ref="fly-piece" v-show="showPopper" class="custom-picker__popper">弹出内容</div>
</div>
</template>
<script>
// 引入vue-popper组件
import Popper from 'element-ui/src/utils/vue-popper';
export default {
components: {
Popper
},
data() {
return {
// 双向绑定，控制弹出层是否弹出
showPopper: false
},
},
}
</script>
mounted() {
this.$refs.popper.popperElm = this.$refs['fly-piece'];
this.$refs.popper.referenceElm = this.$el;
}
3.通过控制vue-popper的props.value来控制是否弹出。
this.showPopper = !this.showPopper
ClickOutside
ClickOutside是ElementUI实现的一个自定义指令，顾名思义，就是点击元素外面才会触发的事件。ElementUI中的select、dropdown、popver等组件都用到该指令。
<template>
<div v-clickoutside="handleClose" v-show="flag"></div>
</template>
<script>
import Clickoutside from "element-ui/src/utils/clickoutside"
export default{
data(){
return {
flag: true
}
},
directives: { Clickoutside },
methods: {
handleClose(){
this.flag = false;
}
}
}
</script>
本文转载于:
https://juejin.cn/post/7276113864123318335
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
记录--`ElementUI` 中的奇技淫巧的更多相关文章
- 记录vue中一些有意思的坑
记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...
- vue+element-ui中的图片获取与上传
vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...
- element-ui中select下拉框，选择后赋值成功，但是框上不显示的坑
这个是今天遇到一个坑,因为也是第一次使用vue+element-ui开发,所以记录一下自己遇到的一些问题. 这个问题是在开发省市区三级联动组件的时候遇到的,具体的情况如下发的gif图,虽然解决了问题, ...
- elementUI中的隐藏组件el-scrollbar
细心的人儿都会发现elementUI官网的滚动条样式优美,但是elementUI中并未给出这个滚动条组件,打开调试页面发现用到了el-scrollbar.问一下度娘发现早就有前辈们发现了这个问题并给出 ...
- Oracle生成查询包括对应于所有数据表记录语句中指定的字段名
应用:已知的字段名,表中的所有数据的查询数据库中包含的所有数据表的字段名 操作方法:指定字段名,用户数据库表,它可以执行以下查询 --Oracle生成查询包括对应于所有数据表记录语句中指定的字段名 d ...
- 记录JavaFx中非常重要的细节，入门了也未必知道
title: 记录JavaFx中非常重要的细节 JavaFx中有一些疑难杂症,或许你以为你掌握了JavaFx,但是也未必知道我所说的这些问题和解决方案,如果有帮助到你的,可以加群最大最活跃的JavaF ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- vue将指定区域的表格数据或element-ui中el-table的数据单笔或多笔批量导出excel
公司在后台管理系统开发中用到了 vue+element-ui 组合的框架,但随着需求的越来越复杂,前端的工作难度也呈几何倍数递增,工作量随之增大.这不,在项目中增加一个将列表数据导出为excel的需求 ...
- elementUi中input输入字符光标在输入一个字符后，光标失去焦点
elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...
- 改写element-ui中的日期组件
如果你想实现一个自定义的日期组件规则如下:日期组件未点开前左右两边有前一天后一天控制箭头,且前一天后一天有数据时才显示箭头,没有数据时,快速切换箭头隐藏.当日期组件点开后,有数据的天为可点击状态,无数 ...
随机推荐
- NC20154 [JSOI2007]建筑抢修
题目链接 题目 题目描述 小刚在玩JSOI提供的一个称之为"建筑抢修"的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有N个建筑设施受到了严 ...
- FireFox 报错Security Connection Failed解决方案
1.在浏览器中输入:about:config; 2.搜索security.ssl.enable_ocsp_stapling,双击将其修改为FALSE: 3.返回重新访问之前的网站,问题解决
- Java设计模式-迭代器模式Iterator
介绍 根据GoF的定义,迭代器模式提供了一种顺序访问聚合对象的元素而不暴露其底层表示的方法.这是一种行为设计模式. 顾名思义,迭代器有助于以定义的方式遍历对象集合,这对客户端应用程序很有用.在迭代期间 ...
- docker方式部署并使用gitlab
工作中企业会在内网搭建一个公司内部使用的git环境,一般用的是gitlab. GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务. 下面介绍一 ...
- RCE代码执行漏和命令执行漏洞
前置知识: 漏洞检测: 在了解漏洞概念前,应该先知道一下这个漏洞如何检测的,我们应该或多或少听过白盒测试(白盒),黑盒测试(黑盒). 白盒测试: 白盒测试是对源代码和内部结构的测试,测试人员是可以知道 ...
- iptables临时控制某ip访问权限
iptables -A INPUT -p tcp -s {src_ip} --dport 80 -j ACCEPT iptables -A INPUT -p tcp -s {src_ip} --dpo ...
- Selenium入门介绍
目录 Selenium概述 浏览器支持 工具库 开发实践 等待 操作浏览器 定位元素 定位单个元素 定位多个元素 获取HTML元素内容的方式 Selenium概述 https://github.com ...
- python实用模块之netifaces获取网络接口地址相关信息
文档 https://pypi.org/project/netifaces/ 安装 pip install netifaces 使用 import netifaces netifaces.interf ...
- windows下的批处理bat文件和Linux下的shell文件的含义
原文:https://www.cnblogs.com/caiguodong/p/10308255.html shell(Linux.Solaris) bat(windows) 含义 # rem 注释行 ...
- 【Azure 应用服务】记一次Azure Spring Cloud 的部署错误 (az spring-cloud app deploy -g dev -s testdemo -n demo -p ./hellospring-0.0.1-SNAPSHOT.jar --->>> Failed to wait for deployment instances to be ready)
问题描述 使用Azure Spring Cloud服务,在部署时候失败,收到错误消息为: c:\project\hellospring>az spring-cloud app deploy -g ...