elementui使用

安装：

npm i element-ui -s

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

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布局

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

aside用法

    
      
        
        
          
          选项1
          选项2
        
        
          选项3
        
        
          
          选项4-1
        
      
  

button

默认按钮 
朴素按钮
 圆角按钮
 圆形图标按钮
 文字按钮 
 
 禁用状态 添加 disabled boolean值
 主要按钮
 
 加载中 显示加载状态
 
 按钮组
 
  上一页
  下一页


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

radio

备选项

添加disabled  即可成为不可点击得状态

互斥得必须有一个选中得元素

    备选项
    备选项
    备选项
  

单选得按钮组合

      
      
      
      
    

有边框得radio
备选项1

checkbox

  备选项
  

input

使用clearable属性即可得到一个可清空的输入框

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标
属性方式 ：
 
 slot方式：
 
    
  
textarea


可通过 slot 来指定在 input 中前置或者后置内容。

      前面
     后面
  


    
      
      
      
    
    
  
  可通过 size 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。

inputNumber 计数器

:precision="2" :step="0.1"   数值精度 增加的数
controls-position="right"控制按钮的位置

select

基础用法

    
    
  
  为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。
使用el-option-group对备选项进行分组，它的label属性为分组名

    
      
      
    
  

开关