aaa

src/directives/custom-show.js

@@ -0,0 +1,51 @@
+/**
+ * 自定义动画指令
+ * v-custom-show="show"
+*/
+const TimeMap = new Map()
+export default {
+	name: 'custom-show',
+	mounted(el, binding) {
+		const { value, modifiers } = binding
+		const config = getConfig(modifiers)
+		el.style.transition = `all ${config.time}ms ease-in-out`
+		el.style.display = value ? '' : 'none';
+		el.style.opacity = value ? 1 : 0;
+		el.classList.toggle('hide', !value);
+	},
+	updated(el, binding) {
+		const { value, modifiers } = binding
+		const config = getConfig(modifiers)
+		if (TimeMap.has(el)) {
+			clearTimeout(TimeMap.get(el))
+			TimeMap.delete(el)
+		}
+		if (value) {
+			el.style.display = ''
+			setTimeout(() => {
+				el.classList.remove('hide')
+				el.style.opacity = 1
+			})
+		} else {
+			el.classList.add('hide')
+			el.style.opacity = 0
+			setTimeout(() => el.style.display = 'none', config.time)
+		}
+	},
+	beforeUnmount(el, binding) {
+		if (TimeMap.has(el)) {
+			clearTimeout(TimeMap.get(el))
+			TimeMap.delete(el)
+		}
+	}
+};
+function getConfig(modifiers) {
+	const obj = {
+		time: 300,
+	}
+	Object.keys(modifiers).forEach(key => {
+		const arr = key.split('-')
+		if (arr.length === 2) obj[arr[0]] = arr[1]
+	})
+	return obj
+}