Element-ui

Element-ui介绍及文档
    ElementUI

        1. 相关概念
            基于Vue2.0的组件库， 帮助网站快速成型， 由饿了吗  开源的

            怎么使用？ 关注官网---找一找----查看示例代码---复制一下----简单修改

        2. ElementUI的具体使用

            Vue2.0   先安装插件   npm install --save element-ui     

                    main.js 中：  import ElementUI  from 'element-ui'
                        
                             import 'element-ui/lib/theme-thalk/index.css'

                             Vue.use(ElementUI)

图标样式使用

• 一般情况下，使用i标签，并将class属性设置成对应的图标名即可；而对于别的组件希望引入图标时（可使用icon属性，例如el-button），设置icon属性为对应的图标名。

  <i class='el-icon-user-solid'></i>

  <el-button icon='el-icon-delete-solid'>删除</el-nutton>

指令样式使用

        例如Loading加载，其提供的是一个指令v-loading，使用时直接调用就行。

        <el-table v-loading='true' :data="tableData">
            <el-table-column prop="name" label="姓名">
        </el-table>

事件样式使用

例如Message消息提示，结合事件使用。

<el-button :plain="true" @click="successMessage">成功</el-button>
<el-button :plain="true" @click="warnMessage">警告</el-button>
<el-button :plain="true" @click="infoMessage">普通消息</el-button>
<el-button :plain="true" @click="errorMessage">错误</el-button>

errorMessage(){
      this.$message({
        message: "错误消息",
        type: "error"
      })
    },
    infoMessage(){
      this.$message("普通消息")
    },
    successMessage(){
      this.$message({
        message: "成功信息",
        type: "success"
      })
    },
    warnMessage(){
      this.$message({
        message: "警告信息",
        type:"warning"
      })
    },

method

组件内置的方法，使用时可以通过组件自身调用，使用步骤如下：

• 组件设置ref属性

• 通过this.$refs.ref属性名.方法()调用组件自身的method方法

  例如el-input组件提供了focus()方法，获取焦点

组件的属性        

   attribute  一般属性，  :data="值"     布尔类型属性，true/false    clearable

            slot   插值

            event    v-on:change    如el-input中的值改变；   @change

            method  组件的方法，首先获取当前的组件对象， 然后组件本身调用其 对应的方法

                ref  有什么用？  选择组件
                el-input   ref='username'

                    this.$refs.username.focus( )

            option
                属性值为对象时， 对象中的key-value 即为option选项

Container 布局容器

组件的布局

            1. 24分栏的 layout 布局

                什么是24分栏？ 将页面宽度分为24份

                el-row  :gutter    通过gutter属性设置列之间的间隔   type='flex'  justify='start'
                    el-col  :span="3"   :offset 偏移量
                    el-col  :span="6"

用于布局的容器组件，方便快速搭建整个页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

分页

size-change 每页展示的数量改变时，触发

current-change当前页码 变动时候触发的事件

page-sizes 可选择的页面展示数量，如[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。

page-size 当前 每页展示的数量

current-page 当前的页码

导航菜单 
    
        el-menu, 菜单 ， 默认垂直模式，通过mode='horizontal'改为水平模式
        el-menu-item，菜单项
        el-submenu，子菜单
        el-menu-item-group 菜单项组
        default-active 默认激活的选项， 如default-active="2"就是第二项默认激活
        
        open 打开 子菜单 的事件
        close 关闭 子菜单 的事件
        background-color='#545c64' 整体菜单栏的背景色
        text-color = '#fff' 字体颜色
        active-text-color= "#ffd04b" 激活项 的文本颜色
 

级联选择器 
      options, 下拉选项
      clearable, 是否可以清空
      placeholder, 提示信息占位符
      v-model  绑定选择的值
      change 值改变的事件，可以接收当前改变的新值

VUE点击左侧导航el-menu实现el-main动态路由跳转

VUE点击左侧导航el-menu实现el-main动态路由跳转 - 简书 (jianshu.com)