elementUi——适合于Vue的UI框架
简介
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')
}
- 点赞
- 收藏
- 关注作者
评论(0)