feature: 添加组件高度自适应功能

app/web/page/activity/view/activity/index.ts

@@ -5,7 +5,7 @@ import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
 import GridItem from '../../component/VueGridLayout/GridItem.vue';
 import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
 import SaMixin from '@/page/mixins/sa.mixin';
-import { getStyle } from '@/service/utils.service';
+import { getStyle, debounce } from '@/service/utils.service';
 
 @Component({ components: { FreedomContainer, GridLayout, GridItem }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
@@ -20,6 +20,7 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   showBackTop = false;
   targetEle: HTMLElement | null = null;
   loading: boolean = true;
+  modfiTabsStyleDebounce = debounce(this.modfiTabsStyle, 300);
 
   get layout() {
     return this.pageData && this.pageData.elements.map(v => v.point) || [];
@@ -82,6 +83,11 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
     });
   }
 
+  layoutUpdatedEvent() {
+    // 高度更新时重新计算导航组件样式
+    this.modfiTabsStyleDebounce();
+  }
+
   modfiTabsStyle() {
     const tabsEle = document.querySelector('.tabs');
     // console.log('tabsEle', tabsEle);
@@ -90,6 +96,9 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
       // console.log('gridItemEle', gridItemEle, gridItemEle?.classList);
       if (gridItemEle?.classList.contains('vue-grid-item')) {
         // 处理transform
+        if (gridItemEle.classList.contains('del_transform')) {
+          gridItemEle.classList.remove('del_transform');
+        }
         const transform = getStyle(gridItemEle, 'transform');
         const transformY = transform.split('(')[1].split(')')[0].split(',')[5];
         gridItemEle.style.top = `${transformY}px`;

app/web/page/activity/view/activity/index.vue

@@ -13,6 +13,7 @@
   	  :vertical-compact="true"
   	  :use-css-transforms="true"
       @layout-mounted="layoutReadyEvent"
+      @layout-updated="layoutUpdatedEvent"
   	>
   	  <grid-item :style="transformStyle(item.commonStyle)" v-for="(item, index) in pageData.elements"
   	             :x="item.point.x"
@@ -23,7 +24,7 @@
   	             :key="item.point.i"
                  @click.native="dot(item.title)"  
                  >
-  	      <component :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
+  	      <component :data-index="index" :id="item.id" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
   	  </grid-item>
   	</grid-layout>
     <cr-back-top v-if="showBackTop && pageData.props.showBackTop" />

app/web/page/mixins/transformStyle.mixin.ts

 import { Component, Vue } from 'vue-property-decorator';
-import { transformStyle } from '@/service/utils.service';
+import { transformStyle, getStyle } from '@/service/utils.service';
+import { Mutation } from 'vuex-class';
 
 @Component({ name: 'TransformStyleMixin' })
 export default class TransformStyleMixin extends Vue {
+  @Mutation('SET_ELEMENT_POINT') setElementPoint;
+
   transformStyle(styleObj, element) {
     // console.log('transformStyle', styleObj, element);
     const style = {
@@ -22,4 +25,21 @@ export default class TransformStyleMixin extends Vue {
     }
     return style;
   }
+
+  adjustHeight(element) {
+    if (!element) { return; }
+    // 计算组件高度
+    element.style.height = 'auto';
+    const height = getStyle(element, 'height');
+    element.style.height = '';
+    // 修改对应组件point
+    const eleId = element.getAttribute('id');
+    const component = this.pageData.elements.find(v => v.id === eleId);
+    if (!component) { return; }
+    const point = { ...component.point, h: +height };
+    this.setElementPoint({ id: eleId, data: point });
+    console.log('adjustHeight', height, component, element.getAttribute('id'), point);
+
+    // this.updatePageInfo({ containerIndex: this.curEleIndex, data: { ...elements, point: { ...elements.point, h: +height || elements.point.h } } });
+  }
 }

app/web/page/store/modules/activity/index.ts

 import api from '@/api/editor.api';
 import { Module, GetterTree, ActionTree, MutationTree } from 'vuex';
 import Vue from 'vue';
-import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS} from './type';
+import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS, SET_ELEMENT_POINT} from './type';
 
 import RootState from '../../state';
 import EditorState, { PageInfo, defaultState, Page, PageElement } from './state';
@@ -44,6 +44,11 @@ export default class EditorModule implements Module<EditorState, RootState> {
     [SET_PAGE_ELEMENTS](state, data) {
       if (data) { (state.pageInfo.page as Page).elements = data; }
     },
+    [SET_ELEMENT_POINT](state, { id, data }) {
+      const elements = (state.pageInfo.page as Page).elements;
+      const element = elements.find(ele => ele.id === id);
+      if (element && data) { element.point = data; }
+    },
   };
 
   constructor(initState: EditorState = JSON.parse(JSON.stringify(defaultState))) {

app/web/page/store/modules/activity/type.ts

@@ -13,3 +13,4 @@ export const UPDATE_COMMON_STYLE = 'UPDATE_COMMON_STYLE';
 export const UPDATE_PAGE_STYLE = 'UPDATE_PAGE_STYLE';
 export const UPDATE_PAGE_PROPS = 'UPDATE_PAGE_PROPS';
 export const SET_PAGE_ELEMENTS = 'SET_PAGE_ELEMENTS';
+export const SET_ELEMENT_POINT = 'SET_ELEMENT_POINT';
\ No newline at end of file

app/web/service/utils.service.ts

@@ -135,3 +135,24 @@ export const isIOS = /iphone|ipad|ipod/.test(ua);
 
 // 判读Android环境
 export const isAndroid = /android/.test(ua);
+
+export const debounce = (event, time) => {
+  let timer = null;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => event.apply(this, args), time);
+  }
+}
+
+export const throttle = (event, time) => {
+  let timer = null;
+  return function (...args) {
+    if (!timer) {
+      timer = setTimeout(() => {
+        timer = null;
+        clearTimeout(timer);
+        event.apply(this, args)
+      }, time);
+    }
+  }
+}

package-lock.json

@@ -1609,9 +1609,9 @@
       }
     },
     "@qg/citrus-ui": {
-      "version": "0.0.66",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.66.tgz",
-      "integrity": "sha512-VxAMFMI4RURMXBNP7oDU6UT+RX8zYVBPJWQSeO+89vm2KNta9M88SMJ8LBJXpfrXog8IgQ01Du06p5QQqSSdOg==",
+      "version": "0.0.67",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.67.tgz",
+      "integrity": "sha512-0ChTV9+iy1pCKeq7ZSkwCgPahiypi16nRhMlDbsaDvQZt70LEIadxpfZYqfaTKw1PLoIf9nVN6QGlfI7Kr0FNA==",
       "requires": {
         "@better-scroll/core": "^2.1.1",
         "@qg/cherry-ui": "^2.20.5",
@@ -20576,9 +20576,9 @@
       "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
     },
     "rollup": {
-      "version": "2.45.1",
-      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.45.1.tgz",
-      "integrity": "sha512-vPD+JoDj3CY8k6m1bLcAFttXMe78P4CMxoau0iLVS60+S9kLsv2379xaGy4NgYWu+h2WTlucpoLPAoUoixFBag==",
+      "version": "2.45.2",
+      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.45.2.tgz",
+      "integrity": "sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ==",
       "requires": {
         "fsevents": "~2.3.1"
       }

package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@better-scroll/core": "^2.0.5",
     "@qg/cherry-ui": "^2.20.6",
-    "@qg/citrus-ui": "0.0.66",
+    "@qg/citrus-ui": "0.0.67",
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "cos-nodejs-sdk-v5": "^2.9.12",
     "egg": "^2.3.0",