48 lines
1.1 KiB
Vue
48 lines
1.1 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>
|