自定义指令

src/pages/home/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import Video from './video.vue'
+import Product from './product.vue'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="home">
+		<Video />
+		<Product />
+	</div>
+</template>
+<style lang="less" scoped>
+	.home{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>

src/pages/home/product.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { gsap, TweenMax, TweenLite } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<section class="product">
+		<br v-for="item in 50" />
+		<div class="aa" >1231312</div>
+		<div class="aa" v-tween-animation>1231312</div>
+		<br v-for="item in 10" />
+	</section>
+</template>
+<style lang="less" scoped>
+	.product{
+		width: 100%;
+	}
+</style>

src/pages/home/video.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<section class="video">
+		<div class="title">
+		</div>
+	</section>
+</template>
+<style lang="less" scoped>
+	.video{
+	}
+</style>