【我的作品】预览界面的iframe以外样式调整与功能开发

src/assets/style/component.less

@@ -811,7 +811,6 @@ textarea:-ms-input-placeholder {
 
   span {
     &:last-child {
-      width: 40px;
       cursor: pointer;
     }
   }

src/components/preview/index.vue

@@ -1,9 +1,8 @@
 <template>
     <popup v-if="show">
-      <div class="ui-message ui-message-confirm" style="width: 1280px">
+      <div class="ui-message ui-message-confirm">
         <div class="ui-message-header">
-          <span>{{name||'无标题'}}</span>
-          <button class="ui-button submit ui-button-rect" @click="openBlank">新窗口打开</button>
+          <span>全景作品预览</span>
           <span @click="$emit('close')">
             <i class="iconfont icon_close"></i>
           </span>
@@ -11,6 +10,10 @@
         <div class="ui-message-main">
           <iframe :src="ifr" frameborder="0"></iframe>
         </div>
+        <div class="ui-message-footer">
+          <button class="ui-button ui-button-rect" @click="copy">复制链接</button>
+          <button class="ui-button submit ui-button-rect" @click="openBlank">新窗口打开</button>
+        </div>
       </div>
     </popup>
 </template>
@@ -19,6 +22,7 @@
 import Popup from "@/components/shared/popup";
 
 export default {
+  // TODO: name不需要了？
   props:['show','ifr','name'],
   components:{
     Popup
@@ -27,67 +31,66 @@ export default {
     return {}
   },
   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.$tips({ content: "复制成功", icon: "ok" })
+          : this.$tips({ content: "复制失败", icon: "ok" });
+      } catch (err) {
+        this.$tips({ content: "复制失败", icon: "ok" });
+      }
+
+      document.body.removeChild(textArea);
+    },
     openBlank(){
-          window.open(this.ifr,'_blank')
+      window.open(this.ifr,'_blank')
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-
-.ui-button-rect{
-  border-radius: 0;
-  align-items: center;
-  vertical-align: middle;
-  color: #202020;
-  display: flex;
-  justify-content: center;
-  padding: 0 20px;
-  line-height: 30px;
-  height: 30px;
-  border: none;
-  text-align: center;
-}
 .ui-message-confirm{
-  border-radius: 0;
+  width: 1200px;
+  height: 838px;
   border-radius: 4px;
   .icon_close{
-    color: #909090;
+    color: #969799;
   }
   .ui-message-header{
-    font-weight: bold;
-    font-size: 16px;
-    border-bottom: 1px solid #EBEBEB;
-    position: relative;
-    height: 50px;
-    line-height: 50px;
-    .submit{
-      position: absolute;
-      right: 50px;
-      top: 50%;
-      transform: translateY(-50%);
-    }
+    font-size: 18px;
+    margin-bottom: 40px;
   }
   .ui-message-main{
     width: 100%;
-    padding: 20px;
+    height: 646px;
+    margin-bottom: 40px;
     iframe{
       width: 100%;
-      height: 80vh;
+      height: 100%;
     }
   }
   .ui-message-footer{
-    width: 100%;
-    .btn{
-      width: 80%;
-      display: flex;
-      justify-content: center;
-      margin: 0 auto;
-      .ui-button{
-        max-width: 104px
-      }
-    }
+    display: flex;
+    justify-content: center;
 
   }
 }

src/pages/show.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import AppLayout from "@/framework/show/";
+import AppLayout from "@/framework/show/index.vue";
 
 export default {
   components: {