vue写两个弹出框如何写
时间: 2024-05-03 19:17:14 浏览: 5
在 Vue 中实现弹出框可以使用组件的方式,以下是两种实现方式:
1. 使用单个组件,通过 props 传递弹出框的不同内容
```html
<template>
<div>
<button @click="showDialog1 = true">弹出框1</button>
<button @click="showDialog2 = true">弹出框2</button>
<dialog :show="showDialog1" @close="showDialog1 = false">
<h2>弹出框1</h2>
<p>弹出框1的内容</p>
</dialog>
<dialog :show="showDialog2" @close="showDialog2 = false">
<h2>弹出框2</h2>
<p>弹出框2的内容</p>
</dialog>
</div>
</template>
<script>
import Dialog from './Dialog.vue'
export default {
components: {
Dialog
},
data() {
return {
showDialog1: false,
showDialog2: false
}
}
}
</script>
```
2. 分别使用两个组件,各自实现不同的弹出框
```html
<template>
<div>
<button @click="showDialog1 = true">弹出框1</button>
<button @click="showDialog2 = true">弹出框2</button>
<dialog1 :show="showDialog1" @close="showDialog1 = false" />
<dialog2 :show="showDialog2" @close="showDialog2 = false" />
</div>
</template>
<script>
import Dialog1 from './Dialog1.vue'
import Dialog2 from './Dialog2.vue'
export default {
components: {
Dialog1,
Dialog2
},
data() {
return {
showDialog1: false,
showDialog2: false
}
}
}
</script>
```