抽奖 转盘数字自定义选择

van-image 组件用于显示图片，它的 src 属性根据条件动态设置图片的路径。如果 selected 的值等于当前循环的 item 值，则使用 /img/monopoly/univNumber/${item}select.png 路径；否则使用 /img/monopoly/univNumber/${item}.png 路径。

每个选择按钮被点击时，会触发 `univerSelected` 方法，并将对应的 `item` 值作为参数传入。并使用 `setTimeout` 函数在 200 毫秒后将 `showUniverTurn` 设置为 `false`。

打印的内容

<van-popup v-model="showUniverTurn" :close-on-click-overlay="false">
  <div id="showUniverTurn">
    <div class="univerTurn">
      <div class="univerTurn_img">
        <van-image src="/img/monopoly/univerTurnbg.png"></van-image>
      </div>
    
      <div class="univerTurn_btn">
        <cl-image v-for="item in 8" :key="item"
        :src="selected === item ? `/img/monopoly/univNumber/${item}select.png` : `/img/monopoly/univNumber/${item}.png`"
        @click="univerSelected(item)"></cl-image>
      </div>
    </div>
  </div>
</van-popup>

univerSelected(select){
  console.log(select);
  this.selected = select
  setTimeout(() => {
    this.showUniverTurn = false
  }, 200);
},

 #showUniverTurn{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    position: relative;

    .univerTurn{
      // background: red;
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%,-50%);

      .univerTurn_img{
        width: 632px;
        height: 632px;
      }

      .univerTurn_btn{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: auto;
        margin-top: 20px;
        width: 500px;
        .van-image{
          width: 100px;
          height: 108px;
          margin-right: 1rem;
          margin-bottom: 1rem;
        }
        .van-image:nth-child(4n){
          margin-right: 0;
        }
      }

    }

  }