优化画笔工具

src/components/WritingBoard.vue

@@ -12,20 +12,22 @@
       class="pen"
       :style="{
         left: mouse.x - penSize / 2 + 'px',
-        top: mouse.y - 50 + penSize / 2 + 'px',
+        top: mouse.y - 36 + penSize / 2 + 'px',
         color: color,
       }"
       v-if="mouseInCanvas && model === 'pen'"
-    ><IconFont class="icon" :style="{ fontSize: '50px' }" type="icon-pen" /></div>
+    ><IconFont class="icon" :style="{ fontSize: '36px' }" type="icon-pen" /></div>
     
     <div 
       class="eraser"
       :style="{
         left: mouse.x - rubberSize / 2 + 'px',
         top: mouse.y - rubberSize / 2 + 'px',
+        width: rubberSize + 'px',
+        height: rubberSize + 'px',
       }"
       v-if="mouseInCanvas && model === 'eraser'"
-    ><IconFont class="icon" :style="{ fontSize: rubberSize + 'px' }" type="icon-eraser" /></div>
+    ><IconFont class="icon" :style="{ fontSize: rubberSize * 0.6 + 'px' }" type="icon-eraser" /></div>
   </div>
 </template>
 
@@ -239,7 +241,15 @@ export default defineComponent({
   z-index: 9;
 
   .icon {
-    filter: drop-shadow(2px 2px 2px #999);
+    filter: drop-shadow(2px 2px 2px #555);
   }
 }
+.eraser {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 4px solid rgba($color: #555, $alpha: .15);
+  color: rgba($color: #555, $alpha: .75);
+}
 </style>

src/views/Screen/WritingBoardTool.vue

@@ -1,27 +1,29 @@
 <template>
-  <teleport to="body">
-    <WritingBoard 
-      ref="writingBoardRef" 
-      :color="writingBoardColor" 
-      :model="writingBoardModel" 
-      v-if="visible" 
-    />
-  </teleport>
-
   <div class="writing-board-tool">
-    <div class="btn" @click="writingBoardModel = 'pen'; close()">画笔</div>
+    <teleport to="body">
-    <div class="btn" @click="writingBoardModel = 'eraser'; close()">橡皮擦</div>
+      <WritingBoard 
-    <div class="btn" @click="writingBoardRef.clearCanvas(); close()">擦除所有墨迹</div>
+        ref="writingBoardRef" 
-    <div class="btn" @click="closeWritingBoard()">关闭画笔</div>
+        :color="writingBoardColor" 
-    <div class="colors">
+        :model="writingBoardModel" 
-      <div 
+        v-if="writingBoardVisible" 
-        class="color" 
+      />
-        :class="{ 'active': color === writingBoardColor }"
+    </teleport>
-        v-for="color in writingBoardColors" 
+
-        :key="color"
+    <div class="tools">
-        :style="{ backgroundColor: color }"
+      <div class="btn" @click="changePen()">画笔</div>
-        @click="writingBoardColor = color; close()"
+      <div class="btn" @click="changeEraser()">橡皮擦</div>
-      ></div>
+      <div class="btn" @click="clearCanvas()">擦除所有墨迹</div>
+      <div class="btn" @click="closeWritingBoard()">关闭画笔</div>
+      <div class="colors">
+        <div 
+          class="color" 
+          :class="{ 'active': color === writingBoardColor }"
+          v-for="color in writingBoardColors"
+          :key="color"
+          :style="{ backgroundColor: color }"
+          @click="changeColor(color)"
+        ></div>
+      </div>
     </div>
   </div>
 </template>
@@ -34,37 +36,53 @@ const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d
 
 export default defineComponent({
   name: 'writing-board-tool',
-  emits: ['close', 'update:visible'],
   components: {
     WritingBoard,
   },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-  },
   setup(props, { emit }) {
     const writingBoardRef = ref()
+    const writingBoardVisible = ref(false)
     const writingBoardColor = ref('#e2534d')
     const writingBoardModel = ref('pen')
 
-    const close = () => {
+    const changePen = () => {
+      if(!writingBoardVisible.value) writingBoardVisible.value = true
+      writingBoardModel.value = 'pen'
+      emit('close')
+    }
+
+    const changeEraser = () => {
+      writingBoardModel.value = 'eraser'
+      emit('close')
+    }
+
+    const clearCanvas = () => {
+      writingBoardRef.value.clearCanvas()
+      emit('close')
+    }
+
+    const changeColor = (color: string) => {
+      if(writingBoardModel.value !== 'pen') writingBoardModel.value = 'pen'
+      writingBoardColor.value = color
       emit('close')
     }
 
     const closeWritingBoard = () => {
-      emit('update:visible', false)
+      writingBoardVisible.value = false
       emit('close')
     }
 
     return {
       writingBoardRef,
+      writingBoardVisible,
       writingBoardColors,
       writingBoardColor,
       writingBoardModel,
+      changePen,
+      changeEraser,
+      clearCanvas,
+      changeColor,
       closeWritingBoard,
-      close,
     }
   },
 })

src/views/Screen/index.vue

@@ -50,12 +50,9 @@
       <IconFont class="tool-btn" type="icon-appstore" @click="slideThumbnailModelVisible = true" />
       <Popover trigger="click" v-model:visible="writingBoardToolVisible">
         <template #content>
-          <WritingBoardTool 
+          <WritingBoardTool @close="writingBoardToolVisible = false" />
-            v-model:visible="writingBoardVisible" 
-            @close="writingBoardToolVisible = false" 
-          />
         </template>
-        <IconFont class="tool-btn" type="icon-edit" @click="writingBoardVisible = true" />
+        <IconFont class="tool-btn" type="icon-edit" />
       </Popover>
     </div>
   </div>
@@ -95,7 +92,6 @@ export default defineComponent({
 
     const slideThumbnailModelVisible = ref(false)
 
-    const writingBoardVisible = ref(false)
     const writingBoardToolVisible = ref(false)
 
     const setSlideContentSize = () => {
@@ -233,7 +229,6 @@ export default defineComponent({
       execNext,
       slideThumbnailModelVisible,
       turnSlideToIndex,
-      writingBoardVisible,
       writingBoardToolVisible,
     }
   },