el-button封装和scss使用

1. vue项目配置scss

1.1 vue项目安装scss

# 安装sass的相关依赖配置
npm i node-sass sass-loader --save -dev

1.2 vue项目配置scss

// vuecli2配置( 在build文件夹下的webpack.base.conf.js的rules里面添加配置);vuecli3安装完即可使用
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

1.3 node-sacc安装失败处理

# 先配置淘宝镜像拉去资源，然后重新npm install
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

2. vue项目使用scss

2.1 颜色常量定义(var.scss)

// !default指定变量默认值
/* Color
-------------------------- */
$--color-white: #FFFFFF !default;

/* Typography(排版)
-------------------------- */
$--font-size-base: 14px !default;

/* Border
-------------------------- */
$--border-width-base: 1px !default;

/* Button
-------------------------- */
$--button-active-shade-percent: 10% !default;

2.2 配置常量枚举(config.scss)

/* 常用配置枚举 */
$namespace: 'gxy'; // 命名空间( 类名以什么开头 )
/*
BEM命名模式
.block {}
.block__element {}
.block--modifier {}

  · block 代表更高级的抽象或组件
  · block__element 代表.block的后代, 用于形成一个完整的.block的整体
  · block--modifier 代表.block的不同状态或不同版本

例子：
html:
<button class="article__button--primary">按钮</button>
scss:
.article {
  max-width: 200px;
  &__button {
    padding: 5px 8px;
    &--primary {
      background: blue;
    }
  }
}

*/
$element-separator: '__'; // 分割符号( 命名分割符号 )
$modifier-separator: '--'; // 修饰符号
$state-prefix: 'is-'; // 状态类前缀( 与控制样式状态相关的前缀 )

2.3 默认模块样式封装(_button.scss)

/*
  @mixin指令可以定义Mixins模块, 再使用@include导入;
  同时支持写方法传参
  例子：

  定义button模块(_btn.scss):
  @mixin button {
    font-size: 1em;
    padding: 0.5 em 1.0em;
    text-decoration: none;
    color: #fff;
  }
  使用button模块(btn.scss):
  @import "_btn.scss";
  .button-green {
     @include button;
     background: green;
  }
*/
// 按钮默认样式
@mixin button-plain($color) {
  color: $color;
  /*
  Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色
  mix($color-1,$color-2,$weight);
  $color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。
  $weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间,若为0，则显示$color-2颜色
  */
  background: mix($--color-white, $color, 90%);
  border-color: mix($--color-white, $color, 60%);

  &:hover,
  &:focus {
    background: $color;
    border-color: $color;
    color: $--color-white;
  }

  &:active {
    background: mix($--color-black, $color, $--button-active-shade-percent);
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: mix($--color-white, $color, 40%);
      background-color: mix($--color-white, $color, 90%);
      border-color: mix($--color-white, $color, 80%);
    }
  }
}

2.4 公共模块封装(BEM命名封装)(mixins.scss)

/* BEM
 -------------------------- */
@mixin b($block) {
  // !global效果类似!important,强制修改
  $B: $namespace+'-'+$block !global;
  // #{}插值语句,类似vue的{{}}
  .#{$B} {
    /*
在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方：
  例子：
  @mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

编译为：
* html #logo {
  background-image: url(/logo.gif);
}
    */
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &; // 选择器
  $currentSelector: ""; // 当前选择器
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

/* 区分不同状态 */
@mixin when($state) {
  /*
  @at-root内联选择器模式 (编译出来的CSS无任何嵌套，让代码更加的简单)
  例子：
  .foo {
    @at-root .bar {
        color:gray;
    }
  }

  .bar {
   color: gray;
  }

  */
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

2.5 工具类方法(util.scss)

/*
设置或检索是否允许用户选中文本
user-select：none |text| all | element
默认值: text
none: 文本不能被选择
text: 可以选择文本
all: 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素
element: 可以选择文本，但选择范围受元素边界的约束
*/
@mixin utils-user-select($value) {
  -moz-user-select: $value;
  -webkit-user-select: $value;
  -ms-user-select: $value;
}

3. vue组件封装

<template>
 <button
   class="gxy-button"
   @click="handleClick"
   :disabled="disabled || loading"
   :autofocus="autofocus"
   :type="nativeType"
   :class="[
     type? 'gxy-button--'+ type : '',
     size? 'gxy-button--'+ size: '',
     {
       'is-disabled': disabled,
       '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>
   <!--
    $slots.default 所有没有被包含在具名插槽中的节点
    -->
   <span v-if="$slots.default"><slot></slot></span>
 </button>
</template> 
<script>
  export default {
    props: {
      loading: Boolean,
      disabled: Boolean,
      autofocus: Boolean,
      plain: Boolean,
      round: Boolean,
      circle: Boolean,
      size: String, // 按钮大小: medium
      nativeType: { // 按钮type类型
        type: String,
        default: 'button'
      },
      type: { // 按钮类型: default,primary
        type: String,
        default: 'default'
      },
      icon: {
        type: String,
        default: ''
      },
    },
    computed: {},
    methods: {
      handleClick(event) {
        this.$emit('click', event);
      }
    }
  }
</script>

<style scoped lang="sass">
  @import "./button.scss"
</style>

4. button组件使用

<template>
    <CustomBtn
      type="primary">
      按钮
    </CustomBtn>
</template>

<script>
  import {CustomBtn} from '_ele/components'
  export default {
    components: {CustomBtn},
  }
</script>

组件封装详情

github.com/btWin9527/v…