elementui使用

安装：

npm i element-ui -s

下载最新资源
下载相关文件

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

vue和element使用快速上手

1 在mian.ts中引入相关element

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);

2 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

 npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来 使用方法：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

Container布局

<el-container> 外部容器 如果页面包含<el-header>,<el-footer>页面将垂直排布，否则水平
<el-header>顶部容器  高度默认60px
<el-aside>侧边栏容器  宽度默认300px
<el-main>主要区域容器
<el-footer>底部容器   高度默认60px
以上组件使用flex布局，后4个得父级必须是 container

aside用法
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
  </el-aside>

button

<el-button type="primary">默认按钮</el-button> 
<el-button type="primary" plain>朴素按钮</el-button>
 <el-button type="primary" round>圆角按钮</el-button>
 <el-button type="primary" icon="el-icon-edit" circle></el-button>圆形图标按钮
 <el-button type="text">文字按钮</el-button> 
 
 禁用状态 添加 disabled boolean值
 <el-button type="primary" plain disabled>主要按钮</el-button>
 
 <el-button type="primary" :loading="true">加载中</el-button> 显示加载状态
 
 按钮组
 <el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>

button大小控制
额外的尺寸：medium、small、mini，通过设置size属性来配置它们。
<el-button size="medium" round>中等按钮</el-button>

radio

<el-radio v-model="radio" label="1">备选项</el-radio>
<script>
  export default {
    data () {
      return {
        radio: '1'   选中得哪个
      };
    }
  }
</script>
添加disabled  即可成为不可点击得状态

互斥得必须有一个选中得元素
<el-radio-group v-model="radio2">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>

单选得按钮组合
<el-radio-group v-model="radio4" size="medium">
      <el-radio-button label="上海" ></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>

有边框得radio
<el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>

checkbox

<!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
  
<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
      };
    }

是否全选
<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

input

<el-input placeholder="请输入内容" v-model="input10" clearable></el-input>使用clearable属性即可得到一个可清空的输入框

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标
属性方式 ：
 <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"></el-input>
 slot方式：
 <el-input  placeholder="请选择日期"  v-model="input22">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
textarea
<el-input  type="textarea" autosize  placeholder="请输入内容"  v-model="textarea2"></el-input>

可通过 slot 来指定在 input 中前置或者后置内容。
<el-input placeholder="请输入内容" v-model="input3">
    <template slot="prepend">Http://</template>  前面
    <template slot="append">.com</template> 后面
  </el-input>

<el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
      <el-option label="餐厅名" value="1"></el-option>
      <el-option label="订单号" value="2"></el-option>
      <el-option label="用户电话" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
  可通过 size 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。

inputNumber 计数器

<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
:precision="2" :step="0.1"   数值精度 增加的数
controls-position="right"控制按钮的位置

select

基础用法
<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。
使用el-option-group对备选项进行分组，它的label属性为分组名
<el-select v-model="value7" placeholder="请选择">
    <el-option-group
      v-for="group in options3"
      :key="group.label"
      :label="group.label">
      <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-option-group>
  </el-select>

开关

<el-switch
  style="display: block"
  v-model="value4"
  active-color="#13ce66"
  inactive-color="#ff4949"
  active-text="按月付费"
  inactive-text="按年付费">
</el-switch>