Skip to content

Q
quantum-blocks-h5
Commit c4774b4d authored by 郭志伟's avatar 郭志伟
Browse files
Options

Merge branch 'feature/rm_overflow' into 'master' 

Feature/rm overflow

See merge request !6
parents d3d7ca22 7a140cdc
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 15 deletions
app/web/page/activity/view/activity/index.ts
View file @ c4774b4d
......@@ -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
View file @ c4774b4d
......@@ -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" />
......@@ -48,6 +49,8 @@
display: flex;
justify-content: center;
align-items: center;
/* 不可设置溢出隐藏，tabs导航会出问题 */
overflow: hidden;
&>*:first-child {
height: 100%;
}
......@@ -56,6 +59,7 @@
}
.del_transform {
overflow: visible !important;
transform: none !important;
}
</style>
app/web/page/mixins/transformStyle.mixin.ts
View file @ c4774b4d
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
View file @ c4774b4d
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
View file @ c4774b4d
......@@ -12,4 +12,5 @@ export const SET_PAGE_DATA = 'SET_PAGE_DATA';
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';
\ No newline at end of file
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
View file @ c4774b4d
......@@ -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
View file @ c4774b4d
......@@ -1609,9 +1609,9 @@
}
},
"@qg/citrus-ui": {
"version": "0.0.63",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.63.tgz",
"integrity": "sha512-sIaKT3ICdHRw1liKiPmA6EqB2ZWDWyM8UisKLR6L/FOVDXbe2Y4zKkfMDDpRM2S4xc7ovk7vuQw533hLc+M2FA==",
"version": "0.0.71",
"resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.71.tgz",
"integrity": "sha512-RN9OOOEoS/omm+JcubP0jMkLEz71ZPp+a2+/dMmWI/i9c7Wy0awEod5sDyAqZZkaxvRG4BuR/O0NYiW7a+E6Uw==",
"requires": {
"@better-scroll/core": "^2.1.1",
"@qg/cherry-ui": "^2.20.5",
......@@ -20576,9 +20576,9 @@
"integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
},
"rollup": {
"version": "2.44.0",
"resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.44.0.tgz",
"integrity": "sha512-rGSF4pLwvuaH/x4nAS+zP6UNn5YUDWf/TeEU5IoXSZKBbKRNTCI3qMnYXKZgrC0D2KzS2baiOZt1OlqhMu5rnQ==",
"version": "2.45.2",
"resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.45.2.tgz",
"integrity": "sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ==",
"requires": {
"fsevents": "~2.3.1"
}
......@@ -20647,9 +20647,9 @@
}
},
"sa-sdk-javascript": {
"version": "1.16.7",
"resolved": "http://npmprivate.quantgroups.com/sa-sdk-javascript/-/sa-sdk-javascript-1.16.7.tgz",
"integrity": "sha512-DQwYTT3o5cupTjtXWEeWfaelIIihWf+AgYbrrzbH6v0EJ978OaGXyDnROACP5yJv7DiMi5yYJNQBK2CwhNY+8w=="
"version": "1.16.10",
"resolved": "http://npmprivate.quantgroups.com/sa-sdk-javascript/-/sa-sdk-javascript-1.16.10.tgz",
"integrity": "sha512-5dTAa2qco7RebSdVv8iDSti1vHPFvjS659AI1fF1vgXeVQDXFLM5QSPOfyxvPXrqNxaDJ81KIoucIDw1heL6LQ=="
},
"safe-buffer": {
"version": "5.1.2",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment