vue 实现自定义 “模态弹窗“ 组件

一、创建弹窗组件 quitDialog.vue 组件
 
<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=”scss” scoped>
 
// 退出弹窗
 
.fade-enter,
 
.fade-leave-active {
 
  opacity: 0;
 
}
 
.fade-enter-active,
 
.fade-leave-active {
 
  transition: opacity 0.35s;
 
}
 
// 全局弹窗
 
.quit_dialog {
 
  background: rgba(0,0,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.js
 
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, 0, ‘退出系统’)
 
            this.$router.push(’/login’)
 
          })
 
        },
 
        // 右边点击事件
 
        rightBtn: () => {}
 
      })
 
    }
 
}

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64174.shtml

张贴在3