35 lines
1.1 KiB
Vue
35 lines
1.1 KiB
Vue
<template>
|
|
<button class="btn btn-label-primary btn-icon" @click="toggleText">
|
|
<i :class="buttonClass"></i>
|
|
</button>
|
|
</template>
|
|
<script setup>
|
|
import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
|
|
const props = defineProps({
|
|
isToggleEnabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isActive: {
|
|
type: Boolean,
|
|
required: false,
|
|
},
|
|
});
|
|
const emit = defineEmits(["click"]);
|
|
const buttonClass = ref('bx bx-edit-alt');
|
|
watchEffect(() => {
|
|
buttonClass.value = props.isActive ? 'bx bx-x' : 'bx bx-edit-alt';
|
|
});
|
|
const toggleText = (event) => {
|
|
// 이벤트 객체를 매개변수로 받아옵니다
|
|
if (props.isToggleEnabled) {
|
|
buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
|
|
}
|
|
emit("click", event); // 이벤트 객체를 같이 전달
|
|
};
|
|
const resetButton = () => {
|
|
buttonClass.value = 'bx bx-edit-alt';
|
|
};
|
|
defineExpose({ resetButton });
|
|
</script>
|