<!--
|
* @Author: wuchenguang1998
|
* @Date: 2024-05-13 22:34:03
|
* @LastEditors: 秦少卫
|
* @LastEditTime: 2024-10-07 17:20:20
|
* @Description: 隐藏或显示元素
|
-->
|
|
<template>
|
<Tooltip :content="$t('quick.hide')" v-if="isOne">
|
<Button long v-if="isHide" @click="doHide(false)" icon="md-eye-off" type="text"></Button>
|
<Button long v-else @click="doHide(true)" icon="md-eye" type="text"></Button>
|
</Tooltip>
|
</template>
|
|
<script setup name="Hide">
|
import useSelect from '@/hooks/select';
|
import { onBeforeUnmount, onMounted } from 'vue';
|
|
const { isOne, canvasEditor } = useSelect();
|
const isHide = ref(false);
|
|
const doHide = (hide) => {
|
// 修改visible属性
|
const activeObject = canvasEditor.canvas.getActiveObject();
|
activeObject.set('visible', !hide);
|
canvasEditor.canvas.requestRenderAll();
|
isHide.value = hide;
|
};
|
|
const handleSelected = () => {
|
const activeObject = canvasEditor.canvas.getActiveObject();
|
isHide.value = !activeObject.visible;
|
};
|
|
onMounted(() => {
|
canvasEditor.on('selectOne', handleSelected);
|
});
|
|
onBeforeUnmount(() => {
|
canvasEditor.off('selectOne', handleSelected);
|
});
|
</script>
|
