Question

我必须在我的页面中使用模态，并且我需要一种在按第一个模态上的“确定”按钮时侦听“ ok”事件并通过打开另一个模态进行响应的方法。文档中没有示例。 https://bootstrap-vue.js.org/docs/components/modal/

我想使用此列表器，但没有任何解释，我找不到这里的内容


export default {
  mounted() {
    this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
      console.log('Modal is about to be shown', bvEvent, modalId)
    })
  }
}

这是我代码的相关部分：

<div>
    <b-modal id="modal-center-add-post" style="width: 120px" centered  class="h-50 d-inline-block min-vw-100" ok-title="next" >
        <add-post></add-post>
    </b-modal>
</div>
<div>
    <b-modal id="modal-center-add-content" style="width: 120px" 
        centered  class="h-50 d-inline-block min-vw-100" 
        ok-only ok-title="Create" >
        <add-content></add-content>
    </b-modal>
</div>

添加后组件代码为

<template>
    <form>
        <div class="form-group row">
            <label for="title" 
                   class="col-sm-2 col-form-label">
                   Title
            </label>
            <div class="col-sm-10">
                <input type="text" 
                       class="form-control" 
                       id="title" 
                       placeholder="Title">
            </div>
        </div>
        <div class="form-group row">
            <label for="chooseTopic" 
                   class="col-sm-2 col-form-label">
                   Topic
            </label>
            <div class="col-sm-10">
                <select id="chooseTopic" class="form-control">
                    <option selected>Leadership</option>
                    <option>HR</option>
                    <option>Sales</option>
                    <option>Marketing</option>
                </select>
            </div>
        </div>
        <fieldset class="form-group">
            <div class="row">
                <legend class="col-form-label col-sm-2 pt-0"> Type</legend>
                <div class="col-sm-10">
                    <div class="form-check-inline ">
                        <label class="form-check-label" 
                               for="video" 
                               :class="{'checked':(isChecked==='video')}" 
                               @click="isChecked='video'">
                               <input class="form-check-input" 
                                      type="radio" name="video" 
                                      id="video" 
                                      v-model="postingType" 
                                      value="video" checked>
                            <i class="fab fa-youtube "></i>
                            Video
                        </label>
                    </div>
                    <div class="form-check-inline">
                        <label class="form-check-label" 
                               for="ebook" 
                               :class="{'checked':(isChecked==='ebook')}" 
                               @click="isChecked='ebook'">
                               <input class="form-check-input" 
                                      type="radio" 
                                      name="ebook" 
                                      id="ebook" 
                                      v-model="postingType" 
                                      value="ebook">
                              <i class="far fa-file-pdf "></i>
                              Ebook
                        </label>
                    </div>
                    <div class="form-check-inline ">
                        <label class="form-check-label " 
                               for="article" 
                               :class="{'checked':(isChecked==='article')}" 
                               @click="isChecked='article'">
                            <input class="form-check-input " type="radio"  
                                   name="article" id="article"              
                                   v-model="postingType"  value="article" >
                            <i class="fas fa-pen-square "></i>
                            Article
                        </label>
                    </div>
                </div>
            </div>
        </fieldset>

    </form>
</template>

<script>
    export default {
        name: "AddPost",
        data(){
            return{
                postingType:'',
                isChecked:'video'
            }
        },



    }
</script>

因此，当我单击添加帖子组件中的ok（下一个）时，我想要第二个模式弹出窗口。

我希望解释足够清楚

谢谢

Answer 1

它位于Events下的文档底部

基本使用

@ok="yourOkFn"

如何从bootstrap-vue模态中监听事件？

1 个答案: