qjkankan_v1.1.1/packages/qjkankan-editor/src/components/preview/index.vue

<template>
    <popup v-if="show" :key="Math.random()" :zIdx="'1100'">
      <div
        class="ui-message ui-message-confirm"
        :class="{
          dark
        }"
      >
        <div class="ui-message-header">
          <span>{{work_preview}}</span>
          <span @click="$emit('close')">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main">
          <iframe :src="ifr" frameborder="0"></iframe>
        </div>
        <div class="ui-message-footer">
          <button
            class="ui-button ui-button-rect"
            :class="{
              deepcancel: dark,
            }"
            @click="$emit('close')"
          >
            {{cancel}}
          </button>
          <button class="ui-button submit ui-button-rect" @click="copy">{{copy_link}}</button>
          <button class="ui-button submit ui-button-rect" @click="openBlank">{{new_blank}}</button>
        </div>
      </div>
    </popup>
</template>

<script>
import Popup from "@/components/shared/popup";
import {i18n} from "@/lang"

export default {
  props: {
    show: {
    },
    ifr: {
    },
    name: {
    },
    dark: {
      type: Boolean,
      default: true
    }
  },
  components:{
    Popup,
  },
  data(){
    return {
      copy_link: i18n.t("material.works.copy_link"),
      work_preview: i18n.t("material.works.work_preview"),
      new_blank: i18n.t("material.works.new_blank"),
      cancel: i18n.t("material.works.cancel"),
    }
  },
  methods:{
    copy() {
      var textArea = document.createElement("textarea");

      textArea.style.position = "fixed";
      textArea.style.top = 0;
      textArea.style.left = 0;
      textArea.style.width = "2em";
      textArea.style.height = "2em";
      textArea.style.padding = 0;
      textArea.style.border = "none";
      textArea.style.outline = "none";
      textArea.style.boxShadow = "none";
      textArea.style.background = "transparent";
      textArea.value = new URL(this.ifr, location.href);

      document.body.appendChild(textArea);

      textArea.select();

      try {
        document.execCommand("copy")
          ? this.$msg.success(this.$i18n.t('gather.scene_link_copy_tips'))
          : this.$msg.error(this.$i18n.t('gather.scene_link_copy_failed'))
      } catch (err) {
        this.$msg.error(this.$i18n.t('gather.scene_link_copy_failed'))
      }

      document.body.removeChild(textArea);
    },
    openBlank(){
      window.open(this.ifr,'_blank')
    }
  }
}
</script>

<style lang="less" scoped>
.ui-message-confirm{
  width: 1250px;
  height: 838px;
  border-radius: 4px;
  .icon_close{
    color: #969799;
  }
  .ui-message-header{
    font-size: 18px;
    margin-bottom: 40px;
  }
  .ui-message-main{
    width: 100%;
    height: 646px;
    margin-bottom: 40px;
    iframe{
      width: 100%;
      height: 100%;
    }
  }
  .ui-message-footer{
    display: flex;
    justify-content: center;

  }
}
</style>