jquery - 如何将 Bootstrap 对话框用作 vueJs 组件？

Question

我想显示和隐藏一个 Bootstrap 模式对话框，其中这个对话框是一个 vue 组件，我可以使用 props 自定义它的常量(消息、按钮)。

我使用 v-if='show' 来显示它，但问题是我无法将 show 设置为 false通过单击模态背景关闭模态。结果，对话框显示一次，但当它关闭时，当我第二次按下删除按钮时，它不会再次显示。

我有一个名为“person”的 vue.js 组件，它包含另一个组件“confirm-delete”，如下所示:

Person.vue:

<template>
    <div>
        <confirm-delete v-if="show" :msg="deleteMsg"></confirm-delete>
        <!-- person details -->
        <button @click="confirmDelete">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            show: false,
            deleteMsg: ''
        }
    },
    methods: {
        confirmDelete () {
            this.show: true,
            this.deleteMsg: 'Are you sure you want to delete this person?'
        }
    }
}
</script>

ConfirmDelete.vue:

<template>
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="media-body">
                    <p>{{msg}}</p>
                </div>
            </div>
        </div>
    </div>
<template>

<script>
    export default {
        props: ['msg'],

        mounted: function(){
            $('#modalDelete').modal('show')
        }
    }
</script>

当然，如果我通过将对话框的代码包含到 person 中来仅使用一个组件，这也是可行的。但我的目标是将此对话框组件重用到我应用程序的其他部分。

知道我该怎么做吗？

Answer 1

我会在你的 Person.vue 模板中为你的 confirm-delete 组件标签添加一个 ref 属性，然后给 ConfirmDelete.vue 一个 show 方法，它只是触发 Bootstrap 方法。这样您就可以通过 this.$refs.modal.show() 从父级中的 confirmDelete 方法触发 Bootstrap 方法。 More info on refs.

Person.vue:

<template>
    <div>
        <confirm-delete ref="modal" :msg="deleteMsg"></confirm-delete>
        <!-- person details -->
        <button @click="confirmDelete">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                show: false,
                deleteMsg: ''
            }
        },
        methods: {
            confirmDelete () {
                this.$refs.modal.show();
                this.deleteMsg: 'Are you sure you want to delete this person?'
            }
        }
    }
</script>

确认删除.vue:

<template>
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="media-body">
                    <p>{{msg}}</p>
                </div>
            </div>
        </div>
    </div>
<template>

<script>
    export default {
        props: ['msg'],
        methods: {
            show: function() {
                $('#modalDelete').modal('show')
            },
        }
    }
</script>