html5加vue弹窗,Vue制作弹出对话框组件
时间: 2023-08-18 07:24:49 浏览: 51
你可以使用Vue.js制作一个弹出对话框组件,具体步骤如下:
1. 创建一个Vue组件,命名为Dialog:
```html
<template>
<div class="dialog-mask" v-show="visible">
<div class="dialog">
<div class="dialog-header">{{ title }}</div>
<div class="dialog-body">{{ message }}</div>
<div class="dialog-footer">
<button class="btn btn-primary" @click="confirm">确认</button>
<button class="btn btn-default" @click="cancel">取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
title: '',
message: '',
confirmCallback: null,
cancelCallback: null
}
},
methods: {
confirm() {
this.visible = false
if (this.confirmCallback) {
this.confirmCallback()
}
},
cancel() {
this.visible = false
if (this.cancelCallback) {
this.cancelCallback()
}
}
}
}
</script>
```
这个组件包括了对话框的标题、内容、确认和取消按钮。它有一个visible属性,用于控制对话框的显示和隐藏。confirmCallback和cancelCallback是回调函数,用于在确认或取消按钮被点击时执行相应的操作。
2. 在需要使用对话框的地方,引入Dialog组件,并使用Vue的动态组件功能来动态渲染:
```html
<template>
<div>
<button @click="showDialog">弹出对话框</button>
<component :is="dialogComponent"></component>
</div>
</template>
<script>
import Dialog from './Dialog.vue'
export default {
data() {
return {
dialogComponent: null
}
},
components: {
Dialog
},
methods: {
showDialog() {
this.dialogComponent = Dialog
this.$nextTick(() => {
this.$refs.dialog.visible = true
this.$refs.dialog.title = '提示'
this.$refs.dialog.message = '确定要执行这个操作吗?'
this.$refs.dialog.confirmCallback = () => {
console.log('执行确认操作')
}
this.$refs.dialog.cancelCallback = () => {
console.log('执行取消操作')
}
})
}
}
}
</script>
```
这个组件包含了一个按钮,点击按钮时会弹出对话框。它使用Vue的动态组件功能来动态渲染Dialog组件。在showDialog方法中,设置Dialog组件的属性,然后将Dialog组件赋值给dialogComponent属性。这样,Dialog组件就会被动态渲染到页面上,并显示出来。
上面的代码只是一个简单的示例,你可以根据你的需求来扩展它,如添加更多的按钮、设置对话框的样式等。