Vue.js 3 脚本与 Bootstrap 5 粘性页脚交互

Question

此模板基于他们提供的 Bootstrap 5 Sticky Footer 和 Nav 示例。我正在使用 Vue.js 3，当我将我的脚本应用到 id="awApp" 内的应用程序时，它停止了粘性页脚功能，并且我的页脚漂浮在正文下方。但是，我需要将页脚包含在 Vue 应用程序中，因为我正在计算 in.

中的动态日期

tldk：页脚必须粘在底部（不固定），同时允许计算动态版权日期

<script>
  const app = Vue.createApp({
    data() {
      return {
        currentYear: new Date().getFullYear(),
        now: new Date().toISOString(),
        contact: {
          firstName: "",
          lastName: "",
          email: "",
        },
      };
    },
    methods: {
      submitForm(e) {
        const isValid =
          this.contact.firstName &&
          this.contact.lastName &&
          this.contact.email &&
          this.validEmail(this.contact.email);
        e.target.classList.add("was-validated");
        if (!isValid) {
          e.preventDefault();
        }
      },
      validEmail: function (email) {
        const re =
          /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
      },
    },
  });

  app.mount("#awApp");
</script>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <link rel="icon" href="##URL_FAV_ICON##" />
    <title>Title</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />

    <style>
      main > .container {
        padding: 60px 15px 0;
      }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11"></script>
  </head>

  <div id="awApp">
    <body class="d-flex flex-column h-100">
      <!-- FIXED NAVBAR AND/OR HEADER -->
      <header>
        <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">
              <img :src="imgSrc" alt="logo" width="120" />
            </a>
          </div>
        </nav>
      </header>
      <!-- / HEADER/NAVBAR -->

      <!-- MAIN CONTENT -->
      <main role="main" class="flex-shrink-0">
        <div class="container">
          <div class="row my-5 gx-5">
            <div class="col-md-7">
              <img
                src="http://placehold.it/1200x400"
                alt="hero image"
                class="img-fluid"
              />
              <h2 class="mt-3">Headline goes here...</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Corporis dolore eaque, facere id molestias perspiciatis sit?
              </p>
              <ul>
                <li>benefit 1</li>
                <li>benefit 2</li>
                <li>benefit 3</li>
              </ul>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
                aliquid assumenda consectetur deleniti est ipsam nemo nobis
                officiis quasi, quod!
              </p>
            </div>
            <div class="col-md-5">
              <div class="card shadow p-3">
                <!--<img class="card-img-top rz-card-img-top" src="http://placehold.it/400x100" alt="Card image cap">-->
                <div class="card-body">
                  <h5 class="card-title">Call to action</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                  <form
                    novalidate
                    class="needs-validation"
                    name="mainForm"
                    @submit="submitForm"
                    method="post"
                  >
                    <div class="row mb-2 gx-2">
                      <div class="col-md-6 mb-3">
                        <label for="firstname" class="form-label mb-0"
                          >First Name*</label
                        >
                        <input
                          id="firstname"
                          type="text"
                          name="firstname"
                          class="form-control"
                          v-model="contact.firstName"
                          id="awValid"
                          required
                        />
                        <div class="valid-feedback">Looks good!</div>
                        <div class="invalid-feedback">
                          Please enter a first name.
                        </div>
                      </div>
                      <div class="col-md-6 mb-3">
                        <label for="lastname" class="form-label mb-0"
                          >Last Name*</label
                        >
                        <input
                          id="lastname"
                          type="text"
                          name="lastname"
                          class="form-control"
                          v-model="contact.lastName"
                          required
                        />
                        <div class="invalid-feedback">
                          Please enter a last name.
                        </div>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <div class="col">
                        <label for="email" class="form-label mb-0"
                          >Email Address*</label
                        >
                        <input
                          id="email"
                          type="text"
                          name="email"
                          class="form-control"
                          v-model="contact.email"
                          pattern="^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,20})$"
                          required
                        />
                        <div class="invalid-feedback">
                          Please enter a valid email.
                        </div>
                      </div>
                    </div>

                    <input
                      type="submit"
                      class="btn btn-primary"
                      value="Submit"
                    />

                    <div>
                      <small class="form-text text-muted">
                        <em>* Denotes a required field.</em>
                      </small>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <!-- /MAIN CONTENT -->

      <!-- FOOTER -->
      <footer class="footer mt-auto py-3 bg-light text-center">
        <div class="container">
          <span class="text-muted"
            >&copy; {{currentYear}} |
        </div>
      </footer>
      <!-- /FOOTER -->

Answer 1

body 标签需要位于顶层，而不是应用的嵌套组件。否则，浏览器会自动将其提升到外部：

<!-- BAD -->
<div id="awApp">
  <body></body> ❌
</div>

<!-- OK -->
<body>
  <div id="awApp"></div> ✅
</body>

如果您希望应用 100vh 填充视口高度，请使用 vh-100 class（而不是 h-100，这只是 100%):

<div id="awApp" class="vh-100">

demo

Vue.js 3 脚本与 Bootstrap 5 粘性页脚交互

Vue.js 3 Script Interacting with Bootstrap 5 Sticky Footer

javascript

vue.js

vuejs3

bootstrap-5