element-ui如何使用

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

clipboard.png

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

1.安裝,推薦npm方式安裝vue

npm i element-ui -S

2.引入git

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

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

  • 2.2局部引入(推薦)

因爲業務的風格跟默認的顏色不同,我採用了自定義主題,選擇色號生成,在線生成工具(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

  • 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)app

具體使用:函數

msgbox
圖片描述

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>
相關文章
相關標籤/搜索