前端组件梳理

学习网址：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-input
  prefix-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-option
      v-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-picker
      v-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-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="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-pagination
    layout="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-button
    plain
    @click="open4">
    成功
  </el-button>
 </div>
 <div class="dialog">
  <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>
 <div class="drawer">
   <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  点我打开
</el-button>

 <el-drawer
  title="我是标题"
  :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>

 熟悉一下子。