vue 折叠,展开效果JS

最新推荐文章于 2025-03-22 23:14:35 发布

青城山下小米精丶

最新推荐文章于 2025-03-22 23:14:35 发布

阅读量338

点赞数

文章标签：折叠展开

本文链接：https://blog.youkuaiyun.com/qq3225592/article/details/103237213

版权

//在当前页面导入JS文件

import collapseTransition from "./isActive";

//然后使用标签框中需要折叠，展开的内容。v-if控制。

<collapseTransition>
				<SimpleTables
					v-if="isActive"
					:head-data="headData"
					:body-data="onlineBodyData"
					@editTable="AutoEditTable"
				></SimpleTables>
			</collapseTransition>

// 折叠，展开效果JS

const elTransition =
	"0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
	"before-enter"(el) {
		el.style.transition = elTransition;
		if (!el.dataset) el.dataset = {};

		el.dataset.oldPaddingTop = el.style.paddingTop;
		el.dataset.oldPaddingBottom = el.style.paddingBottom;

		el.style.height = 0;
		el.style.paddingTop = 0;
		el.style.paddingBottom = 0;
	},

	enter(el) {
		el.dataset.oldOverflow = el.style.overflow;
		if (el.scrollHeight !== 0) {
			el.style.height = el.scrollHeight + "px";
			el.style.paddingTop = el.dataset.oldPaddingTop;
			el.style.paddingBottom = el.dataset.oldPaddingBottom;
		} else {
			el.style.height = "";
			el.style.paddingTop = el.dataset.oldPaddingTop;
			el.style.paddingBottom = el.dataset.oldPaddingBottom;
		}

		el.style.overflow = "hidden";
	},

	"after-enter"(el) {
		el.style.transition = "";
		el.style.height = "";
		el.style.overflow = el.dataset.oldOverflow;
	},

	"before-leave"(el) {
		if (!el.dataset) el.dataset = {};
		el.dataset.oldPaddingTop = el.style.paddingTop;
		el.dataset.oldPaddingBottom = el.style.paddingBottom;
		el.dataset.oldOverflow = el.style.overflow;

		el.style.height = el.scrollHeight + "px";
		el.style.overflow = "hidden";
	},

	leave(el) {
		if (el.scrollHeight !== 0) {
			el.style.transition = elTransition;
			el.style.height = 0;
			el.style.paddingTop = 0;
			el.style.paddingBottom = 0;
		}
	},

	"after-leave"(el) {
		el.style.transition = "";
		el.style.height = "";
		el.style.overflow = el.dataset.oldOverflow;
		el.style.paddingTop = el.dataset.oldPaddingTop;
		el.style.paddingBottom = el.dataset.oldPaddingBottom;
	}
};

export default {
	name: "collapseTransition",
	functional: true,
	render(h, { children }) {
		const data = {
			on: Transition
		};
		return h("transition", data, children);
	}
};