固定ボトムコンポーネントを実装した 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;
}
</スタイル>

<テンプレート>
  <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;
}
</スタイル>