首页 > 解决方案 > Bootstrap Vue 模式导致关闭/野生动物园问题时页面跳转

问题描述

当我关闭我的引导 vue 模式时,它会导致页面跳转到具有打开模式触发器的部分,这很好。在 Safari 中,它远远高于触发器所在的部分。有没有办法添加一个阻止默认或类似的方法来在模式关闭时停止页面跳转?

<template>
  <b-modal
    :visible="visible"
    size="lg"
    centered
    @hidden="closeModal"
    hide-footer
  >
    <p>
    modal body
    </p>
    <template>
      <div class="w-100">
        <b-button
          class="btn btn-icon"
          @click.prevent="closeModal"
        >
          <span class="l-btn float-left">
            <span class="btn-text">Cancel</span>
            <i class="btn-icon-symbol"></i>
          </span>
        </b-button>
        <a
          :href="$store.state.modals.interstitial.href"
          target="_blank"
          class="btn btn-icon btn-icon-arrow"
        >
          <span class="l-btn float-left">
            <span class="btn-text text-white">OK</span>
            <i class="btn-icon-symbol text-white"></i>
          </span>
        </a>
      </div>
    </template>
  </b-modal>
</template>

<script>
import { BButton } from 'bootstrap-vue';
export default {
  name: 'Modal',
  components: {
    'b-button': BButton,
  },
  computed: {
    visible() {
      return this.$store.state.modals.interstitial.show;
    },
  },
  methods: {
    closeModal() {
      this.$store.commit('modals/setShowModal', false);
      this.$store.commit('modals/setModalHref', '');
    },
  },
};
</script>

标签: javascriptvue.jsnuxt.jsbootstrap-vue

解决方案


推荐阅读