Browse Source

v1.2.1添加热点超链接新窗口打开方式

tremble 2 years ago
parent
commit
4e003ae772

BIN
packages/qjkankan-editor/src/assets/images/default/mask_bg.png


+ 2 - 1
packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -41,7 +41,8 @@
             :bottomSpace="comboxBottomSpace" @change="onhotSpotTypeChange"></combox>
             :bottomSpace="comboxBottomSpace" @change="onhotSpotTypeChange"></combox>
           <component class="effect-setting-component" @sceneSelect="handleSceneSelect" :scene="hotspot.secne"
           <component class="effect-setting-component" @sceneSelect="handleSceneSelect" :scene="hotspot.secne"
             @imageChange="data => { hotspot.image = data }" :image="hotspot.image"
             @imageChange="data => { hotspot.image = data }" :image="hotspot.image"
-            @linkChange="data => { hotspot.hyperlink = data }" :link="hotspot.hyperlink"
+            @linkChange="data => { hotspot.hyperlink = data }" :link="hotspot.hyperlink" 
+            @linkOpenType="data => { hotspot.linkOpenType = data }" :linkOpenType="hotspot.linkOpenType"
             @textChange="data => { hotspot.textarea = data }" :textarea="hotspot.textarea"
             @textChange="data => { hotspot.textarea = data }" :textarea="hotspot.textarea"
             @audioChange="data => { hotspot.audio = data }" :audio="hotspot.audio"
             @audioChange="data => { hotspot.audio = data }" :audio="hotspot.audio"
             @videoChange="data => { hotspot.video = data }" :video="hotspot.video" :is="effectSettingComponent" />
             @videoChange="data => { hotspot.video = data }" :video="hotspot.video" :is="effectSettingComponent" />

+ 40 - 21
packages/qjkankan-editor/src/views/hotspot/hotspotType/link.vue

@@ -1,37 +1,54 @@
 <template>
 <template>
   <div>
   <div>
+    <combox class="combox" :data="linkTypeList" :selected-id="linkopen" @change="onlinkOpenTypeChange"></combox>
     <div class="input-wrapper">
     <div class="input-wrapper">
-      <input
-        v-model.trim="hyperlink"
-        type="text"
-        placeholder="https://"
-        @change="onUrlChange()"
-      />
+      <input v-model.trim="hyperlink" type="text" placeholder="https://" @change="onUrlChange()" />
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
+import Combox from "@/components/shared/Combox";
+
 export default {
 export default {
-  props:['link'],
-  data(){
+  props: ['link', 'linkOpenType'],
+  components: { Combox },
+  data() {
     return {
     return {
-      hyperlink:this.link
+      hyperlink: this.link,
+      linkopen: this.linkOpenType || 'popup',
+      linkTypeList: [
+        {
+          id: 'popup',
+          name: '弹出层打开'
+        },
+        {
+          id: 'newTab',
+          name: '新窗口打开'
+        },
+
+      ],
     }
     }
   },
   },
-  methods:{
+  methods: {
+    onlinkOpenTypeChange(data) {
+      this.linkopen = data.id
+    },
     onUrlChange() {
     onUrlChange() {
-            if (this.hyperlink) {
-                if (!/^http(s)?:\/\//.test(this.hyperlink)) {
-                    this.hyperlink =
-                        window.location.protocol + "//" + this.hyperlink;
-                }
-            }
-        },
+      if (this.hyperlink) {
+        if (!/^http(s)?:\/\//.test(this.hyperlink)) {
+          this.hyperlink =
+            window.location.protocol + "//" + this.hyperlink;
+        }
+      }
+    },
   },
   },
-  watch:{
-    hyperlink(newVal){
-      this.$emit('linkChange',newVal)
+  watch: {
+    hyperlink(newVal) {
+      this.$emit('linkChange', newVal)
+    },
+    linkopen(newVal) {
+      this.$emit('linkOpenType', newVal)
     }
     }
   }
   }
 }
 }
@@ -47,10 +64,12 @@ export default {
   height: 36px;
   height: 36px;
   width: 100%;
   width: 100%;
   margin-top: 18px;
   margin-top: 18px;
+
   &:focus-within {
   &:focus-within {
     border-color: #0076F6;
     border-color: #0076F6;
   }
   }
-  > input {
+
+  >input {
     border: none;
     border: none;
     background: transparent;
     background: transparent;
     outline: none;
     outline: none;

+ 6 - 0
packages/qjkankan-view/src/components/Pano/index.vue

@@ -119,6 +119,12 @@ useApp().then((app) => {
     if (tt.hotspotType == 'scene') {
     if (tt.hotspotType == 'scene') {
       store.commit("scene/setCurrentScene", tt.secne);
       store.commit("scene/setCurrentScene", tt.secne);
       updateListPosi()
       updateListPosi()
+    } else if(tt.hotspotType == 'link'){
+      if (tt.linkOpenType=='newTab') {
+        window.open(tt.hyperlink, "_blank");
+      }else{
+        store.commit("tags/setCurrentTag", tt);
+      }
     } else {
     } else {
       store.commit("tags/setCurrentTag", tt);
       store.commit("tags/setCurrentTag", tt);
       if (tt.hotspotType == 'audio' || tt.hotspotType == 'video') {
       if (tt.hotspotType == 'audio' || tt.hotspotType == 'video') {