H5分享页面（5）——弹出下载框封装

在分享的页面中，点击某块区域需要弹出下载app的对话框，下面是封装的组件

YTModal.vue

<template>
  <div v-show="ytModalStatus" class="yt-modal">
    <div class="yt-modal-body" :class="{'yt-modal-body--xl': providerCode == 3010,
                                        'yt-modal-body--not-xl': providerCode != 3010}">
      <div v-if="providerCode == 3010">
        <div class="yt-modal-btn" @click="handleDownload">打开喜欢听APP</div>
      </div>
      <div v-else>
        <div class="yt-modal-top">
          <div class="yt-modal-logo">
            <img :src="APPINFO.logoUrl" alt="">
          </div>
          <div class="yt-modal-name">{{APPINFO.appName}}</div>
        </div>
        <div class="yt-modal-bottom">
          <div class="yt-modal-btn__3010" style="background:#666666" @click="handleDownload">打开app</div>
        </div>
      </div>
      <div class="yt-modal-close" @click="handleHide">
        <img src=""/>
      </div>
    </div>
  </div>
</template>

<script>
const WEBCONFIG = window.webConfig

export default {
  name: 'YTModal',
  data () {
    return {
      ytModalStatus: false, // 是否显示弹窗
      PARAMS: {}, // 地址栏参数
      APPINFO: {}, // app相关信息
      providerCode: '', // 对应应用code
      appTheme: '' // app主题色
    }
  },
  methods: {
    // 隐藏弹窗
    handleHide: function () {
      this.ytModalStatus = false
    },
    // 跳转下载
    handleDownload: function () {
     
    }
  }
}
</script>

<style scoped>
.yt-modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .2);
  z-index: 2000;
}
.yt-modal-body {
  width: 230px;
  height: 244px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  border-radius:5px;
  background-size: 100% 100%;
  z-index:900;
}
.yt-modal-body--xl {
background: red;
}
.yt-modal-body--not-xl {
background: yellow;
  
}
.yt-modal-btn {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 136px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #FFF;
  background:linear-gradient(90deg, #A76CF8, #8734F7);
  border-radius: 5px;text-align: center;
}
.yt-modal-btn__3010 {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 136px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #FFF;
  border-radius: 15px;
  text-align: center;
}
.yt-modal-top {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
}
.yt-modal-logo {
  width: 92px;
  height: 92px;
  padding: 2px;
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  margin: 0 auto;
}
.yt-modal-logo img {
  width: 88px;
  height:88px;
}
.yt-modal-name {
  margin-top: 6px;
  text-align:center;
  color: #FFF;
  font-size: 24px;
}
.yt-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 100;
  color:#FFF;
}
.yt-modal-close img {
  width:18px;
  height:18px;
}
</style>

ytModal.js

import YTModal from './YTModal.vue'

const $modal = {}
$modal.install = function (Vue) {
  var modalExtend = Vue.extend(YTModal)
  let instance = new modalExtend()
  instance = instance.$mount()
  window.document.body.appendChild(instance.$el)

  Vue.prototype.$ytModal = function (bool) {
    instance.ytModalStatus = bool
  }
}
export default $modal

代码有点乱，直接从项目中复制过来的，也懒得改了，用到的时候有需要再改吧

使用方法

1.在入口文件main.js引入

import $modal from './components/YTModal/ytModal.js'
Vue.use($modal)

2.在页面中使用

this.$ytModal(true)