Explorar el Código

编辑器-热点-效果设置 下拉菜单:视口中下面空间不够时,向上拉出。

任一存 hace 2 años
padre
commit
f214d015a2

+ 0 - 1
packages/qjkankan-editor/src/components/range/index.vue

@@ -32,7 +32,6 @@ export default {
       gradientArr = temp.map((item,i)=>{
         return [i*this.isGradient,(i+1)*this.isGradient]
       })
-      console.log(gradientArr);
     }
     return {
       current: Number(this.value),

+ 26 - 9
packages/qjkankan-editor/src/components/shared/Combox.vue

@@ -1,10 +1,15 @@
 <template>
-  <div class="com-combox" :class="{show:showPopup}" @click="show" v-clickoutside="hide">
+  <div class="com-combox" :class="{show:showPopup}" @click="switchShowHide" v-clickoutside="hide">
     <div class="input">
       <p v-if="current">{{current.name}}</p>
     </div>
     <a class="iconfont icon-material_preview_upload_collect"></a>
-    <ul>
+    <ul ref="ul"
+      :style="{
+        top: needTranslateUp ? '' : '100%',
+        bottom: needTranslateUp ? '100%' : '',
+      }"
+    >
       <li
         v-for="(item,key) in data"
         :key="key"
@@ -31,11 +36,16 @@ export default {
     selectedId: {
       type: String,
       default:''
-    }
+    },
+    bottomSpace: {
+      type: Number,
+      default: Infinity,
+    },
   },
   data() {
     return {
       showPopup: false,
+      needTranslateUp: false,
     };
   },
   computed: {
@@ -47,15 +57,24 @@ export default {
     }
   },
   methods: {
-    show() {
+    switchShowHide() {
       if (this.showPopup === true) {
-        this.showPopup = false;
-        return;
+        this.hide()
+      } else {
+        this.showPopup = true;
+        this.$nextTick(() => {
+          const boundingRectBottom = this.$refs.ul.getBoundingClientRect().bottom
+          if (boundingRectBottom > this.bottomSpace) {
+            this.needTranslateUp = true
+          } else {
+            this.needTranslateUp = false
+          }
+        })
       }
-      this.showPopup = true;
     },
     hide() {
       this.showPopup = false;
+      this.needTranslateUp = false
     },
     onClick(item) {
       if (this.selectedId == item.id) {
@@ -104,13 +123,11 @@ export default {
     position: absolute;
     left: -1px;
     right: -1px;
-    top: 100%;
     background: #1A1B1D;
     border-radius: 0px 0px 2px 2px;
     border: 1px solid #404040;
     overflow-x: hidden;
     overflow-y: auto;
-    max-height: 130px;
     li {
       height: 36px;
       padding: 0 16px;

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

@@ -10,7 +10,7 @@
         <span>{{editTitle}}热点</span>
         <i class="iconfont icon_close" @click="confirmCancel"></i>
       </div>
-      <div class="content">
+      <div class="content" ref="content">
         <div class="icon-setting">
           <div class="icon-setting-title">热点图标</div>
           <div class="remark">选择图标</div>
@@ -54,6 +54,7 @@
             class="combox"
             :data="hotSpotTypeList"
             :selected-id="hotspot.hotspotType"
+            :bottomSpace="comboxBottomSpace"
             @change="onhotSpotTypeChange"
           ></combox>
           <component
@@ -188,6 +189,7 @@ export default {
       linkicon:'',
       infoItem: '',
       isAdd:true,
+      comboxBottomSpace: 0,
     }
   },
 
@@ -259,6 +261,7 @@ export default {
       if (this.editTitle != '编辑') {
         this.addhotspot(this.hotStyle[0])
       }
+      this.comboxBottomSpace = this.$refs.content.getBoundingClientRect().bottom
     })
   },
 

+ 0 - 1
packages/qjkankan-editor/src/views/hotspot/HotSpotList.vue

@@ -104,7 +104,6 @@ export default {
         else {
           this.someData = { hotspots: [] }
         }
-        console.log(this.someData.hotspots, 111111)
       },
     },
     showPanel(newVal) {