个人笔记|ElementUI按需学习

我就知道学vue避不开学ElementUI）
但是breadcrumb确实香啊）

Element UI

Button按钮

button示例

  默认按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮



  朴素按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮



  圆角按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮



  
  
  
  
  
  

Dialog对话框

基本用法

弹出一个对话框，适合需要定制性更大的场景。

需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。

点我打开 Dialog


  这是一段信息
  
    取 消
    确 定
  

:visible.sync 的作用

:visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏

后面的.sync是什么意思呢，指的就是同步动态双向的来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定的原则，在vue中统一加上了.sync来表示同步的修改了visible的值。

说人话就是 elementUI里只有单向绑定没有同步双向绑定 那就用.sync强行双向绑定

:before-close的作用

关闭前的回调

before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

slot的作用

父组件写在子组件标签内的内容,替换了子组件中slot标签

插槽,一种子组件预留空间的方法.也可以准备多个插槽

自定义用法

嵌套表格/表单

打开嵌套表格的 Dialog


  
    
    
    
  



打开嵌套表单的 Dialog


  
    
      
    
    
      
        
        
      
    
  
  

    取 消
    确 定
  

嵌套Dialog

可以在一个Dialog里再套一个Dialog

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

正常情况下，不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，可用append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

居中布局

标题和底部可水平居中

将center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，需自行为其添加 CSS。

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Dialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

点击打开 Dialog


  需要注意的是内容是默认不居中的
  
    取 消
    确 定
  

Form表单

Form表单的model和rules参数说明

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

校验规则：https://github.com/yiminghe/async-validator

Radio单选框

在一组备选项中进行单选

要使用 Radio 组件，需要设置v-model绑定变量。选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。

禁用状态

单选框不可用的状态。

只要在el-radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用。

单选框组

适用于在多个互斥的选项中选择的场景

结合el-radio-group元素和子元素el-radio可以实现单选组。在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。

Select选择器

当选项过多时，使用下拉菜单展示并选择内容。

v-model的值为当前被选中的el-option的 value 属性值

Select选择器的popper-append-to-body说明

Input输入框

Hz

name	说明
prefix	输入框头部内容，只对 type="text" 有效
suffix	输入框尾部内容，只对 type="text" 有效
prepend	输入框前置内容，只对 type="text" 有效
append	输入框后置内容，只对 type="text" 有效

Slider滑块

通过拖动滑块在一个固定区间内进行选择

通过设置绑定值自定义滑块的初始值

选项可以是离散的 改变step的值可以改变步长，通过设置show-stops属性可以显示间断点

设置 marks 属性可以展示标记