Element-ui レイアウト (行と列コンポーネント) の実装

<el-行>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

<テンプレート>
   <h1 v-if="レベル === 1">
    <スロット></スロット>
  </h1>
  <h2 v-else-if="レベル === 2">
    <スロット></スロット>
  </h2>
  <h3 v-else-if="レベル === 3">
    <スロット></スロット>
  </h3>
  <h4 v-else-if="レベル === 4">
    <スロット></スロット>
  </h4>
  <h5 v-else-if="レベル === 5">
    <スロット></スロット>
  </h5>
  <h6 v-else-if="レベル === 6">
    <スロット></スロット>
  </h6>
</テンプレート>

Vue.component('アンカー付き見出し', {
  レンダリング: 関数 (createElement) {
    要素の作成を返す(
      'h' + this.level, // タグ名 this.$slots.default // 子ノード配列)
  },
  小道具: {
    レベル：
      タイプ: 数値、
      必須: true
    }
  }
})

レンダリング(h) {
    h(this.tag, { を返す
      クラス： [
        「エル行」、
        this.justify !== 'start' ? `is-justify-${this.justify}` : '',
        this.align !== 'top' ? `is-align-${this.align}` : '',
        { 'el-row--flex': this.type === 'flex' }
      ]、
      スタイル: this.style
    }, this.$slots.default);
  }

計算: {
    スタイル() {
      定数ret = {};
      if (this.gutter) {
        ret.marginLeft = `-${this.gutter / 2}px`;
        ret.marginRight = ret.marginLeft;
      }
      ret を返します。
    }
  },

レンダリング(h) {
    classList = [] とします。
    スタイルを {} にします。
    ...

    ['span', 'offset', 'pull', 'push'].forEach(prop => {
      if (this[prop] || this[prop] === 0) {
        クラスリスト.push(
          プロパティ !== 'span'
            ? `el-col-${prop}-${this[prop]}`
            : `el-col-${this[prop]}`
        );
      }
    });

    ...

    h(this.tag, { を返す
      クラス: ['el-col', クラスリスト],
      スタイル
    }, this.$slots.default);
  }

@for $i は 0 から 24 まで {
  .el-col-#{$i} {
    幅: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-offset-#{$i} {
    左マージン: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-pull-#{$i} {
    位置: 相対的;
    右: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-push-#{$i} {
    位置: 相対的;
    残り: (1 / 24 * $i * 100) * 1%;
  }
}

 計算: {
    ガター() {
      親を this.$parent とします。
      (親 && parent.$options.componentName !== 'ElRow') {
        親 = 親.$parent;
      }
      親を返します? parent.gutter: 0;
    }
  }

if (this.gutter) {
      style.paddingLeft = this.gutter / 2 + 'px';
      style.padding 右 = style.padding 左;
    }

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

['xs', 'sm', 'md', 'lg', 'xl'].forEach(サイズ => {
      if (typeof this[size] === 'number') {
        classList.push(`el-col-${size}-${this[size]}`);
      } そうでない場合 (typeof this[size] === 'object') {
        props = this[サイズ]とします。
        Object.keys(props).forEach(prop => {
          クラスリスト.push(
            プロパティ !== 'span'
              ? `el-col-${size}-${prop}-${props[prop]}`
              : `el-col-${size}-${props[prop]}`
          );
        });
      }
    });

$ソーシャルカラー: (
    ドリブル: #ea4c89,
    フェイスブック: #3b5998,
    github: #171515、
    グーグル: #db4437,
    ツイッター: #55acee
);
.btn-ドリブル{
  色: map-get($social-colors,facebook);
}
// コンパイル後.btn-dribble {
  色: #3b5998;
}

$--sm:768px !デフォルト;
$--md:992px !デフォルト;
$--lg:1200px !デフォルト;
$--xl:1920px !デフォルト;

$--ブレークポイント: (
  'xs' : (最大幅: $--sm - 1),
  'sm' : (最小幅: $--sm),
  'md' : (最小幅: $--md),
  'lg' : (最小幅: $--lg),
  'xl' : (最小幅: $--xl)
);
@mixin res($breakpoint){
  $クエリ:マップ取得($--ブレークポイント、$ブレークポイント)
  @if not $query {
    @error '`#{$breakpoint}` の値が見つかりません。正しいかどうか確認してください 
    `$breakpoints` マップで定義されています。';
  }
  @media #{inspect($query)}
   {
    @コンテンツ;
   }
}
。要素 {
  色: #000;
 
  @include res(sm) {
    色: #333;
  }
}
// コンパイルされた CSS

。要素 {
  色: #000;
}
@media (最小幅: 768px) {
  。要素 {
    色: #333;
  }
}

$--sm:768px !デフォルト;
$--md:992px !デフォルト;
$--lg:1200px !デフォルト;
$--xl:1920px !デフォルト;

$--ブレークポイント: (
  'xs' : (最大幅: $--sm - 1),
  'sm' : (最小幅: $--sm),
  'md' : (最小幅: $--md),
  'lg' : (最小幅: $--lg),
  'xl' : (最小幅: $--xl)
);
/* ブレークポイント
 -------------------------- */
@mixin res($key, $map: $--ブレークポイント) {
  // ループブレークポイントマップ、存在する場合は返す @if map-has-key($map, $key) {
    @media 画面のみと #{inspect(map-get($map, $key))} {
      @コンテンツ;
    }
  } @それ以外 {
    @warn "未定義のポイント: `#{$map}`";
  }
}
@include res(xs) {
  @for $i は 0 から 24 まで {
    .el-col-xs-#{$i} {
      幅: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-xs-offset-#{$i} {
      左マージン: (1 / 24 * $i * 100) * 1%;
    }
  }
}
@include res(sm) {
  ...
}
@include res(md) {
  ...
}
@include res(lg) {
  ...
}
@include res(xl) {
  ...
}