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

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不可比拟的。推荐大家使用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注