element-ui如何使用

最近作pc端業務用到了element-ui組件庫，從引入到組件改造作個總結

Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫，整個ui風格簡約，很實用，使用demo組件能夠快速實現體驗交互細節，快速開發

1.安裝，推薦npm方式安裝

npm i element-ui -S

2.引入

• 2.1全局引入，會把組件庫裏全部的組件和css引入

  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI);

• 2.2局部引入（推薦）

因爲業務的風格跟默認的顏色不同，我採用了自定義主題，選擇色號生成，在線生成工具（https://elementui.github.io/t...）能夠很方便地實時預覽主題色改變以後的視覺，同時它還能夠基於新的主題色生成完整的樣式文件包，供直接下載使用，在vue的入口js裏直接引入主題樣式element-variables.css

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.組件使用

• 3.1像message。messagebox彈窗組件是直接掛載全局，所以在 Vue instance 中能夠採用本頁面中的方式調用 MessageBox。調用參數爲：

  $msgbox(options)
  $alert(message, title, options) 或 $alert(message, options)
  $confirm(message, title, options) 或 $confirm(message, options)
  $prompt(message, title, options) 或 $prompt(message, options)

具體使用：

3.2 官網提供的dialog組件支持內容區更豐富的寫法，dialog彈出一個對話框，適合須要定製性更大的場景。

官網寫法：

這是最基礎的使用，在這個基礎上我作了個封裝，將取消，肯定函數掛在組件回調函數上，而且標題，寬度，顯隱值都經過屬性傳遞，能夠讓父組件引用較少的代碼
父組件：

/*
 * 彈窗組件說明
 * @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>