Element快速入门 – RIA爱好者

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

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

npm i element-ui -S

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

使用 vue-cli

npm install -g vue-cli
vue init webpack projectname

引入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属性，一般设置为”MM-dd-yyyy hh:mm:ss a”就行了。

可以点击查看详细代码清单。

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