1. Toy模板网首页
  2. > Toy博客

Element UI

9月前 分类：Toy博客 阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了Element UI。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Element UI

1.Element UI 引言

官网: https://element.eleme.io/#/zh-CN

1.1 官方定义

Element UI

Element - UI
1.2 定义

element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。

1.3 由来

饿了么前端团队 基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件。

Element UI

饿了么
1.4 安装Element UI
1.4.1 通过vue脚手架创建项目
1.4.2 在vue脚手架项目中安装element ui

  • npm 安装

    推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

    1.下载element ui的依赖
npm i element-ui -S

2.指定当前项目中使用element ui

//在【main.js】中指定当前项目中使用element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//在vue脚手架中使用element ui
Vue.use(ElementUI);

//在main.js中导入ElementUI插件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

Vue.config.productionTip = false
//Vue.use用来安装插件
//该方法需要在调用 new Vue() 之前被调用。
Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
2.Layout(栅格)布局组件的使用

通过基础的 24 分栏，迅速简便地创建布局

在element ui中布局组件将页面划分为多个行row ,每行最多分为24栏(列)

Element UI

注意

  1. 在一个布局组件中是由 row 和 col 组合而成

  2. 在使用时要区分 row 属性和 col 属性

2.1 属性的使用

  • 行属性使用
    Element UI

    <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

  • 列属性使用

Element UI

<el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6" :offset="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
3.Container 布局容器组件
3.1 创建布局容器
<el-container></el-container>
3.2 容器中包含的子元素
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
3.3 容器的嵌套使用
<el-container>
    <!-- 容器的嵌套使用 -->
    <el-header>Header</el-header>
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</el-container>
3.4 水平与垂直容器
<el-container direction="vertical">
    <!-- 水平与垂直容器的使用 -->
    <el-header>Header</el-header>
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container direction="horizontal">
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</el-container>

注意：当子元素中没有有 el-header 或 el-footer 时容器排列为水平

3.5 子容器属性
子容器 参数 说明 默认值
Header Attributes height 顶栏高度 60px
Aside Attributes width 侧边栏高度 300px
Footer Attributes height 底栏高度 60px
4.Form相关组件
4.1 Radio单选框
4.1.1 创建按钮
<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

注意：在使用 radio 单选按钮时，至少加入 v-model 和 label 两个属性

4.1.2 Radio按钮属性的使用

属性的使用还是直接写在对应的组件标签上以 属性名 = 属性值 的方式实现的。

Element UI

4.1.3 Radio 事件的使用

事件的使用也是和属性使用是一致，都是直接写在对应的组件标签上

事件在使用时必须使用Vue中绑定事件方式进行，使用如@事件名=事件处理函数(绑在在vue组件中对应函数)

Element UI

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

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    },
    methods: {
        changeRadio(){
            alert(this.radio2);
        },
    }
  }
</script>
4.1.4 Radio 按钮组
<template>
    <el-radio-group v-model="radio3">
        <el-radio label="3">123</el-radio>
        <el-radio label="6">12</el-radio>
        <el-radio label="9">1</el-radio>
    </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

Element UI

4.2 checkbox 多选框
<template>
    <el-checkbox-group v-model="checkList">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
        <el-checkbox label="禁用" disabled></el-checkbox>
        <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>
    <div>当前复选框的值为：{{checkList}}</div>
</template>

<script>
  export default {
    data () {
      return {
        checkList:['复选框 A','选中且禁用'],
      };
    }
  }
</script>
4.3 Input 输入框组件
4.3.1 创建 Input 组件
请输入内容
<el-input v-model="input" placeholder="请输入内容"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>
4.3.2 Input 组件属性
<el-input v-model="inputmean" style="width:400px;" placeholder="普通输入框"></el-input>
    <br>
    <el-input placeholder="可清空输入框" v-model="inputmean" style="width:400px;" clearable></el-input>
    <br>
    <el-input placeholder="密码输入框" v-model="inputmean" style="width:400px;" show-password></el-input>
    <br>
    <!-- row为文本高度 -->
    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="inputmean" style="width:400px;margin:5px;"></el-input>
    <br>
    <el-input type="textarea" autosize placeholder="请输入内容" v-model="inputmean" style="width:400px;"></el-input>

Element UI
Element UI

4.3.3 Input 输入事件的使用
<template>
    <el-input
      v-model="username"
      @blur="aaa"
      @focus="bbb"
      @clear="clears"
      clearable
      @input="ccc"
      placeholder="输入框事件的绑定"
    ></el-input>
</template>

<script>
  export default {
    data () {
      return {
       username:'',
      };
    },
    methods: {
        aaa() {
          console.log("失去焦点");
        },
        bbb() {
          console.log("获取焦点");
        },
        ccc(value) {
          console.log("改变:" + value);
        },
        clears() {
          console.log("清除");
        },
    }
      
  }
</script>
4.3.4 Input组件中方法的使用
<template>
    <el-input v-model="username" ref="inputs" style="width: 400px"></el-input>
    <el-button @click="focusInputs">focus方法</el-button>
    <el-button @click="blurInputs">blur方法</el-button>
    <el-button @click="selectInputs">select方法</el-button>
</template>

<script>
  export default {
    data () {
      return {
       username:'',
          };
     },
     methods: {
        focusInputs(){
            this.$refs.inputs.focus();
        },
        blurInputs(){
            this.$refs.inputs.blur();
        },
        selectInputs(){
            this.$refs.inputs.select();
        }
    }
      
  }
</script>

在使用组件的方法时需要在对应的组件中加入ref="组件别名”

在调用方法时直接使用this.$refs .组件别名.方法名()

4.4 Select 选择器（下拉列表）组件的使用
4.4.1 Select 选择器组件的创建
<template>
  <div id="container">
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      <!-- 遍历options数组 -->
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "select.vue",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      value: "",
     //   value为当前选定的值
    };
  },
};
</script>

<style>
</style>

注意：1.要求下拉列表中必须存在option的value属性值 ⒉.要求select中必须使用v-model进行数据绑定

4.4.2 Select 组件的属性

Element UI

…

4.4.3 Select 组件事件的使用

Element UI

4.5 Switch 组件的使用
4.5.1 Switch 组件的创建
<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>
4.5.2 Switch组件的属性使用

Element UI

4.5.3 Switch组件的事件使用

Element UI

4.6 DateTimePicker 日期时间选择器
4.6.1 DateTimerPicker 组件的创建
<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
      };
    }
  };
</script>
4.6.2 DateTimerPicker 组件的属性

Element UI

4.7 Upload 组件
4.7.1 Upload 组件创建
<el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="fileList"
    >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
    </div>
</el-upload>

注意:在使用upload组件时必须设置action属性，action属性为必要参数不能省略

4.7.2 Upload 组件属性

Element UI
Element UI
Element UI

4.8 Form 表单组件
4.8.1 Form 组件的创建
<template>
  <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>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "form.vue",
  data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
};
</script>
4.8.2 内联表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

<el-form :inline="true" :model="formInline" class="demo-form-inline">
	........
</el-form>
<script>
  export default {
    data() {
      return {}
    },
    methods: {

    }
  }
</script>
4.8.3 Form 表单属性

Element UI

Element UI

4.8.4 表单验证（失去焦点自动验证）
<el-form :model="ruleForm" :rules="rules" >
    <!-- 在rules属性指定rules规则，才能使用规则 -->
    <!-- 使用prop给组件传参，通过rules中的命令参数来定义规则 -->
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
</el-form>
<script>
export default {
  name: "form.vue",
  data() {
    return {
      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
};
</script>
4.8.4 表单验证（失去焦点自动验证）
<el-form :rules="rules" ....  ref="ruleForm">
    <!-- 在rules属性指定rules规则，才能使用规则 -->
    <!-- 使用prop给组件传参，通过rules中的命令参数来定义规则 -->
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>

    <el-form-item>
        <!-- 提交时，传递了当前组件的别名ruleForm，调用验证方法，在提交时还可以做验证 -->
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
</el-form>
<script>
export default {
  name: "form.vue",
  data() {
    return {}
  },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("submit!");
                    
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>
5 Notice 组件
5.1 Alert 组件
5.1.1 Alert 组件的创建
<template>
  <div id="container">
    <el-alert title="成功提示的文案" type="success"> </el-alert>
    <el-alert title="消息提示的文案" type="info"> </el-alert>
    <el-alert title="成功提示的文案" type="success" effect="dark"> </el-alert>
    <el-alert title="消息提示的文案" type="info" effect="dark"> </el-alert>
    <el-alert title="自定义 close-text" type="info" close-text="知道了">
    </el-alert>
  </div>
</template>

<script>
export default {
  name: "alert.vue",
};
</script>

<style>
#container .el-alert {
  margin: 20px;
}
</style>
5.1.2 Alert 组件的属性

Element UI

5.2 Message 消息提示组件
5.2.1 Message 组件的创建
<template>
  <el-button :plain="true" @click="open">打开消息提示</el-button>
  <el-button :plain="true" @click="openVn">VNode</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$message('这是一条消息提示');
      },

      openVn() {
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        });
      }
    }
  }
</script>

注意:这个组件的创建无须在页面中书写任何标签,他是一个js插件,在需要展示消息提示的位置直接调用提供的js插件方法即可

6 表格组件
6.1 Table 组件
6.1.1 Table组件的创建
<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "table.vue",
  data() {
    return {
      tableData: [
        { id: 1, name: "小张", age: "20", email: "123456@qq.com" },
        { id: 2, name: "张", age: "20", email: "12345@qq.com" },
      ],
    };
  },
};
</script>
6.1.2 表格中的属性

Element UI
Element UI
Element UI
Element UI
Element UI文章来源地址https://www.toymoban.com/news/detail-761561.html

到了这里，关于Element UI的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 一、深度学习引言

    一、深度学习引言

    数据的集合称为 数据集 ，每个数据集由一个个的 样本（sample，example） (或称为 数据点(data point) / 数据实例(data instance) )组成，每个样本由一组 特征(features，或协变量（covariates）) 属性组成.需要预测的属性称为 标签（label 或目标（target） 。 在深度学习中，模型是一种数学

    2024年02月08日
    浏览(34)
  • 需求分析引言：架构漫谈（一）

    需求分析引言：架构漫谈（一）

    本文主要对架构的概念做一些介绍，并引申出需求分析的重要性。 后续准备做一个系列，定期介绍我工作以来的一些需求实现的案例。 注：因为架构的内容比较庞大，里面的每个点，都可以扩展成一系列的文章， 因此，本文只是漫谈，多数内容仅做介绍，后续有时间，我再

    2024年02月10日
    浏览(41)

  • 引言：ElasticSearch的基本概念

    ElasticSearch是一个基于分布式搜索和分析的开源搜索引擎。它是一个实时、可扩展、高性能的搜索引擎，可以处理大量数据并提供快速、准确的搜索结果。ElasticSearch的核心概念包括索引、类型、文档、映射、查询和聚合等。在本文中，我们将深入探讨ElasticSearch的基本概念、核

    2024年02月19日
    浏览(37)

  • 01.机器学习引言

    1. 数据搜集 其中数据划分，是将数据集分为训练集、验证集和测试集（通常不考虑时间） 2. 数据清洗 3. 特征工程 提取对象：原始数据（特征提取一般在特征选择之前） 提取目的：自动地构建新的特征，将原始数据转换为一组具有明显物理意义（例如，几何特征、纹理特征

    2024年02月12日
    浏览(48)

  • 引言：ElasticSearch简介和目标

    ElasticSearch是一个开源的搜索和分析引擎，基于Lucene库构建，具有高性能、可扩展性和实时性等优势。它广泛应用于企业级搜索、日志分析、监控等场景。本文将深入探讨ElasticSearch的背景、核心概念、算法原理、最佳实践、应用场景、工具推荐等方面，为读者提供一个全面的

    2024年02月20日
    浏览(35)

  • 数据库系统概论-00引言

    -数据库系统的发展经历了三代演变 层次/网状数据库系统，关系数据库系统，新一代数据库系统。 -造就了四位图灵奖得主 C.W.Bachman,E.F.Codd,James Gray,M.R.Stoebraker.。 -发展了一门计算机基础学科· 数据建模和DBMS核心技术为主，内容丰富，领域宽广。 -带动了一个巨大软件产业 D

    2024年01月22日
    浏览(53)

  • 设计模式】引言-六大设计原则

    ● 概念：仅有一个引起其变化的原因。 ● 个人理解：一个类中应该是一组相关性很高的函数及数据的封装 主观性较强，和起名一样困难，一个方法放在ClassA合理还是放在ClassB合理？ ● 概念：一个软件实体应当对扩展开放，对修改关闭。即软件实体应尽量在不修改原有代码

    2023年04月24日
    浏览(40)
  • JVM——引言+JVM内存结构

    JVM——引言+JVM内存结构

    定义: Java VirtualMachine -java 程序的运行环境 (ava 二进制字节码的运行环境) 好处: 一次编写，到处运行 自动内存管理，垃圾回收功能 数组下标越界检查， 多态 比较: jvm jre jdk 面试 理解底层实现原理 中高级程序员的必备技能 自己百度查找 定义 Program Counter Register 程序计数器(寄

    2024年02月11日
    浏览(37)

  • ChatGPT 盈利指南：引言到第七章

    原文：Get Rich With ChatGPT:: How To Make Money Online 译者：飞龙 协议：CC BY-NC-SA 4.0 你是否曾经尝试过在网上赚钱，但感到被大量的机会所压倒，不知道从何开始？那么不用再找了，因为这本书将指导你了解一切你需要知道的，以便在利用 ChatGPT 的同时在网上赚钱。我将成为你在这个

    2024年01月18日
    浏览(38)
  • 云计算科学与工程实践指南--章节引言收集

    云计算科学与工程实践指南--章节引言收集

    //本文收集 【云计算科学与工程实践指南】 书中每一章节的引言。 我已厌倦了在一本书中阅读云的定义。难道你不失望吗？你正在阅读一个很好的故事，突然间作者必须停下来介绍云。谁在乎云是什么？ 通常来讲，最成功的人是那些拥用最佳信息的人。 收集数据只是走向智

    2024年03月17日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包