vue UI庫iview源碼解析（2）

上篇問題

在上篇《iview源碼解析（1）》中的index.js 入口文件的源碼中有一段代碼有點疑惑：

/**
 * 在瀏覽器環境下默認加載組件
 */
// auto install
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

在引用 iview 組件的時候需要

Vue.use(iView, { locale });

注冊組件，即使不執行 use 也把組件注冊了，這兩段代碼不是有重復功能？這么處理的目的是為什么呢？是處理兼容性問題么？有木有大神指點下。

button 組件

button的核心樣式代碼是在mixins中，mixins的意思是混入在vue官網上對混入的解釋是這樣解釋

混入 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。

也就是組件下在細分共享對象來混入。

問題

那在樣式當中其他組件的樣式也有可能混入到按鈕里面的樣式函數？但個人感覺應該是很少在其他組件當中用到吧？可能是我對整個iview的庫整體不熟悉，有木有大神指點下。


我們在來看下 mixins 目錄下 button.less的源碼：

/**函數
 * 設置按鈕的內邊距、字體大小、邊框曲線
 * @param  @padding
 * @param  @font-size
 * @param  @border-radius
 */
.button-size(@padding; @font-size; @border-radius) {
    padding: @padding;
    font-size: @font-size;
    border-radius: @border-radius;
}
/**函數
 * 設置按鈕的跟顏色有關的屬性：字體顏色、背景顏色、邊框顏色、以及子a標簽的顏色
 * @param  @color
 * @param  @background
 * @param  @border
 */
.button-color(@color; @background; @border) {
    color: @color;
    background-color: @background;
    border-color: @border;
    // a inside Button which only work in Chrome
    // http://stackoverflow.com/a/17253457
    > a:only-child {
        color: currentColor;
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: transparent;
        }
    }
}
/**函數
 * 設置按鈕的跟顏色有關的屬性包括hover、active、disabled顏色變動
 * @param  @color
 * @param  @background
 * @param  @border
 */
.button-variant(@color; @background; @border) {
    .button-color(@color; @background; @border);
    //按鈕偽類顏色設置
    &:hover
    //&:focus
    {
        .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
    }
    &:active,
    &.active {
        .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
    }
    //禁用按鈕的顏色設置
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
        }
    }
}
/**函數
 * 按鈕主樣式
 */
.btn() {
    display: inline-block;
    margin-bottom: 0;
    font-weight: @btn-font-weight;
    text-align: center;
    vertical-align: middle;
    /**
     *用於指定某個給定的區域是否允許用戶操作，以及如何響應用戶操作
     *auto:當觸控事件發生在元素上時，由瀏覽器來決定進行哪些操作，比如對viewport進行平滑、縮放等。
     *none:當觸控事件發生在元素上時，不進行任何操作。
     */
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: @line-height-base;
    user-select: none;
    .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
    //transform: translate3d(0, 0, 0);
    //transition: all @transition-time linear;
    transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;

    > .@{css-prefix-iconfont} {
        line-height: 1;
    }
    //按鈕的偽類樣式
    &,
    &:active,
    &:focus {
        outline: 0;
    }

    &:not([disabled]):hover {
        text-decoration: none;
    }

    &:not([disabled]):active {
        outline: 0;
        // transition: none;  // 如果不注釋此行，那么active會和focus同時觸發，此時focus的開始動畫transition會無效
    }
    //禁用按鈕樣式
    &.disabled,
    &[disabled] {
        cursor: @cursor-disabled;
        > * {
            pointer-events: none;
        }
    }
    //設置大按鈕
    &-large {
        .button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
    }
    //設置小按鈕
    &-small {
        .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
    }
}
/** 不同類型按鈕函數控制顏色
 *  默認按鈕、主按鍵、幽靈按鈕、虛線按鈕、文字按鈕
 */
// Default
.btn-default() {
    .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);

    &:hover
    //&:focus
    {
        .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
    }
    &:active,
    &.active {
        .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
    }
    .active-btn-color(@primary-color);
}

// Primary
.btn-primary() {
    .button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);

    &:hover,
    //&:focus,
    &:active,
    &.active {
        color: @btn-primary-color;
    }
    .active-btn-color(@primary-color);
}

// Ghost
.btn-ghost() {
    .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);

    &:hover
    //&:focus
    {
        .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
    }
    &:active,
    &.active {
        .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
    }
    .active-btn-color(@primary-color);
}

// Dashed
.btn-dashed() {
    .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
    border-style: dashed;

    &:hover
    //&:focus
    {
        .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
    }
    &:active,
    &.active {
        .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
    }
    .active-btn-color(@primary-color);
}

// Text
.btn-text() {
    .button-variant(@btn-ghost-color, @btn-ghost-bg, transparent);

    // for disabled
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            .button-color(@btn-disable-color; @btn-ghost-bg; transparent);
        }
    }

    &:hover
        //&:focus
    {
        .button-color(tint(@primary-color, 20%); @btn-ghost-bg; transparent);
    }
    &:active,
    &.active {
        .button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
    }
    .active-btn-color(@primary-color);
}

知識點（這里面列出來的知識點是我自己不是很熟悉的列出來）

1. color: currentColor

css3的擴展關鍵字，currentColor是 color 屬性的值，具體意思是指：currentColor關鍵字的使用值是 color 屬性值的計算值。
如果currentColor關鍵字被應用在 color 屬性自身，則相當於是 color: inherit。

2. background: transparent

設置背透明

3. tint(color,weight)

less中的方法,它用於混合顏色與白色,它有以下參數：

color ：它代表一個顏色對象。

weight ：這是一個可選參數，通過在顏色和白色之間提供百分比平衡點來指定元素的權重。

4. shade(color,weight)

less中的方法,它用於混合顏色與黑色,它有以下參數：

color ：它代表一個顏色對象。

weight ：這是一個可選參數，通過在顏色和白色之間提供百分比平衡點來指定元素的權重。

5. touch-action: manipulation

用於指定某個給定的區域是否允許用戶操作，以及如何響應用戶操作

auto:當觸控事件發生在元素上時，由瀏覽器來決定進行哪些操作，比如對viewport進行平滑、縮放等。

none:當觸控事件發生在元素上時，不進行任何操作。

6. user-select: none

css3新增屬性，值:

none：文本不能被選擇。

text：可以選擇文本。

all：當所有內容作為一個整體時可以被選擇。如果雙擊或者在上下文上點擊子元素，那么被選擇的部分將是以該子元素向上回溯的最高祖先元素。

element：可以選擇文本，但選擇范圍受元素邊界的約束。

7. outline: 0

outline （輪廓）是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。在谷歌瀏覽器中激活狀態默認有輪廓線，這個可以去除那個輪廓線。

8. pointer-events: none;

css3新增屬性，值

auto：與pointer-events屬性未指定時的表現效果相同。在svg內容上與visiblepainted值相同。

none：元素永遠不會成為鼠標事件的target。但是，當其后代元素的pointer-events屬性指定其他值時，鼠標事件可以指向后代元素，在這種情況下，鼠標事件將在捕獲或冒泡階觸發父元素的事件偵聽器。

9. less中把很多通用的屬性值賦值到一個變量中。

在custom.less中如：按鈕的基礎變量

// Button
@btn-font-weight        : normal;
@btn-padding-base       : 6px 15px;
@btn-padding-large      : 6px 15px 7px 15px;
@btn-padding-small      : 2px 7px;
@btn-font-size          : 12px;
@btn-font-size-large    : 14px;
@btn-border-radius      : 4px;
@btn-border-radius-small: 3px;
@btn-group-border       : shade(@primary-color, 5%);

10. 里面將樣式安裝功能拆分成函數相互調用。

11. &代表的上一層選擇器的名字。