ElementUI 修改cdn引入的类库的全局配置的默认属性

最新推荐文章于 2025-03-01 16:29:10 发布

YICONGITSME

最新推荐文章于 2025-03-01 16:29:10 发布

阅读量3.5k

点赞数 1

分类专栏：前端开发 vue 文章标签： vue.js npm element cdn

本文链接：https://blog.youkuaiyun.com/qq_42114918/article/details/105536994

版权

前端开发同时被 2 个专栏收录

19 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍如何在使用Element UI的项目中，通过npm或CDN引入方式，全局修改Dialog对话框组件的默认行为，使其弹窗的遮罩点击不再关闭窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

任务是修改饿了么的弹窗的默认遮罩为不关闭。

一、npm引入

使用命令npm install element-ui -S 就可以安装好element-ui，然后在项目中通过以下方式引入：

就可以使用Element访问到Dialog对象，然后设置默认属性。

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
//全局修改默认配置
Element.Dialog.props.closeOnClickModal.default=false;
console.info(Element.Dialog);
Vue.use(Element)

二、CDN引入

（1）CDN引入步骤

我们项目的引入方式采用的就是这种。

webpack会对我们的项目进行打包，而像vue、element-ui、echarts、jquery这样的第三方库，占用了太多的空间和时间，所以为了优化加载速度，使用 CDN 的方式引入这些第三方库，能够大大增加构建速度，CDN也可以使用第三方服务如unpkg 。

引入的步骤为：

在template.js中添加cdn链接，如：

<!-- 引入样式 -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
<!-- 引入组件库 --> 
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

在webpack中配置externals，

webpack中的externals的作用就是让webpack在打包时排除这些文件，而去引用外部资源

其中jquery代表的是要引入的资源的名字，在项目中引用时的标识，window.$代表的是这个类库提供的标识。

   // 加载第三方类库
    externals: {
        jquery: 'window.$',
        'element-ui': '/^(lement|\$)$/i',
        vue: 'Vue',
        moment: 'window.moment'
    },

在项目中就可以使用以下的方式引入

import $ from "jquery"
import moment from "moment"
import Vue from 'vue'
import 'element-ui/lib/theme-default/index.css'

（2）修改全局配置

既然是使用cdn的方式引入的，那么element对象，就挂载到了window上，所以直接使用这个变量就可以。

一开始我使用Element，打印结果如下：发现不对

后来终于使用大写的ELEMENT变量才成功访问到element对象

查阅很多资料都没有发现为什么是大写的，后来在element的源码包里发现了暴露出的大写的ELEMENT

使用ELEMENT来设置Dialog的默认属性，就可以设置成功。

<script src="//cdn/element-ui-1.4.9.min.js"></script>
//全局修改默认配置
ELEMENT.Dialog.props.closeOnClickModal.default=false;
console.info(ELEMENT.Dialog);

打印结果如下：