VUE|使用VUE和Flex实现掷骰子模拟器-526互联

使用了VUE和纯CSS来实现掷骰子模拟器
实现效果

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>
  <style type="text/css">
    .box {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .pip {
      display: block;
      margin: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: whitesmoke;
    }

    .face {
      margin: 16px;
      padding: 12px;
      background-color: #444;
      width: 72px;
      height: 72px;
      object-fit: contain;

      border-radius: 10%;
    }

    .first {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .second {
      display: flex;
      justify-content: space-between;
    }

    .second .pip:nth-of-type(2) {
      align-self: flex-end;
    }

    .third {
      display: flex;
      justify-content: space-between;
    }

    .third .pip:nth-of-type(2) {
      align-self: center;
    }

    .third .pip:nth-of-type(3) {
      align-self: flex-end;
    }

    .fourth {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .fourth .column,
    .sixth .column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .fifth {
      display: flex;
      justify-content: space-between;
    }

    .fifth .column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .fifth .column:nth-of-type(2) {
      display: flex;
      justify-content: center;
    }

    .sixth {
      display: flex;
      justify-content: space-between;
    }

    .isDisplay {
      display: none;
    }
  </style>
  <body>
    <div class="box">
      <div class="button-container">
        <el-button size="mini" v-on:click="showPoint" round
          ><i class="el-icon-thumb"></i>点击一下！</el-button
        >
      </div>
      <div class="first face" v-bind:class="{isDisplay:isDisplay_1}">
        <span class="pip"></span>
      </div>
      <div class="second face" v-bind:class="{isDisplay:isDisplay_2}">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="third face" v-bind:class="{isDisplay:isDisplay_3}">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="fourth face" v-bind:class="{isDisplay:isDisplay_4}">
        <div class="column">
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="column">
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
      </div>
      <div class="fifth face" v-bind:class="{isDisplay:isDisplay_5}">
        <div class="column">
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="column">
          <span class="pip"></span>
        </div>
        <div class="column">
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
      </div>
      <div class="sixth face" v-bind:class="{isDisplay:isDisplay_6}">
        <div class="column">
          <span class="pip"></span>
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="column">
          <span class="pip"></span>
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: ".box",
        data: {
          isDisplay_1: true,
          isDisplay_2: true,
          isDisplay_3: true,
          isDisplay_4: true,
          isDisplay_5: true,
          isDisplay_6: true,
        },
        methods: {
          showPoint: function () {
            var flag = this.randomNum();
            //console.log(flag);
            switch (flag) {
              case 0:
                this.reset();
                this.isDisplay_1 = !this.isDisplay_1;
                break;
              case 1:
                this.reset();
                this.isDisplay_2 = !this.isDisplay_2;
                break;
              case 2:
                this.reset();
                this.isDisplay_3 = !this.isDisplay_3;
                break;
              case 3:
                this.reset();
                this.isDisplay_4 = !this.isDisplay_4;
                break;
              case 4:
                this.reset();
                this.isDisplay_5 = !this.isDisplay_5;
                break;
              case 5:
                this.reset();
                this.isDisplay_6 = !this.isDisplay_6;
                break;
            }
          },
          reset: function () {
            (this.isDisplay_1 = true),
              (this.isDisplay_2 = true),
              (this.isDisplay_3 = true),
              (this.isDisplay_4 = true),
              (this.isDisplay_5 = true),
              (this.isDisplay_6 = true);
          },
          randomNum: function () {
            return Math.round(Math.random() * 5);
          },
        },
      });
    </script>
  </body>
</html>