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