vue

1、下载npm i element-ui -S

2、引入css样式

　　<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

3、布局

　　父级盒子可以嵌套配置

　　el-row相当与div，可加属性：

　　　　：gutter="20"　　栅格间隔;即padding值

　　　　type="flex"　　　添加弹性盒子布局

　　　　justify=“start”　　flex布局的排列方式　　start/end/center/space-around/space-between

　　　　align=“top”　　　flex 布局下的垂直排列方式　　top/middle/bottom 上/中/下

　　　　tag=“ul”　　　　自定义标签

　　el-col是在el-row的下的div，属性可加：

　　　　：span = "24"　　 24等分

　　　　：offset=“1”　　　 栅格左侧的间隔格数1份　　margin-left

　　　　：push=“1”　　　  栅格向右移动格数1份　　　定位left

　　　　：pull="1"　　　　栅格向左移动格数1份　　   定位right

　　　　　tag　　　　　　自定义标签

　　　　　响应式布局：

　　　　　　　　：xs=“1”　　 <768px 　   1份　　

　　　　　　　　：sm=“2”　　≥768px  　  2份

　　　　　　　　：md=“3”　　≥992px  　  3份

　　　　　　　　：lg=“4”　　  ≥1200px  　4份

　　　　　　　　：xl=“5”　　  ≥1920px      5份

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

　　　　　　属性：direction　　子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal

　　<el-header>：顶栏容器。

　　　　　　属性：height　　高度

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

　　　　　　属性：width　　宽度

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

 

　　<el-footer>：底栏容器。

　　　　　　属性：height　　高度

4、图标icon

　　http://element.eleme.io/#/zh-CN/component/icon

5、按钮

　　el-button属性：

　　　　size="medium"　　medium / small / mini   中等、小型、超小

　　　　type="primary"　　primary / success / warning / danger / info / text　　更改背景颜色

　　　　plain　　　　true、false　　　　是否为朴素按钮（貌似没啥用）

　　　　round　　　　true、false　　　  是否为圆角

　　　　loading　　　　true、false　　　是否为加载中状态（点不了的按钮有啥用）

　　　　disabled　　　　true、false　　  是否禁用

　　　　icon=“”　　　　　图标类名　　　在按钮上添加图标

　　　　autofocus　　　　true、false　　是否默认聚焦

　　　　native-type　　button / submit / reset　　原生 type 属性

6、Radio 单选框

　　可以用v-model绑定属性，进行判断选中状态

　　radio的事件：

　　　　change　　绑定值变化时触发的事件　　例子：@change="执行函数"

　　el-radio属性：

　　　　label　　Radio的value　　也就是v-model绑定的标识

　　　　disabled　　true、false　  是否禁用

　　　　border　　true、false　　 是否显示边框

　　　　size=“”　　medium / small / mini　　尺寸，仅在 border 为真时有效

　　　　name　　　　原生 name 属性

　　el-radio-group属性：　　注：包裹radio组的容器

　　　　size=“”　　medium / small / mini　　改变所有子级带border属性的大小

　　　　disabled　　true、false　　是否禁用　　此群组所有的radio都被禁用

　　　　text-color=""　   颜色　　　激活时按钮文本颜色（注意是按钮）

　　　　fill=""　　　　　颜色　　　激活改变按钮的边框与背景色（注意是按钮）

　　el-radio-group事件

　　　　@change=“执行函数”　　　

　　el-radio-button　　按钮radio

　　　　label　　Radio的value　　也就是v-model绑定的标识

　　　　disabled　　是否禁用

　　　　name　　原声name属性

7、checkbox多选框

　　v-model可以绑定数组，控制那些checkbox为勾选状态　　

　　checkbox，Checkbox-button属性：

　　　　size=“”　　medium / small / mini　　多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效

　　　　disabled　　true、false　　是否禁用

　　　　true-label　　选中的值　　（啥意思？）

　　　　false-label　　没有选中时的值　　（啥意思？）

　　　　border　　true、false　　显示边框

　　　　name　　原生 name 属性

　　　　checked　　true、false　　当前是否勾选　　加上：为false也会变，只是初始默认值

　　　　indeterminate　　true、false　　设置 indeterminate 状态，只负责样式控制

　　Checkbox 事件

　　　　@change="执行函数"

　　Checkbox-group属性：

　　　　：min　　可以控制被勾选的项目的数量。（最小）

　　　　：max　　可以控制被勾选的项目的数量。（最大）

　　　　size=“”　　medium / small / mini　　多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效

　　　　disabled　　true、false　　是否禁用

　　　　text-color　　颜色　　按钮形式的 Checkbox 激活时的文本颜色

　　　　fill　　颜色　　按钮形式的 Checkbox 激活时的填充色和边框色

　　Checkbox-group事件：

　　　　@change=“执行函数”

8、input输入框

　　input属性：

　　　　type　　text / textarea　　input的类型 单行文本与多行文本

　　　　value=“”　　输入框中的值　　绑定值

　　　　：maxlength　　原生属性，最大输入长度

　　　　：minlength　　原生属性，最小输入长度

　　　　placeholder　　输入框占位文本

　　　　clearable　　true、false　　是否可清空

　　　　disabled　　true、false 　　是否禁用

　　　　size=“”　　　　medium / small / mini　　输入框尺寸，只在 type!="textarea" 时有效

　　　　prefix-icon=“图标的类名”　　输入框头部图标

　　　　suffix-icon=“图标的类名”　　输入框尾部图标

　　　　rows　　输入框行数，只对 type="textarea" 有效　　默认2

　　　　autosize　　自适应内容高度，只对 type="textarea"有效，可传入对象，如，{ minRows: 2, maxRows: 6 }

　　　　auto-complete　　原生属性，自动补全

　　　　name　　原生属性

　　　　readonly　　true、false　　原生属性，是否只读　　不能输入值

　　　　：max　　原生属性，设置最大值

　　　　：min　　原生属性，设置最小值

　　　　step　　原生属性，设置输入字段的合法数字间隔

　　　　resize　　none, both, horizontal, vertical　　控制是否能被用户缩放

　　　　autofocus　　true, false　　原生属性，自动获取焦点

　　　　form　　原生属性

　　　　label　　输入框关联的label文字

　　　　tabindex　　输入框的tabindex（不造啥意思）

　　Input slots属性：

　　　　prefix　　输入框头部内容，只对 type="text" 有效

　　　　suffix　　输入框尾部内容，只对 type="text" 有效

　　　　prepend　　输入框前置内容，只对 type="text" 有效

　　　　append　　输入框后置内容，只对 type="text" 有效

　　　　例子：

　　　　　　<el-input>

　　　　　　　　<i slot="prefix">111</i>

　　　　　　</el-input>

　　Input事件：

　　　　blur　　在 Input 失去焦点时触发

　　　　focus　　在 Input 获得焦点时触发

　　　　change　　在 Input 值改变时触发

　　　　clear　　在点击"clearable"属性生成的清空按钮时触发

　　Input方法

　　　　focus　　使 input 获取焦点（莫名奇妙？？？）

　　el-autocomplete属性：（可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中）

　　　　disabled　　boolean　　禁用

　　　　placeholder　　输入框占位文本

　　　　value-key　　输入建议对象中用于显示的键名

　　　　value　　　　必填值，输入绑定值

　　　　debounce　　获取输入建议的去抖延时

　　　　fetch-suggestions　　返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它　　Function(queryString, callback)　　（暂时未看）

　　　　popper-class　　Autocomplete 下拉列表的类名

　　　　trigger-on-focus　　是否在输入框 focus 时显示建议列表

　　　　name　　原生属性

　　　　select-when-unmatched　　在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件

　　　　label　　输入框关联的label文字　　

　　　　prefix-icon　　输入框头部图标

　　　　suffix-icon　　输入框尾部图标

　　Autocomplete slots属性：

　　　　name　　说明

　　　　prefix　　输入框头部内容

　　　　suffix　　输入框尾部内容

　　　　prepend　　输入框前置内容

　　　　append　　输入框后置内容

　　Autocomplete Events：

　　　　select　　点击选中建议项时触发

9、inputNumber计数器

　　el-input-number属性：

　　　　value　　绑定值

　　　　：min　　设置计数器允许的最小值

　　　　：max　　设置计数器允许的最大值

　　　　step　　　计数器步长

　　　　size　　large, small　　计数器尺寸

　　　　disabled　　boolean　　是否禁用计数器　　

　　　　controls　　boolean　　是否使用控制按钮

　　　　controls-position　　right　　控制按钮位置

　　　　name　　原生属性

　　　　label　　输入框关联的label文字

　　事件：

　　　　change　　绑定值被改变时触发

　　　　blur　　　在组件 Input 失去焦点时触发

　　　　focus　　在组件 Input 获得焦点时触发

　　Methods方法：

　　　　focus　　使 input 获取焦点

10、Select 选择器

　　el-select属性：

　　　　multiple　　boolean　　是否多选

　　　　disabled　　boolean　　是否禁用

　　　　value-key　　作为 value 唯一标识的键名，绑定值为对象类型时必填

　　　　size　　medium/small/mini　　输入框尺寸

　　　　clearable　　boolean　　单选时是否可以清空选项

　　　　collapse-tags　　boolean　　多选时是否将选中值按文字的形式展示

　　　　multiple-limit　　number　　多选时用户最多可以选择的项目数，为 0 则不限制

　　　　name　　select input 的 name 属性

　　　　auto-complete　　select input 的 autocomplete 属性

　　　　placeholder　　占位符

　　　　filterable　　boolean　　是否可搜索

　　　　allow-create　　boolean　　是否允许用户创建新条目，需配合 filterable 使用

　　　　filter-method　　function　　自定义搜索方法

　　　　remote　　boolean　　是否为远程搜索

　　　　remote-method　　function　　远程搜索方法

　　　　loading　　boolean　　是否正在从远程获取数据

　　　　loading-text　　加载中　　远程加载时显示的文字　　

　　　　no-match-text　　无匹配数据　　搜索条件无匹配时显示的文字

　　　　no-data-text　　无数据　　选项为空时显示的文字

　　　　popper-class　　Select 下拉框的类名

　　　　reserve-keyword　　boolean　　多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词

　　　　default-first-option　　boolean　　在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用

　　　　popper-append-to-body　　boolean　　是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

　　Select Events（事件）：

　　　　change　　选中值发生变化时触发

　　　　visible-change　　出现则为 true，隐藏则为 false　　下拉框出现/隐藏时触发

　　　　remove-tag　　多选模式下移除tag时触发

　　　　clear　　可清空的单选模式下用户点击清空按钮时触发

　　　　blur　　当 input 失去焦点时触发

　　　　focus　　当 input 获得焦点时触发

　　el-option选择条数，属性：

　　　　value　　选项的值

　　　　label　　选项的标签，若不设置则默认与 value 相同

　　　　disabled　　boolean　　是否禁用该选项

　　Option Group属性：　　

　　　　label　　分组的组名

　　　　disabled　　是否将该分组下所有选项置为禁用

 

　　Methods：

　　　　focus　　使 input 获取焦点

11、Cascader 级联选择器

　　el-cascader属性：

　　　　optios　　array　　可选项数据源，键名可通过 props 属性配置

　　　　props　　object　　配置选项，具体见下表

　　　　value　　array　　选中项绑定值

　　　　separator　　默认/　　选项分隔符

　　　　popper-class　　自定义浮层类名

　　　　placeholder　　输入框占位文本

　　　　disabled　　boolean　　是否禁用

　　　　clearable　　boolean　　是否支持清空选项

　　　　expand-trigger　　click / hover　　次级菜单的展开方式

　　　　show-all-levels　　boolean　　输入框中是否显示选中值的完整路径

　　　　filterable　　boolean　　是否可搜索选项

　　　　debounce　　number默认300　　搜索关键词输入的去抖延迟，毫秒

　　　　change-on-select　　boolean　　是否允许选择任意一级的选项

　　　　size　　medium / small / mini　　尺寸

　　　　before-filter　　function(value)　　筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选

　　props属性：

　　　　value　　指定选项的值为选项对象的某个属性值

　　　　label　　指定选项标签为选项对象的某个属性值

　　　　children　　指定选项的子选项为选项对象的某个属性值

　　　　disabled　　指定选项的禁用为选项对象的某个属性值

　　Events事件：

　　　　change　　当绑定值变化时触发的事件

　　　　active-item-change　　当父级选项变化时触发的事件，仅在 change-on-select 为 false 时可用

　　　　blur　　在 Cascader 失去焦点时触发

　　　　focus　　在 Cascader 获得焦点时触发

12、switch开关

　　el-switch属性：

　　　　disabled　　boolean　　是否禁用

　　　　width　　number默认40　　switch 的宽度（像素）

　　　　active-icon-class　　switch 打开时所显示图标的类名，设置此项会忽略 active-text
　　　　inactive-icon-class　　switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text

　　　　active-text　　switch 打开时的文字描述

　　　　inactive-text　　switch 关闭时的文字描述

　　　　active-value　　boolean / string / number　　switch 打开时的值

　　　　inactive-value　　boolean / string / number　　switch 关闭时的值

　　　　active-color　　switch 打开时的背景色

　　　　inactive-color　　switch 关闭时的背景色

　　　　name　　switch 对应的 name 属性

　　Events事件：

　　　　change　　switch 状态发生变化时的回调函数

　　Methods方法：

　　　　focus　　使 Switch 获取焦点

13、slider滑块

　　可以用v-model绑定一个数组，显示范围，例：【4，8】

　　el-slider属性：

　　　　min　　最小值

　　　　max　　最大值

　　　　disabled　　boolean　　是否禁用

　　　　step　　number默认1　　步长

　　　　show-input　　boolean　　是否显示输入框，仅在非范围选择时有效

　　　　show-input-controls　　boolean　　在显示输入框的情况下，是否显示输入框的控制按钮

　　　　input-size　　large / medium / small / mini　　输入框的尺寸

　　　　show-stops　　boolean　　是否显示间断点

　　　　show-tooltip　　boolean　　是否显示 tooltip

　　　　format-tooltip　　 function(value)　　格式化 tooltip message

　　　　range　　boolean　　是否为范围选择

　　　　vertical　　boolean　　是否竖向模式

　　　　height　　Slider 高度，竖向模式时必填

　　　　label　　屏幕阅读器标签

　　　　debounce　　number默认300　　输入时的去抖延迟，毫秒，仅在show-input等于true时有效

　　　　tooltip-class　　tooltip 的自定义类名

　　Events事件：

　　　　change　　值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）

14、TimePicker 时间选择器
　　el-time-select属性：

　　　　readonly　　boolean　　完全只读

　　　　disabled　　boolean　　禁用

　　　　editable　　boolean　　文本框可输入

　　　　clearable　　boolean　　是否显示清除按钮

　　　　size　　medium / small / mini　　输入框尺寸

　　　　placeholder　　非范围选择时的占位内容

　　　　start-placeholder　　范围选择时开始日期的占位内容

　　　　end-placeholder　　范围选择时开始日期的占位内容

　　　　is-range　　boolean　　是否为时间范围选择，仅对<el-time-picker>有效

　　　　arrow-control　　boolean　　是否使用箭头进行时间选择，仅对<el-time-picker>有效

　　　　value　　date(TimePicker) / string(TimeSelect)　　绑定值　　

　　　　align　　left / center / right　　对齐方式

　　　　popper-class　　TimePicker 下拉框的类名

　　　　picker-options　　object　　当前时间日期选择器特有的选项参考下表

　　　　range-separator　　选择范围时的分隔符

　　　　value-format　　可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象

　　　　default-value　　可被new Date()解析(TimePicker) / 可选值(TimeSelect)　　可选，选择器打开时默认显示的时间

　　　　name　　原生属性

　　　　prefix-icon　　自定义头部图标的类名

　　　　clear-icon　　自定义清空图标的类名

　　Time Select Options属性：

　　　　start　　开始时间

　　　　end　　结束时间

　　　　step　　间隔时间

　　　　minTime　　最小时间，小于该时间的时间段将被禁用

　　　　maxTime　　最大时间，大于该时间的时间段将被禁用

　　Time Picker Options属性：

　　　　selectableRange　　可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']

　　　　format　　小时：HH，分：mm，秒：ss，AM/PM A　　时间格式化(TimePicker)

　　Events事件：

　　　　change　　用户确认选定的值时触发

　　　　blur　　当 input 失去焦点时触发

　　　　focus　　当 input 获得焦点时触发

　　Methods方法：

　　　　focus　　使 input 获取焦点