前端组件梳理

学习网址：Element - The world's most popular Vue UI framework

一、整体布局

1.栅格布局

通过基础的24栏分栏创建布局

<el-row :gutter="20"><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

 :span 表示所占分栏数             gutter设置分栏之间的间隔        offset设置偏移的栏数

2.Container容器

<el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container>
</el-container>

 <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

3.导航菜单

顶栏设置：mode="horizontal"  侧栏：class="el-menu-vertical-demo"

<template>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</template><script>export default {data() {return {activeIndex: '1'};}
</script>

4.标签页

<template><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane></el-tabs>
</template>
<script>export default {data() {return {activeName: 'second'};},methods: {handleClick(tab, event) {console.log(tab, event);}}};
</script>

5.面包屑导航

<el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item><el-breadcrumb-item>活动列表</el-breadcrumb-item><el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

二、常用小组件 

1.常用图标

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>

2.按钮图标

<el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button><el-button type="primary" :loading="true">加载中</el-button>
</el-row>

3.各种框

<template>
<div class="radio"><el-radio v-model="radio" label="1">单选1</el-radio><el-radio v-model="radio" label="2">单选1</el-radio>
<el-radio-group v-model="radio2"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button></el-radio-group>
</div>
<div class="checkbox"><el-checkbox label="复选框 A" v-model="checked"></el-checkbox><el-checkbox label="复选框 B"></el-checkbox><el-checkbox-group v-model="checkedCities" ><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group>
</div>
<div class="input"><el-inputprefix-icon="el-icon-search"placeholder="请输入内容"v-model="input"clearable>
</el-input>
</div>
</template><script>
const cityOptions = ['上海', '北京', '广州', '深圳'];export default {data () {return {radio: '1',radio2: '上海',checked: true,checkedCities: ['上海', '北京'],cities: cityOptions,input: ''};}}
</script>

4.各种器

<template>
<div>
<div class="counter"><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</div>
<div class="selector"><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</div>
<div class="timeSelector"><span class="demonstration">默认</span><el-date-pickerv-model="value1"type="datetimerange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></div>
</div>
</template>
<script>export default {data() {return {num: 1};},methods: {handleChange(value) {console.log(value);}}};
</script>

5.各种表

<template>
<div>
<div class="Form">
<el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item>
</el-form></div>
<div class="Table"><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column></el-table>
</div>
<div class="ableCleanTag><el-tag:key="tag"v-for="tag in dynamicTags"closable:disable-transitions="false"@close="handleClose(tag)">{{tag}}
</el-tag>
</div>
<div class="tree"><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
<div class="page">
<el-paginationlayout="prev, pager, next":total="50"></el-pagination>
</div>
<div class="photo"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
<div class="status">
<el-empty description="描述文字"></el-empty>
</div>
<div class="description">
<el-descriptions title="用户信息"><el-descriptions-item label="用户名">kooriookami</el-descriptions-item><el-descriptions-item label="手机号">18100000000</el-descriptions-item>
</el-descriptions>
</div>
</div>
</template>
<script>export default {data() {return {form: {name: '',date1: '',date2: ''},tableData: [{date: '2016-05-02',name: '王小虎',}, {date: '2016-05-04',name: '王小虎',}],
dynamicTags: ['标签一', '标签二', '标签三'],}},methods: {onSubmit() {console.log('submit!');},handleClose(tag) {this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);},}}
</script>

设置 inline 属性可以让表单域变为行内的表单域，实现纵向排列 

设置 label-position 属性可以改变表单域标签的位置，包括left, right, top

通过 rules 属性传入约定的验证规则

height属性，即可实现固定表头的表格，用于纵向内容过多场景

fixed属性，实现固定列，它接受 Boolean 值或者left,right

type属性为selection，设置多选列  

在列中设置filtersfilter-method属性即可开启该列的筛选

自定义指令v-loading，只需要绑定Boolean即可,element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"来设置样式

6.各种弹窗

<template>
<div><div class="message"><el-button :plain="true" @click="open1">打开消息提示</el-button><el-button :plain="true" @click="open2">成功</el-button><el-button :plain="true" @click="open3">警告</el-button></div><div class="alert"><el-button type="text" @click="open">点击打开 Message Box</el-button></div><div class="notify"><el-buttonplain@click="open4">成功</el-button></div><div class="dialog"><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="提示":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><div class="drawer"><el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开
</el-button><el-drawertitle="我是标题":visible.sync="drawer":direction="direction":before-close="handleClose"><span>我来啦!</span></el-drawer></div><div class="dropdown"><el-dropdown><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>黄金糕</el-dropdown-item><el-dropdown-item>狮子头</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</div>
</template><script>export default {data(){return{dialogVisible: false,drawer: false,direction: 'rtl'}},methods: {open1() {this.$message('这是一条消息提示');},open2() {this.$message({message: '恭喜你，这是一条成功消息',type: 'success'});},open3() {this.$message({message: '警告哦，这是一条警告消息',type: 'warning'});},open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });},open4() {this.$notify({title: '成功',message: '这是一条成功的提示消息',type: 'success'});},handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});}}}
</script>

 熟悉一下子。