從零開始構建本身的vue組件庫番外篇

從零開始構建本身的vue組件庫番外篇

寫在前面（這段話只適合新手，高手請繞行）

鑑於前兩節構建組件用到了不少形如 :class="[prefixCls + '__icon' + '--' + type,iconType]" 這種鬼樣子的class，忽然想到居然忘了把這麼重要的操做捋一下思路，具體爲何要這樣搞，相信各位作前端的大佬必定知道EBM這個概念，若是不知道可參考前端領域的BEM究竟是什麼這篇文章。

好了開整

以上由變量生成的class最終效果形如:

wui__message__icon--info icon-info

那麼咱們css就能夠這麼寫:

.wui__message__icon--info{
    height:200px;
    width:200px;
}

emmmmm，那是不可能的，寫這麼長的類名是不可能的，這輩子都不可能的。若是BEM都用上了還不用sass或less那確定是瘋了，sass版BEM方案以下：

//mixin.scss
$elementSeparator: '__';
$modifierSeparator: '--';

@function containsModifier($selector) {
    $selector: selectorToString($selector);
    @if str-index($selector, $modifierSeparator) {
        @return true;
    } @else {
        @return false;
    }
}

@function selectorToString($selector) {
    $selector: inspect($selector);
    $selector: str-slice($selector, 2, -2);
    @return $selector;
}

@function getBlock($selector) {
    $selector: selectorToString($selector);
    $modifierStart: str-index($selector, $modifierSeparator) - 1;
    @return str-slice($selector, 0, $modifierStart);
}

@mixin b($block) {
    .#{$block} {
        @content;
    }
}

@mixin e($element) {
    $selector: &;
    @if containsModifier($selector) {
        $block: getBlock($selector);
        @at-root {
            #{$selector} {
                #{$block+$elementSeparator+$element} {
                    @content;
                }
            }
        }
    } @else {
        @at-root {
            #{$selector+$elementSeparator+$element} {
                @content;
            }
        }
    }
}

@mixin m($modifier) {
    @at-root {
        #{&}#{$modifierSeparator+$modifier} {
            @content;
        }
    }
}
//該sass版BEM方案來自https://www.sass.hk/skill/sass94.html

具體參考message組件的樣式（傳送門）

@import 'mixin.scss';
@include b(wui){
  @include e(message){
    position: fixed;
    width: auto;
    @include rounded(4px);
    line-height: 1;
    left: 50%;
    top: 20px;
    height:auto;
    transform: translateX(-50%);
    background-color: #edf2fc;
    transition: opacity .3s,transform .4s;
    overflow: hidden;
    padding: 15px 15px 15px 20px;
    background-color:$lightColor;
    @include shadow(0,0,3px,#ccc);
    z-index: 1000;
    i{
      float: left;
    }
    @include e(icon--info){
      color: $primaryColor;
    }
    @include e(icon--success){
      color: $successColor
    }
    @include e(icon--warning){
      color: $warningColor
    }
    @include e(icon--error){
      color: $errorColor
    }
    @include e(content){
      float: left;
      @include e(body){
        margin: 0 10px;
      }
    }
    @include e(closeTxt){
      float: right;
      cursor: pointer;
      color: $primaryColor
    }
    @include e(iconbox){
      float: right;
      cursor: pointer;
    }
  }

}



.message-fade-enter-active {
  animation: bounce-in .5s;
}
.message-fade-leave-active {
  animation: bounce-out .5s;
}

@keyframes bounce-in {
  0% {
    top:0;
    opacity: 0.2
  }
  100% {
    top:20px;
    width: auto;
    opacity: 1
  }
}
@keyframes bounce-out {
  0% {
    top:20px;
    opacity: 1
  }
  100% {
    top:0;
    opacity: 0
  }
}

下一篇預告：

icon篇

傳送門

公共樣式源碼傳送門