2024-03-08 17:59:45 +08:00
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { computed } from 'vue';
|
|
|
|
|
import { $t } from '@/locales';
|
|
|
|
|
|
|
|
|
|
defineOptions({ name: 'PinToggler' });
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
pin?: boolean;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
|
|
|
|
|
|
const icon = computed(() => (props.pin ? 'mdi-pin-off' : 'mdi-pin'));
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
2024-03-21 10:57:53 +08:00
|
|
|
<ButtonIcon
|
|
|
|
|
:tooltip-content="pin ? $t('icon.pin') : $t('icon.unpin')"
|
|
|
|
|
tooltip-placement="bottom-start"
|
|
|
|
|
trigger-parent
|
|
|
|
|
>
|
2024-03-08 17:59:45 +08:00
|
|
|
<SvgIcon :icon="icon" />
|
|
|
|
|
</ButtonIcon>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped></style>
|
