固定ボトムコンポーネントを実装した Vue の例

【効果】

【実施方法】

<テンプレート>
  <div id="アプリ">
    <div class="main">
      <img alt="Vue ロゴ" src="./assets/logo.png">
      <HelloWorld msg="Vue.js アプリへようこそ"/>
      <img alt="Vue ロゴ" src="./assets/logo.png">
    </div>
    <div class="footer">これは下部に固定されたボタンです</div>
  </div>
</テンプレート>

<スクリプト>
'./components/HelloWorld.vue' から HelloWorld をインポートします。

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    こんにちは世界
  }
}
</スクリプト>

<スタイル>
：根{
  --フッターの高さ: 50px;
}
体 {
  パディング: 0;
  マージン: 0;
}
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
。主要{
  パディングボトム: var(--footer-height);
  オーバーフロー-y: 自動;
}
.フッター{
  位置: 固定;
  下部: 0;
  幅: 100%;
  行の高さ: var(--footer-height);
  背景: #42b983;
  色: #fff;
}
</スタイル>

[要件追加] Aロジックを追加します。Aロジックが満たされると、下部のボタンは表示されませんが、それ以外の場合は表示されます。
下部のボタンが表示されているかどうかを判断するための Bool 値 (isShow) を追加します。具体的なコードは次のとおりです。

<テンプレート>
  <div id="アプリ">
    <div class="main">
      <img alt="Vue ロゴ" src="./assets/logo.png">
      <HelloWorld msg="Vue.js アプリへようこそ"/>
      <img alt="Vue ロゴ" src="./assets/logo.png">
    </div>
    <div class="footer" v-if='isShow'>
      <div class="footer-content">これは下部に固定されたボタンです</div>
    </div>
  </div>
</テンプレート>

<スクリプト>
'./components/HelloWorld.vue' から HelloWorld をインポートします。

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    こんにちは世界
  },
  データ（） {
    戻る {
      isShow: 真
    }
  },
}
</スクリプト>

<スタイル>
：根{
  --フッターの高さ: 50px;
}
体 {
  パディング: 0;
  マージン: 0;
}
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
。主要 {
  オーバーフロー-y: 自動;
}
.フッター{
  高さ: var(--footer-height);
}
.フッターコンテンツ{
  位置: 固定;
  下部: 0;
  幅: 100%;
  行の高さ: var(--footer-height);
  背景: #42b983;
  色: #fff;
}
</スタイル>

これで、Vue で固定ボトムコンポーネントを実装する例についての記事は終了です。Vue 固定ボトムに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: