01 element-ui源码思路 el-button

1.css样式的一种解耦的写法

• 以type为例，type有多种值，最中这值会反应到css上。在整个实现思路中没有出现if else 的判断

<el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>

el-button中props定义的变量

props: {
      // 主题类型 primary / success / warning / danger / info / text
      type: {
        type: String,
        default: 'default'
      },
    }

• class的绑定操作，type的值由调用组件的使用者决定，这里将得到‘‘el-button–’ + type ’（比如：el-button–primary）

<button
    class="el-button"
    :class="[
      type ? 'el-button--' + type : '',
    ]"
  >

• 相应的css类，将被自动匹配上

.el-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}
.el-button--warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c;
}

2.css的属性值写法

• 以round为例

<el-button type="primary" round>主要按钮</el-button>

el-button中props定义的变量，

props: {
   // 上面的写法 只有'round'属性名，这里必须为Boolean，这样round的值为true。
   // 如果是其他类型，round会为空
      round: Boolean,
    }

• class的动态绑定操作，可以同时用两种写法。1.数组绑定，2.数组的项为一个对象（见vue文档）

<button
    class="el-button"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >

• 相应的css类

.el-button.is-round {
    border-radius: 20px;
    padding: 12px 23px;
}

3.动态判断插槽的值，去掉不必要的节点

具名插槽也可以做这种判断，当父组件中没有给值，就可以去掉

//$slots.default 包含了所有没有具字插槽的节点。
<span v-if="$slots.default"><slot></slot></span>