ElementUI
2021-11-08 14:48:32 0 举报AI智能生成
Vue UI库，ElementUI学习脉络，请收藏，持续更新
作者其他创作
大纲/内容
布局
布局容器
<el-container>
<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>
<el-header>
顶栏容器
<el-aside>
侧边栏容器
<el-main>
主要区域容器
<el-footer>
底栏容器
行列布局
基本方法
可以在App.vue里面采用
el-container
el-header
router-link
el-footer
的模式
el-container
el-header
router-link
el-footer
的模式
然后在不同的页面里面
可以选择
el-container
el-aside
el-main
来实现侧边栏
可以选择
el-container
el-aside
el-main
来实现侧边栏
导航
顶、侧菜单导航栏
el-menu
el-menu
实例vue文件 - personaldetails.vue
这个有点搞复杂了，用下面的tabs
但这个样式控制比较简单
这个有点搞复杂了，用下面的tabs
但这个样式控制比较简单
基本用途
一般用于各个板块结构不同的情况，一级路径
实例 - 非一级路径侧边栏
这个有点搞复杂了，用下面的tabs
但这个样式控制比较简单
这个有点搞复杂了，用下面的tabs
但这个样式控制比较简单
<template>
<div>
<el-header style="height: 50px;padding: 0px;">
<div class="personal-head">
<p1>个人中心</p1>
</div>
</el-header>
<el-contaier style="display: flex; flex-direction: row;">
<el-aside width="200px" style="padding-top: 50px;">
<el-menu :default-active="activeIndex" class="el-menu-demo" @select="handleSelect" background-color="transparent">
<router-link to="/personaldetails/myprofile">
<el-menu-item>
个人资料
</el-menu-item>
</router-link>
<router-link to="/personaldetails/mycourses">
<el-menu-item>
我的课程
</el-menu-item>
</router-link>
<router-link to="/personaldetails/myarticle">
<el-menu-item>
我的发帖
</el-menu-item>
</router-link>
</el-menu>
</el-aside>
<el-main style="padding-top: 50px;">
<router-view></router-view>
</el-main>
</el-contaier>
</div>
</template>
<div>
<el-header style="height: 50px;padding: 0px;">
<div class="personal-head">
<p1>个人中心</p1>
</div>
</el-header>
<el-contaier style="display: flex; flex-direction: row;">
<el-aside width="200px" style="padding-top: 50px;">
<el-menu :default-active="activeIndex" class="el-menu-demo" @select="handleSelect" background-color="transparent">
<router-link to="/personaldetails/myprofile">
<el-menu-item>
个人资料
</el-menu-item>
</router-link>
<router-link to="/personaldetails/mycourses">
<el-menu-item>
我的课程
</el-menu-item>
</router-link>
<router-link to="/personaldetails/myarticle">
<el-menu-item>
我的发帖
</el-menu-item>
</router-link>
</el-menu>
</el-aside>
<el-main style="padding-top: 50px;">
<router-view></router-view>
</el-main>
</el-contaier>
</div>
</template>
标签导航
el-tabs
el-tabs
参考资料
vue+element-ui Tab切换不同组件请求不同接口加载不同数据
基本用途
各个板块结构相似，数据不同
基本使用
用el-tab-pane包裹住组件
更改样式
参考资料
tabs.scss源码
tabs.css 文件
element 的el-tabs默认选中项改变背景颜色问题
侧边栏包裹框
.el-tabs__header{
padding-top: 30px;
padding-left: 15px;
position: relative;
margin: 0 0 15px
}
padding-top: 30px;
padding-left: 15px;
position: relative;
margin: 0 0 15px
}
实例 - 抽屉导航
参考资料
实例vue文件- NavBar.vue
代码实例
<template>
<el-row id="navbar">
<el-col :span="16" class="hidden-sm-and-down">
<el-menu :default-active="this.$store.state.activeIndex" class="el-menu-demo"
mode="horizontal"
text-color=#e3d9d7 active-text-color=#409EFF
id="nav-menu-large" @select="handleSelect">
<el-menu-item index="1">音乐史</el-menu-item>
<el-menu-item index="2">作词</el-menu-item>
<el-menu-item index="3">作曲</el-menu-item>
<el-menu-item index="4">混音</el-menu-item>
<el-menu-item index="5">乐器</el-menu-item>
<el-menu-item index="6">软件</el-menu-item>
<el-menu-item index="7">音源</el-menu-item>
<el-menu-item index="8">采样包</el-menu-item>
</el-menu>
</el-col>
<el-col :span="8" id="search-box-large" class="hidden-sm-and-down">
<el-input placeholder="请输入内容" v-model="input"
@keyup.enter.native="handleKeyword(input)"
style="width: 300px;">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="22" id="search-box-mobile" class="hidden-md-and-up">
<el-input placeholder="搜索文章" v-model="input"
@keyup.enter.native="handleKeyword(input)"
style="width: 300px;">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="2" class="hidden-md-and-up" id="mobile-search-switch">
<el-image
@click="drawer = true"
style="width: 30px; height: 20px"
:src="require('@/assets/side-menu-switch.png')"
fit="fill">
</el-image>
<el-drawer
title="板块分区"
:visible.sync="drawer"
:with-header="false"
style="background-color: rgba(0,0,0,0)"
>
<el-menu :default-active="this.$store.state.activeIndex"
class="el-menu-vertical-demo" mode="vertical"
style="background-color: rgba(0,0,0,0)"
@select="handleSelect">
<el-menu-item index="1">音乐史</el-menu-item>
<el-menu-item index="2">作词</el-menu-item>
<el-menu-item index="3">作曲</el-menu-item>
<el-menu-item index="4">混音</el-menu-item>
<el-menu-item index="5">乐器</el-menu-item>
<el-menu-item index="6">软件</el-menu-item>
<el-menu-item index="7">音源</el-menu-item>
<el-menu-item index="8">采样包</el-menu-item>
</el-menu>
</el-drawer>
</el-col>
</el-row>
</template>
<el-row id="navbar">
<el-col :span="16" class="hidden-sm-and-down">
<el-menu :default-active="this.$store.state.activeIndex" class="el-menu-demo"
mode="horizontal"
text-color=#e3d9d7 active-text-color=#409EFF
id="nav-menu-large" @select="handleSelect">
<el-menu-item index="1">音乐史</el-menu-item>
<el-menu-item index="2">作词</el-menu-item>
<el-menu-item index="3">作曲</el-menu-item>
<el-menu-item index="4">混音</el-menu-item>
<el-menu-item index="5">乐器</el-menu-item>
<el-menu-item index="6">软件</el-menu-item>
<el-menu-item index="7">音源</el-menu-item>
<el-menu-item index="8">采样包</el-menu-item>
</el-menu>
</el-col>
<el-col :span="8" id="search-box-large" class="hidden-sm-and-down">
<el-input placeholder="请输入内容" v-model="input"
@keyup.enter.native="handleKeyword(input)"
style="width: 300px;">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="22" id="search-box-mobile" class="hidden-md-and-up">
<el-input placeholder="搜索文章" v-model="input"
@keyup.enter.native="handleKeyword(input)"
style="width: 300px;">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="2" class="hidden-md-and-up" id="mobile-search-switch">
<el-image
@click="drawer = true"
style="width: 30px; height: 20px"
:src="require('@/assets/side-menu-switch.png')"
fit="fill">
</el-image>
<el-drawer
title="板块分区"
:visible.sync="drawer"
:with-header="false"
style="background-color: rgba(0,0,0,0)"
>
<el-menu :default-active="this.$store.state.activeIndex"
class="el-menu-vertical-demo" mode="vertical"
style="background-color: rgba(0,0,0,0)"
@select="handleSelect">
<el-menu-item index="1">音乐史</el-menu-item>
<el-menu-item index="2">作词</el-menu-item>
<el-menu-item index="3">作曲</el-menu-item>
<el-menu-item index="4">混音</el-menu-item>
<el-menu-item index="5">乐器</el-menu-item>
<el-menu-item index="6">软件</el-menu-item>
<el-menu-item index="7">音源</el-menu-item>
<el-menu-item index="8">采样包</el-menu-item>
</el-menu>
</el-drawer>
</el-col>
</el-row>
</template>
可以隐藏的导航栏
其他导航方式
数据展示
卡片
el-card
el-card
点击失效
vue 中el-card点击事件失效解决
属性
分页
el-pagination
el-pagination
实例 - 卡片分页
参考资料
实例vue文件 - ArticleList.vue
代码实例
<template>
<div id="article-list-container">
<el-row id="article-list-content">
<ArticleCard :articleID=data._id :title=data.title
:cover=data.cover
:type="data.type" :createDate="data.createDate"
class="articleCard"
v-for="(data, index) in articleList.content"
:key="index"/>
</el-row>
<el-row id="article-list-pagination">
<el-pagination
background
layout="prev, pager, next"
style="margin-top: 20px;margin-bottom: 20px;"
:total="articleList.totalElements"
:page-size="pageSize"
:pager-count="pagerCount"
:current-page.sync="pageNumber"
@prev-click="moveToPage(pageNumber)"
@next-click="moveToPage(pageNumber+2)"
@current-change="moveToPage(pageNumber)">
</el-pagination>
</el-row>
</div>
</template>
<div id="article-list-container">
<el-row id="article-list-content">
<ArticleCard :articleID=data._id :title=data.title
:cover=data.cover
:type="data.type" :createDate="data.createDate"
class="articleCard"
v-for="(data, index) in articleList.content"
:key="index"/>
</el-row>
<el-row id="article-list-pagination">
<el-pagination
background
layout="prev, pager, next"
style="margin-top: 20px;margin-bottom: 20px;"
:total="articleList.totalElements"
:page-size="pageSize"
:pager-count="pagerCount"
:current-page.sync="pageNumber"
@prev-click="moveToPage(pageNumber)"
@next-click="moveToPage(pageNumber+2)"
@current-change="moveToPage(pageNumber)">
</el-pagination>
</el-row>
</div>
</template>
列表
数据输入
表单
el-form
el-form
label颜色
element-ui里el-form的lable颜色怎么修改？
如何修改el-form标签中label的文字颜色
表单验证
参考资料
输入框
el-input
el-input
搜索框
vue+element-ui实现搜索框
回车绑定失效
vue使用element-ui的el-input监听不了回车事件
下拉选择器
el-select
el-select
elementUI select组件 默认选择第一项
el-date-picker
简单设置el-date-picker的默认当前时间
new Date()日期格式处理
参考资料
中文官网
下载
npm
npm install element-ui
yarn
yarn add element-ui
开始
添加两行，头部导入
import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css';
没有这一行会样式错误
添加一行，注册
Vue.use(ElementUI);
添加一行，样式
new Vue({
el: '#app',
render: h => h(App)
});
el: '#app',
render: h => h(App)
});
样式源码
参考资料
element-ui源码阅读-样式
vue elementUi通过编辑源码更改样式
github element UI CSS样式文件目录
图标图形
图片
el-image
el-image
图片
element el-image标签加载本地图片失败解决方法
头像
el-avatar
el-avatar
图标
提醒
消息提醒
正上方，自动消失
this.$message()
通知
右上方，不会自动消失
this.$notify()
弹框
MessageBox
MessageBox
实例
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
}
}
</script>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}
}
}
</script>
this.$alert()
0 条评论
下一页
