vue实现开屏广告001

<template>
  <div class="dialogs">
    <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
    <div class="dialog-cover back" v-if="isShow"></div>
    <!-- transition 这里可以加一些简单的动画效果 -->
    <transition name="drop">
      <!--style 通过props 控制内容的样式  -->
      <div class="dialog-content" :style="{top:topDistance+'%',width:widNum+'%',left:leftSite+'%'}" v-if="isShow">
        <!--<div class="dialog_head back " @click="guanggao">
          &lt;!&ndash;弹窗头部 title&ndash;&gt;
          <slot name="header">这是广告</slot>
        </div>-->
        <div class="dialog_main " :style="{paddingTop:pdt+'px',paddingBottom:pdb+'px'}">
          <!--弹窗的内容-->
          <img src="../../static/img/guanggao.png"  @click="guanggao">
          <!-- <slot name="main">弹窗内容</slot>-->
        </div>
        <!--弹窗关闭按钮-->
        <div>
          <span class="delete"  @click="closeMyself">×</span>
          <!--  <div class="close_img back"></div>-->
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  /** 弹窗组件*/
  export default {

    name: "dialogs",
    data() {
      return {
        isShow: true
      }
    },
    props: {
      /* isShow: {
         type: Boolean,
         default: true,
         required: false
       },*/
      widNum: {
        type: Number,
        default: 86.5
      },
      leftSite: {
        // 左定位
        type: Number,
        default: 6.5
      },
      topDistance: {
        //top上边距
        type: Number,
        default: 25
      },
      pdt: {
        //上padding
        type: Number,
        default: 22