vue3组件式弹窗打开的3种方式小结
作者：莫奈的日出
这篇文章主要给大家介绍了关于vue3组件式弹窗打开的3种方式,弹窗组件是常见的交互组件,它能够弹出一些提示信息、提醒用户进行操作等等,需要的朋友可以参考下
1、利用父子组件传值
父组件：
<template>
<div>
<a-button style="margin: 20px" type="primary" @click="showModal">上线</a-button>
<OnlineModal :controlVisible="visibleIt" @closeModal="visibleIt=false"/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import OnlineModal from './onlineModal.vue'
export default defineComponent({
components: {
OnlineModal
},
setup() {
const route = useRoute()
const visibleIt = ref<boolean>(false)
const showModal = () => {
visibleIt.value = true
}
return {
route,
visibleIt,
showModal
}
}
})
</script>
子组件：
<template>
<a-modal :visible="controlVisible" title="发布上线" @ok="handleOk" @cancel="handleCancel">
<template #footer>
<a-button key="back" @click="handleCancel">取消</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认发布</a-button>
</template>
<h1>注意事项</h1>
<ol style=" listStyleType: 'decimal', paddingLeft: 12, marginTop: 10 ">
<li>上线时间：19:00-23:00禁止（流量高峰），紧急上线联系开发。</li>
<li>上线间隔：3分钟内只能上线一次，防止新内容过多时执行慢。</li>
<li>上线成功：出现“上线成功”弹窗，即完成本次上线。</li>
<li>上线频率：少量多次，请勿积攒过多新内容，以免影响用户流量。</li>
</ol>
</a-modal>
</template>
<script lang="ts">
import { ref } from 'vue'
import {postRelease} from '@/services/online'
import { message } from 'ant-design-vue';
export default ({
props:['controlVisible'],
setup(props, {emit}) {
console.log(props.controlVisible);
const loading = ref<boolean>(false)
const handleOk = () => {
loading.value = true
postRelease().then( res => {
console.log(res, '----');
debugger
message.success('上线成功')
loading.value = false
}).catch(err => {
message.error({
title: '错误提示',
content: err?.response?.data?.msg || '上线失败'
})
loading.value = false
})
emit('closeModal')
}
const handleCancel = () => {
emit('closeModal')
}
return {
loading,
handleOk,
handleCancel
}
}
})
</script>2、利用ref
父组件：
<template>
<div>
<a-button style="margin: 20px" type="primary" @click="showModal">上线</a-button>
<OnlineModal ref="onlineModal" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import OnlineModal from './onlineModal.vue'
export default defineComponent({
components: {
OnlineModal
},
setup() {
const route = useRoute()
const onlineModal = ref<boolean>(false)
const showModal = () => {
onlineModal.value.openModal()
}
return {
route,
showModal,
onlineModal
}
}
})
</script>
子组件：
<template>
<a-modal :visible="controlVisible" title="发布上线" @ok="openModal" @cancel="handleCancel">
<template #footer>
<a-button key="back" @click="handleCancel">取消</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认发布</a-button>
</template>
<h1>注意事项</h1>
<ol style=" listStyleType: 'decimal', paddingLeft: 12, marginTop: 10 ">
<li>上线时间：19:00-23:00禁止（流量高峰），紧急上线联系开发。</li>
<li>上线间隔：3分钟内只能上线一次，防止新内容过多时执行慢。</li>
<li>上线成功：出现“上线成功”弹窗，即完成本次上线。</li>
<li>上线频率：少量多次，请勿积攒过多新内容，以免影响用户流量。</li>
</ol>
</a-modal>
</template>
<script lang="ts">
import { ref } from 'vue'
import {postRelease} from '@/services/online'
import { message } from 'ant-design-vue';
export default ({
setup(props, {emit}) {
const controlVisible = ref<boolean>(false)
const loading = ref<boolean>(false)
const openModal = () =>{
controlVisible.value = true
}
const handleOk = () => {
openModal()
loading.value = true
postRelease().then( res => {
console.log(res, '----');
debugger
message.success('上线成功')
loading.value = false
handleCancel()
}).catch(err => {
message.error({
title: '错误提示',
content: err?.response?.data?.msg || '上线失败'
})
loading.value = false
handleCancel()
})
}
const handleCancel = () => {
controlVisible.value = false
}
return {
loading,
handleOk,
openModal,
handleCancel,
controlVisible
}
}
})
</script>3、provide和inject
在父组件中通过provide暴露属性或方法，子组件通过inject接受，并且只要是父组件的后代，都可以通过inject接收到父组件暴露的值
父组件：
<template>
<div>
<a-button style="margin: 20px" type="primary" @click="showModal">上线</a-button>
<OnlineModal />
</div>
</template>
<script lang="ts">
import { defineComponent, provide, ref } from 'vue'
import { useRoute } from 'vue-router'
import OnlineModal from './onlineModal.vue'
export default defineComponent({
components: {
OnlineModal
},
setup() {
const route = useRoute()
const controlIfVisible = ref<boolean>(false)
provide('controlIfVisible', controlIfVisible)
const showModal = (sonValue) => {
controlIfVisible.value = sonValue
}
provide('handle', showModal)
return {
route,
showModal,
controlIfVisible
}
}
})
</script>
子组件：
<template>
<a-modal :visible="controlVisible" title="发布上线" @ok="handleOk" @cancel="handleCancel">
<template #footer>
<a-button key="back" @click="handleCancel">取消</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认发布</a-button>
</template>
<h1>注意事项</h1>
<ol style=" listStyleType: 'decimal', paddingLeft: 12, marginTop: 10 ">
<li>上线时间：19:00-23:00禁止（流量高峰），紧急上线联系开发。</li>
<li>上线间隔：3分钟内只能上线一次，防止新内容过多时执行慢。</li>
<li>上线成功：出现“上线成功”弹窗，即完成本次上线。</li>
<li>上线频率：少量多次，请勿积攒过多新内容，以免影响用户流量。</li>
</ol>
</a-modal>
</template>
<script lang="ts">
import { ref, inject } from 'vue'
import { postRelease } from '@/services/online'
import { message } from 'ant-design-vue'
export default {
setup(props) {
const loading = ref<boolean>(false)
const controlVisible = inject('controlIfVisible')
const handle: any = inject('handle')
const handleOk = () => {
handle(true)
loading.value = true
postRelease()
.then((res) => {
console.log(res, '----')
debugger
message.success('上线成功')
loading.value = false
handleCancel()
})
.catch((err) => {
message.error({
title: '错误提示',
content: err?.response?.data?.msg || '上线失败'
})
loading.value = false
handleCancel()
})
}
const handleCancel = () => {
handle(false)
}
return {
loading,
handleOk,
handleCancel,
controlVisible
}
}
}
</script>总结
到此这篇关于vue3组件式弹窗打开的3种方式的文章就介绍到这了,更多相关vue3组件式弹窗打开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！