Vue.js 通过单击按钮打开模态
[英] Vue.js open modal by click of a button
本文介绍了Vue.js 通过单击按钮打开模态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用按钮在其他组件中显示模态?例如，我有以下组件:
info.vue
<div class="容器"><button class="btn btn-info" @click="showModal">显示模态</button><example-modal></example-modal>
<脚本>从'./exampleModal.vue'导入exampleModal导出默认{方法: {显示模态(){//如何显示模态}},组件:{"example-modal":exampleModal}}
exampleModal.vue
<!-- 模态--><div class="modalfade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">模态标题</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
<div class="modal-body">嗨嗨
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存更改</button>
如何显示exampleModal.vue中的模态?我知道我可以使用 data-toggle 和 data-target 来显示模态，像这样:
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">显示模态</button>
但是有没有办法使用showModal"方法来显示模态?
解决方案
根据您的代码段，您使用的是经典的 Bootstrap 模式.在这种情况下，您只需要使用 data-toggle 和 data-target 属性:
<div class="容器"><button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">显示模态</button><example-modal></example-modal>
<小时>
编辑
我误读了这个问题，所以我编辑了我的答案.
可以使用自定义方法打开模态.您只需要使用 refs 找到元素#exampleModal"，然后使用引导方法(Bootstrap Programmatic API)
<div class="容器"><button class="btn btn-info" @click="showModal">显示模态</button><example-modal ref="modal"></example-modal>
方法:{显示模态(){让元素 = this.$refs.modal.$el$(element).modal('show')}}
小提琴示例
How to use a button to show the modal in other components? For example, I have the following components:
info.vue
<template>
<div class="container">
<button class="btn btn-info" @click="showModal">show modal</button>
<example-modal></example-modal>
</div>
</template>
<script>
import exampleModal from './exampleModal.vue'
export default {
methods: {
showModal () {
// how to show the modal
}
},
components:{
"example-modal":exampleModal
}
}
</script>
exampleModal.vue
<template>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
hihi
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
How to show the modal from exampleModal.vue? I know that I can
use data-toggle and data-target to show the modal, like this:
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>
But is there any way to show the modal by using the method "showModal"?
解决方案
According to your snippet, you're using a classic Bootstrap modal. You just need to use data-toggle and data-target attributes in that case:
<div id="app">
<div class="container">
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>
<example-modal></example-modal>
</div>
</div>
Edit
I misread the question so i edit my answer.
It's possible to open the modal with a custom method. You just need to find the element "#exampleModal" by using refs and then open the modal with a bootstrap method (Bootstrap Programmatic API)
<div id="app">
<div class="container">
<button class="btn btn-info" @click="showModal">show modal</button>
<example-modal ref="modal"></example-modal>
</div>
</div>
methods: {
showModal() {
let element = this.$refs.modal.$el
$(element).modal('show')
}
}
Fiddle example
这篇关于Vue.js 通过单击按钮打开模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
