脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3组件式弹窗打开

vue3组件式弹窗打开的3种方式小结

 更新时间：2023年07月20日 10:17:53   作者：莫奈的日出  
这篇文章主要给大家介绍了关于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组件式弹窗打开内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue-element的select下拉框赋值实例

    vue-element的select下拉框赋值实例

    这篇文章主要介绍了vue-element的select下拉框赋值实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • Vue组件之间的通信方式详细讲解

    Vue组件之间的通信方式详细讲解

    对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结
    2022-08-08
  • 使用ElementUI el-upload实现一次性上传多个文件

    使用ElementUI el-upload实现一次性上传多个文件

    在日常的前端开发中,文件上传是一个非常常见的需求,尤其是在用户需要一次性上传多个文件的场景下,ElementUI作为一款非常优秀的Vue.js 2.0组件库,为我们提供了丰富的UI组件,本文介绍了如何使用ElementUI el-upload实现一次性上传多个文件,需要的朋友可以参考下
    2024-08-08
  • vue中对象数组去重的实现

    vue中对象数组去重的实现

    这篇文章主要介绍了vue中对象数组去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 创建项目及包管理yarn create vite源码学习

    创建项目及包管理yarn create vite源码学习

    这篇文章主要为大家介绍了创建项目及包管理yarn create vite源码学习分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • vue computed计算属性显示undefined的解决

    vue computed计算属性显示undefined的解决

    这篇文章主要介绍了vue computed计算属性显示undefined的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue + ele 实现下拉选择框和下拉多选选择框处理方案

    vue + ele 实现下拉选择框和下拉多选选择框处理方案

    这篇文章主要介绍了vue + ele 实现下拉选择框和下拉多选选择框处理方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue中@click事件的常见修饰符用法总结

    Vue中@click事件的常见修饰符用法总结

    这篇文章主要给大家介绍了关于Vue中@click事件的常见修饰符用法的相关资料,@click事件修饰符是在Vue组件中用来修改@click事件行为的特殊标记,需要的朋友可以参考下
    2023-10-10
  • Vue2 配置 Axios api 接口调用文件的方法

    Vue2 配置 Axios api 接口调用文件的方法

    本篇文章主要介绍了Vue2 配置 Axios api 接口调用文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 详解VUE2.X过滤器的使用方法

    详解VUE2.X过滤器的使用方法

    本篇文章主要介绍了详解VUE2.X过滤器的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论