一忧饭、container布局容器

用于布局的容器組件，方便快速搭建頁(yè)面的基本結(jié)構(gòu)筷畦。

image.png

<el-container>：外層容器词裤。當(dāng)子元素中包含 <el-header> 或 <el-footer>時(shí)刺洒，全部子元素會(huì)垂直上下排列，否則會(huì)水平左右排列吼砂。

<el-header>：頂欄容器逆航。

<el-aside>: 側(cè)邊欄容器。

<el-main>：主要區(qū)域容器渔肩。

<el-footer>：底欄容器因俐。

<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>周偎。

也就是說(shuō)抹剩，<el-container>，<el-header>蓉坎，<el-aside>澳眷，<el-main>，<el-footer>只能是組合出道蛉艾， 因?yàn)橐陨喜捎昧薴lex 布局钳踊，也就是說(shuō)這套組件就是使用了flex布局，是flex布局屬性排列組合后的各種布局方式勿侯。

el-container

el-container這個(gè)組件只接受一個(gè)參數(shù)就是direction拓瞪，用來(lái)描述子元素的排列方向.
默認(rèn)情況下，如果子元素中有el-header或el-footer時(shí)為豎向排列罐监，其余情況下默認(rèn)橫向排列吴藻。

源碼如下

<template>
  <section class="el-container" :class="{ 'is-vertical': isVertical }">
    <slot></slot>
  </section>
</template>

<script>
  export default {
    name: 'ElContainer',
    componentName: 'ElContainer',
    props: {
      direction: String
    },
    computed: {
      isVertical() {
        if (this.direction === 'vertical') {
          return true;
        } else if (this.direction === 'horizontal') {
          return false;
        }
        // 子元素中有 el-header 或 el-footer 時(shí)為 vertical，否則為 horizontal
        return this.$slots && this.$slots.default
          ? this.$slots.default.some(vnode => {
            const tag = vnode.componentOptions && vnode.componentOptions.tag;
            return tag === 'el-header' || tag === 'el-footer';
          })
          : false;
      }
    }
  };
</script>

默認(rèn)的el-container容器有一個(gè)el-container類名弓柱，用來(lái)設(shè)置默認(rèn)style樣式

.el-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
}

通過(guò)接收的direction的值沟堡，在結(jié)合computed的isVertical屬性，判斷是否給元素添加is-vertical的class類名矢空。如果有航罗，則用is-vertical的樣式去覆蓋el-container的子元素排放方式的樣式。

.el-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
}
.el-container.is-vertical {
    flex-direction: column;
}

el-header

el-header組件屁药，只接受一個(gè)height屬性粥血，用來(lái)添加style設(shè)置高度，默認(rèn)為60px酿箭。

源碼如下

<template>
  <header class="el-header" :style="{ height }">
    <slot></slot>
  </header>
</template>

<script>
  export default {
    name: 'ElHeader',

    componentName: 'ElHeader',

    props: {
      height: {
        type: String,
        default: '60px'
      }
    }
  };
</script>

el-header的默認(rèn)樣式

.el-header{
    text-align: center;
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 20px;
}

el-aside

el-aside只接收一個(gè)width組件复亏，用來(lái)設(shè)置側(cè)邊欄的寬度，默認(rèn)是300px

<template>
  <aside class="el-aside" :style="{ width }">
    <slot></slot>
  </aside>
</template>

<script>
  export default {
    name: 'ElAside',

    componentName: 'ElAside',

    props: {
      width: {
        type: String,
        default: '300px'
      }
    }
  };
</script>

el-aside默認(rèn)樣式

.el-aside{
    background-color: #d3dce6;
    text-align: center;
    line-height: 300px;
    color: #333;
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
}

el-main

el-main只是一個(gè)包括的容器

<template>
  <main class="el-main">
    <slot></slot>
  </main>
</template>

<script>
  export default {
    name: 'ElMain',
    componentName: 'ElMain'
  };
</script>

el-main的默認(rèn)樣式

.el-main{
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
    display: block;
    flex: 1;
    flex-basis: auto;
    padding: 20px;
    overflow: auto;
}

el-footer

el-footer與el-hearder類似缭嫡，只接收一個(gè)height屬性缔御，用來(lái)設(shè)置footer的高度。

<template>
  <footer class="el-footer" :style="{ height }">
    <slot></slot>
  </footer>
</template>

<script>
  export default {
    name: 'ElFooter',

    componentName: 'ElFooter',

    props: {
      height: {
        type: String,
        default: '60px'
      }
    }
  };
</script>

el-footer的默認(rèn)樣式

.el-footer{
    text-align: center;
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
    padding: 0 20px;
    flex-shrink: 0;
    box-sizing: border-box;
}

二妇蛀、button

el-button實(shí)際上就是對(duì)原生button的再封裝耕突。

button

el-button組件的引用方式如下

<el-button>默認(rèn)按鈕</el-button>

el-button的參數(shù)列表如下

再結(jié)合el-button源碼笤成，看一下具體原理

<template>
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></I>
    <i :class="icon" v-if="icon && !loading"></I>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: 'ElButton',

    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },

    props: {
      type: {
        type: String,
        default: 'default'
      },
      size: String,
      icon: {
        type: String,
        default: ''
      },
      nativeType: {
        type: String,
        default: 'button'
      },
      loading: Boolean,
      disabled: Boolean,
      plain: Boolean,
      autofocus: Boolean,
      round: Boolean,
      circle: Boolean
    },

    computed: {
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      buttonDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
      }
    },

    methods: {
      handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  };
</script>

el-button的默認(rèn)樣式如下

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

display: inline-block; 表示其為內(nèi)聯(lián)元素，可橫向排列
white-space: nowrap; 表示文本不換行
cursor: pointer; 鼠標(biāo)滑過(guò)顯示小手形狀
-webkit-appearance: none; 將按鈕原始樣式去掉
line-height: 1; 行高等于字體大小

type: 通過(guò)接受type值眷茁，來(lái)生成描述背景色等的lass名炕泳、比如type=primary, 即el-button--primary,用來(lái)設(shè)置按鈕的背景色，字體顏色上祈、邊框顏色培遵。

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

size: 通過(guò)設(shè)置size，來(lái)生成描述按鈕大小的class名雇逞，比如size=small, 即el-button--small荤懂。

.el-button--small {
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
}

plain: 通過(guò)設(shè)置plain，用來(lái)生成描述對(duì)應(yīng)type下的樸素樣式的按鈕塘砸、

.button--primary.is-plain {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
}

round : 用來(lái)描述是否是圓角按鈕节仿，來(lái)生成對(duì)應(yīng)描述圓角的class名，is-round

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

circle: 是否是原型按鈕掉蔬，來(lái)生成對(duì)應(yīng)50%圓角的class名廊宪，is-circle

.el-button.is-circle {
    border-radius: 50%;
    padding: 12px;
}

loading : 是否是加載中按鈕，如果是加載中的按鈕女轿，則給元素添加el-icon-loading類箭启，添加在加載的圖標(biāo)
disabled : 是否是禁用狀態(tài)，添加對(duì)應(yīng)的類名is-disabled蛉迹，并且給原生button設(shè)置disabled="disabled"傅寡，使其不可點(diǎn)擊

.el-button.is-disabled{
  cursor: not-allowed;
}
<button disabled="disabled" type="button" class="el-button el-button--primary is-disabled"><!----><!----><span>主要按鈕</span></button>

icon: 通過(guò)設(shè)置icon，可以添加的內(nèi)部提供的圖標(biāo)
autofocus : 用來(lái)設(shè)置按鈕是否聚焦北救，如果autofocus=true,則給原生button設(shè)置autofocus="autofocus"
native-type : 用來(lái)設(shè)置原生button的type屬性荐操，用來(lái)描述按鈕的類型，即button珍策、reset托启、submit

inject是跟表單相關(guān)的，等后面表單再說(shuō)吧攘宙。

三屯耸、buttonGroup

按鈕組

buttonGroup

<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一頁(yè)</el-button>
  <el-button type="primary">下一頁(yè)<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>

源碼如下

<template>
  <div class="el-button-group">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'ElButtonGroup'
  };
</script>

el-button-group就是用來(lái)嵌套一組el-button,并且相鄰兩個(gè)按鈕內(nèi)側(cè)的圓角去掉，且有一條空白線相連蹭劈。具體實(shí)現(xiàn)的style如下

// 圓角設(shè)置
.el-button-group{
  display: inline-block;
  vertical-align: middle;
}
.el-button-group>.el-button:not(:last-child) {
    margin-right: -1px;
}
.el-button-group>.el-button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.el-button-group>.el-button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.el-button-group>.el-button:not(:first-child):not(:last-child) {
    border-radius: 0;
}
// 空白線
.el-button-group .el-button--primary:first-child {
    border-right-color: hsla(0,0%,100%,.5);
}
.el-button-group .el-button--primary:not(:first-child):not(:last-child) {
    border-left-color: hsla(0,0%,100%,.5);
    border-right-color: hsla(0,0%,100%,.5);
}
button-group .el-button--primary:last-child {
    border-left-color: hsla(0,0%,100%,.5);
}

其實(shí)就是運(yùn)用選擇器疗绣，將第一個(gè)按鈕右側(cè)圓角，最后一個(gè)按鈕左側(cè)圓角铺韧，以及中間按鈕的全部圓角去掉持痰，即形成了圓角設(shè)置，空白線也是類似處理祟蚀。因?yàn)榘粹o默認(rèn)都有border工窍，顏色和按鈕主體顏色一致，這里只是修改了border的顏色

四前酿、link

文字超鏈接

link

<div>
  <el-link  target="_blank">默認(rèn)鏈接</el-link>
</div>

參數(shù)如下

el-link患雏，其實(shí)是對(duì)原生a標(biāo)簽的封裝。

源碼如下

<template>
  <a
    :class="[
      'el-link',
      type ? `el-link--${type}` : '',
      disabled && 'is-disabled',
      underline && !disabled && 'is-underline'
    ]"
    :href="disabled ? null : href"
    v-bind="$attrs"
    @click="handleClick"
  >

    <i :class="icon" v-if="icon"></I>

    <span v-if="$slots.default" class="el-link--inner">
      <slot></slot>
    </span>

    <template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
  </a>
</template>

<script>

export default {
  name: 'ElLink',

  props: {
    type: {
      type: String,
      default: 'default'
    },
    underline: {
      type: Boolean,
      default: true
    },
    disabled: Boolean,
    href: String,
    icon: String
  },

  methods: {
    handleClick(event) {
      if (!this.disabled) {
        if (!this.href) {
          this.$emit('click', event);
        }
      }
    }
  }
};
</script>

el-link的默認(rèn)樣式如下

.el-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
}

type : 通過(guò)設(shè)置type罢维，添加對(duì)應(yīng)的class類淹仑，給a標(biāo)簽設(shè)置對(duì)應(yīng)的字體顏色

.el-link.el-link--primary {
    color: #409eff;
}

underline : 是否有下滑線，如果添加肺孵，那么在hover的時(shí)候匀借，會(huì)添加一個(gè)after偽類來(lái)創(chuàng)建下劃線

.el-link.is-underline:hover:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid #409eff;
}
.el-link.el-link--default:after {
    border-color: #409eff;
}

disabled: 是否是禁用狀態(tài)，如果設(shè)置了平窘，會(huì)根據(jù)對(duì)應(yīng)type吓肋，設(shè)置對(duì)應(yīng)樣式

.el-link.el-link--danger {
    color: #f56c6c;
}
.el-link.el-link--danger.is-disabled {
    color: #fab6b6;
}

href : 即設(shè)置原生a標(biāo)簽的href屬性
icon: 通過(guò)設(shè)置icon，可以添加的內(nèi)部提供的圖標(biāo)