import { defineComponent, h, ref, watch } from 'vue';
|
import { randomString } from '/@/utils/common/compUtils';
|
import '../style/reload-effect.less';
|
|
// 修改数据特效
|
export default defineComponent({
|
props: {
|
vNode: null,
|
// 是否启用特效
|
effect: Boolean,
|
},
|
emits: ['effectBegin', 'effectEnd'],
|
setup(props, { emit }) {
|
// vNode: null,
|
const innerEffect = ref(props.effect);
|
// 应付同时多个特效
|
const effectIdx = ref(0);
|
const effectList = ref<any[]>([]);
|
|
watch(
|
() => props.effect,
|
() => (innerEffect.value = props.effect)
|
);
|
watch(
|
() => props.vNode,
|
(_vNode, old) => {
|
if (props.effect && old != null) {
|
let topLayer = renderSpan(old, 'top');
|
effectList.value.push(topLayer);
|
}
|
},
|
{ deep: true, immediate: true }
|
);
|
|
// 条件渲染内容 span
|
function renderVNode() {
|
if (props.vNode == null) {
|
return null;
|
}
|
let bottom = renderSpan(props.vNode, 'bottom');
|
// 启用了特效，并且有旧数据，就渲染特效顶层
|
if (innerEffect.value && effectList.value.length > 0) {
|
emit('effectBegin');
|
// 1.4s 以后关闭特效
|
window.setTimeout(() => {
|
let item = effectList.value[effectIdx.value];
|
if (item && item.elm) {
|
// 特效结束后，展示先把 display 设为 none，而不是直接删掉该元素，
|
// 目的是为了防止页面重新渲染，导致动画重置
|
item.elm.style.display = 'none';
|
}
|
// 当所有的层级动画都结束时，再删掉所有元素
|
if (++effectIdx.value === effectList.value.length) {
|
innerEffect.value = false;
|
effectIdx.value = 0;
|
effectList.value = [];
|
emit('effectEnd');
|
}
|
}, 1400);
|
return [effectList.value, bottom];
|
} else {
|
return bottom;
|
}
|
}
|
|
// 渲染内容 span
|
function renderSpan(vNode, layer) {
|
let options = {
|
key: layer + effectIdx.value + randomString(6),
|
class: ['j-vxe-reload-effect-span', `layer-${layer}`],
|
style: {},
|
};
|
if (layer === 'top') {
|
// 最新渲染的在下面
|
options.style['z-index'] = 9999 - effectIdx.value;
|
}
|
return h('span', options, [vNode]);
|
}
|
|
return () =>
|
h(
|
'div',
|
{
|
class: ['j-vxe-reload-effect-box'],
|
},
|
[renderVNode()]
|
);
|
},
|
});
|
