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. &代表的上一层选择器的名字。