102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed, defineComponent, ref, watch } from 'vue'
|
|
import { PREFIX } from '../_constants'
|
|
import { getMainClass } from '../_utils'
|
|
import { shakediceEmits, shakediceProps } from './shakedice'
|
|
|
|
const props = defineProps(shakediceProps)
|
|
|
|
const emit = defineEmits(shakediceEmits)
|
|
defineExpose({ shake })
|
|
const dice = ref<number>(6)
|
|
const clickTag = ref<boolean>(false)
|
|
const animationStyle = ref({})
|
|
const isShake = ref(false)
|
|
const transformStyle = ref({
|
|
transform: '',
|
|
})
|
|
|
|
const classes = computed(() => {
|
|
return getMainClass(props, componentName)
|
|
})
|
|
watch(
|
|
() => isShake.value,
|
|
(value) => {
|
|
if (value) {
|
|
const params = {
|
|
animation: `rotate ${props.time}s infinite linear`,
|
|
}
|
|
animationStyle.value = { ...animationStyle.value, ...params }
|
|
setTimeout(() => {
|
|
isShake.value = false
|
|
animationStyle.value = { animation: 'none' }
|
|
const posible: any = [
|
|
{ value: 1, x: 0, y: 0 },
|
|
{ value: 1, x: 0, y: 0 },
|
|
{ value: 2, x: 90, y: 0 },
|
|
{ value: 3, x: 0, y: -90 },
|
|
{ value: 4, x: 0, y: 90 },
|
|
{ value: 5, x: -90, y: 0 },
|
|
{ value: 6, x: 0, y: 180 },
|
|
]
|
|
const _result = posible[props.id]
|
|
setTimeout(() => {
|
|
transformStyle.value.transform = `rotateX(${_result.x}deg) rotateY(${_result.y}deg)`
|
|
}, 0)
|
|
emit('end')
|
|
}, props.speed)
|
|
}
|
|
else {
|
|
animationStyle.value = {}
|
|
}
|
|
},
|
|
)
|
|
function shake() {
|
|
if (clickTag.value)
|
|
return false
|
|
clickTag.value = true
|
|
isShake.value = true
|
|
setTimeout(() => {
|
|
clickTag.value = false
|
|
}, props.speed)
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const componentName = `${PREFIX}-shakedice`
|
|
|
|
export default defineComponent({
|
|
name: componentName,
|
|
options: {
|
|
virtualHost: true,
|
|
addGlobalClass: true,
|
|
styleIsolation: 'shared',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="classes" :style="[animationStyle, transformStyle, customStyle]">
|
|
<div
|
|
v-for="(item, index) in new Array(dice)"
|
|
:key="index"
|
|
class="page"
|
|
:class="[`page${index + 1}`]"
|
|
>
|
|
<text v-for="(item2, index2) in new Array(index + 1)" :key="index2" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import './index';
|
|
</style>
|
|
|
|
<route lang="json">
|
|
{
|
|
"style": {
|
|
"navigationBarTitleText": "ShakeDice"
|
|
}
|
|
}
|
|
</route>
|