VUE|使用VUE和Flex实现掷骰子模拟器
使用了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>
