イミテーション、独自のUIコンポーネント・ライブラリーを構築するために、まだ空腹--Button

なじみのない友人がSASS場合は、SASSは特にミックスインと@include、このブログを見て前にチュートリアルを見て行くことをお勧めします

ファイル構造

├── src
│   ├── styles
│           ├── global.scss //定义全局的颜色之类的
|           ├── mixins //全部mixin文件
|                   ├── m-button.scss  //button的mixin文件
|           ├── button.scss

独自のアイデア

色：着信タイプによって、動的起動クラス

<button class="[color_type]"></button>

props:{
color:{
type:String,
default:"default"
}
},
computed:{
color_type{
return `color-${type}`}
}

.color-primary{
background:#5385ce;
color:#fff;
}

一般的な考え方は、ケースです
が、見つけ書かれたスタイルとサイズが特に良い執筆しているが、中空の効果に書き込まれたときに、非常に良好ではない、とスタイルのコードは非常に長いので、メンテナンスに助長されていません。どのような決定的なUIのソースを見てとても空腹。読み取り専用ボタンの午後を読みます

何空腹ソース

  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        '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>
    <span v-if="$slots.default"><slot></slot></span>
  </button>

一般的なアイデアも同様、動的バインディングクラスであり、最良の部分は、書かれたSCSSということです。

1.まず、グローバル・ボタンを定義します

@include b(button) {
A区域
&.circle{
}
&.round{
}
&.plain{
}
}

//对应的mixin
@mixin b($block) {
  $B: $namespace+'-'+$block !global;

  .#{$B} {
    @content;
  }
}

これは、つまり、私たちは通常の書き込み

button{
}

@contentプレースホルダは、すべてのコンテンツが対応する領域Aに配置される@content位置。
.#{$B}これはIDではありませんが、変数の値#{$B}

2.（Baiduのを所有する）BEMの定義

あなたはJSのようなSCSSとして書くことができ、そしてすべてが消えて、と判断ビンを指示した場合、正直に言うと。頭痛の対応するビットと一致するように自動スタイル。本明細書で使用されるボタンは、異なるパラメータを渡し、ミックスイン結合ELEM @を含んで、底部が対応するであろうように、それは相当含みます。

 @include btn_color(danger){
   background:$color-danger;
 }

 @mixin btn_color($color){
 @at-root{.color-#{$color}{
 @content}}
 }

それが含まれ、その後、ミックスイン対応ディスプレイに次のように入力し、対応するスタイルで書くことであることを理解するのは簡単。
@at-root現在のクラスとボタンがあまりにも、同じレベル、サイズですが、もう少し難しい効果をくり抜いんので、私は巣にしたくないことを意味し、コンクリートは、文書を見ることができます。

我々は、対応するボタンの色を取得することはできませんので。中空の効果が異なるボタンのホバー、フォント、背景色が同じではない、明らかに金型を書き込むことはできませんです。そして、色などが異なるクラス間を区別することが可能であり、クラスでは、中空の効果があります.plain

ソースの基準は、ソースコードのアプローチは、ミックスインカラー値を通過する中空のスタイルを設定するために、時間の色を変更することです。そして、対応する設定.plain

  @include btn_color(danger){
    @include color_var($color-danger)
  }
  //mixin
  @mixin color_var($color){
    background:$color;
    border:1px solid $color;
    color:$color-white;
    &.plain{
      background:transparentize($color, .9);
      color:$color;
      border-color:$color;
      &:hover,
      &:focus {
      background: $color;
      border-color: $color;
      color: $color-white;
    }
    }
    &.disabled{
      opacity: 0.4;
    }
}

この完璧なソリューションでは、動的にプレーンスタイルの色に応じて変更することができ
、対応する円形角丸や慣行を参照することができます。
主な変更カーソルが無効になり、背景の透明度です

&.disabled{
    cursor:not-allowed; 
    opactity:0.4;
}

3.イベント

私たちは、コンポーネントがクリックイベントを取得し、そのような使用の必要性を使用します

<jed-button @click.native=""></jed-button>

明らかにこれは非常に友好的ではない、我々はそれを設定する必要があります。サブアセンブリは、親コンポーネントにパラメータを渡すことができ

<button @click="handleClick">jed<button>

handleClick(e){
$emit("click",e)
}

オクビン