46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
<template>
|
|
<button
|
|
class="button-component w-[80px] h-[32px] rounded-full flex text-[#666666] border-[1px] border-[#666666] justify-center items-center bg-[#FFFFFF] hover:text-[#0099FF] hover:border-[#0099FF] focus:text-[#0099FF] focus:border-[#0099FF] cursor-pointer"
|
|
:class="{
|
|
ring: isPressed,
|
|
'ring-[#0099FF]': isPressed,
|
|
'ring-opacity-30': isPressed,
|
|
}"
|
|
@mousedown="onMousedown"
|
|
@mouseup="onMouseup"
|
|
>
|
|
{{ buttonText }}
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2024-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module components/Button Outlined button component with
|
|
* press-state ring effect.
|
|
*/
|
|
|
|
import { ref } from "vue";
|
|
|
|
defineProps({
|
|
buttonText: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
});
|
|
|
|
const isPressed = ref(false);
|
|
|
|
const onMousedown = () => {
|
|
isPressed.value = true;
|
|
};
|
|
|
|
const onMouseup = () => {
|
|
isPressed.value = false;
|
|
};
|
|
</script>
|