ElementUI 修改cdn引入的類庫的全局配置的默認屬性

任務是修改餓了麼的彈窗的默認遮罩爲不關閉。

一、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);

打印結果如下：