我在微博中看到了一个点按钮,按钮随机闪避的小游戏。我就随便做了一个。用的其实就只有这一句
随机数变成字符串然后获取2到5之间的数字Math.random().toString().slice(2, 5)
<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、名称
兼容单选、多选功能
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。