vueDesignvue的弹框代码
时间: 2023-07-02 21:07:43 浏览: 46
以下是一个基本的Vue弹框组件的代码,你可以根据自己的需求进行修改:
```html
<template>
<div v-if="show">
<div class="modal-mask"></div>
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
<span class="modal-title">Default Title</span>
</slot>
</div>
<div class="modal-body">
<slot name="body">
Default body text
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="modal-default-button" @click="close">Close</button>
</slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
required: true
}
},
methods: {
close() {
this.$emit('close');
}
}
}
</script>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
</style>
```
以上代码是一个简单的弹框组件,包含标题、内容和关闭按钮。你可以通过`props`传递弹框是否显示的状态,通过`slot`插槽传递具体的弹框内容和功能。你可以根据自己的需求进行修改和扩展。