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

在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中对它的具体使用。

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

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

  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. python高级用法之命名元组namedtuple

    1．tuple类型数据的获取 大家都知道,元组里面的数据获取只能通过下标的方式去获取,比如 :a = ('username', 'age', 'phone'),要获取username的话 ,就需要用a ...

  2. Java控制语句

    1.介绍 从本质上讲,程序是一系列指令.控制结构是可以改变我们如何执行这些指令的代码块. 在本教程中,我们将探讨Java中的控制结构. 有三种控制结构: 条件分支,用于在两条或多条路径之间进行选择.J ...

  3. cf796部分题解

    C. Manipulating History 题意:给出一些字符串,有原始串(只含一个字符的串).被替换的串.替换串. 最终串(最后一行),求原始串. 2 a ab b cd acd Initial ...

  4. 【Android 逆向】【ARM汇编】 函数的栈帧

    1. 函数的调用约定 ARM32 参数1-4 放入r0-r3 剩下的入栈,函数返回值放入r0 ARM64 参数1-8 放入X0-X7 剩下的入栈,函数返回值放入X0 (浮点数是放入 Dn 或 Sn) ...

  5. 【Azure 应用服务】Azure Function Python函数部署到Azure后遇见 Value cannot be null. (Parameter 'receiverConnectionString') 错误

    问题描述 使用VS Code创建Python Function,处理Event Hub中的数据.当部署到Azure Function App后,函数无法执行,查看 Function 日志出现 Valu ...

  6. 【Azure Spring Cloud】Spring Cloud Azure 4.0 调用Key Vault遇见认证错误 AADSTS90002: Tenant not found.

    问题描述 Spring Cloud Azure 4.0 调用 Key Vault 的代码中,没有找到设置 authority-host 的配置项,导致认证出现错误 Caused by: com.mic ...

  7. 【Azure 应用服务】Azure Function在执行Function的时候，如果失败了，是否可以重试呢？

    问题描述 Azure Function在执行Function的时候,如果失败了,是否可以重试呢? 问题解答 Function app默认是不开启重试的,但是可以修改 host.json 文件来定义重试 ...

  8. flutter3-winchat桌面端聊天实例|Flutter3+Dart3+Getx仿微信Exe程序

    首发原创flutter3+bitsdojo_window+getx客户端仿微信exe聊天Flutter-WinChat. flutter3-dart3-winchat 基于flutter3+dart3 ...

  9. 如何避免MYSQL主从延迟带来的读写问题？

    在MYSQL 部署架构选型上,许多公司都会用到主从读写分离的架构,如下是一个一主一从的架构,主库master负责写入,从库slave进行读取. 但是既然是读写分离,必然会面临这样一个问题,当在主库上进 ...

  10. uni-app实现公众号登陆实现

    公众号实现登陆流程思路: 1. 创建一个页面用于登陆,页面上需要有输入账号和密码的表单,以及登陆按钮.2. 在登陆按钮的点击事件中,调用后端接口进行账号密码校验.如果校验通过,则将后端返回的用户信息保 ...