vue實現自定義"模態彈窗"元件例項程式碼

阿新 • • 發佈：2021-12-16

前言

對話方塊是很常用的元件，在很多地方都會用到，一般我們可以使用自帶的alert來彈出對話方塊，但是假如是設計出的圖該怎麼辦呢，所以我們需要自己寫一個對話方塊，下面來一起看看詳細的實現過程。

效果圖

以上截圖，紅色邊框部分，表示 “文字、圖示或者圖片” 是可更改部分

例項程式碼

一、建立彈窗元件 quitDialog. 元件

<template>
  <transition-group name='fade'>
    <!-- 退出彈窗 -->
    <div class="quit_dialog"
         key="1"
         @click="isQuit = false"
         v-if="isQuit"
         @touchmove.prevent>
    </div>
    <div class 
="quit_box"
         v-show="isQuit"
         key="2">
      <img :src="imgUrl"
           :alt="imgLoadTip">
           <div class="quit_title">{{title}}</div>
      <p>{{content}}</p>
      <button class="quit_btn" @click="leftClick">{{btnText}}</button>
      <button class="quit_close" @click="rightClick">{{rightText}}</button>
    </div>
  </transition-group>
</template>
<script>
export default {
  name: 'Popup',data () {
    return {
      isQuit: false,imgUrl: '',title: '',content: '',btnText: '',rightText: ''
    }
  },methods: {
    leftClick () {
      this.leftBtn()
      this.isQuit = false
    },rightClick () {
      this.rightBtn()
      this.isQuit = false
    }
  }
}
</script>
<style lang="s" scoped>
// 退出彈窗
.fade-enter,.fade-leave-awww.cppcns.com 
ctive {
  opacity: 0;
}
.fade-enter-active,.fade-leave-active {
  transition: opacity 0.35s;
}
// 全域性彈窗
.quit_dialog {
  background: rgba(0,.5);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10000;
}
 
.quit_box {
  width: 700px;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -350px;
  margin-top: -190px;
  z-index: 10001;
  border- 
radius: 10px;
  text-align: center;
  padding: 50px;
  img{
    width: 80px;
  }
 .quit_title{
      color: #666;
      font-size: 28px;
      margin: 45px 0px;
  }
  button {
    border-radius: 32px;
    padding:20px 0px;
    font-size: 26px;
    border-radius: 8px;
    width: 214px;
  }
  .quit_btn{
    color: #03BA82;
    background: #fff;
    border: 1px solid #03BA82;
    margin-right: 32px;
  }
  .quit_close {
    background: linear-gradient(0deg,#03BA82,#01D695);
    box-shadow: 0px 3px 4px 0px rgba(1,84,58,0.27);
    border: 1px solid #03BA82;
    color: #fff;
  }
}
</style>

二、建立 graspDialog.

import Vue from 'vue'
import Grasp from '../components/QuitDialog/QuitDialog'
 
const PopupBox = Vue.extend(Grasp)
 
Grasp.install = function (data) {
  let instance = new PopupBox({
    data
  }).$mount()
 
  document.body.appendChild(instance.$el)
 
  Vue.nextTick(() => {
    instance.isQuit = true
    // isQuit 和彈窗元件裡的isQuit對應，用於控制顯隱
  })
}
 
export default Grasp

三、在全域性 main.js 引入

import Vue from 'vue'
import Popup from './api/quitDialog'
Vue.prototype.$popup = Popup.install

四、頁面中呼叫，只需在函式中呼叫即可

methods: {
    graspBtn () {
      this.$grasp({
        imgUrl: require('../../assets/home/quits.png'),// 頂部圖片.
        imgLoadTip: '圖片載入中...',content: '溫馨提示',title: '注意：該學習任務未完成，是否確認退出',btnText: '殘忍退出',rightText: '繼續學習',// 左邊點選事件
        leftBtn: () => {
          this.$store.dispatch('user/logout').then(() => {
            this.$signalr.LogoutPad()
            this.$signalr.SendMsg(2,'退出系統')
            this.$router.push('/login')
          })
        },// 右邊點選事件
        rightBtn: () www.cppcns.com=> {}
      })
    }
}