Vue3 翻牌器

样式展示:

第1位转一圈 

第2位转二圈

~

第5位转5圈(个位最后停下)

核心代码:

这是单个数字牌vue文件处理

noNumber 是代码转几圈

num 1~9 值传入

data.flopValue 页面显示的数字 

列如: 传入是数字5  转一轮数字变化( 6 7 8 9 0 1 2 3 4 5)

全部代码

调用主页面 

注意这里是传入value是字符串

import allFlip from '@/components/flip/allFlip'

翻牌集合页面

<!--  --><template>  <div class="allFlip">    <oneNumberFlip v-for="item of list" :key="item.value" class="allFlip-one" :value="item.value" :no="item.no" />  </div></template><script>import oneNumberFlip from './oneNumberFlip'import { toRefs, watch, reactive } from 'vue'export default {  name: 'AllFlip',  components: {    oneNumberFlip  },  props: {    value: {      type: Number,      default: 0    },  },  setup(props) {    const data = reactive({      list: []    })    function computeFc() {      let numString = props.value + ''      for (let i = 0; i < numString.length; i++) {        data.list.push({          value: +numString[i],          no: i + 1        })      }    }    // 监控    watch(props.value, (newVal, oldVal) => {      if (newVal != oldVal) {        computeFc(newVal)      }    })    computeFc()    return {      ...toRefs(data)    }  }}</script><style>.allFlip {  height: 100%;}.allFlip-one {  width: 40px;  height: 100%;  border: 1px solid red;  margin-left: 2px;  display: inline-flex;  align-items: center;  justify-content: center;}</style>



<!--  --><template>  <div class="oneNumberFlip">    <span>{{ flopValue }}</span>  </div></template><script>import { toRefs, watch, reactive, onMounted } from 'vue'export default {  name: 'OneNumberFlip',  props: {    value: {      type: Number,      default: 0    },    no: {      type: Number,      default: 0    },  },  setup(props) {    const data = reactive({      flopValue: 0 // 翻牌数字    })    let noNumber = props.no // 转几圈    let count = 0    // 监控    watch(props.value, (newVal, oldVal) => {      if (newVal != oldVal) {        computeFc(newVal)      }    })    // 定时器    function setTimeOutFc() {      setTimeout(() => {        computeFc(count)      }, 50)    }    // 数字翻转    function computeFc(num) {      // 大于9 等0继续翻转   1~9 一直变化      count = num == 9 ? 0 : ++num      // 翻转数字和传参是否一致      if (count == props.value) {        // 翻转几次        if (noNumber < 2) {          count = props.value        } else {          --noNumber          setTimeOutFc()        }      } else {        setTimeOutFc()      }      // 显示翻转数字      data.flopValue = parseInt(count)    }    // 组件挂载后执行    onMounted(() => {      computeFc(props.value)    })    return {      ...toRefs(data),      count,      setTimeOutFc,      computeFc,    }  }}</script><style>.oneNumberFlip {  display: inline-block;  font-size: 16px;}.oneNumberFlip span {  font-size: 36px;  color: #000;}</style>