element学习文档（1）

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) => {