上篇问题
在上篇《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://*.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%);