入门指南：使用Element UI构建漂亮的Vue.js应用

引言

Element UI是一个基于Vue.js的组件库，提供了一系列的可复用的UI组件，帮助开发者快速构建漂亮的用户界面。在本篇博客中，我们将逐步介绍如何开始使用Element UI，并展示一些常用的组件和功能。

安装并引入Element UI

首先，我们需要安装Element UI库。可以通过npm或yarn来进行安装：

npm install element-ui

安装完成后，我们需要在Vue应用中引入Element UI库。在项目的入口文件（通常是 main.js 或类似的文件）中添加以下代码：

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

Vue.use(ElementUI);
这段代码会将Element UI注册为Vue的插件，使其成为全局可用的组件。

使用Element UI组件

现在我们已经成功引入了Element UI，我们可以开始使用其中的组件了。以下是一个示例，展示如何使用Element UI中的 el-button 组件：

<template>
  <div>
    <el-button type="primary">点击我</el-button>
  </div>
</template>

<script>
export default {
  // 组件的其他选项
}
</script>

在这个示例中，我们在Vue组件中使用了 el-button 组件，指定了按钮的类型，并在按钮内部添加了文本。

更多常用组件

Element UI提供了众多常用的UI组件，例如表单、表格、对话框、菜单等。下面是一些常用组件的示例：

Button 按钮

<template>
  <div>
    <el-button type="primary">Primary Button</el-button>
    <el-button type="success">Success Button</el-button>
    <el-button type="warning">Warning Button</el-button>
    <el-button type="danger">Danger Button</el-button>
  </div>
</template>

<script>
import { ElButton } from 'element-ui';

export default {
  components: {
    ElButton
  }
}
</script>

Input 输入框

<el-input v-model="inputValue" placeholder="请输入内容"></el-input>

Radio 单选框

<template>
  <div>
    <el-radio-group v-model="selected">
      <el-radio :label="1">选项1</el-radio>
      <el-radio :label="2">选项2</el-radio>
      <el-radio :label="3">选项3</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
import { ElRadio, ElRadioGroup } from 'element-ui';

export default {
  data() {
    return {
      selected: 1
    };
  },
  components: {
    ElRadio,
    ElRadioGroup
  }
}
</script>

Checkbox 多选框

<template>
  <div>
    <el-checkbox-group v-model="checked">
      <el-checkbox label="选项1">选项1</el-checkbox>
      <el-checkbox label="选项2">选项2</el-checkbox>
      <el-checkbox label="选项3">选项3</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import { ElCheckbox, ElCheckboxGroup } from 'element-ui';

export default {
  data() {
    return {
      checked: ['选项1']
    };
  },
  components: {
    ElCheckbox,
    ElCheckboxGroup
  }
}
</script>

Select 选择器

<template>
  <div>
    <el-select v-model="selected" placeholder="请选择">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import { ElSelect, ElOption } from 'element-ui';

export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
      ]
    };
  },
  components: {
    ElSelect,
    ElOption
  }
}
</script>

Switch 开关

<template>
  <div>
    <el-switch v-model="switchValue" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"></el-switch>
  </div>
</template>

<script>
import { ElSwitch } from 'element-ui';

export default {
  data() {
    return {
      switchValue: 1
    };
  },
  components: {
    ElSwitch
  }
}
</script>

Slider 滑块

<template>
  <div>
    <el-slider v-model="sliderValue" :min="0" :max="100" show-input></el-slider>
    <span>{{sliderValue}}</span>
  </div>
</template>

<script>
import { ElSlider } from 'element-ui';

export default {
  data() {
    return {
      sliderValue: 50
    };
  },
  components: {
    ElSlider
  }
}
</script>

这个示例中使用了 组件来创建一个滑动条。通过 v-model 指令和 sliderValue 数据属性进行双向绑定，以便获取用户的选择值。此处的 sliderValue 属性的初始值为 50。我们使用 :min 和 :max 属性分别设置滑块的最小值和最大值为 0 和 100。同时，我们将 show-input 属性设置为 true，以显示一个数值输入框，允许用户手动输入数值。

在模板中我们将 sliderValue 属性绑定到 组件上，同时使用 v-model 指令使其支持双向数据绑定。我们还在组件外使用了一个 标签来显示用户当前选择的值。

DatePicker 日期选择器

<template>
  <div>
    <el-date-picker v-model="dateValue" type="date" placeholder="选择日期"></el-date-picker>
  </div>
</template>

<script>
import { ElDatePicker } from 'element-ui';

export default {
  data() {
    return {
      dateValue: ''
    };
  },
  components: {
    ElDatePicker
  }
}
</script>

这个示例中使用了 组件来创建一个日期选择器。我们将 v-model 指令和 dateValue 数据属性进行双向绑定，以便获取用户选择的日期。

在 组件中，我们使用 type 属性来指定选择器的类型为日期选择器。我们还设置了 placeholder 属性来显示一个占位符文本，以提示用户选择日期。

Table 表格

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
      ]
    };
  },
  components: {
    ElTable,
    ElTableColumn
  }
}
</script>

这个示例中使用了 组件来创建一个数据表格。我们使用 :data 属性来将数据绑定到表格中。这里的 tableData 数据数组包含了三个对象，每个对象表示表格中的一行数据。

在 组件中，我们使用 组件来创建列头。我们在每个 组件中使用 prop 属性来指定要显示的数据对象中的属性，使用 label 属性来指定表头的标题。例如，在第一个 组件中，我们指定要显示 name 属性的值，同时将列头标题设置为“姓名”。

Pagination 分页

<template>
  <div>
    <el-pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
    >
    </el-pagination>
  </div>
</template>

<script>
import { ElPagination } from 'element-ui';

export default {
  data() {
    return {
      total: 100, // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页显示的记录数
    };
  },
  components: {
    ElPagination
  },
  methods: {
    handleCurrentChange(newPage) {
      // 处理页码改变的逻辑
      this.currentPage = newPage;
      // 从后端加载对应页码的数据
      this.loadData();
    },
    loadData() {
      // 请求后端接口加载数据
      // 根据 this.currentPage 和 this.pageSize 来获取相应页码的数据
    }
  }
};
</script>

这个示例中使用了 组件来创建一个分页器。我们使用 :total 属性指定总记录数，使用 :current-page 属性指定当前页码，使用 :page-size 属性指定每页显示的记录数。

在 组件中，我们使用 @current-change 事件监听页码改变的事件，并根据新的页码执行相应的逻辑。其中，我们在 handleCurrentChange 方法中更新 currentPage 的值，并调用 loadData 方法来加载对应页码的数据。

Dialog 对话框

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button>
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      :before-close="handleClose"
      width="30%"
    >
      <span>确定要进行此操作吗？</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ElButton, ElDialog } from 'element-ui';

export default {
  data() {
    return {
      dialogVisible: false // 控制弹窗的显示隐藏
    };
  },
  components: {
    ElButton,
    ElDialog
  },
  methods: {
    handleClose(done) {
      // 在关闭弹窗前执行一些逻辑
      if(confirm('确定要关闭弹窗吗？')) {
        done();
      }
    },
    handleSubmit() {
      // 执行操作的逻辑
      // 关闭弹窗
      this.dialogVisible = false;
    }
  }
};
</script>

Form 表单

<template>
  <el-form :model="formData" :rules="formRules" ref="form" label-width="100px" class="demo-form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="formData.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-ui';

export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度为6至20个字符', trigger: 'blur' }
        ]
      }
    };
  },
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，执行提交逻辑
          console.log('表单提交成功');
        } else {
          // 表单验证不通过，做出相应处理
          console.log('表单提交失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

在这个示例中，我们使用 组件来创建一个表单，并使用 :model 属性将表单数据绑定到 formData 对象上。使用 :rules 属性来设置表单验证规则，label-width 属性来设置标签的宽度。

在 组件中，我们使用 组件来创建表单项。每个表单项包含一个标签和相应的控件，我们使用 label 属性来设置标签的文本，prop 属性来指定对应的数据字段。在本例中，分别创建了一个用户名（username）和密码（password）的表单项，我们使用 组件作为输入控件，并使用 v-model 来与 formData 对象中的相应字段进行双向绑定。

Menu 菜单

<template>
  <el-menu :default-active="$route.path" class="demo-menu" router>
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/about">关于我们</el-menu-item>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span>导航二</span>
      </template>
      <el-menu-item index="/products">产品</el-menu-item>
      <el-menu-item index="/services">服务</el-menu-item>
    </el-submenu>
    <el-menu-item index="/contact">
      <i class="el-icon-phone"></i>
      <span>联系我们</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { ElMenu, ElSubmenu, ElMenuItem } from 'element-ui';

export default {
  components: {
    ElMenu,
    ElSubmenu,
    ElMenuItem
  }
};
</script>

<style scoped>
.demo-menu {
  height: 100%;
}
</style>

Tabs 标签页

<template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane label="标签一" name="tab1">
      <p>标签一的内容...</p>
    </el-tab-pane>
    <el-tab-pane label="标签二" name="tab2">
      <p>标签二的内容...</p>
    </el-tab-pane>
    <el-tab-pane label="标签三" name="tab3">
      <p>标签三的内容...</p>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ElTabs, ElTabPane } from 'element-ui';

export default {
  components: {
    ElTabs,
    ElTabPane
  },
  data() {
    return {
      activeTab: 'tab1'
    };
  },
  methods: {
    handleTabClick(tab) {
      console.log('点击了标签', tab.name);
    }
  }
};
</script>

Tooltip 提示

<template>
  <div class="container">
    <el-tooltip content="这是一个提示信息" placement="top-start">
      <span>悬停在我上面显示提示</span>
    </el-tooltip>
  </div>
</template>

<script>
import { ElTooltip } from 'element-ui';

export default {
  components: {
    ElTooltip
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Popover 弹出框

<template>
  <div class="container">
    <el-popover
      trigger="hover"
      placement="top"
      title="提示标题"
      content="这是一个弹出框内容">
      <button>悬停在我上面显示弹出框</button>
    </el-popover>
  </div>
</template>

<script>
import { ElPopover } from 'element-ui';

export default {
  components: {
    ElPopover
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Message 消息提示

// 在 Vue 组件中的某个方法中使用 $message 方法
methods: {
  showMessage() {
    this.$message({
      message: '这是一条消息提示',
      type: 'success'
    });
  }
}

Notification 通知

// 在 Vue 组件中的某个方法中使用 $notify 方法
methods: {
  showNotification() {
    this.$notify({
      title: '重要通知',
      message: '您的账户余额已不足，请尽快充值！',
      type: 'warning',
      duration: 6000
    });
  }
}

Loading 加载

// 在 Vue 组件中的某个方法中使用 $loading 方法
methods: {
  startLoading() {
    this.$loading({
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
  },
  endLoading() {
    this.$loading().close();
  }
}

Carousel 走马灯

<template>
  <el-carousel :interval="3000">
    <el-carousel-item v-for="item in carouselItems" :key="item.id">
      <img :src="item.imageUrl" alt="carousel-item">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      carouselItems: [
        { id: 1, imageUrl: 'path-to-image-1' },
        { id: 2, imageUrl: 'path-to-image-2' },
        { id: 3, imageUrl: 'path-to-image-3' }
      ]
    };
  }
};
</script>

这只是Element UI提供的一小部分组件，更多组件请参考Element UI官方文档。

结语

在本篇博客中，我们简要了解了如何开始使用Element UI，并展示了其中一些常用的组件和功能。Element UI不仅提供了现成的UI组件，还支持可自定义主题和扩展，为开发者提供了更灵活的选择。

---

博客主页：魔王-T

大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞收藏⭐评论✍️

---