摘要：這是一段內(nèi)容標(biāo)題名稱確定點(diǎn)擊確定后的回調(diào)函數(shù)確認(rèn)消息彈框提示用戶確認(rèn)其已經(jīng)觸發(fā)的動(dòng)作，并詢問是否進(jìn)行此操作時(shí)會(huì)用到此對(duì)話框。。

F:Test>vue init webpack Test1
? Project name test1
? Project description A Vue.js project
? Author Selience <*********@qq.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
 vue-cli · Generated "Test1".

版本說明vue: ^2.5.2     webpack: ^3.6.0,

cd Test1
npm run dev

npm install --save element-ui

有時(shí)候項(xiàng)目中只用到ElementUI中的幾個(gè)組件，全局引入會(huì)增加項(xiàng)目體積，所以按需引入更合適

在main.js中引入并注冊(cè)組件

import Vue from "vue";
//引入按鈕組件（Button）和下拉選擇器組件（Select）
import { Button, Select } from "element-ui";
import App from "./App.vue";
//注意：樣式文件需要多帶帶引入
import "element-ui/lib/theme-chalk/index.css";
//將引入的組件注冊(cè)為全局Vue組件
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

/* 或?qū)憺? * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: "#app",
  render: h => h(App)
});

在上面，我們已經(jīng)將Elementui組件注冊(cè)為了Vue組件，就可以在Vue頁(yè)面中使用組件，但是，需要注意的是，樣式文件需要多帶帶引入，上面已經(jīng)引入了樣式文件，下面我們就在Vue頁(yè)面中使用一下吧！

在app.vue中按照官網(wǎng)的例子使用按鈕組件

其他組件基本與上面引入方法類似，不過也有區(qū)別，官網(wǎng)也有介紹，大部分組件都是以import { XXXX } from "element-ui"的方式引入，然后以Vue.component(XXX.name, XXX);或者Vue.use(XXX)的方式注冊(cè)，當(dāng)然也有例外，

在main.js引入

import {  Message } from "element-ui

在main.js注冊(cè)，這里是掛在在Vue原型上的

Vue.prototype.$message = Message;

使用

這一系列彈窗都依賴于MessageBox組件

在main.js引入

import {  MessageBox } from "element-ui"

在main.js注冊(cè)，這里都是掛在在Vue原型上的

Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;

消息提示彈框--當(dāng)用戶進(jìn)行操作時(shí)會(huì)被觸發(fā)，該對(duì)話框中斷用戶操作，直到用戶確認(rèn)知曉后才可關(guān)閉。

 clickBtn:function(){
      this.$alert("這是一段內(nèi)容", "標(biāo)題名稱", {
          confirmButtonText: "確定",
          //點(diǎn)擊確定后的回調(diào)函數(shù)
          callback: action => {
         
          }
      });
    }

確認(rèn)消息彈框--提示用戶確認(rèn)其已經(jīng)觸發(fā)的動(dòng)作，并詢問是否進(jìn)行此操作時(shí)會(huì)用到此對(duì)話框。。

 clickBtn:function(){
      this.$confirm("這是用戶提示語(yǔ)", "這是標(biāo)題", {
          //確定按鈕文本
          confirmButtonText: "確定",
          //取消按鈕文本
          cancelButtonText: "取消",
          //彈框類型（success、error、info）
          type: "warning"
        })
        //點(diǎn)擊確定后的回調(diào)函數(shù)
        .then(() => {     })
        // 點(diǎn)擊取消后的回調(diào)函數(shù)
        .catch(() => {     });
    }

提交內(nèi)容彈框--當(dāng)用戶進(jìn)行操作時(shí)會(huì)被觸發(fā)，中斷用戶操作，提示用戶進(jìn)行輸入的對(duì)話框

 clickBtn:function(){
      this.$prompt("提示語(yǔ)", "標(biāo)題", {
          confirmButtonText: "確定",
          cancelButtonText: "取消",
        })
        //確定回調(diào)函數(shù)
        .then(() => { })
        //取消回調(diào)函數(shù)
        .catch(() => { });
    }

彈框--可自定義配置不同內(nèi)容。

 clickBtn:function(){
      this.$msgbox({
          title: "標(biāo)題",
          message: "提示信息",
          // 彈框類型
          type:"error",
          //右上角是否顯示關(guān)閉按鈕
          showCancelButton: true,     
          confirmButtonText: "確定",
          cancelButtonText: "取消",
          //彈窗關(guān)閉前回調(diào)函數(shù)
          beforeClose: (action, instance, done) => {   }
        })
        //確定回調(diào)函數(shù)
        .then(action => { });
    }

當(dāng)然以上航都是比較簡(jiǎn)單的例子，還有以HTML片段為彈出內(nèi)容的，還有這種屬性和方法已經(jīng)周期函數(shù)，更多用法請(qǐng)參考ElementUI官網(wǎng)

2019.07.20更新：之前在按需引入elementui的時(shí)候，沒有注意到官網(wǎng)的介紹，漏了一部分

雖然漏了上面那部分，沒有使用babel-plugin-component插件，但是按需引入的組件也可正常使用，這我就郁悶了，難道是因?yàn)檫@是針對(duì)3.0的？但是我又把官網(wǎng)文檔調(diào)到2.0版本的，還是這么介紹的，emmmmmm..........,后又一想，既然按需引入是為了減小體積，那會(huì)不會(huì)是這個(gè)babel-plugin-component是打包的時(shí)候才按需打包引入組件的資源，在npm run dev時(shí)是看不出效果的，于是，實(shí)驗(yàn)了一下

首先下載babel-plugin-component插件

npm install babel-plugin-component --dev

配置.babelrc文件，這里注意不要直接復(fù)制官網(wǎng)的配置覆蓋原有配置，正確的做法是將官網(wǎng)配置添加到原有配置,配置完后記得重啟項(xiàng)目哦

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    //添加如下部分
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

打包

可以看到大小差別還是很大的

當(dāng)我們?cè)陧?xiàng)目使用ElementUI組件比較多時(shí)，就可以全局引入，方便省事兒

在main.js中添加以下代碼全局引入

//引入elementui
import ElementUI from "element-ui"
//樣式需要多帶帶引入
import "element-ui/lib/theme-chalk/index.css"
//掛載
Vue.use(ElementUI)

在app.vue中

相比按需引入，全局引入確實(shí)方便很多