如何从 v-date-picker 组件更改弹出框的对齐方式？

Question

我正在使用 v-calendar 插件在前端创建一个日期选择器。如何更改 v-date-picker 组件的弹出框的位置/对齐方式？ （同时保持所有其他元素居中，并且仅使用 CDN 导入）

我正在尝试使用 Vue.js、v-calendar、Bootstrap（以及某些图表的 Chart.js）构建前端。所有这些库/框架/插件现在都使用 CDN 链接导入到项目中。我尝试使用 v-calendar GitHub page 中提到的 popoverAlign 属性。补充一点可能很重要，我在正文上使用text-align: center; 将页面上的所有元素居中，但似乎弹出框也没有居中。

这是我尝试使用的代码：

Vue.use(VCalendar, {
   popoverAlign: "bottom",
})

但我收到了错误消息Uncaught ReferenceError: VCalendar is not defined，这可能是因为我仅通过CDN链接使用库而没有安装它们。

我希望弹出框出现在日期选择器的输入元素下方。它实际上出现在它的下方，但向左移动。 像这样： actual result

我也尝试在JSFiddle 中重新创建问题，但问题并没有出现在那里。我一无所知，因为我不知道是什么导致了弹出框这种奇怪的对齐方式。

Answer 1

要使弹出框在您的输入中居中对齐，您只需在 <v-date-picker> 元素上使用 popover-align="center"：

Vue.config.productionTip = false;
Vue.config.devtools = false;

const vue = new Vue({
  el: "#app",
  data: () => ({
    selectedDate: {
      start: new Date(),
      end: new Date()
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/v-calendar@0.9.7/lib/v-calendar.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/v-calendar/lib/v-calendar.min.css" rel="stylesheet" />

<div class="container" id="app">
  <div class="row">
    <div class="col-12">
      <h1>
        Example
      </h1>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      Other stuff here
    </div>
    <div>
      <v-date-picker :max-date='new Date()' 
                     mode='range' 
                     v-model="selectedDate" 
                     popover-align="center">
      </v-date-picker>
    </div>
  </div>
</div>