Element UI学习笔记

鱼丸子蛋汤

已于 2024-04-15 17:27:15 修改

阅读量788

点赞数 14

分类专栏：基础文章标签： ui vue.js 前端

于 2024-04-05 13:38:30 首次发布

本文链接：https://blog.csdn.net/weixin_52841164/article/details/137070121

版权

基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

官网：Element - The world's most popular Vue UI framework

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

先跟着这两个视频做

vue环境的搭建以及vue项目的创建与启动_哔哩哔哩_bilibili

vue工程引入element ui_哔哩哔哩_bilibili

下面正式开始

一、起步

在 views下创建 Test.vue ，在 router > index.js 中给 Test 配置路由

在当前项目中打开终端（可以直接在文件路径那里输入 cmd）

输入

npm run serve

如果报错就用管理员身份打开

ctrl + 鼠标左键单击 http://localhost:8080/

二、Icon 图标

<i class="el-icon-iconName"></i>
el-icon-iconName 为官方定义的图标名称

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

三、Button 按钮（最常使用）

使用 type、plain、round 和 circle 属性来定义 Button 的样式

type：设置样式
plain：减弱按钮背景颜色
round：设置圆角
disabled：设置可用状态
loading：设置“加载中”效果

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="primary" plain>主要按钮plain</el-button>
<el-button type="primary" round>主要按钮round</el-button>
<el-button type="primary" circle>主要按钮circle</el-button>
<el-button type="primary" circle disabled></el-button>
<el-button type="primary" circle icon="el-icon-star-on"></el-button>

//Test.vue

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

<script>
export default {
  data() {
    return {
      loading: false // 默认是星星
    }
  },
  methods: {
    test() {
      this.loading = true; // 点击后变成loading
      setTimeout(() => {
        this.loading = false; // 3秒后变成星星
      }, 3000);
    }
  }
}
</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>

四、Link超链接

<template>
  <div>
    <el-link disabled :underline="underline" icon="el-icon-magic-stick"
    href="https://www.baidu.com/" target="_blank">默认链接</el-link>
  </div>
</template>

<!-- target="_blank"表示在新的页面打开，否则默认是当前页面跳转 -->

<script>
export default {
  data() {
    return {
      underline: false
    }
  }
}
</script>

五、Radio 单选框

使用 el-radio 标签，通过 v-model 进行对象数据的绑定，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>
export default {
  data() {
    return {
      // radio: '1' // 默认选中1
      radio: '' // 默认谁都不选中
      // 单引号双引号都可以
    };
  }
}
</script>

使用change绑定切换事件

<template>
  <div>
    <el-radio v-model="radio" label="1" @change="change">选项1</el-radio>
    <el-radio v-model="radio" label="2" @change="change">选项2</el-radio>
    <el-radio-button v-model="radio" label="1" @change="change">选项1</el-radio-button>
    <el-radio-button v-model="radio" label="2" @change="change">选项2</el-radio-button>
    <!-- 使用change绑定切换事件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // radio: '1' // 默认选中1
      radio: '' // 默认谁都不选中
      // 单引号双引号都可以
    };
  },
  methods: {
    change() {
      console.log('当前radio的值是' + this.radio)
    }
  }
}
</script>

六、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>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  data() {
    return {
      checkAll: false, // 默认没有全部选中
      checkedCities: ['上海', '北京'], // 默认选中的城市
      cities: cityOptions,
      isIndeterminate: true // 开启不确定状态（非全选，非全空，注意全选框那里是个 虚线框 ）
    };
  },

  methods: {
    // 全选
    handleCheckAllChange(val) {
      // alert(val); // val是当前选中状态，全选弹出true，全不选弹出false
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false; // 关闭不确定状态
    },

    // 单个选城市
    handleCheckedCitiesChange(value) {
      // alert(value); // value弹出的是当前已选中的城市
      let checkedCount = value.length; // 当前选中的城市的数量
      this.checkAll = checkedCount === this.cities.length; 
      // 先判断是否所有城市都选中，再赋值给checkAll
      // （全选中checkAll=true，全选框打√；否则false，全选框为空）
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      // 选中了一部分城市，则保持不确定状态
    }
  }
};
</script>

七、Input 输入框

<template>
  <!-- 修改宽度可以在外层嵌套一个div，通过修改div的宽度来改变输入框的宽度 -->
  <div style="width: 300px;">

    <!-- placeholder占位符，size修改高度，clearable可清空 -->
    <el-input v-model="input" placeholder="请输入内容" size="large" clearable></el-input>
    <div style="margin: 10px 0;"></div>

    <!-- show-password密码框 -->
    <el-input v-model="input" size="medium" show-password></el-input>
    <div style="margin: 10px 0;"></div>

    <!-- prefix-icon,suffix-icon设置输入框首尾的图标 -->
    <el-input v-model="input" size="small" prefix-icon="el-icon-thumb" suffix-icon="el-icon-position"></el-input>
    <div style="margin: 10px 0;"></div>

    <!-- maxlength,minlength限制输入框的字符长度
         show-word-limit显示已输入字符长度
     -->
    <el-input v-model="input" size="mini" maxlength="6" show-word-limit></el-input>
    <div style="margin: 10px 0;"></div>

    <el-button type="primary" @click="click">主要按钮</el-button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      input: ''
    }
  },
  methods: {
    click() {
      this.input = 'abc'
    }
  }
}
</script>

八、select 下拉框

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

<template>
  <div style="width: 400px">
    <el-select v-model="val" placeholder="请选择" @change="chan">
      <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 {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶',
        disabled:true // 无法选中
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      val: '选项5' // 默认初始化选中北京烤鸭
    }
  },
  methods:{
    click(){
      console.log(this.val)
    },
    chan(){
      console.log('当前选择的是：'+this.val)
    }
  }
}
</script>

九、Switch 开关

Switch 组件表示两种相互对立状态之间的切换，用 el-switch 标签，v-model 进行数据绑定（bool类型）

active-color 和 inactive-color 设置/开关的背景颜色

active-text 和 inactive-text 设置开/关的文本

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

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

<script>
export default {
  data() {
    return {
      value: true // 除了true为打开（绿色），其他 false/123/空 都是关闭（红色）
    }
  },
  methods: {
    change() {
      console.log('当前开关的状态是：' + this.value)
    }
  }
};
</script>

十、Upload 上传

使用 el-upload 组件完成，action 属性为后端请求的接口

<template>
  <div>
    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

十一、Form 表单

Form 组件，每一个表单域由一个 form-item 组件构成，表单域中可以放置各种类型的表单控件，Input，Select，Checkbox，Radio，Switch，表单域的值直接跟 Vue 对象进行绑定

11.1基本使用

<template>
  <div>
    <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-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        delivery: false,
        type: [],
        resource: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.form);
    }
  }
}
</script>

11.2数据校验

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="即时配送" prop="delivery">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      form: {
        name: '',
        region: '',
        delivery: false,
        type: [],
        resource: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],

        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ]
      }
    }

  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          console.log(this.form);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

11.3自定义数据校验

邮箱：^([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})$

<template>
  <div style="width: 800px;">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var checkEmail = (rule, value, callback) => { // 规则，数据，回调
      const mailReg = /^([a-zA-Z0-9._%+-]+)@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})$/
      if (!value) { // 判断邮箱是否为空
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => { // 判断邮箱格式
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    };
    return {
      form: {
        email: ''
      },
      rules: {
        email: [
          { required: true, validator: checkEmail, trigger: 'blur' },
        ]
      }
    }

  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('通过校验!');
          console.log(this.form);
        }
      });
    }
  }
}
</script>

11.4数字类型校验

<template>
  <div style="width: 800px;">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="年龄" prop="age" :rules="[
      { required: true, message: '年龄不能为空' },
      { type: 'number', message: '年龄必须为数字' }
    ]">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        age: ''
      }
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('通过校验!');
          console.log(this.form);
        }
      });
    }
  }
}
</script>