前端开发模块VUE-Element UI学习笔记

前端开发模块VUE-Element UI学习笔记

1、Element UI 简介

基于 Vue 的一套桌面端组件库，提前封装好的 UI 模板，方便开发者快速搭建一个网站前端界面。

官网：https://element.eleme.cn/

2、Element UI 安装

首先创建 Vue 项目，给项目安装 Element UI 插件

1、电脑上已经安装了 Vue 环境。

2、执行命令 vue ui

3、进入项目管理器

4、点击创建按钮

5、设置项目存放路径，点击回车

6、点击按钮

7、输入工程名称，点击下一步

8、选择手动配置项目，点击下一步

9、进行功能配置，点击下一步

10、开启 history mode，点击创建项目

11、创建项目

12、等待项目创建成功

13、点击插件

14、点击添加插件

15、搜索框输入 element，选中第一项，点击安装

16、安装成功，界面如下所示

17、启动项目，如果安装成功，会看到如下界面

3、Icon 图标

提供了一套常用的图标集合，直接使用 i 标签结合 class 来使用：

<i class="el-icon-iconName"></i>

el-icon-iconName 为官网定义的图标名称，直接去官网查找对应的图标，修改 class 属性即可

4、Button 按钮

是 Element UI 提供的一组常用的操作按钮组件，直接使用封装好的 el-button，比如

<el-button>按钮</el-button>

基于 el-button 按钮，可以使用 type、plain、round、circle 属性对按钮进行修饰。

type 设置按钮的样式

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>

plain 可以减弱按钮的背景颜色效果

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

round 用来给按钮设置圆角

<el-button round>圆角按钮</el-button>
<el-button type="primary" round plain>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>

circle 将按钮设置为圆形

<el-button circle>默认按钮</el-button>
<el-button type="primary" circle>主要按钮</el-button>
<el-button type="primary" circle icon="el-icon-star-on"></el-button>
<el-button type="success" circle>成功按钮</el-button>
<el-button type="info" circle>信息按钮</el-button>
<el-button type="warning" circle>警告按钮</el-button>
<el-button type="danger" circle>危险按钮</el-button>

disabled 设置按钮的可用状态

<el-button type="primary" circle icon="el-icon-star-on"></el-button>
<el-button type="primary" circle icon="el-icon-star-on" disabled></el-button>

loading 属性可以给按钮设置”加载中“的效果

<template>
  <div>
    <el-button type="primary" circle icon="el-icon-star-on" @click="test()" :loading="loading"></el-button>
  </div>
</template>

<script>
export default {
  name: "Test",
  methods:{
    test(){
      this.loading = true
      setTimeout(()=>{
        this.loading = false
      }, 3000)
    }
  },
  data(){
    return{
      loading:false
    }
  }
}
</script>

size 属性可以设置按钮的大小，medium，small，mini

<el-button type="primary" size="medium">主要按钮</el-button>
<el-button type="primary" size="small">主要按钮</el-button>
<el-button type="primary" size="mini">主要按钮</el-button>

5、Link 超链接

文字超链接，使用 el-link 标签来实现

<el-link href="https://element.eleme.cn/#/zh-CN/component/button" target="_blank">Element UI</el-link>

disabled 设置超链接不可用

<el-link disabled href="https://element.eleme.cn/#/zh-CN/component/button" target="_blank">Element UI</el-link>

underline 设置下划线

<el-link :underline="false" href="https://element.eleme.cn/#/zh-CN/component/button" target="_blank">Element UI</el-link>

icon 给文字超链接设置图标

<el-link :underline="false" icon="el-icon-phone" href="https://element.eleme.cn/#/zh-CN/component/button" target="_blank">Element UI</el-link>

6、Radio 单选框

使用 el-radio 标签即可，通过 v-mode 进行对象数据的绑定，label 表示该单选框的值，文本直接写入到标签内部即可。

<template>
  <div>
    <el-radio v-model="radio" label="1">选项1</el-radio>
    <el-radio v-model="radio" label="2">选项2</el-radio>
  </div>
</template>

<script>
data(){
    return{
      underline:true,
      loading:false,
      radio: '1'
    }
  }
</script>    

change 绑定切换事件

<el-radio v-model="radio" label="1" @change="change">选项1</el-radio>

change(){
	console.log("当前radio的值：", this.radio)
}

7、Checkbox 多选框

使用 el-checkbox 标签来完成

<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: "Test",
  methods:{
    test(){
      this.loading = true
      setTimeout(()=>{
        this.loading = false
      }, 3000)
    },
    change(){
      console.log("当前radio的值：", this.radio)
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // 当前选中的数量
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  },
  data(){
    return{
      underline:true,
      loading:false,
      radio: '1',
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: ['上海', '北京', '广州', '深圳'],
      isIndeterminate: true
    }
  }
}
</script>

8、Input 输入框

<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="click">主要按钮</el-button>
  </div>
</template>

click(){
	this.input = 'abc'
},

通过 size 属性修改输入框的尺寸，large/medium/small/mini，size 修改的是输入框的高度

<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容" size="large"></el-input>
    <div style="margin: 15px 0"></div>
    <el-input v-model="input" placeholder="请输入内容" size="medium"></el-input>
    <div style="margin: 15px 0"></div>
    <el-input v-model="input" placeholder="请输入内容" size="small"></el-input>
    <div style="margin: 15px 0"></div>
    <el-input v-model="input" placeholder="请输入内容" size="mini"></el-input>
    <div style="margin: 15px 0"></div>
  </div>
</template>

修改宽度可以在外层嵌套一个 div，通过修改 div 的宽度来实现输入框宽度的修改

<template>
  <div style="width: 300px">
    <el-input v-model="input" placeholder="请输入内容" size="large"></el-input>
    <div style="margin: 15px 0"></div>
    <el-input v-model="input" placeholder="请输入内容" size="medium"></el-input>
    <div style="margin: 15px 0"></div>
    <el-input v-model="input" placeholder="请输入内容" size="small"></el-input>
    <div style="margin: 15px 0"></div>
    <el-input v-model="input" placeholder="请输入内容" size="mini"></el-input>
    <div style="margin: 15px 0"></div>
  </div>
</template>

show-password 属性设置可以切换显示隐藏的密码框

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

prefix-icon、suffix-icon 属性设置输入框首尾的图标

<el-input v-model="input" placeholder="请输入内容" size="large" show-password prefix-icon="el-icon-phone" suffix-icon="el-icon-phone-outline"></el-input>

maxlength、minlength 限制输入框的字符长度

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

9、Select 下拉框

el-select/el-option 标签进行操作，v-model 进行数据绑定，label 进行文本的展示，value 是当前选项的值。

<template>
  <div style="width: 300px">
    <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>
    <el-button @click="click">test</el-button>
  </div>
</template>

<script>
export default {
  name: "Test",
  methods:{
    click(){
      console.log(this.value)
    }
  },
  data(){
    return{
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '选项5'
    }
  }
}
</script>

disabled = true，禁用某个选项

<template>
  <div style="width: 300px">
    <el-select v-model="value" placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled">
      </el-option>
    </el-select>
    <el-button @click="click">test</el-button>
  </div>
</template>

<script>
export default {
  name: "Test",
  methods:{
    click(){
      console.log(this.value)
    }
  },
  data(){
    return{
      options: [{
        value: '选项1',
        label: '黄金糕',
        disabled: true
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎',
        disabled: true
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '选项5'
    }
  }
}
</script>

change 下拉框进行修改之后会自动触发该事件

<template>
  <div style="width: 300px">
    <el-select v-model="value" placeholder="请选择" @change="change">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled">
      </el-option>
    </el-select>
    <el-button @click="click">test</el-button>
  </div>
</template>

<script>
export default {
  name: "Test",
  methods:{
    click(){
      console.log(this.value)
    },
    change(){
      console.log("当前选择的是："+this.value)
    }
  },
  data(){
    return{
      options: [{
        value: '选项1',
        label: '黄金糕',
        disabled: true
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎',
        disabled: true
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '选项5'
    }
  }
}
</script>

10、Switch 开关

Switch 组件表示两种相互对立状态之间的切换，开关，el-switch 标签完成，v-model 进行数据绑定，boolean，表示开/关的状态，active-color 属性与 inactive-color 属性来设置开关的背景色。

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

value: true

active-text 和 inactive-text 分别设置开/关对应的文本

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

value: true

change 事件进行开/关操作时触发该方法

<el-switch
        v-model="value"
        active-color="#13ce66"
        active-text="上架"
        inactive-color="#ff4949"
        inactive-text="下架"
        @change="change">
</el-switch>

change(){
      console.log("当前开关的状态是："+this.value)
}

value: true