簡介
element-ui是一個ui庫，它不依賴于vue，但是卻是當前和vue配合做專案開發的一個比較好的ui框架，
npm 安裝
推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用，
npm i element-ui -S
引入 Element
你可以引入整個 Element，或是根據需要僅引入部分組件，我們先介紹如何引入完整的 Element，
完整引入
在 main.js 中寫入以下內容：
import Vue from ‘vue’;
import ElementUI from ‘element-ui’; //引入Element ui
import ‘element-ui/lib/theme-chalk/index.css’;
import App from ‘./App.vue’;
Vue.use(ElementUI); //掛載
new Vue({
el: ‘#app’,
render: h => h(App)
});
按需引入
借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小專案體積的目的，
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然后，將 .babelrc 修改為：(此處.babelrc在VScode中變更為babel.config.js)
{
“presets”: [[“es2015”, { “modules”: false }]],
“plugins”: [
[
“component”,
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-chalk”}
]
]
}
Layout 布局:
新建一個檔案layout.js
<template>
<div>
<el-row>
<el-col :span="6"><div class="content">11111111111</div></el-col>
<el-col :span="6"><div class="content">2222222222222</div></el-col>
<el-col :span="6"><div class="content">333333333333</div></el-col>
<el-col :span="6"><div class="content">4444444444</div></el-col>
</el-row>
</div>
</template>
<script>
export default {};
</script>
// scoped 表示只在當前頁面生效
<style scoped>
.content {
background-color: chartreuse;
}
</style>
在router.js中引入layout.js
結果：
對話框
在保留當前頁面狀態的情況下，告知用戶并承載相關操作，
基本用法
Dialog彈出一個選項，適合需要定制性以上的場景，
新建Dialog.vue
<template>
<div>
<el-button type="text" @click="dialogVisible = true"
>點擊打開 Dialog</el-button
>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<span>這是一段資訊</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>確 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
handleClose(done) {
this.$confirm("確認關閉？")
.then((_) => {
done();
})
.catch((_) => {});
},
},
};
</script>
<style lang="scss" scoped>
</style>
在router.js中 添加加載
{
path: '/dialog',
component: () => import('./element/Dialog')
}
結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/273735.html
標籤：其他
下一篇：面試題