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