feat: 新增隐藏元素功能 (#388)

Author: wuchenguang1998

src/components/hide.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: wuchenguang1998
+ * @Date: 2024-05-13 22:34:03
+ * @LastEditors: wuchenguang1998
+ * @LastEditTime: 2024-05-13 23:40:48
+ * @Description: 隐藏或显示元素
+-->
+
+<template>
+  <Tooltip :content="$t('quick.hide')" v-if="mixinState.mSelectMode === 'one'">
+    <Button v-if="isHide" @click="doHide(false)" icon="md-eye-off" type="text"></Button>
+    <Button 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 { mixinState, 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>

src/language/zh.json

@@ -105,7 +105,8 @@
   "quick": {
     "del": "删除",
     "copy": "复制",
-    "lock": "锁定"
+    "lock": "锁定",
+    "hide": "隐藏"
   },
   "flip": {
     "x": "水平翻转",
@@ -214,4 +215,4 @@
   "myMaterial": {
     "uploadBtn": "上传素材"
   }
-}
+}

src/views/home/index.vue

@@ -118,6 +118,7 @@
             <imgStroke />
             <div class="attr-item">
               <lock></lock>
+              <hide></hide>
               <dele></dele>
               <clone></clone>
             </div>
@@ -159,6 +160,7 @@ import group from '@/components/group.vue';
 import zoom from '@/components/zoom.vue';
 import dragMode from '@/components/dragMode.vue';
 import lock from '@/components/lock.vue';
+import hide from '@/components/hide.vue';
 import dele from '@/components/del.vue';
 import waterMark from '@/components/waterMark.vue';
 import login from '@/components/login';