耀极客论坛

 找回密码
 立即注册
查看: 410|回复: 0

vue实现自定义"模态弹窗"组件实例代码

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 02:04:16 | 显示全部楼层 |阅读模式
  页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,下面这篇文章主要给大家介绍了关于vue实现自定义"模态弹窗"组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言
  对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计出的图该怎么办呢 ,所以我们需要自己写一个对话框,下面来一起看看详细的实现过程。

效果图


  以上截图,红色边框部分,表示 “文字、图标或者图片” 是可更改部分

实例代码
  一、创建弹窗组件 quitDialog.vue 组件
  1. ‹template>
  2.   ‹transition-group name='fade'>
  3.     ‹!-- 退出弹窗 -->
  4.     ‹div class="quit_dialog"
  5.          key="1"
  6.          @click="isQuit = false"
  7.          v-if="isQuit"
  8.          @touchmove.prevent>
  9.     ‹/div>
  10.     ‹div class="quit_box"
  11.          v-show="isQuit"
  12.          key="2">
  13.       ‹img :src="imgUrl"
  14.            :alt="imgLoadTip">
  15.            ‹div class="quit_title">{{title}}‹/div>
  16.       ‹p>{{content}}‹/p>
  17.       ‹button class="quit_btn" @click="leftClick">{{btnText}}‹/button>
  18.       ‹button class="quit_close" @click="rightClick">{{rightText}}‹/button>
  19.     ‹/div>
  20.   ‹/transition-group>
  21. ‹/template>
  22. ‹script>
  23. export default {
  24.   name: 'Popup',
  25.   data () {
  26.     return {
  27.       isQuit: false,
  28.       imgUrl: '',
  29.       title: '',
  30.       content: '',
  31.       btnText: '',
  32.       rightText: ''
  33.     }
  34.   },
  35.   methods: {
  36.     leftClick () {
  37.       this.leftBtn()
  38.       this.isQuit = false
  39.     },
  40.     rightClick () {
  41.       this.rightBtn()
  42.       this.isQuit = false
  43.     }
  44.   }
  45. }
  46. ‹/script>
  47. ‹style lang="scss" scoped>
  48. // 退出弹窗
  49. .fade-enter,
  50. .fade-leave-active {
  51.   opacity: 0;
  52. }
  53. .fade-enter-active,
  54. .fade-leave-active {
  55.   transition: opacity 0.35s;
  56. }
  57. // 全局弹窗
  58. .quit_dialog {
  59.   background: rgba(0,0,0,.5);
  60.   position: fixed;
  61.   top: 0;
  62.   left: 0;
  63.   height: 100%;
  64.   width: 100%;
  65.   z-index: 10000;
  66. }
  67. .quit_box {
  68.   width: 700px;
  69.   background: #fff;
  70.   position: fixed;
  71.   top: 50%;
  72.   left: 50%;
  73.   margin-left: -350px;
  74.   margin-top: -190px;
  75.   z-index: 10001;
  76.   border-radius: 10px;
  77.   text-align: center;
  78.   padding: 50px;
  79.   img{
  80.     width: 80px;
  81.   }
  82. .quit_title{
  83.       color: #666;
  84.       font-size: 28px;
  85.       margin: 45px 0px;
  86.   }
  87.   button {
  88.     border-radius: 32px;
  89.     padding:20px 0px;
  90.     font-size: 26px;
  91.     border-radius: 8px;
  92.     width: 214px;
  93.   }
  94.   .quit_btn{
  95.     color: #03BA82;
  96.     background: #fff;
  97.     border: 1px solid #03BA82;
  98.     margin-right: 32px;
  99.   }
  100.   .quit_close {
  101.     background: linear-gradient(0deg, #03BA82, #01D695);
  102.     box-shadow: 0px 3px 4px 0px rgba(1, 84, 58, 0.27);
  103.     border: 1px solid #03BA82;
  104.     color: #fff;
  105.   }
  106. }
  107. ‹/style>
复制代码
  二、创建 graspDialog.js
  1. import Vue from 'vue'
  2. import Grasp from '../components/QuitDialog/QuitDialog'
  3. const PopupBox = Vue.extend(Grasp)
  4. Grasp.install = function (data) {
  5.   let instance = new PopupBox({
  6.     data
  7.   }).$mount()
  8.   document.body.appendChild(instance.$el)
  9.   Vue.nextTick(() => {
  10.     instance.isQuit = true
  11.     // isQuit 和弹窗组件里的isQuit对应,用于控制显隐
  12.   })
  13. }
  14. export default Grasp
复制代码
  三、在全局 main.js 引入
  1. import Vue from 'vue'
  2. import Popup from './api/quitDialog'
  3. Vue.prototype.$popup = Popup.install
复制代码
  四、页面中调用,只需在函数中调用即可
  1. methods: {
  2.     graspBtn () {
  3.       this.$grasp({
  4.         imgUrl: require('../../assets/home/quits.png'), // 顶部图片.
  5.         imgLoadTip: '图片加载中...',
  6.         content: '温馨提示',
  7.         title: '注意:该学习任务未完成,是否确认退出',
  8.         btnText: '残忍退出',
  9.         rightText: '继续学习',
  10.         // 左边点击事件
  11.         leftBtn: () => {
  12.           this.$store.dispatch('user/logout').then(() => {
  13.             this.$signalr.LogoutPad()
  14.             this.$signalr.SendMsg(2, 0, '退出系统')
  15.             this.$router.push('/login')
  16.           })
  17.         },
  18.         // 右边点击事件
  19.         rightBtn: () => {}
  20.       })
  21.     }
  22. }
复制代码
总结
  到此这篇关于vue实现自定义"模态弹窗"组件的文章就介绍到这了,更多相关vue自定义"模态弹窗"组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 18:30 , Processed in 0.066218 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表