我在微博中看到了一个点按钮,按钮随机闪避的小游戏。我就随便做了一个。用的其实就只有这一句
随机数变成字符串然后获取2到5之间的数字
Math.random().toString().slice(2, 5)

GIF.gif

<template>
  <div class="mayun">
    <button @mousemove="goodbay" :style="{ top:xTop+'px', left:xLeft+'px' }">
      准
    </button>
    <button @click="ok">
      不准
    </button>

    <p>马云爹地,借我1000万可以吗?下辈子还你</p>

    <span v-show="isTrue">
      你自己选的,我尊重你的决定
    </span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        xTop: "",
        xLeft: "",
        isTrue: false
      }
    },
    methods: {
      goodbay() {
        var num = Math.random().toString().slice(2, 5)
        if (num > 600) {
          num = 500
        }
        this.xTop = num
        this.xLeft = num
        console.log(num)
      },
      ok() {
        this.isTrue = true
      }
    }
  }
</script>
<style lang="less">
  .mayun {
    display: flex;
    width: 500px;
    justify-content: space-around;
    height: 625px;

    p {
      position: fixed;
      background: #000000;
      padding: 31px;
      left: 270px;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.58);
      color: #ffe503;
      font-family: cursive;
      font-size: 32px;
    }

    button:nth-child(1) {
      width: 100px;
      border: 1px solid #ccc;
      padding: 5px;
      position: absolute;
      left: 0;
      background: #8BC34A;
      color: #fff;
      border-radius: 42px;

    }

    button:nth-child(2) {
      width: 100px;
      border: 1px solid #ccc;
      padding: 5px;
      position: absolute;
      left: 0;
      top: 200px;
      background: #eb3f3f;
      color: #fff;
      border-radius: 37px;
    }

    span {
      position: fixed;
      left: 0;
      top: 0;
      background: #fff;
      width: 100%;
      height: 100%;
      z-index: 99999;
      text-align: center;
      line-height: 16.7;
      color: #F44336;
      font-size: 31px;
    }
  }
</style>

√ 继承于Choose.vue
√ 开发 通用部门选择 ChooseDept.vue
√ 功能详见于 production.......Problem.vue
√ 【责任部门】选择功能部分代码

查询到了:S产意肠
右上角新增打开:责任部门 和 配合部门

使用简单、方便,
输入项包含:原已选部门ID,
输出项包含:新已选部门ID、名称

兼容单选、多选功能


赵不悔
96 声望4 粉丝

我以为租来的人生也能幸福…要不是幸福终究有个期限,我也就信了。