vue motion-v defineComponent export 예제

독립된 버튼 하나를 완성한 컴포넌트 소스이다.

setup 방식 말고 defineComponent 방식이 없어서 하나 올려본다.

특징

to 를 받아서 페이지 이동시켜주는데

press 애니메이션을 볼 수 있도록 setTimeout 으로 0.5초 딜레이를 줬다.

 

CODE

<template>

  <div class="mt-8">

    <motion.button

      :while-hover="{ scale: 1.5, x: 50 }"

      :while-press="{ scale: 0.8 }"

      @click="delay_push(to)"

      class="tw_btn_detail"

    >

      more detail

    </motion.button>

  </div>

</template>

<script lang="ts">

// components\DetailButton.vue

import { motion } from "motion-v";

import { defineComponent } from "vue";

import { useRouter } from "vue-router";

export default defineComponent({

  name: "DetailButton",

  props: {

    to: String,

  },

  components: {

    "motion.button": motion.button,

  },

  data: () => {

    const router = useRouter();

    return {

      router,

    };

  },

  methods: {

    delay_push(_to: string) {

      setTimeout(() => {

        this.router.push(_to);

      }, 500);

    },

  },

});

</script>

<style scope>

.tw_btn_detail {

  @apply rounded-full border-2 px-4 py-2;

}

</style>

import 

import DetailButton from "@/components/DetailButton.vue";

template 

<DetailButton to="/af">more detail</DetailButton>

 

영상: https://youtu.be/SKlJDIWingw

블링블링