参考资料

1. docx是word文件吗
2. web原生ui组件库
3. element-ui 组件库
4. element ui 便捷的 ui 组件库
5. docx和doc的区别
6. doc是什么意思
7. web端ui组件库
8. xls是什么文件

Element UI 组件库说明

简介

Element UI 是一套基于 Vue.js 2.0 的桌面端组件库，由饿了么前端团队开发。

安装

npm 安装

npm install element-ui -S

CDN 引入

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

快速开始

完整引入

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

Vue.use(ElementUI)

按需引入

import { Button, Select } from 'element-ui'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

常用组件示例

按钮 (Button)

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>

表单 (Form)

<el-form :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
  </el-form-item>
</el-form>

表格 (Table)

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

对话框 (Dialog)

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
  <span>这是一段信息</span>
  <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>

消息提示 (Message)

this.$message('这是一条消息提示')
this.$message.success('这是一条成功消息')
this.$message.warning('这是一条警告消息')
this.$message.error('这是一条错误消息')

主题定制

可以通过修改变量或使用在线主题生成工具定制主题颜色。

注意事项

1. Element UI 仅支持 Vue 2.x 版本

2. 按需引入需要配合 babel-plugin-component 插件

3. 国际化支持通过设置 Vue.prototype.$ELEMENT 实现