快捷導(dǎo)航

vue3組件式彈窗打開(kāi)的3種方式小結(jié)

更新時(shí)間：2023年07月20日 10:17:53 作者：莫奈的日出

這篇文章主要給大家介紹了關(guān)于vue3組件式彈窗打開(kāi)的3種方式,彈窗組件是常見(jiàn)的交互組件,它能夠彈出一些提示信息、提醒用戶進(jìn)行操作等等,需要的朋友可以參考下

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="發(fā)布上線" @ok="handleOk" @cancel="handleCancel">
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">確認(rèn)發(fā)布</a-button>
    </template>
    <h1>注意事項(xiàng)</h1>
          <ol style=" listStyleType: 'decimal', paddingLeft: 12, marginTop: 10 ">
            <li>上線時(shí)間：19:00-23:00禁止（流量高峰），緊急上線聯(lián)系開(kāi)發(fā)。</li>
            <li>上線間隔：3分鐘內(nèi)只能上線一次，防止新內(nèi)容過(guò)多時(shí)執(zhí)行慢。</li>
            <li>上線成功：出現(xiàn)“上線成功”彈窗，即完成本次上線。</li>
            <li>上線頻率：少量多次，請(qǐng)勿積攢過(guò)多新內(nèi)容，以免影響用戶流量。</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: '錯(cuò)誤提示',
            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="發(fā)布上線" @ok="openModal" @cancel="handleCancel">
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">確認(rèn)發(fā)布</a-button>
    </template>
    <h1>注意事項(xiàng)</h1>
          <ol style=" listStyleType: 'decimal', paddingLeft: 12, marginTop: 10 ">
            <li>上線時(shí)間：19:00-23:00禁止（流量高峰），緊急上線聯(lián)系開(kāi)發(fā)。</li>
            <li>上線間隔：3分鐘內(nèi)只能上線一次，防止新內(nèi)容過(guò)多時(shí)執(zhí)行慢。</li>
            <li>上線成功：出現(xiàn)“上線成功”彈窗，即完成本次上線。</li>
            <li>上線頻率：少量多次，請(qǐng)勿積攢過(guò)多新內(nèi)容，以免影響用戶流量。</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: '錯(cuò)誤提示',
            content: err?.response?.data?.msg || '上線失敗'
        })
        loading.value = false
        handleCancel()
     })
    }
    const handleCancel = () => {
        controlVisible.value = false
    }
    return {
       loading,
        handleOk,
        openModal,
      handleCancel,
      controlVisible
    }
  }
})
</script>

3、provide和inject

在父組件中通過(guò)provide暴露屬性或方法，子組件通過(guò)inject接受，并且只要是父組件的后代，都可以通過(guò)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="發(fā)布上線" @ok="handleOk" @cancel="handleCancel">
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">確認(rèn)發(fā)布</a-button>
    </template>
    <h1>注意事項(xiàng)</h1>
    <ol style=" listStyleType: 'decimal', paddingLeft: 12, marginTop: 10 ">
      <li>上線時(shí)間：19:00-23:00禁止（流量高峰），緊急上線聯(lián)系開(kāi)發(fā)。</li>
      <li>上線間隔：3分鐘內(nèi)只能上線一次，防止新內(nèi)容過(guò)多時(shí)執(zhí)行慢。</li>
      <li>上線成功：出現(xiàn)“上線成功”彈窗，即完成本次上線。</li>
      <li>上線頻率：少量多次，請(qǐng)勿積攢過(guò)多新內(nèi)容，以免影響用戶流量。</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: '錯(cuò)誤提示',
            content: err?.response?.data?.msg || '上線失敗'
          })
          loading.value = false
          handleCancel()
        })
    }
    const handleCancel = () => {
      handle(false)
    }
    return {
      loading,
      handleOk,
      handleCancel,
      controlVisible
    }
  }
}
</script>