修改element-ui的全局配置
项目因使用qiankun嵌入了子项目，且都使用了
element-ui的弹窗样式，遂导致子应用中插入到父应用body的弹窗因层级过低无法展示
配置信息
因element-ui的弹窗默的z-index层级默认是从2000开始的，并且打开多个弹窗时z-index会逐步递增，所以若主子应用不做区分的话，很可能会导致有的弹窗被遮挡
好在element提供了入口可将全局的弹窗层级设置一个起始值，即只需将子应用的层级初始值调高即可
1 | // 在main.ts中 |
祝君无Bug~
All articles on this blog are licensed under CC BY-NC-SA 4.0 unless otherwise stated.
Related Articles
2021-05-27
【个人开源】Vue3 轮播组件: v3-carousel
引水方知开源不易 与朋友首次开源了一个轮播插件，希望大家积极品尝 介绍基于 vue3 composition api 编写的轮播插件，多种属性适配，轮播内容 可完全自定义，基本可以满足大部分的轮播需求。 基本功能介绍： 是否开启自动轮播，自定义轮播时间 鼠标移入后暂停轮播，鼠标移出后重置轮播 点击 左侧/右侧 切换按钮，手动切换 点击 底部轮播指示器，手动切换 切换按钮 与 轮播指示器，可设置 hover 展示 左侧切换向左滚动，右侧切换向右滚动 … 在线Demo：正在制作… 安装1npm install v3-carousel or 1yarn add v3-carousel 使用main.js 123456import { createApp } from "vue";import App from "./App.vue";import Carousel from "v3-carousel"; // 引入const app =...
2021-07-05
Vue源码解读（知识点总结）
为了方便自己对知识点的巩固和理解，整理了李永宁大佬 12 篇《Vue源码解读》的文末知识点总结，在这里可以一览天下。如果想看详细文章，可点击标题下方的“阅读原文”即可。 （1）前言阅读原文 （2）Vue 初始化过程阅读原文 Vue 的初始化过程（new Vue(options)）都做了什么？ 处理组件配置项 初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上 初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率 初始化组件实例的关系属性，比如 $parent、$children、$root、$refs 等 处理自定义事件 调用 beforeCreate 钩子函数 初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 实例上 数据响应式，处理 props、methods、data、computed、watch 等选项 解析组件配置项上的 provide 对象，将其挂载到...
2021-02-06
viewerjs查看大图组件
因为项目没有使用element-ui，所以不能使用自带的el-image组件进行大图查看，遂找了一个单独的组件 安装1npm install viewerjs 使用案例12345678910111213<!-- 单个图片查看 --><div> <img id="image" src="picture.jpg" alt="Picture"></div><!-- 多个图片查看 --><div> <ul id="images"> <li><img src="picture-1.jpg" alt="Picture 1"></li> <li><img src="picture-2.jpg" alt="Picture 2"></li> ...
2020-12-27
vue3的生命周期钩子
vue3的生命周期钩子与vue2的差不多，只是命名和调用上有一些诧异，详见下文 与 2.x 版本生命周期相对应的 Composition API Vue 2.x Vue 3.x beforeCreate 改用 setup() created 改用 setup() beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeDestroy onBeforeUnmount destroyed onUnmounted errorCaptured onErrorCaptured 新增的钩子函数除了和 2.x 生命周期等效项之外，Composition API 还提供了以下调试钩子函数： onRenderTracked onRenderTriggered 祝君无Bug~
2020-11-07
中央事件总线插件vue-bus-ts
项目中难免会遇到非父子组件之间的传参与通信问题，遂整理此文。 简介vue-bus-ts 是一款支持在ts环境下使用的全局事件总线插件。 安装及使用方法安装1npm i -S vue-bus-ts 注册安装后需要在main.ts中引入并注册，挂载到全局的Vue实例上即可 123456789101112# main.tsimport Vue from 'vue';import EventBus from 'vue-bus-ts';Vue.use(EventBus);var bus = new EventBus.Bus();new Vue({ bus, render: (h) => h(App),}).$mount('#app'); 注册事件在调用事件前，需要实现注册该事件，否则不会生效 一般写在vue文件的mounted或者created生命周期中 123456# *.vue var eventId = this.$bus.$on('event_name',...
2021-03-08
加载聊天历史记录并保留滚动条当前位置
在聊天框中，加载历史消息肯定是往消息的上面去加载，即对应数组的Array.unshift()操作，此时默认滚动条会回到顶部，所以我们需要重置滚动条的位置 Vue中代码实现首先记录加载历史前，滚动条的位置scrollHeight 1const scrollHeight: number = (document as any).getElementById('messageBox').scrollHeight; 加载历史消息 1234for (let i = 0; i < outMsg.list.length; i++) { // todo sth, ex: 消息处理 activeList.unshift(list[i]);} 滚动到原来的位置 注：因为我是在vue环境下，需要确保页面已经渲染完，再滚动到加载前的位置，所以使用Vue.nextTick() 1234nextTick(() => { const scrollDom: any = (document as...
