如何使用引导对话框作为 vueJs 组件？

Posted 2023-02-22

【中文标题】如何使用引导对话框作为 vueJs 组件？

【英文标题】：How to use a bootstrap dialog as a vueJs component?

【发布时间】：2017-08-31 03:09:45

【问题描述】：

我想显示和隐藏一个引导模式对话框，其中该对话框是一个 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>

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

知道我该怎么做吗？

【参考方案1】：

我会在Person.vue 模板中的confirm-delete 组件标记中添加一个ref 属性，然后给ConfirmDelete.vue 一个show 方法，它只是触发引导方法。这样，您可以通过this.$refs.modal.show() 从父级中的confirmDelete 方法触发引导方法。 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>

【讨论】：

效果很好：D 我不知道 refs。您的解释比 vueJs 文档要好得多。感谢您的宝贵时间。