vue实现点击按钮弹窗
时间: 2023-07-11 18:15:30 浏览: 66
你可以使用Vue.js框架中的模态框组件来实现点击按钮弹窗的功能。以下是一个简单的示例:
1. 在你的Vue组件中,引入模态框组件:
```
<template>
<div>
<button @click="showModal = true">点击弹窗</button>
<modal v-if="showModal" @close="showModal = false">
<h3>这是一个弹窗标题</h3>
<p>这是弹窗的内容</p>
</modal>
</div>
</template>
<script>
import Modal from './Modal.vue';
export default {
components: {
Modal
},
data() {
return {
showModal: false
}
}
}
</script>
```
2. 创建一个模态框组件Modal.vue:
```
<template>
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
<button class="modal-close-btn" @click="$emit('close')">关闭</button>
</div>
<div class="modal-body">
<slot></slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'modal'
}
</script>
<style>
/* 模态框样式 */
.modal-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
.modal-wrapper {
display: table;
width: 100%;
height: 100%;
}
.modal-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.modal-header {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
color: #333;
}
.modal-close-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
border: none;
background-color: #ddd;
cursor: pointer;
}
.modal-body {
padding: 20px;
font-size: 16px;
color: #666;
}
</style>
```
3. 在你的CSS文件中添加以下样式来美化模态框:
```
/* 模态框样式 */
.modal-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
.modal-wrapper {
display: table;
width: 100%;
height: 100%;
}
.modal-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.modal-header {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
color: #333;
}
.modal-close-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
border: none;
background-color: #ddd;
cursor: pointer;
}
.modal-body {
padding: 20px;
font-size: 16px;
color: #666;
}
```
4. 运行你的Vue应用程序,点击按钮就可以弹出模态框了。