0
0

前端开发模块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
标签： vue.js ui 学习
本文转载自: https://blog.csdn.net/qq_50377269/article/details/141139351
版权归原作者 旺仔Sec 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端开发模块VUE-Element UI学习笔记”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航