引言
在当今快速发展的前端开发领域,用户界面的设计和交互体验日益成为软件成功的关键因素之一。Element UI,作为一款基于Vue.js的组件库,以其精美的界面和丰富的功能受到了广泛的关注与应用。它为开发者提供了一整套高质量的组件,帮助他们快速构建具有现代感的应用程序。
Element UI不仅注重美观的设计,还提供了良好的文档支持和社区活跃度,使得开发者能够轻松上手并解决实施过程中的各种问题。在这篇文章中,我们将深入探讨Element UI的基本特点、安装步骤,以及如何利用其强大的组件系统高效地构建用户友好的界面。无论您是初学者还是有经验的开发者,这篇文章都将为您开辟一条通向更高效开发的道路。
安装
安装
在cmd中也可以
yarn add element-ui npm i element-ul --save
引用
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
卸载
npm unstall element-ui
如果您使用 Volar,请在 jsconfig.json
中通过 compilerOptions.type
指定全局组件类型。
// tsconfig.json { "compilerOptions": { // ... "types": ["element-plus/global"] } }
第一个简单使用
第一个简单的使用 ```HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-button @click="visible = true">按钮</el-button> <el-dialog :visible.sync="visible" title="Hello world"> <p>欢迎使用 Element</p> </el-dialog> </div> </body> <!-- 先引入 Vue --> <script src="./vue.js"></script> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function () { return { visible: false } } }) </script> </html> ```
引入和使用
yarn add element-ui
下载完成以后,在main.js 里面注册使用
import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false // Vue.use() .... 全局使用 Vue.use(ElementUI) new Vue({ render: h => h(App), }).$mount('#app') import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.use(ElementUI); new Vue({ router, render: h => h(App) }).$mount('#app')
app.vue
<template> <div> <!-- 因为template里面只能有一个根元素,官方这里拷过来以后在外面加了一层div标签包起来 --> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio> </div> </template> <script> export default { data() { return { radio: "1" }; } }; </script>
提示信息
this.$message({ message: "delete successfully", type: "success" })
this.$message.warning("hello,world!");
折叠菜单
<template> <!-- 设置高度为 100% --> <el-container style="height: 100%;"> <el-aside 动态 显示 宽度 :width="sideWidth + 'px'" background style="background-color: rgb(249, 250, 252)"> <el-menu :default-openeds="['1']" 高度设置为100% style="height: 100%; 横坐标 超出 hidden overflow-x: hidden;" text-color="#fff" background-color="rgb(35, 38, 44)" 正在活动 的 导航 颜色 active-text-color="#ffd04b" 动画关闭 :collapse-transition="false" menu 的 绑定 显示和不 显示 :collapse="isCollapse"> <!-- 在 el-menu 下面 --> 创建一个 头部的 导航 <div style="height: 60px; line-height: 60px; text-align: center;"> <img src="@/assets/logo.png" style="width: 20px; position: relative; top:5px;margin-right:8px"> 文字绑定 显示和 不显示 <b style="color:white" v-show="logoTextShow">后台管理系统</b> </div>
<script> export default { data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { // 填满 tableData: Array(10).fill(item), // 收缩按钮的名称 collapseBtnClass: 'el-icon-s-fold', // open and close isCollapse: false, sideWidth: 200, logoTextShow: true, } }, methods: { switchMenu() { // 点击 取反 this.isCollapse = !this.isCollapse // 如果 为真 则 点击 之后 if (this.isCollapse) { // 宽度设置为 64 this.sideWidth = 64; // 点击 图标 的 改变 this.collapseBtnClass = 'el-icon-s-unfold' // 文字显示 与 不显示 this.logoTextShow = false } else { this.sideWidth = 200; this.collapseBtnClass = 'el-icon-s-fold' this.logoTextShow = true } } } }; </script>
表单验证
添加 prop <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="姓名" :label-width="formLabelWidth" prop="stuName"> <el-input v-model="form.stuName" autocomplete="off"></el-input> </el-form-item>
rules
rules: { stuName: [ { required: true, message: "请输入姓名", trigger: "blur" }, ],
方法
add() { this.$refs.form.validate(valid => { if (valid) { addStu(this.form).then((res) => { if (res) { this.$message.success("添加成功") } else { this.$message.error("添加失败") } }) } }) },
自己写 验证方法
绑定
1 为男,0 为女
<el-table-column label="Sex" prop="stuSex" :formatter="(row) => row.stuSex == 1 ? '男' : '女'"> </el-table-column>
引入使用
```Plain Text import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.use(ElementUI); new Vue({ router, render: h => h(App) }).$mount('#app') ```
绑定一些属性
<el-dialog v-model="dialogFormVisible" :title="state ? '添加学生信息': '修改学生信息'" width="600px" ref="qwe">
很多属性
// span 可以改变 属性多少 <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row>
输入框
clearable> 可清楚 show-password 密码框 suffix-icon="el-icon-date" 和 prefix-icon
标签
closable <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type"> {{tag.name}} </el-tag>
一些操作
过滤实现
const getData = (params) => { students(params).then(res => { if (res.data.status === 200) { total = res.data.total tableData.value = res.data.data tableData.value.forEach(item => { // 一般不修改 原数据, 用 另一个变量 来 代替 // i =1 ? true (则为这个) : (否则为这个) // i =1 ? true (则为这个) : 否则 i==2 ? true : false // item.sex === 1 ? item.sex_text = '女' : item.sex_text = '男'; item.state === "1" ? item.state_text = '已入学' : item.state === "2" ? item.state_text = '未入学' : item.state_text = '休学中' }) } }) }
el-table的使用
加在 el-table 属性里面 @row-click=handleRow 点击每行 可以控制输出每行 的 数据 stripe 加 上之后会有 条纹 border 加上 有表格 排序 :default-sort = "{prop: 'date', order: 'descending'}" desc asc :format
el-table-cloumn
可在里面加图标 <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.date }}</span> </template> 鼠标移入得到更多的信息 <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.date }}</span> </template>
formatter
在 需要 绑定的数据 上 绑定 :formatter=test(row) test(row){ conso.log(row) if(row.status==0){ return "未处理") ....
懒加载
<el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
深度样式
>>>
如果项目style使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改
::v-deep在预处理器 scss 、sass、less 比较通用
<style scoped> /*编译前*/ .a{ ::v-deep .b { color:blue } } .a ::v-deep .b { color:blue } /*编译后*/ .a[data-v-fsdfg9] .b { color:blue} </style>
.a{ ::v-deep .b{ width: 300px; border:4px solid red; } }