点赞组件

src/renderer/src/views/tool/components/upvote.vue

@@ -0,0 +1,87 @@
+<template>
+  <button v-if="props.test" @click="trigger">测试</button>
+  <div ref="warpRef" class="c-warp">
+    <template v-for="i in sum">
+      <slot><el-icon><Star /></el-icon></slot>
+    </template>
+  </div>
+</template>
+<script setup>
+// 功能说明：动画-点赞
+import { nextTick, ref } from 'vue'
+import {Star} from '@element-plus/icons-vue'
+const warpRef = ref(null)
+const props = defineProps({ test: Boolean })
+const sum = ref(0)
+// === 方法 ===
+const trigger = () => {
+  sum.value++
+  nextTick(() => {
+    const el = warpRef.value.lastElementChild // 获取最后一个新加的元素
+    animInit(el)
+  })
+}
+// 初始化动画
+const animInit = (el) => {
+  const { height, width } = el.getBoundingClientRect()
+  const sumH = warpRef.value.clientHeight
+  const sumW = warpRef.value.clientWidth
+  const maxH = sumH - height  // 最大高度
+  const maxw = sumW - width   // 最大宽度
+  let bottom = 0              // 底部距离
+  let opacity = 0             // 透明度
+  let scale = 0               // 缩放
+  let transform = ''          // 旋转 缩放 偏移等操作
+  let right = getRandom(5, maxw, false, true)   // 随机-右距离
+  let isPlus = getRandomBool()?'':'-'           // 随机-方向
+  let rotate = getRandom(0, 60, false, true)    // 随机-旋转
+  let scaleMax = getRandom(0, 1, true, true)+1  // 随机-缩放倍数
+  setStatic(el,'position','absolute')           // 设置-定位
+  setStatic(el, 'right', right, 'px')           // 设置-右距离
+  const amFn = () => { //  opacity: 0.5;
+    // 到顶了- 移除元素
+    if (bottom > maxH) {el.remove();return}
+    // 透明度: 进入-慢慢出现
+    if (bottom < 101 && opacity < 1) opacity = toNumber(opacity + 0.01)
+    else if (bottom > maxH - 100 && opacity > 0) opacity = toNumber(opacity - 0.01)
+    // 缩放：进入-慢慢放大
+    if (bottom < (scaleMax/0.1) && scale < scaleMax) scale = toNumber(scale + 0.1)
+    // 缩放：退出-慢慢缩小
+    else if (bottom > maxH - (scaleMax/0.1) && scale > 0) scale = toNumber(scale - 0.1)
+    bottom++
+    // console.log('zdg: ', scale)
+    // 设置样式
+    transform = `rotate(${isPlus}${rotate}deg) scale(${scale})`
+    setStatic(el, 'bottom', bottom, 'px')
+    setStatic(el, 'opacity', opacity)
+    setStatic(el, 'transform', transform)
+    requestAnimationFrame(amFn)
+  }
+  amFn() // 初次执行
+}
+// 设置-静态样式
+const setStatic = (el, type, val, end) => el.style[type] = val + (end || '')
+// 随机数 isFloat：是否小数 isMax：是否包含最大值
+const getRandom = (min, max, isFloat, isMax, pos=2) => {
+  const maxVal = isMax ? max - min + 1 : max - min
+  const getVal = () => Math.random() * maxVal + min
+  return isFloat ? toNumber(getVal(), pos) : toNumber(getVal(), 0)
+}
+// 随机布尔值
+const getRandomBool = () => Math.random() > 0.5
+// 转换数字-(小数精度丢失)
+const toNumber = (v, pos = 2) => Number(v.toFixed(pos))
+// 暴露方法
+defineExpose({ trigger })
+</script>
+
+<style lang="scss" scoped>
+.c-warp {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  width: 30%;
+  height: 50%;
+  pointer-events: none;
+}
+</style>

src/renderer/src/views/tool/sphere.vue

@@ -2,8 +2,13 @@
   <div class="warp-all">
     <!-- 画板 -->
     <board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue>
+
     <!-- 侧边工具栏 -->
     <side-vue v-ignore @ignore-mounted="sideMouse" @change="sideChange"></side-vue>
+
+    <!-- 点赞组件 -->
+    <upvote-vue></upvote-vue>
+
     <!-- 底部工具栏  :style="dataPos.style"-->
     <div class="tool-bottom-all" @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
       <div v-drag="{handle:'.tool-bottom-all', dragtime}"
@@ -30,12 +35,14 @@
 <script setup>
 // 功能说明：electron 悬浮球
 import { onMounted, ref, reactive, watchEffect } from 'vue'
+
 import logo from '@root/resources/icon.png'     // logo
 import boardVue from './components/board.vue'   // 画板-子组件
 import sideVue from './components/side.vue'     // 画板-子组件
+import upvoteVue from './components/upvote.vue' // 点赞-子组件
 import vDrag from './directive/drag'            // 自定义指令-拖拽
 import vIgnore from './directive/ignore'        // 自定义指令-穿透
-import { useToolState } from '@/store/modules/tool'
+import { useToolState } from '@/store/modules/tool' // 数据状态-缓存
 import { ipcMsgSend, ipcHandle, ipcMain, ipcMsgInvoke } from '@/utils/tool' // 相关工具
 const tabActive = ref('select')   // 工具栏当前选中项
 const isFold = ref(false)         // 折叠工具栏