欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element修改彈窗類組件的層級的實現(xiàn)

 更新時間：2022年04月19日 08:33:24   作者：！win?！  
本文主要介紹了Element修改彈窗類組件的層級的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前情

Element，一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫，在項目中我們就使用了它，非常nice

坑位

在使用Element組件的時候，一切都十分順利，但是在使用彈框類組件Popover 的時候，發(fā)現(xiàn)并沒有效果。

Why?

通過控制臺查看元素后發(fā)現(xiàn)，其實Popover是有作用的，只是被頁面上別的內(nèi)容遮擋了，是因為zIndex低于頁面上其它元素所致

解決方案

通過查詢Element文擋后發(fā)現(xiàn)官方是有考慮到層級問題，需要指定一個初始層級，后面的彈框類組件的層級會累加+1，這樣就保證后面觸發(fā)的層級始終高于前面的組件。

Element初始化時重置層級

Element組件使用有二種方式，對于不同的使用方式解決方式不同。

完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

按需引入Element:

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

官方文擋-全局配置項：https://element.eleme.cn/#/zh-CN/component/quickstart

如果Element已經(jīng)初始化且已使用過彈框類組件

這種情況下通過修改Vue.prototype.$ELEMENT已經(jīng)沒有效果了，因為它已經(jīng)被使用過，這時需要手動修改，后面彈窗的組件會在此值的基礎(chǔ)上累加，代碼如下：

import PopupManager from "element-ui/lib/utils/popup/popup-manager";
PopupManager.zIndex = 30000;

 到此這篇關(guān)于Element修改彈窗類組件的層級的實現(xiàn)的文章就介紹到這了,更多相關(guān)Element 彈窗類層級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue?this.$refs.xxx報錯undefined問題及解決

    vue?this.$refs.xxx報錯undefined問題及解決

    這篇文章主要介紹了vue?this.$refs.xxx報錯undefined問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))

    Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))

    本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • 前端使用print.js實現(xiàn)打印功能(基于vue)

    前端使用print.js實現(xiàn)打印功能(基于vue)

    最近新接了一個需求,想要在前端實現(xiàn)打印功能,下面這篇文章主要給大家介紹了關(guān)于前端使用print.js實現(xiàn)打印功能(基于vue)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • Vue-cli中為單獨頁面設(shè)置背景色的實現(xiàn)方法

    Vue-cli中為單獨頁面設(shè)置背景色的實現(xiàn)方法

    下面小編就為大家分享一篇Vue-cli中為單獨頁面設(shè)置背景色的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • Vue 列表上下過渡效果的實例代碼

    Vue 列表上下過渡效果的實例代碼

    最近有個需求，一個列表上下移動要有簡單過渡效果。本文通過實例代碼給大家介紹Vue 列表上下過渡效果,需要的朋友可以參考下
    2019-06-06
  • element使用自定義icon圖標(biāo)的詳細(xì)步驟

    element使用自定義icon圖標(biāo)的詳細(xì)步驟

    前端經(jīng)常會用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • Vue2.0 vue-source jsonp 跨域請求

    Vue2.0 vue-source jsonp 跨域請求

    這篇文章主要介紹了Vue2.0 vue-source jsonp 跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Vue表單輸入綁定的示例代碼

    Vue表單輸入綁定的示例代碼

    這篇文章主要介紹了Vue表單輸入綁定的示例代碼，本文使用v-model指令在表單input創(chuàng)建雙向數(shù)據(jù)綁定，非常具有實用價值，需要的朋友可以參考下
    2018-11-11
  • vue element table 表格請求后臺排序的方法

    vue element table 表格請求后臺排序的方法

    今天小編就為大家分享一篇vue element table 表格請求后臺排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue 實現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例

    vue 實現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例

    今天小編就為大家分享一篇vue 實現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評論