Vue.js 中使用第三方 UI 库 Element 的实践-JavaScript中文网-JavaScript教程资源分享门户

Vue.js 作为一款流行的前端框架，具备轻量、易用、高效等特点，备受广大前端开发者的喜爱。与此同时，在实际开发中，使用现成的第三方 UI 库可以大大提高开发效率。本文将介绍如何在 Vue.js 中使用第三方 UI 库 Element，并给出详细代码示例，帮助您在实践中进一步了解 Element 的使用方法。

Element UI 简介

Element UI 是一款基于 Vue.js 的第三方 UI 库，由饿了么技术团队负责维护。它提供了丰富的组件和工具，包括表格、表单、对话框、布局等等。用户可以根据需求选择所需的组件，简化了前端开发过程，同时也可以改善产品视觉效果。

Element UI 安装

首先，需要在项目中通过 npm 安装 Element UI。

npm install element-ui --save

同时，在 main.js 中引入 Element UI 和其样式文件。

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

Vue.use(ElementUI);

Element UI 使用

基础组件

Element UI 提供的基础组件非常丰富，包括按钮、输入框、下拉框、单选框等等。

// www.javascriptcn.com code example
<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-input placeholder="请输入内容"></el-input>
    <el-select v-model="selectedOption" placeholder="请选择">
      <el-option label="选项1" value="option1"></el-option>
      <el-option label="选项2" value="option2"></el-option>
    </el-select>
    <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 {
      selectedOption: '',
      radio: '',
    };
  },
};
</script>

页面布局

Element UI 还提供了很多页面布局的组件，如栅格布局、面板、卡片等等。其中比较常用的是栅格布局，可以方便地将页面分成若干个区块。

// www.javascriptcn.com code example
<template>
  <el-row>
    <el-col :span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-pink"></div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-green"></div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-yellow"></div>
    </el-col>
  </el-row>
</template>

<script>
export default {};
</script>

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

.bg-purple {
  background-color: #97a8be;
}

.bg-pink {
  background-color: #d3adf7;
}

.bg-green {
  background-color: #6bf78b;
}

.bg-yellow {
  background-color: #f7e899;
}
</style>

数据展示

在数据展示方面，Element UI 提供了表格、标签、面包屑、时间轴等等组件，用于展示数据和页面交互。

// www.javascriptcn.com code example
<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-tag>标签1</el-tag>
    <el-tag>标签2</el-tag>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-timeline>
      <el-timeline-item timestamp="2021/04/01">某个时间点</el-timeline-item>
      <el-timeline-item timestamp="2021/04/02">某个时间点</el-timeline-item>
      <el-timeline-item timestamp="2021/04/03">某个时间点</el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2021-04-01',
          name: '张三',
          address: '广州市天河区',
        },
        {
          date: '2021-04-02',
          name: '李四',
          address: '深圳市南山区',
        },
        {
          date: '2021-04-03',
          name: '王五',
          address: '北京市海淀区',
        },
      ],
    };
  },
};
</script>

组件交互

在组件交互方面，Element UI 提供了对话框、提示框、进度条等等组件，方便与用户进行交互。

// www.javascriptcn.com code example
<template>
  <div>
    <el-dialog title="提示" :visible="dialogVisible" @close="dialogVisible = false">
      <p>这是一段文字内容</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-button @click="handleClick">打开对话框</el-button>
    <el-alert title="警告" type="warning" show-icon></el-alert>
    <el-progress :percentage="30"></el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClick() {
      this.dialogVisible = true;
    },
  },
};
</script>

结语

本文介绍了如何在 Vue.js 中使用 Element UI，包括 Element UI 的安装和使用，以及具体的示例代码。通过对 Element UI 的学习实践，可以更好地理解如何在 Vue.js 项目中使用第三方 UI 库，提高前端开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d69455a941bf7134c5e1de

Vue.js 中使用第三方 UI 库 Element 的实践