fixed header

導入

• コンポーネントの内部クラス名を固定内部コンポーネントに渡すサポート
• 同じページに複数のFixedHeaderがある場合は、各コンポーネントのidNameを渡してください。idが同じ場合、特定のコンポーネントが検出されます。
• 単一のFixedHeaderにidNameを渡す必要はありません。階層関係に関係なく、ページ上でfixed-headerという名前のデフォルトのスタイルを定義するだけで済みます。
• デフォルトのスタイル名を使用する代わりに、カスタム styleClassName を渡す必要があります。

使用法

ページには固定ヘッダーが 1 つだけあります

 <template>
  <div class="fixed">
      <fixed-header>
        <div>fixed header</div>
      </fixed-header>
  </div>
</template>

<script>
import FixedHeader from '@/components/FixedHeader'

export default {
  components: {
    FixedHeader
  }
}
</script>

<style>
.fixed {
    /deep/.fixed-header {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
}
</style>

ページに複数のFixedHeaderがある場合

このうち、child-class-nameはカプセル化されたel-tabのヘッダクラス名に渡され、タブヘッダはこの名前で固定されます。

 <template>
    <fixed-header id-name="top" style-class-name="top-fixed-header">
      <span>top fixed header</span>
    </fixed-header>
    <fixed-header child-class-name="el-tabs__header">
      <el-tabs type="border-card">
        <el-tab-pane label="商品介绍">
          <div>商品介绍</div>
          <img src="http://dummyimage.com/1000x1000/02adea/FFF&text=Hello">
          <img src="http://dummyimage.com/1000x1000/3538b2/FFF&text=Mock.js">
        </el-tab-pane>
        <el-tab-pane label="规格参数">
          规格参数
        </el-tab-pane>
        <el-tab-pane label="商品评价">
          商品评价
        </el-tab-pane>
      </el-tabs>
    </fixed-header>
</template>

<script>
import FixedHeader from '@/components/FixedHeader'

export default {
  components: {
    FixedHeader
  }
}
</script>

<style>
.fixed {
    /deep/.fixed-header {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
    /deep/.top-fixed-header {
        position:fixed;
        background: red;
        color: white;
        top:0;
        width: 100%;
        z-index:999;
      }
}
</style>

小道具

ID名

• コンポーネントを見つけるには、固定コンポーネント ID 名が必要です
• デフォルト: 要素

スタイルクラス名

• コンポーネント固定時のスタイル名
• デフォルト: 固定ヘッダー

子のクラス名

• このサブコンポーネントを見つけるには、固定コンポーネントのサブコンポーネント クラス名が必要です。
• デフォルト: null

プロジェクトのセットアップ

 npm install

開発用のコンパイルとホットリロード

 npm run serve

実稼働用にコンパイルおよび縮小します

 npm run build