摘要:這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作,并詢問是否進行此操作時會用到此對話框。。
初始化一個Vue項目
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,啟動Vue項目
cd Test1 npm run dev下載ElementUI
npm install --save element-ui按需引入ElementUI
有時候項目中只用到ElementUI中的幾個組件,全局引入會增加項目體積,所以按需引入更合適引入
在main.js中引入并注冊組件
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"; //將引入的組件注冊為全局Vue組件 Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或寫為 * Vue.use(Button) * Vue.use(Select) */ new Vue({ el: "#app", render: h => h(App) });使用
在上面,我們已經將Elementui組件注冊為了Vue組件,就可以在Vue頁面中使用組件,但是,需要注意的是,樣式文件需要多帶帶引入,上面已經引入了樣式文件,下面我們就在Vue頁面中使用一下吧!
在app.vue中按照官網的例子使用按鈕組件
主要按鈕 成功按鈕 信息按鈕 警告按鈕 危險按鈕
其他組件基本與上面引入方法類似,不過也有區別,官網也有介紹,大部分組件都是以import { XXXX } from "element-ui"的方式引入,然后以Vue.component(XXX.name, XXX);或者Vue.use(XXX)的方式注冊,當然也有例外,例如:Message消息提示組件
在main.js引入
import { Message } from "element-ui
在main.js注冊,這里是掛在在Vue原型上的
Vue.prototype.$message = Message;
使用
例如:MessageBox系列彈框主要按鈕
這一系列彈窗都依賴于MessageBox組件
在main.js引入
import { MessageBox } from "element-ui"
在main.js注冊,這里都是掛在在Vue原型上的
Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt;
消息提示彈框--當用戶進行操作時會被觸發,該對話框中斷用戶操作,直到用戶確認知曉后才可關閉。
clickBtn:function(){ this.$alert("這是一段內容", "標題名稱", { confirmButtonText: "確定", //點擊確定后的回調函數 callback: action => { } }); }
確認消息彈框--提示用戶確認其已經觸發的動作,并詢問是否進行此操作時會用到此對話框。。
clickBtn:function(){ this.$confirm("這是用戶提示語", "這是標題", { //確定按鈕文本 confirmButtonText: "確定", //取消按鈕文本 cancelButtonText: "取消", //彈框類型(success、error、info) type: "warning" }) //點擊確定后的回調函數 .then(() => { }) // 點擊取消后的回調函數 .catch(() => { }); }
提交內容彈框--當用戶進行操作時會被觸發,中斷用戶操作,提示用戶進行輸入的對話框
clickBtn:function(){ this.$prompt("提示語", "標題", { confirmButtonText: "確定", cancelButtonText: "取消", }) //確定回調函數 .then(() => { }) //取消回調函數 .catch(() => { }); }
彈框--可自定義配置不同內容。
clickBtn:function(){ this.$msgbox({ title: "標題", message: "提示信息", // 彈框類型 type:"error", //右上角是否顯示關閉按鈕 showCancelButton: true, confirmButtonText: "確定", cancelButtonText: "取消", //彈窗關閉前回調函數 beforeClose: (action, instance, done) => { } }) //確定回調函數 .then(action => { }); }
當然以上航都是比較簡單的例子,還有以HTML片段為彈出內容的,還有這種屬性和方法已經周期函數,更多用法請參考ElementUI官網注意點
2019.07.20更新:之前在按需引入elementui的時候,沒有注意到官網的介紹,漏了一部分
雖然漏了上面那部分,沒有使用babel-plugin-component插件,但是按需引入的組件也可正常使用,這我就郁悶了,難道是因為這是針對3.0的?但是我又把官網文檔調到2.0版本的,還是這么介紹的,emmmmmm..........,后又一想,既然按需引入是為了減小體積,那會不會是這個babel-plugin-component是打包的時候才按需打包引入組件的資源,在npm run dev時是看不出效果的,于是,實驗了一下不使用babel-plugin-component插件打包 使用babel-plugin-component插件打包
首先下載babel-plugin-component插件
npm install babel-plugin-component --dev
配置.babelrc文件,這里注意不要直接復制官網的配置覆蓋原有配置,正確的做法是將官網配置添加到原有配置,配置完后記得重啟項目哦
{ "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" } ] ] }
打包
可以看到大小差別還是很大的全局引入
當我們在項目使用ElementUI組件比較多時,就可以全局引入,方便省事兒引入
在main.js中添加以下代碼全局引入
//引入elementui import ElementUI from "element-ui" //樣式需要多帶帶引入 import "element-ui/lib/theme-chalk/index.css" //掛載 Vue.use(ElementUI)使用
在app.vue中
主要按鈕
相比按需引入,全局引入確實方便很多
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114908.html
摘要:這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作,并詢問是否進行此操作時會用到此對話框。。 初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...
摘要:這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作,并詢問是否進行此操作時會用到此對話框。。 初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...
摘要:個人博客同步文章前提已經安裝好初始化運行初始化運行一下初始后的,如果沒有問題則進行安裝安裝引入在中引入測試下面我們來測試一下在創建文件,復制一段的代碼處理中心我的工作臺選項選項選項訂單管理在中引入效果 個人博客同步文章 https://mr-houzi.com/2018/02/... 前提:已經安裝好Vue 初始化vue vue init webpack itemname 運行初始化...
摘要:個人博客同步文章前提已經安裝好初始化運行初始化運行一下初始后的,如果沒有問題則進行安裝安裝引入在中引入測試下面我們來測試一下在創建文件,復制一段的代碼處理中心我的工作臺選項選項選項訂單管理在中引入效果 個人博客同步文章 https://mr-houzi.com/2018/02/... 前提:已經安裝好Vue 初始化vue vue init webpack itemname 運行初始化...
閱讀 4913·2023-04-25 18:47
閱讀 2673·2021-11-19 11:33
閱讀 3445·2021-11-11 16:54
閱讀 3101·2021-10-26 09:50
閱讀 2540·2021-10-14 09:43
閱讀 665·2021-09-03 10:47
閱讀 671·2019-08-30 15:54
閱讀 1498·2019-08-30 15:44