فهرست منبع

style:dropdown定位问题处理

zhangsiya 1 سال پیش
والد
کامیت
8a5b3f32db
2فایلهای تغییر یافته به همراه16 افزوده شده و 5 حذف شده
  1. 13 2
      apps/bigmember_pc/src/components/filter-items/Layout.vue
  2. 3 3
      apps/bigmember_pc/src/views/search/bidding/index.vue

+ 13 - 2
apps/bigmember_pc/src/components/filter-items/Layout.vue

@@ -1,7 +1,7 @@
 <template>
 <template>
   <div ref="layout" class="filter-layout" :class="{'filter-input-layout': type === 'select'}">
   <div ref="layout" class="filter-layout" :class="{'filter-input-layout': type === 'select'}">
     <el-dropdown
     <el-dropdown
-      :trigger="trigger"
+      trigger="click"
       :placement="placement"
       :placement="placement"
       @visible-change="onVisibleChange"
       @visible-change="onVisibleChange"
       ref="dropdownRef"
       ref="dropdownRef"
@@ -16,7 +16,7 @@
         <span class="select-prefix-value" v-else>{{ placeholder }}</span>
         <span class="select-prefix-value" v-else>{{ placeholder }}</span>
         <i class="iconfont icon-xiala" :class="{ 'is-reverse': isFocus, 'highlight-text': value }"></i>
         <i class="iconfont icon-xiala" :class="{ 'is-reverse': isFocus, 'highlight-text': value }"></i>
       </div>
       </div>
-      <el-dropdown-menu v-if="dropdownMenu" slot="dropdown" :append-to-body="false" ref="dropdownMenu">
+      <el-dropdown-menu v-if="dropdownMenu" :class="onlyBottom ? 'fixed-dropdown' : ''" slot="dropdown" :append-to-body="false" ref="dropdownMenu">
         <slot name="empty"></slot>
         <slot name="empty"></slot>
       </el-dropdown-menu>
       </el-dropdown-menu>
     </el-dropdown>
     </el-dropdown>
@@ -58,6 +58,11 @@ export default {
     value: {
     value: {
       type: String,
       type: String,
       default: ''
       default: ''
+    },
+    // dropdown-menu仅在dropdown下方
+    onlyBottom: {
+      type: Boolean,
+      default: true
     }
     }
   },
   },
   data () {
   data () {
@@ -77,6 +82,7 @@ export default {
     onVisibleChange (visible) {
     onVisibleChange (visible) {
       this.isFocus = visible
       this.isFocus = visible
       this.$emit('visible', visible)
       this.$emit('visible', visible)
+
     },
     },
     // 手动触发dropdown展开
     // 手动触发dropdown展开
     show () {
     show () {
@@ -91,6 +97,9 @@ export default {
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+::v-deep .el-dropdown-menu.fixed-dropdown{
+    top: 30px !important;
+}
 .filter-layout{
 .filter-layout{
   position: relative;
   position: relative;
   ::v-deep{
   ::v-deep{
@@ -103,6 +112,8 @@ export default {
         display: none!important;
         display: none!important;
       }
       }
     }
     }
+
+
   }
   }
   .is-reverse{
   .is-reverse{
     transform: rotate(180deg);
     transform: rotate(180deg);

+ 3 - 3
apps/bigmember_pc/src/views/search/bidding/index.vue

@@ -627,9 +627,9 @@ const articleRef = ref({
         margin-top: 6px;
         margin-top: 6px;
       }
       }
     }
     }
-    .filter-layout{
-      position: unset!important;
-    }
+    //.filter-layout{
+    //  position: unset!important;
+    //}
     .hasNoData_tiptext{
     .hasNoData_tiptext{
       font-size: 14px;
       font-size: 14px;
       font-family: Microsoft YaHei, Microsoft YaHei-Regular;
       font-family: Microsoft YaHei, Microsoft YaHei-Regular;