Vue全局弹框组件封装

前言

最近在项目中自己封装的一个记录一下

效果图

弹框组件

popup/PopupDialog.vue
		<template>
		  <div v-show="show" class="frame" style="z-index: 2001">
		    <div class="adduse">
		      <div class="frameHeader">{{ title }}</div>
		      <div class="elvesIcon" @click="closeDialog" />
		      <div class="frameBody">
		        <div class="content">
		          <img class="first img" src="@/assets/image/first.svg" alt="第一步">
		          <div class="box">
		            <span class="noDescription">{{ firstContent }}</span>
		            <span
		              class="url"
		              @click="goto('1')"
		            >xxxx</span>
		          </div>
		        </div>
		        <div class="content">
		          <img
		            class="second img"
		            src="@/assets/image/second.svg"
		            alt="第二步"
		          >
		          <div class="box s2">
		            <span class="noAccess">{{ secondContent }}</span>
		            <span
		              class="url"
		              @click="goto"
		            >http://usp.oppoer.me/#/jurisdiction</span>
		          </div>
		        </div>
		      </div>
		      <div class="frameFooter">
		        <span class="cancel" @click="closeDialog">{{ define }}</span>
		      </div>
		    </div>
		  </div>
		</template>

	<script>
	export default {
	  data () {
	    return {
	      show: false,
	      title: '权限申请',
	      firstContent: 'GRS权限说明：',
	      secondContent: '权限申请：',
	      define: '确定'
	    }
	  },
	  created () {
	    this.languageSwitch()
	  },
	  methods: {
	    languageSwitch () {
	      const lang = localStorage.getItem('locale')
	      this.title = lang === 'en' ? 'Access Request' : '权限申请'
	      this.firstContent =
	        lang === 'en' ? 'GRS Permission description：' : 'GRS权限说明：'
	      this.secondContent = lang === 'en' ? 'Access Request：' : '权限申请：'
	      this.define = lang === 'en' ? 'determine' : '确定'
	    },
	    goto (val) {
	      if (val === '1') {
	        window.open('xxxxx')
	      } else {
	        window.open('xxxx')
	      }
	    },
	    closeDialog () {
	      this.show = false
	    }
	  }
	}
	</script>

<style lang="scss" scoped>
.frame {
	 position: fixed;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 overflow: auto;
	 margin: 0;
	 background: rgba(0, 0, 0, 0.5);
	 .adduse {
	   background: #ffffff;
	   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	   border-radius: 5px;
	   position: relative;
	   margin: 0 auto 50px;
	   margin-top: 15vh;
	   padding: 0;
	   width: 728px;
	   height: 300px;
	   min-width: 800px;
	   .frameHeader {
	     padding: 20px 20px 10px;
	     border-bottom: 1px solid rgba(0, 0, 0, 0.09);
	   }
   .elvesIcon {
	      background-image: url(data:image/png;base64,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);
     background-size: 100% 100%;
     width: 16px;
     height: 16px;
     position: absolute;
     right: 20px;
     top: 20px;
     cursor: pointer;
     &:hover {
       background-image: url(data:image/png;base64,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);
     }
   }
   .frameBody {
     padding: 40px 10px 10px;
     .content {
       padding-left: 50px;
       padding-bottom: 30px;
       &:last-child {
         padding-bottom: 0;
       }
       .img {
         width: 40px;
         height: 40px;
         vertical-align: middle;
       }
       .box {
         display: inline-block;
         vertical-align: middle;
         padding-left: 10px;
         &.s2 {
           padding-left: 45px;
         }
         .url {
           color: #3081f2;
           cursor: pointer;
         }
       }
     }
   }
   .frameFooter {
     background: #fbfdfe;
     border-radius: 3px;
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 53px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-top: 1px solid rgba(0, 0, 0, 0.09);
     .cancel {
       display: inline-block;
       cursor: pointer;
       border: 1px solid #3081f2;
       color: #fff;
       width: 66px;
       height: 32px;
       background: #3081f2;
       font-size: 14px;
       line-height: 32px;
       box-sizing: border-box;
       text-align: center;
       border-radius: 5px;
       opacity: 0.8;
       &:hover {
         color: #fff;
         border-color: #3081f2;
         background-color: #3081f2;
         opacity: 1;
       }
     }
   }
 }
}
</style>

popup-dialog.js

	utils/popup-dialog.js
		import Vue from 'vue'
		import Popup from '@/components/popup/PopupDialog'
		
		const PopupBox = Vue.extend(Popup)
		
		Popup.install = function (data) {
		  const instance = new PopupBox({
		    data
		  }).$mount()
		
		  document.body.appendChild(instance.$el)
		
		  Vue.nextTick(() => {
		    // show 和弹窗组件里的show对应，用于控制显隐
		    instance.show = true
		  })
		}
		
		export default Popup

main.js引入popup-dialog.js

import Popup from '@/utils/popup-dialog'
// 全局可使用this.$popup调用
Vue.prototype.$popup = Popup.install

需要使用的地方使用方法

this.$popup()

这个地方可以配置一些自定义的方法和要传递的数据，根据你的的需求来定，我这里只是展示出来就可以，配置的话是在弹框组件里进行配置，使用的时候通过this.$popup({…})