点赞组件

This commit is contained in:
zdg 2024-08-09 17:19:00 +08:00
parent 964e99c186
commit cc8ea2b043
2 changed files with 100 additions and 6 deletions

View File

@ -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>

View File

@ -2,8 +2,13 @@
<div class="warp-all"> <div class="warp-all">
<!-- 画板 --> <!-- 画板 -->
<board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue> <board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue>
<!-- 侧边工具栏 --> <!-- 侧边工具栏 -->
<side-vue v-ignore @ignore-mounted="sideMouse" @change="sideChange"></side-vue> <side-vue v-ignore @ignore-mounted="sideMouse" @change="sideChange"></side-vue>
<!-- 点赞组件 -->
<upvote-vue></upvote-vue>
<!-- 底部工具栏 :style="dataPos.style"--> <!-- 底部工具栏 :style="dataPos.style"-->
<div class="tool-bottom-all" @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)"> <div class="tool-bottom-all" @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
<div v-drag="{handle:'.tool-bottom-all', dragtime}" <div v-drag="{handle:'.tool-bottom-all', dragtime}"
@ -30,12 +35,14 @@
<script setup> <script setup>
// electron // electron
import { onMounted, ref, reactive, watchEffect } from 'vue' import { onMounted, ref, reactive, watchEffect } from 'vue'
import logo from '@root/resources/icon.png' // logo
import boardVue from './components/board.vue' // - import logo from '@root/resources/icon.png' // logo
import sideVue from './components/side.vue' // - import boardVue from './components/board.vue' // -
import vDrag from './directive/drag' // - import sideVue from './components/side.vue' // -
import vIgnore from './directive/ignore' // -穿 import upvoteVue from './components/upvote.vue' // -
import { useToolState } from '@/store/modules/tool' import vDrag from './directive/drag' // -
import vIgnore from './directive/ignore' // -穿
import { useToolState } from '@/store/modules/tool' // -
import { ipcMsgSend, ipcHandle, ipcMain, ipcMsgInvoke } from '@/utils/tool' // import { ipcMsgSend, ipcHandle, ipcMain, ipcMsgInvoke } from '@/utils/tool' //
const tabActive = ref('select') // const tabActive = ref('select') //
const isFold = ref(false) // const isFold = ref(false) //