Element UI 学习笔记

01. Element UI 入门和安装

1. Element UI : 一套为传统桌面准备的基于 Vue.js 的前端组件库；
1. 它是基于 Vue-cli 脚手架下，需要学习完毕 Vue.js（核心篇+工具篇）;
1. 安装环境，需要安装 Node.js 环境、Vue.js 脚手架等工具；
1. 首先，安装Vue.js脚手架，
```
vue create cli
```
1. 切换到安装好的 cli 目录下，安装 Element UI，命令如下：
```
npm i element-ui -S
```

在脚手架 main.js 引入 Element UI，具体命令如下:

import ElementUI from 'element    
import 'element-ui/lib/theme-chalk/index.css'     

Vue.use(ElementUI)

02. Layout 布局

基本概念：一行通过分割为24栅格栏进行布局，如果要占满一行如下：

<!-- el-row 表示一行 -->
<!-- el-col 表示一列 -->
<el-row>
   <el-col :span="24">24</el-col>
</el-row>

如何设置18个栅格栏位，那么会留出6个位置是空白区域；

<el-row>
    <el-col :span="18">18</el-col>
</el-row>
  
.el-row {
      background-color: #42b983;
      margin: 20px 0;
}
.el-col {
      background-color: pink;
      color: white;
      padding: 10px 0;
}

如果想要四列占满24个栅格栏位，那么每列占6个栅格栏位；

<el-row>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
</el-row>

.el-col {
    background-color: pink;
    color: white;
    padding: 10px 0;
    border-right: 1px solid #eee;
    box-sizing: border-box;  /* 边框不占位 */
}

手册里 el-col 子元素还有一层 div，它可以被 :gutter 设置为间隔；

<el-row :gutter="10">
     <el-col :span="6"><div style="background-color: pink">6</div></el-col>
     <el-col :span="6"><div style="background-color: pink">6</div></el-col>
     <el-col :span="6"><div style="background-color: pink">6</div></el-col>
     <el-col :span="6"><div style="background-color: pink">6</div></el-col>
</el-row>

PS: 通过上面可以实现各种各样的混合布局，总计算值小于等于24即在一行内；

1. 使用 type="flex" 来设置栏位的对齐方式，可以用过 justify 来设置方向；
```
<el-row type="flex" justify="centet"></el-row>
```
1. 通过使用 :offset=n 来设置栏位之间的偏移量；
```
<el-col :span="6" :offset="1"> 
```

03. Container 布局

1. 如果我们想要快速布局一个类后台布局的样式，可直接使用Container布局；
- <el-container> 是外部布局容器；
- <el-header> 表示头；
- <el-footer> 表示脚；
- <el-main> 表示主体；
- <el-aside> 表示侧栏；

布局的方式手册提供了好几种，我们就使用最常用的一种即可，类后台方式：

<el-container>
   <el-header> header </el-header>
   <el-container>
       <el-aside> aside </el-aside>
       <el-main> main </el-main>
   </el-container>
   <el-footer> footer </el-footer>
</el-container>

04. Basic 组件规范

1. 纯理论，了解关于颜色、字体、边框等规范要求：
- 颜色：主色、辅助色、中性色；
- 字体：字体、字号、行高；
- 边框：实线、虚线、圆角、投影；

05. Icon 图标和 Link文字

1. Icon 图标

1. UI 提供了一套非常丰富的图标系统，基本上可以满足所有正常场景下的要求；

一般来说，具体使用采用<i>标签来直接插入，当然也可以通过按钮和链接插入；

<i class="el-icon-edit" style="margin-right:20px"></i>
<el-button type="primary" class="el-icon-search"></el-button>

2. Link文字

Link 文字即超链接，提供了以下几种颜色方案：

<el-link type="primary">链接</el-link>
<el-link type="danger">链接</el-link>
<el-link type="success">链接</el-link>
<el-link type="warning">链接</el-link>
<el-link type="info">链接</el-link>

disabled 属性，能让链接禁用；悬停可以通过 :underline="false" 关闭；

<el-link type="warning" disabled>链接</el-link>
<el-link type="info" :underline="false">链接</el-link>

Link 文字也支持使用 icon 图标的功能；

<el-link type="success" class="el-icon-edit">链接</el-link>

06. Button 按钮

Button 按钮和上节的 Link 文字一样，有固定的几个样式：

<el-button type="primary">按钮</el-button>
<el-button type="danger">按钮</el-button>
<el-button type="success">按钮</el-button>
<el-button type="warning">按钮</el-button>
<el-button type="info">按钮</el-button>

使用 plain 属性，可以实现镂空效果；使用 disabled 属性，可以禁用；

<el-button type="warning" plain>按钮</el-button>
<el-button type="info" disabled>按钮</el-button>

1. 使用 type="text" 可以将 button 转成纯文本按钮；
```
<el-button type="text">文字按钮</el-button>
```

使用 <el-button-group> 可以将多个按钮设置成组合按钮；

<el-button-group>
      <el-button type="primary" class="el-icon-arrow-left">上一页</el-button>
      <el-button type="primary">下一页<i class="el-icon-arrow-right"></i></el-button>
</el-button-group>

使用 :loading="true" 实现加载中效果；

<el-button type="primary" :loading="true">加载中</el-button>

使用 size="small" 等属性，实现三种大小；

<!-- size: medium / small / mini -->
<el-button type="primary" size="samll">按钮</el-button>

07. Radio 和 Checkbox

1. Radio 单选框

常用的单选框，具体如下：

<el-radio v-model="sex" label="1">男</el-radio>
<el-radio v-model="sex" label="2">女</el-radio>

data() {
    return {
        sex: '1'
    }
}

PS: 这里 v-model 和 sex 进行双向绑定，label 相当于 value，且和 sex 值一致则首选；

使用群组单选框，可以将双向绑定置顶操作，具体如下：

<el-radio-group v-model="city">
    <el-radio :label="1">北京</el-radio>
    <el-radio :label="2">上海</el-radio>
    <el-radio :label="3">广州</el-radio>
</el-radio-group>

data() {
  return {
      city: 1
  }
}

PS：禁用设置：disabled; 边框设置：border；

1. 可以使用 el-radio-button 实现按钮式单选框，size 可以设置大小；
```
<el-radio-button label="1">北京</el-radio-button>
```
PS：可以再群组 el-radio-button 设置 size 属性，值为：medium、small、mini ；

单选框或群组单选都具有 change 事件，改变后即可触发；

<el-radio-group v-model="city" @change="radioChange">
    <el-radio :label="1">北京</el-radio>
    <el-radio :label="2">上海</el-radio>
    <el-radio :label="3">广州</el-radio>
</el-radio-group>

methods: {
  // 方法
  radioChange(res) {
      console.log('结果 --- ', res);
  }
}

2. Checkbox 复选框

和单选框基本类似，复选框具体如下：

<el-checkbox-group v-model="checklist">
      <el-checkbox label="音乐"></el-checkbox>
      <el-checkbox label="体育"></el-checkbox>
      <el-checkbox label="电脑"></el-checkbox>
</el-checkbox-group>

return {
    checklist: ['体育', '电脑']
}

PS：单一复选框，比如协议确定，直接使用 el-checkbox 不需要群组；

1. 使用 :max / :min , 可选择最大/最小的勾选数量；
```
<el-checkbox-group v-model="checklist" :max="2">
```
1. 和单选框一样，支持使用 el-checkbox-button 样式；
```
<el-checkbox-button label="音乐"></el-checkbox-button>
```
1. 事件和 radio 一样，支持 change ，具体如下：
```
<el-checkbox-group v-model="checklist" @change="radioChange">
```
PS：其余和单选框类似，注意 button 样式和普通样式的属性区别；

08. Input 输入框

基础 Input 输入框，带双向绑定；

<el-input v-model="input" placeholder="请输入内容"></el-input>

data() {
  return {
      input: ''
  }
}

使用 clearable 属性，提供框内清空按钮；使用 show-password 实现密码框；

<el-input v-model="input" placeholder="请输入内容" clearable ></el-input>
<el-input v-model="input" placeholder="请输入内容" show-password></el-input>

使用 maxlength 属性，设置输入限制；

<el-input v-model="input" placeholder="请输入内容" maxlength="6" show-word-limit></el-input>

使用 prefix-icon 设置前缀内置图标；使用 suffix-icon 设置后缀内置图标；

前置图标：<el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
后置图标：<el-input placeholder="请输入内容" suffix-icon="el-icon-edit"></el-input>

ps：支持 slot 方式，具体如下

<el-input>
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>

1. 使用 type="textarea"，可以将输入框设置成文本域；
```
<el-input v-model="input" placeholder="请输入内容" type="textarea"></el-input>
```
ps：使用属性 autosize 可自动扩展其高度；

使用 <template> 可以实现复合型输入库；

<el-input>
    <template slot="prepend">http://</template>
    <template slot="append">.com</template>
</el-input>

ps：和之前的表单一样可以使用 size 来设置尺寸；

1. 可以通过输入库激活或输入的方式匹配数据列表内的相关信息；
```
<el-autocomplete v-model="autocomplete" placeholder="请输入内容" :fetch-suggestions="querySearch"></el-autocomplete>
```
ps: querySearch 详细见 Element UI 文档
ps：事件，输入库有：focus、blur、select；自动完成有：select、change；

09. InputNumber

基础 InputNumber 计数器，带双向绑定；

<el-input-number v-model="inum"></el-input-number>

data() {
  return {
      inum: 1
  }
}

使用 :max / :min 限制最大值和最小值，支持 change 事件；

<el-input-number v-model="inum" @change="inputChange" :min="1" :max="10"></el-input-number>

inputChange(value) {
   console.log(value);
}

ps：设置 disabled 禁用；设置 :step=1 为增减步长；设置 :precision=2 为小数点精度；

<el-input-number v-model="inum" @change="inputChange" :step='1' :precision='2'></el-input-number>

使用 controls-position 可设置增减按钮的位置；

<el-input-number value="inum" controls-position="right"></el-input-number>

1. 事件支持：change、blur、foucs，方法支持：focus、select（区别无回调）

10. Select 选择器

基础 select 选择器：

<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>

data() {
  return {
      value: '',
      options: [
          {
              value: 1,
              label: '北京'
          },{
              value: 2,
              label: '上海'
          },{
              value: 3,
              label: '广州'
          }
      ]
   }
}

有两种禁用：1. 在 el-select 设置； 2. 在 el-option 设置；

<el-select v-model="value" placeholder="请选择" disabled>  
<!-- 或 -->
<el-option :disabled="item.value == 1"></el-option>

1. 使用 clearable 属性，清空选择的项目；使用 multiple，实现多选项目；
```
<el-select v-model="value" placeholder="请选择" clearable multiple >
```

使用 filterable 属性，执行选项搜索；

<el-select v-model="value" placeholder="请选择" filterable>

关于对应的属性、事件，基本和之前的类似；

<el-select v-model="value" placeholder="请选择" size="mini" @change="change">

11. Cascader 选择器

基础 cascader 选择器：

<el-cascader :options="options" v-model="value"> </el-cascader>

data() {
    return {
        value: 1,
        options: [{
            value: 1,
            label: "北京",
            children: [{
              value: 11,
              label: '北京二级11'
             },{
              value: 12,
              label: '北京二级12'
             },{
              value: 13,
              label: '北京二级13'
             }]
           }  
        ]
    }
}

默认是通过 click 点击来实现菜单的展开，我们也可以设置为 hover；

<el-cascader v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover' }">
</el-cascader>

使用 disabled 和 clearable，禁用和清空，和 Select 选择器一样；

<el-cascader v-model="value"
        :options="options" clearable disabled>
</el-cascader>

使用 :show-all-levels 来限制获取到的是最后一级的内容，设置 false 即可；

<el-cascader v-model="value"
        :options="options"
        :show-all-levels="false">
</el-cascader>

使用 :props 来设置复选框多选；

<el-cascader v-model="value"
        :options="options"
        :show-all-levels='false'
        :props="props"></el-cascader>

data() {
  return {
      props: {
         multiple: true
      }
  }
}

12. Switch 开关

基本用法

<el-switch v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
          value: true
      }
    }
  };
</script>

除了 Boolean 类型，也可以是 String 或 Number 类型；

<el-switch v-model="value"
      active-color="#13ce66"
      inactive-color="#ccc"
      active-value="100"
      nactive-value="0"
      @change="switchChange"></el-switch>

data() {
  return {
    value: '0',
  };
},

methods: {
  switchChange(value) {
    console.log(value);
  },
}

13. Slider 滑块

基本用法：

<el-slider v-model="value"></el-slider>

data() {
  return {
      value: 0
  }
}

使用 :show-tooltip 实现隐藏文本提示； :format-tootip 实现自定义格式化；

<el-slider v-model="value" :show-tooltip="false"></el-slider>
<el-slider v-model="value1" :format-tooltip="formatTooltip"></el-slider>

methods: {
  formatTooltip(value) {
    return value / 100;
  }
}

使用 :step 实现离散效果，在使用 show-stops 实现断点效果；

<el-slider v-model="value3" :step='10'></el-slider>
<el-slider v-model="value3" :step='10' show-stops ></el-slider>

使用 show-input 可自带输入框；

<el-slider v-model="value" show-input></el-slider>

使用 range 实现范围选择；

<el-slider v-model="value" range :min='1' :max='10'></el-slider>

value: [4, 6]

14. TimePicker 时间选择

选择一个固定时间点，具体如下：

<el-time-select v-model="value"
    :picker-options= "{
         start: '08:30',
         step: '00:15',
         end: '18:30'
     }" placeholder="选择时间">
</el-time-select>

data() {
  return {
    value: ''
  }
}

选择一个任意时间点，具体如下：

<el-time-picker v-model="value1" arrow-control
    :picker-options= "{
        selectableRange: '18:00:00 - 20:00:00'
    }"
    placeholder="选择时间">
</el-time-picker>

ps：arrow-control 属性可开启箭头选择，而 selectableRange 是限制时间范围；

丰富的任意时间范围，具体如下：

<el-time-picker v-model="value2" 
     is-range
     range-separator='至'
     start-placeholder='开始时间'
     end-placeholder='结束时间'>
</el-time-picker>

ps：is-range 开启丰富的任意时间范围，其它字面意思；
ps：属性方法和之前组件类似。

15. DatePicker 日期选择

选择一个基础的日期，如下：

<el-date-picker v-model="value" placeholder="选择日期"></el-date-picker>

data() {
  return {
    value: ''
  }
}

1. 可以设置一个 type 属性，设置获取的值：
```
<el-date-picker v-model="value" type='date' placeholder="选择日期"></el-date-picker>
```
ps：type 设置为 datetime，可以获取到日期+时间，其它的可参考文档说明；

自定义快捷选项的日期选择，具体如下：

<el-date-picker v-model="value" type="datetime" placeholder="选择日期" :picker-options="getPicker"></el-date-picker>

data() {
return {
  value: '',
  // 属性对象名是自定义的
  getPicker: {
      // shortcuts 是固定名称，标识设置快捷栏
      shortcuts: [{
        text: '今天',
        onClick(picker) {
          picker.$emit('pick', new Date());
        }
       }, {
        text: '昨天',
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24);
          picker.$emit('pick', date);
        }
       }, {
        text: '一周前',
        onClick(picker) {
          const date = new Date();
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', date);
        }
      }]
    }
  }
}

选定一个范围日期，具体如下：

<el-date-picker v-model="value2" 
     type='monthrange'
     range-separator='至'
     start-placeholder='开始月份'
     end-placeholder='结束月份'>
</el-date-picker>

选定一个日期，并进行格式化，具体如下：

<el-date-picker v-model="value" 
                type='datetime'
                placeholder='选择日期'
                format="yyyy 年 MM 月 dd 日"
                :picker-options="getPicker">
</el-date-picker>

最后编辑于：2021.03.23 16:43:36

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,271评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,275评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,151评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,550评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,553评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,559评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,924评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,580评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,826评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,578评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,661评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,363评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,940评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,926评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,156评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,872评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,391评论 2赞 342