【Element入门】2、Element UI 的基本使用

【Element入门】Element UI 的基本使用

Element入门系列导航

【Element入门】1、Element UI 介绍与安装
【Element入门】2、Element UI 的基本使用（本文）
【Element入门】3、Element UI 表单组件详解
【Element入门】4、Element UI 布局组件详解
【Element入门】5、Element UI 导航组件详解
【Element入门】6、Element UI 数据展示组件详解
【Element入门】7、Element UI 反馈组件详解
【Element入门】8、Element UI 自定义主题

前言

在上一章中，我们介绍了如何安装和配置 Element UI。本篇文章将进一步介绍 Element UI 的基本使用方法，包括如何创建一个基础页面以及一些常用组件的使用方法。

使用Element UI创建基础页面

创建基础页面结构

首先，我们需要创建一个基础的 Vue 组件，并在其中使用 Element UI 提供的组件。假设我们已经有一个通过 Vue CLI 创建的项目，并且已经按照上一章的步骤安装和配置了 Element UI。

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main Content</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

上述代码使用了 Element UI 的布局容器

el-container

、

el-header

、

el-main

和

el-footer

组件，创建了一个简单的页面结构。

使用Element UI样式

Element UI 自带了一套美观的样式，我们可以直接使用这些样式来美化页面。可以在

App.vue

中添加一些样式来调整布局：

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  padding: 20px;
}
</style>

这样，一个基本的页面结构就完成了。接下来，我们将介绍一些常用的 Element UI 组件。

常用组件介绍

Button 按钮

按钮是最常用的组件之一，Element UI 提供了多种类型和样式的按钮。我们可以在页面中添加一些按钮：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <el-button type="primary">Primary Button</el-button>
        <el-button>Default Button</el-button>
        <el-button type="text">Text Button</el-button>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

在上述代码中，我们使用了

el-button

组件，并通过

type

属性设置了不同类型的按钮。Element UI 还提供了其他按钮属性，如

size

、

icon

等，可以根据需求进行配置。

Input 输入框

输入框是表单中常用的组件之一。Element UI 的输入框组件支持多种类型的输入，并且可以与表单验证等功能配合使用。我们可以在页面中添加一个输入框：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <el-input placeholder="Please input"></el-input>
        <el-input v-model="input" placeholder="Input with binding"></el-input>
        <p>Input value: {{ input }}</p>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      input: ''
    };
  }
};
</script>

在上述代码中，我们使用了

el-input

组件，并通过

v-model

指令实现了双向数据绑定。

Select 选择器

选择器是表单中常用的组件之一，用于从预定义的选项中选择一个或多个值。我们可以在页面中添加一个选择器：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <el-select v-model="selected" placeholder="Select">
          <el-option label="Option 1" value="1"></el-option>
          <el-option label="Option 2" value="2"></el-option>
          <el-option label="Option 3" value="3"></el-option>
        </el-select>
        <p>Selected value: {{ selected }}</p>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      selected: ''
    };
  }
};
</script>

在上述代码中，我们使用了

el-select

组件和

el-option

组件来创建一个选择器，并通过

v-model

指令实现了双向数据绑定。

布局组件

Element UI 提供了一些布局组件，可以帮助我们快速搭建页面的布局结构。除了前面提到的

el-container

、

el-header

、

el-main

和

el-footer

组件，

el-row

和

el-col

也是常用的布局组件。

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e9eef3;
}
</style>

在上述代码中，我们使用了

el-row

和

el-col

组件来创建一个三列布局，并通过

gutter

属性设置列之间的间距。

表单组件

Element UI 提供了强大的表单组件，可以帮助我们快速构建表单，并且支持表单验证。下面是一个简单的表单示例：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="Username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="Password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">Submit</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form submitted with:', this.form);
    }
  }
};
</script>

在上述代码中，我们使用了

el-form

和

el-form-item

组件来创建一个简单的登录表单。通过

v-model

指令实现表单数据的双向绑定，并在点击提交按钮时输出表单数据。

小结

通过本章的学习，我们了解了如何使用 Element UI 创建一个基础页面，并介绍了几个常用组件的使用方法，包括按钮、输入框、选择器、布局组件和表单组件。Element UI 提供了丰富的组件和强大的功能，可以帮助我们快速构建现代化的 Web 应用。

在接下来的章节中，我们将深入探讨更多高级组件的使用方法和技巧，敬请期待！