There are many ways for Vue to implement pop-up windows. Here is a simple example:
1. First, create a component file named `Modal.vue` in the Vue project:
```html
<template>
<div class= "modal-mask" v-show="visible" @click.self="close">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
Default Title
</slot>
</div>
<div class="modal-body">
<slot name="body">
default content
</slot>
</div>
<div class="modal-footer">
<slot name ="footer">
<button @click="close">Close</button>
</slot>
</div>
</div>
</div>
</template>
<script>
export default { props: { visible: {
type: Boolean,
default: false
}
},
methods: {
close() {
this.$emit('update:visible', false);
}
}
};
</script>
<style scoped>
.modal-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
width: 50%;
}
</style>
```
2. Introduce `Modal.vue` in the component that needs to use the pop-up window, and use it in the template:
```html
<template>
<div>
<button @click="showModal = true">Open the pop-up window</button >
<Modal :visible.sync="showModal">
<template #header>
Custom header
</template>
<template #body>
Custom content
</template>
<template #footer>
<button @click="showModal = false ">Close</button>
</template>
</Modal>
</div>
</template>
<script>
import Modal from './Modal.vue';
export default { components: { Modal }, data() { return { showModal: false }; } };
</script>
```
In this way, when the "Open Popup" button is clicked, the popup will be displayed. Click the outer area of the pop-up window or the "Close" button, and the pop-up window will close. You can customize the title, content and bottom action buttons of the pop-up window according to your needs.
The following is the commonly used Vue popup implementation code:
1. Use the Dialog component of the Element UI component library```html
<template>
<
el-button @click="dialogVisible = true">Open pop-up window</el-button>
<el-dialog :visible.sync="dialogVisible " title="Popup window title">
<p>Popup content</p>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</p> el-button>
<el-button type="primary" @click="dialogVisible = false">OK</el-button> </span>
</el-dialog>
</template>
<script>
export
default { data () { return { dialogVisible:false } } } </script> ``` 2. Use Vue custom components to implement pop-up windows```html <template> <div>
<button @click="showModal">Open popup</button>
<modal :show="show" @close="closeModal">
<h2>Title of popup</h2>
<p>Content of popup</p >
<button @click="closeModal">Close popup</button>
</modal>
</div>
</template>
<script>
import Modal from './Modal.vue'
export default { components: { Modal } , data() { return { show: false } }, methods: { showModal() { this.show = true }, closeModal() { this.show = false } } } </script> ``` 3. Use the Vue plug-in to realize the pop-up window```html
<template>
<div>
<button @click="showModal">打开弹窗</button>
</div>
</template>
<script>
import Vue from 'vue'
import MyDialog from './MyDialog.vue'
export default {
methods: {
showModal() {
const Dialog = Vue.extend(MyDialog)
const dialog = new Dialog({
el: document.createElement('div')
})
document.body.appendChild(dialog.$el)
}
}
}
</script>
```