参考资料

1. 模块化web ui组件库
2. docx和doc的哪个好
3. xls和xlsx的区别
4. docx是word文件吗
5. element ui 便捷的 ui 组件库
6. xls表格怎么制作表格
7. docx和doc的区别
8. docx和doc的转换

element-ui 组件库

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 实现