最近作pc端業務用到了element-ui組件庫,從引入到組件改造作個總結
Element,一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫,整個ui風格簡約,很實用,使用demo組件能夠快速實現體驗交互細節,快速開發css
1.安裝,推薦npm方式安裝vue
npm i element-ui -S
2.引入git
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);github
因爲業務的風格跟默認的顏色不同,我採用了自定義主題,選擇色號生成,在線生成工具(https://elementui.github.io/t...)能夠很方便地實時預覽主題色改變以後的視覺,同時它還能夠基於新的主題色生成完整的樣式文件包,供直接下載使用,在vue的入口js裏直接引入主題樣式element-variables.cssnpm
import '@/style/theme/element-variables.scss' import { Message, MessageBox, Loading } from 'element-ui' Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service Vue.prototype.$msgbox = MessageBox Vue.prototype.$alert = MessageBox.alert Vue.prototype.$confirm = MessageBox.confirm Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$message = Message
3.組件使用element-ui
$msgbox(options)
$alert(message, title, options) 或 $alert(message, options)
$confirm(message, title, options) 或 $confirm(message, options)
$prompt(message, title, options) 或 $prompt(message, options)app
具體使用:函數
3.2 官網提供的dialog組件支持內容區更豐富的寫法,dialog彈出一個對話框,適合須要定製性更大的場景。工具
官網寫法:ui
這是最基礎的使用,在這個基礎上我作了個封裝,將取消,肯定函數掛在組件回調函數上,而且標題,寬度,顯隱值都經過屬性傳遞,能夠讓父組件引用較少的代碼
父組件:
/* * 彈窗組件說明 * @param {object} dialogData: title-標題, width-寬度, dialogVisible-彈窗顯隱狀態 * @param {function} callback: 點肯定位置的回調函數 * @param {function} closeDialog: 彈窗關閉的回調函數 * 示例: <OPdialog :dialog-data="dialoginfo" @callback="callback(item.taskinfo.taskDetail.taskid)" @closeDialog="closeDialog"/> */ <OPdialog :dialog-data="dialoginfo" @callback="callback(item.taskinfo.taskDetail.taskid)" @closeDialog="closeDialog"/>
子組件:
<template> <div> <el-dialog v-if="dialogData.dialogtype=='confirm'" :visible.sync="dialogData.dialogVisible" :modal-append-to-body="false" :close-on-click-modal="false" :width="dialogData.width" top="33vh" center @close="closeDialog"> <p class="dialog-body">{{ dialogData.title }}</p> <span slot="footer" class="dialog-footer"> <el-button size="medium" type="primary" @click="ok()">肯定</el-button> <el-button size="medium" @click="dialogData.dialogVisible = false">取 消</el-button> </span> </el-dialog> </div> </template>