init

uni_modules/nutui-uni/components/shakedice/shakedice.vue

@@ -0,0 +1,101 @@
+<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>