Vue 启动模式与消息

Question

我正在尝试启动一个模式 window，就像一个普通的 alert()

我正在使用 bootstrap-vue BModal

如何从代码生成模态 class 并启动它
或者，在根 app.vue 中添加模式并从子 classes 中调用它。

我找到了一个示例，但无法复制 - https://codesandbox.io/embed/4l3w20zomw

Answer 1

我认为你需要使用show()、hide()和toggle()组件方法而这里是Link，但这里的区别你会调用show() 方法 mounted() hook 它将在挂载循环中调用 showModal 方法，因此当应用程序被托管时，您将看到类似警报的模态，示例

<template>
  <div>
    <b-modal ref="myModalRef" hide-footer title="Using Component Methods">
      <div class="d-block text-center">
        <h1>Any Content here</h1>
      </div>
    </b-modal>
  </div>
</template>

<script>
  export default {
    methods: {
      showModal() {
        this.$refs.myModalRef.show()
      },
      hideModal() {
        this.$refs.myModalRef.hide()
      }
    },
    mounted() {
     this.showModal();
    }
  }
</script>

Vue 启动模式与消息

Vue Launch Modal with Message

vue.js

bootstrap-vue