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

一只小爪磕
312 阅读4分钟

【Element入门】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 应用。

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

avatar
文章
阅读
粉丝