这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

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-indexPopupManager

ElementUI的弹出层在元素定位上,都有两种实现方式,分别是:

  • append-to-body:此模式下,弹出层会被放在<body>元素上,通过position: fixed定位,配合动态的topleft属性,完成弹出元素的定位。
  • 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组件来实现的。比如selectdata-pickercascaderdropdownpopvertooltip等。

如何使用vue-popper

通常来说,它的主要用法是混入(mixins)

可以参考ElementUI select-dropdown中对它的具体使用。

实战:完全自定义的弹出层

  1. 引入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-popperprops.value来控制是否弹出。

this.showPopper = !this.showPopper

ClickOutside

ClickOutsideElementUI实现的一个自定义指令,顾名思义,就是点击元素外面才会触发的事件。ElementUI中的selectdropdownpopver等组件都用到该指令。

<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` 中的奇技淫巧的更多相关文章

  1. 记录vue中一些有意思的坑

    记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...

  2. vue+element-ui中的图片获取与上传

    vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...

  3. element-ui中select下拉框,选择后赋值成功,但是框上不显示的坑

    这个是今天遇到一个坑,因为也是第一次使用vue+element-ui开发,所以记录一下自己遇到的一些问题. 这个问题是在开发省市区三级联动组件的时候遇到的,具体的情况如下发的gif图,虽然解决了问题, ...

  4. elementUI中的隐藏组件el-scrollbar

    细心的人儿都会发现elementUI官网的滚动条样式优美,但是elementUI中并未给出这个滚动条组件,打开调试页面发现用到了el-scrollbar.问一下度娘发现早就有前辈们发现了这个问题并给出 ...

  5. Oracle生成查询包括对应于所有数据表记录语句中指定的字段名

    应用:已知的字段名,表中的所有数据的查询数据库中包含的所有数据表的字段名 操作方法:指定字段名,用户数据库表,它可以执行以下查询 --Oracle生成查询包括对应于所有数据表记录语句中指定的字段名 d ...

  6. 记录JavaFx中非常重要的细节,入门了也未必知道

    title: 记录JavaFx中非常重要的细节 JavaFx中有一些疑难杂症,或许你以为你掌握了JavaFx,但是也未必知道我所说的这些问题和解决方案,如果有帮助到你的,可以加群最大最活跃的JavaF ...

  7. 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法

    好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...

  8. vue将指定区域的表格数据或element-ui中el-table的数据单笔或多笔批量导出excel

    公司在后台管理系统开发中用到了 vue+element-ui 组合的框架,但随着需求的越来越复杂,前端的工作难度也呈几何倍数递增,工作量随之增大.这不,在项目中增加一个将列表数据导出为excel的需求 ...

  9. elementUi中input输入字符光标在输入一个字符后,光标失去焦点

    elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...

  10. 改写element-ui中的日期组件

    如果你想实现一个自定义的日期组件规则如下:日期组件未点开前左右两边有前一天后一天控制箭头,且前一天后一天有数据时才显示箭头,没有数据时,快速切换箭头隐藏.当日期组件点开后,有数据的天为可点击状态,无数 ...

随机推荐

  1. [Ngbatis源码学习][SpringBoot] 由BeanFactoryPostProcessor想到

    由BeanFactoryPostProcessor想到 在看Ngbatis源码时看到了对BeanFactoryPostProcessor后置处理器的使用,对其的使用并不是很了解,在此做一些学习和总结. ...

  2. 编译pjsip源码

    操作系统 : Windows 10_x64 [版本 10.0.19042.685] pjsip版本 : 2.10 pjsip官网:https://www.pjsip.org/ 1. 下载pjsip源代 ...

  3. TCP和UDP面试题提问

    @ 目录 TCP UDP 总结 应用 TCP(传输控制协议)和UDP(用户数据报协议)是两种计算机网络通信协议,它们在网络通信中起着不同的作用. TCP TCP 是面向连接的协议,它在数据传输之前需要 ...

  4. 【LGR-153-Div.2】梦熊联盟 8 月月赛 Ⅳ & Cfz Round 1 & 飞熊杯 #1

    [LGR-153-Div.2]梦熊联盟 8 月月赛 Ⅳ & Cfz Round 1 & 飞熊杯 #1 \(T1\) luogu P9577 「Cfz Round 1」Dead Cell ...

  5. 面试官:谈一谈你对 redis 分布式锁的理解

    ​为什么需要分布式锁 在 jdk 中为我们提供了多种加锁的方式: (1)synchronized 关键字 (2)volatile + CAS 实现的乐观锁 (3)ReadWriteLock 读写锁 ( ...

  6. GCC Arm 11.3rel1, 12.2编译提示 _close is not implemented and will always fail

    使用GCC Arm工具链开发的项目, 在11.2下编译正常, 但是升级到 arm-gnu-toolchain-11.3.rel1 以及 arm-gnu-toolchain-12.2 之后, 编译出现警 ...

  7. 链表--insert

    分别是使用了二级指针和一级指针的两种方法,最后会按插入的顺序依次打印1,2,3,4 主要区别在于,使用二级指针,可以在main函数里直接用一个空的Node指针,而一级指针是在main函数里面先添加了一 ...

  8. virtualapp安装应用流程源码分析

    1. HomeActivity 为处理的入口 @Override protected void onActivityResult(int requestCode, int resultCode, In ...

  9. 删除node_modules文件夹cmd指令 - 20201015

    方法 方法一: rm -rf /node_modules cmd原生命令.只要支持cmd就可以使用. 方法二: rmdir /s/q your_app_dir 原生node方法,redir为node删 ...

  10. 【转载】nltk英文自定义分词

    NLTK项目地址: https://github.com/nltk/nltk_data/tree/gh-pages/packages NLTK基础分词用例: https://www.cnblogs.c ...