element
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
npm 安装
cnpm i element-ui -S
引入 Element
在 main.js 中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
全局配置
在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。按照引入 Element 的方式,具体操作如下:
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });
按照以上设置,项目中所有拥有 size 属性的组件的默认尺寸均为 ‘small’,弹框的初始 z-index 为 3000。
router属性
是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转
<el-submenu router index="1">
<template slot="title"><i class="el-icon-tickets"></i>内容管理</template>
<el-menu-item index="1-1">新建文章</el-menu-item>
<el-menu-item index="1-2">文章列表</el-menu-item>
<el-menu-item index="1-3">文章管理</el-menu-item>
</el-submenu>
form部分校验
validateField 对部分表单字段进行校验的方法
// 发送短信
sendMsg(phoneNum) {
this.$refs.thirdForm.validateField('phone', (phoneError) => {