Element 快速入门

Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。和 Material 一样，Element 有自己比较完善的生态系统。除了本文要介绍的 Element Vue，还推出了 Element React 的 Element React。同时 element 还有自己的设计原则和简要指南。饿了么前端真了不起！

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

此处仅以 npm 方式为例进行讲解。CDN 方式请参看官方文档。

使用 vue-cli

[shell]
npm install -g vue-cli
vue init webpack projectname
[/shell]

引入 Element

我们可以引入整个 Element，或是根据需要仅引入部分组件。我只介绍如何引入部分的 Element。

在 main.js 中写入以下内容：

import Vue from 'vue';
import { DatePicker } from 'element-ui';
import App from './App.vue';

Vue.component(DatePicker.name, DatePicker);
/* 或写为
 * Vue.use(DatePicker)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

全局配置：

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。

开始使用

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写 App 组件的代码了。

<template>
  <div class="block">
    <span>Time</span>
    <el-date-picker
      v-model="datetime"
      type="datetime"
      format="MM-dd-yyyy hh:mm:ss a"
      placeholder="Select Date Time"
      :picker-options="pickerOptions"
      default-time="12:00:00">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: 'Today',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: 'Yesterday',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: 'One week ago',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      datetime: ''
    };
  }
};
</script>

本实例中，我们自定义了日期快捷选项并设置了默认时间为中午 12 点。

DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

DateTimePicker 允许我们在同一个选择器里选择日期和时间。本质上还是 DatePicker，只是它的 type 属性就 datetime 而不是 date。

国际化

好的组件库是支持国际化的，Element 也不例外。Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：

import Vue from 'vue'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
import { DatePicker } from "element-ui";
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(DatePicker)
locale.use(lang)

在 App.Vue 的模板中我们还需要根据英文习惯设置 format 属性，一般设置为c"MM-dd-yyyy hh:mm:ss a"c就行了。

参考

访问 codesandbox 查看详细 代码清单。

分享：codesandbox 是个好工具，直接支持 Vue/React/Angular 的 CLI 工程，这是 JSFiddle 不可比拟的。推荐大家使用。