当前位置: 首页>前端>正文

vue elementui 首頁布局 elementui布局教程

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属性: 
 
 
 

        :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 获取焦点 

        
 

https://www.xamrdz.com/web/2hz1957614.html

相关文章: