vue3卡片滑块

<template>
  <div class="card">
    <img  ref="data" class='data1' src="@/img/data1.jpg" alt="" />

<transition name="texta">
    <p v-if="text">隐藏的文字</p>
</transition>
  </div>
  <button @click="up">page2</button>
  <router-view/>
</template>

<style scoped>
.texta-enter-active,
.texta-leave-active{
  transition: opacity 1s ease;

}
.text-enter-from,
.text-leave-to {
    opacity: 0;
  transform: translateX(30px);

}
.card{
  height: 400px;
  width: 300px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  position: relative;
}
.data1{
  height: 200px;
  width: 300px;
  position: absolute;
  top:0;
  transition: 2s;
}
p{
  margin:0;

}
</style>
<script setup lang="ts">
import {onMounted, ref,provide} from "vue";
import {useRouter} from "vue-router";
const router=new useRouter()
const data=ref(null)
const text=ref(false)
let k=0;
onMounted(()=>{
  let imgs=data.value

  imgs.addEventListener('mouseenter',function ab(){
    if(k==0){
  imgs.style.top="50%"
      text.value=true
      k=1
      console.log(text.value)
    }
   else if(k==1){
      imgs.style.top="0"
      text.value=false
      k=0
      console.log(text.value)
    }
  })
})
provide('ly','21')
const  up=()=>{
  router.push({
    path:'/page3/page2'
  })
}
</script>