84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
|
// directives/collapse.js
|
|||
|
|
export default {
|
|||
|
|
mounted(el, binding) {
|
|||
|
|
el._collapse = {
|
|||
|
|
duration: binding.arg ? parseInt(binding.arg) : 300, // 使用指令参数设置 duration
|
|||
|
|
expanded: binding.value,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
el.style.overflow = 'hidden';
|
|||
|
|
el.style.transition = `height ${el._collapse.duration}ms ease, opacity ${el._collapse.duration}ms ease`;
|
|||
|
|
|
|||
|
|
if (!binding.value) {
|
|||
|
|
el.style.height = '0px';
|
|||
|
|
el.style.opacity = '0';
|
|||
|
|
} else {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
getHeight(el).then((height) => {
|
|||
|
|
el.style.height = height + 'px';
|
|||
|
|
el.style.opacity = '1';
|
|||
|
|
});
|
|||
|
|
}, 0);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updated(el, binding) {
|
|||
|
|
const duration = el._collapse.duration;
|
|||
|
|
const isShow = binding.value;
|
|||
|
|
|
|||
|
|
if (isShow === el._collapse.expanded) return;
|
|||
|
|
|
|||
|
|
el._collapse.expanded = isShow;
|
|||
|
|
|
|||
|
|
if (isShow) {
|
|||
|
|
getHeight(el).then((height) => {
|
|||
|
|
el.style.transition = `none`;
|
|||
|
|
el.style.height = '0px';
|
|||
|
|
el.style.opacity = '0';
|
|||
|
|
|
|||
|
|
// 动画开始
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
el.style.transition = `height ${duration}ms ease, opacity ${duration}ms ease`;
|
|||
|
|
el.style.height = height + 'px';
|
|||
|
|
el.style.opacity = '1';
|
|||
|
|
|
|||
|
|
// 动画结束后设置为 auto（避免内容变化导致高度错误）
|
|||
|
|
setTimeout(() => {
|
|||
|
|
el.style.height = 'auto';
|
|||
|
|
}, duration);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
getHeight(el).then((height) => {
|
|||
|
|
console.log(height)
|
|||
|
|
el.style.height = height + 'px';
|
|||
|
|
el.style.opacity = '1';
|
|||
|
|
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
el.style.height = '0px';
|
|||
|
|
el.style.opacity = '0';
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
unmounted(el) {
|
|||
|
|
delete el._collapse;
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取元素高度（兼容 H5 和小程序）
|
|||
|
|
function getHeight(el) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
// #ifdef H5
|
|||
|
|
resolve(el.scrollHeight);
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef H5
|
|||
|
|
const query = uni.createSelectorQuery();
|
|||
|
|
query.select(el).boundingClientRect((res) => {
|
|||
|
|
resolve(res?.height || 0);
|
|||
|
|
}).exec();
|
|||
|
|
// #endif
|
|||
|
|
});
|
|||
|
|
}
|