当前位置：首页 > VUE

vue实现骰子

2026-01-12 21:12:56VUE

Vue 实现骰子组件

使用 Vue 实现一个骰子组件可以通过动态渲染不同的骰子面，并添加交互逻辑（如点击旋转）。以下是具体实现方法：

创建骰子组件

定义一个 Vue 单文件组件（SFC），包含骰子的 6 个面（1-6 点）的样式和逻辑：

<template>
  <div class="dice-container" @click="rollDice">
    <div class="dice" :class="'show-' + currentFace">
      <div class="face face-1">•</div>
      <div class="face face-2">• •</div>
      <div class="face face-3">• • •</div>
      <div class="face face-4">• •<br>• •</div>
      <div class="face face-5">• •<br>•<br>• •</div>
      <div class="face face-6">• •<br>• •<br>• •</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentFace: 1,
    };
  },
  methods: {
    rollDice() {
      this.currentFace = Math.floor(Math.random() * 6) + 1;
    },
  },
};
</script>

<style scoped>
.dice-container {
  perspective: 1000px;
  width: 100px;
  height: 100px;
  margin: 20px auto;
}

.dice {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s ease;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background: white;
}

/* 定义骰子每个面的初始位置 */
.face-1 { transform: rotateY(0deg) translateZ(50px); }
.face-2 { transform: rotateY(90deg) translateZ(50px); }
.face-3 { transform: rotateY(180deg) translateZ(50px); }
.face-4 { transform: rotateY(-90deg) translateZ(50px); }
.face-5 { transform: rotateX(90deg) translateZ(50px); }
.face-6 { transform: rotateX(-90deg) translateZ(50px); }

/* 定义骰子旋转后显示的面 */
.show-1 { transform: rotateY(0deg); }
.show-2 { transform: rotateY(-90deg); }
.show-3 { transform: rotateY(-180deg); }
.show-4 { transform: rotateY(90deg); }
.show-5 { transform: rotateX(-90deg); }
.show-6 { transform: rotateX(90deg); }
</style>

使用组件

在父组件中引入并使用骰子组件：

<template>
  <div>
    <h3>点击骰子旋转</h3>
    <Dice />
  </div>
</template>

<script>
import Dice from './Dice.vue';

export default {
  components: {
    Dice,
  },
};
</script>

动画优化

为骰子添加更平滑的旋转动画，可以修改 CSS 过渡效果：

.dice {
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
}

高级功能扩展

如果需要实现更复杂的功能（如自动旋转、结果回调），可以扩展组件：

<script>
export default {
  props: {
    autoRoll: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentFace: 1,
    };
  },
  mounted() {
    if (this.autoRoll) {
      this.rollDice();
    }
  },
  methods: {
    rollDice() {
      this.currentFace = Math.floor(Math.random() * 6) + 1;
      this.$emit('rolled', this.currentFace);
    },
  },
};
</script>

响应式设计

通过 CSS 变量使骰子大小可动态调整：

.dice-container {
  --dice-size: 100px;
  width: var(--dice-size);
  height: var(--dice-size);
}

.face {
  transform: translateZ(calc(var(--dice-size) / 2));
}

以上实现提供了基础的骰子功能，可根据需求进一步扩展样式或逻辑。

vue实现骰子