save button effect

2024-09-03 09:27:46 +08:00
parent 35c7ac355e
commit d16f7a264e
2 changed files with 60 additions and 19 deletions
--- a/src/components/ButtonFilled.vue
+++ b/src/components/ButtonFilled.vue
@@ -0,0 +1,50 @@
+<!-- Filled 版本的按鈕的背景是填滿的 -->
+<template>
+    <button class="button-filled-component w-[80px] h-[32px] rounded-full
+        flex text-[#FFFFFF]
+        justify-center items-center bg-[#0099FF]
+        hover:text-[#FFFFFF] hover:bg-[#0080D5]
+        cursor-pointer"
+        :class="{
+            'ring': isPressed,
+            'ring-[#0099FF]' : isPressed,
+            'ring-opacity-30': isPressed,
+            'bg-[#0099FF]': isPressed,
+        }"
+        @mousedown="onMousedown" @mouseup="onMouseup">
+        {{ buttonText }}
+    </button>
+</template>
+
+<script>
+import { ref, } from 'vue';
+
+export default {
+    props: {
+        buttonText: {
+            type: String,
+            required: false,
+        },
+    },
+    setup(props) {
+        const buttonText = props.buttonText;
+
+        const isPressed = ref(false);
+
+        const onMousedown = () => {
+            isPressed.value = true;
+        }
+
+        const onMouseup = () => {
+            isPressed.value = false;
+        }
+
+        return {
+            buttonText,
+            onMousedown,
+            onMouseup,
+            isPressed,
+        };
+    },
+}
+</script>