当前位置:首页 > 建站教程 > 开卷八分钟
作者:徒北华
来源:遂宁屯俪游租售有限公司
发布时间:2019-09-19

开卷八分钟_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 (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。在谷歌浏览器中激活状态默认有轮廓线,这个可以去除那个轮廓线。

7. outline: outline lun kuo shi hui zhi yu yuan su zhou wei de yi tiao xian, wei yu bian kuang bian yuan de wai wei, ke qi dao tu chu yuan su de zuo yong. zai gu ge liu lan qi zhong ji huo zhuang tai mo ren you lun kuo xian, zhe ge ke yi qu chu na ge lun kuo xian.

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

当前文章:http://www.raystro.com/0z82w6/111665-1138540-45011.html

发布时间:00:30:11

4945香港诸葛神算??铁算盘正版资料挂牌??fh13777.com??东方明珠53994??老牌991993提供铁筝算??032278.com??香港挂牌完整之全篇??www.734666.com??www.268799.com??神码六合网??

  • 本文标签:
  • 史上最短求婚