這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 在ElementUI的世界中，不僅有基礎的組件和功能，還有一些讓你眼前一亮、*得不能再*的高級技巧和竅門。本文將揭示這些技巧，讓你在前端開發的舞臺上獨領風騷。無論你是一個勇敢的創新者還是一個喜歡調皮搗蛋的開發者，這些技巧都將讓你的Elem ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
在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
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
