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

在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. linux下进行MCU开发环境搭建

    why 为什么要搭建此开发环境? 在linux环境下开发可以利用shell命令实现对文件的批处理 伟大的程序员应该都用类unix系统! 可以实现对底层编译技术的了解,以便于更好的掌握嵌入式技术 通用性 ...

  2. NVM Feature— Reservation(NVME 学习笔记五)

    8.8 Reservations 预订 NVMe的reservation预订功能,用于让两个或多个主机能够协调配合的访问共享namespace.使用这些功能的协议和方式超出了本规格说明书的范围.对这些 ...

  3. 【Unity3D】场景切换、全屏_恢复切换、退出游戏、截屏

    1 前言 ​ 1)场景切换 ​ 场景切换可以使用 SceneManager 的 LoadScene 和 LoadSceneAsync 方法,如下: public static void LoadSce ...

  4. Vue实现简单图书管理例子

    以下内容整理自网络. 说明 本例主要涵盖以下知识点: 数据绑定 条件与循环 计算属性 监听器 过滤器 常见数组和对象操作 vue生命周期 示例演示 代码 <!DOCTYPE html> & ...

  5. 使用@ControllerAdvice统一处理自定义异常

    最近工作中涉及到捕捉AOP方法中抛出的异常. 想针对某一种异常做一个统一的处理器并封装好异常信息以JSON格式交给前端进行提示. 主要实现的话有以下几步: 1.编写自定义异常类 package com ...

  6. 对yuv存储格式中的yuv420p和yuv420sp的理解

    一.对yuv的认识 yuv是一种颜色编码系统,它将图像的亮度和色度分离开来.y表示亮度,即黑白信息:uv表示色度,即颜色信息.yuv常用于视频压缩和传输中,因为它可以更有效地表示人眼对亮度和色度的敏感 ...

  7. 实操开源版全栈测试工具RunnerGo安装（四）Windows安装

    以windows 10系统为例 视频教程:https://www.bilibili.com/video/BV14H4y1C71u/?spm_id_from=333.999.0.0 1.设置手动进入系统 ...

  8. C++检测句柄的权限

    主要是依靠NtQueryObject函数,其中需要传入ObjectBasicInformation参数 PUBLIC_OBJECT_BASIC_INFORMATION结构包含可用于对象的全部信息的子集 ...

  9. Golang gRPC学习(05): retry重试

    什么是重试 如果服务出现了错误,主要是网络,服务器出现了短暂异常的时候,该怎么办? 我们都会人工或者自动的重新连接服务试试,看服务是否恢复可用了. 这种重新进行连接服务的一种方式就是重试.如果是在微服 ...

  10. 本地启动RocketMQ未映射主机名产生的超时问题

    问题描述 参考RocketMQ官方文档在本地启动一个验证环境的时候遇到超时报错问题. 本地环境OS:CentOS Linux release 8.5.2111 首先,进入到RocketMQ安装目录,如 ...