Vue脚手架点击添加数字总结
功能:
1. 点击’选择数字弹出小费框,点击对应 数字,对应的数字边框变蓝,表示选中状态;点击确定,弹框消失,‘选择数字变为选中的数字’’;再次点击数字,数字还是为选中状态,点击右上角小叉,弹框隐藏;
2. 点击弹出框里的其他金额,可自定义输入范围内的数字,点击确认后,显示相应的输入的数字(再次点击其他金额,输入框显示上一次输入的金额;如果是可选择的金额,点击其他金额的时候,输入框为空).
未点击前页面
点击后效果图
弹出数字框
详解
<template>
<div>
<div class="number" @click="chooseNum">
<span>{{number}}</span>
</div>
<div class="shade" v-show="mask">
<div class="shade-box">
<div class="down"><span @click="down">x</span></div>
<p class="title">{{title}}</p>
<dl class="list" v-show="maskList">
<dt class="item" @click="money(index)" v-for="(item,index) in items" :class= "active == index ? 'addclass':''" :key="index">
¥ <span>{{item.money}}</span>
</dt>
</dl>
<div class="input" v-show="maskCustom">
<input type='number' placeholder='1~200元' name='custom' class='custom' v-model="message">
</div>
<button class="other" @click="other" v-show="maskOther">其他金额</button>
<button class="confirm" @click="confirm">确认</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
number: '选择数字',
title: '小费',
items:[ // 循环列表
{ money: 5},
{ money: 10},
{ money: 15},
{ money: 20},
{ money: 25},
{ money: 30},
],
active: -1, // 定义选中时的金额的样式
mask: false, // 显示隐藏(v-show定义)
maskCustom: false,
maskList: true,
maskOther: true,
index: '', // 用于保存金额的下标(循环列表)
message: '' // input输入框双向绑定的值(v-model="message")
}
},
methods: {
// 点击'选择数字的函数'
chooseNum () {
this.mask = !this.mask; // 遮罩层的显示隐藏
var res =/^\d+(\.\d+)?$/; // 规定为数字
if (res.test(this.number)) { // 判断number的值是否为数字
this.active = this.index; // 是数字时,则让循环列表中选中的下标等于上一次的值(这里的this.index值从confirm函数中点击确认是得到的值)
}
if (this.active == -1 && this.number !== '') { // 如果循环列表的值没有被选中(及下标为-1) 且 number的值不为空
this.message = this.number; // 将双向绑定的值赋值给number
} else { // 否则
this.message = ''; // 当再次点击输入其他金额时,输入框的message为空
}
},
// 关闭弹窗按钮
down () {
this.mask = false; // 点击后,弹窗隐藏
// 如果在点击这个按钮时输入框是显示的 则 再次点击number的时候,恢复到首次点击时的页面,并且如果上次选择的是循环列表中的值,则对应的值为选中状态;如果是手动输入的值,则循环的值不被选中
if (this.maskCustom = true) {
this.maskCustom = false;
this.maskList = true;
this.maskOther = true;
this.message = ''; // 如果number的值是循环列表中的值,点击其他金额时,message为空
this.active = -1; // 如果是手动输入的值,则循环列表的值清除选中状态
}
},
// 选择循环列表中的金额
money (index){
// 为选中的值添加 样式 1.在绑定时传入(index)->@click="money(index)";
// 2.使用自定义样式(三目运算判定index是否为选中)->:class= "active == index ? 'addclass':''",
// 3.在style中添加选中时的样式; -> .shade .addclass {border-color: #00f;}
// 4.使用下标为对应的值添加上样式 -> this.active = index;
this.active = index;
},
// 输入其他金额
other () { // 点击如输入其他金额时,循环列表隐藏;输入其他金额隐藏;输入框显示
this.maskList = false
this.maskOther = false
this.maskCustom = true
},
// 确认
confirm () {
// 如果循环列表显示 并且 输入框隐藏 并且 循环列表的值未被选中 (首次点击)
if (this.maskList == true && this.maskCustom == false && this.active >= 0) {
this.number = this.items[this.active].money; // 将选中循环列表中的值赋给number,并显示在页面上
this.mask = false; // 点击确认后 ,弹窗隐藏
this.index = this.active // 将选中的值的小标保存到index中(为点击选择数字时判断样式用)
} else if (this.maskList == false && this.maskCustom == true) { // 如果循环列表隐藏 并且 输入框显示
if(this.message > 0 && this.message<=200) { // 如果输入的值在这个范围内
this.number = this.message // 将输入的值赋值给number
this.mask = false; // 点击确认后弹窗隐藏
this.maskCustom = false; // 此三个的作用: 如果是手动输入的值,点击确认后,再次点击number时,显示最初界面
this.maskList = true,
this.maskOther = true
this.active = -1; // 此两个是:如果是手动输入的值就清除上次循环列表选中的值的样式
this.index = this.active;
} else { // 判断输入的值是否在否为内
alert("请输入1~200之间的数");
this.mask = true;
}
}
}
}
}
</script>
<style scoped>
.number {
margin: 30px;
}
/* 遮罩层 */
.shade {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
z-index: 10002;
width: 100%;
height: 100%;
}
/* 遮罩层里的盒子 */
.shade-box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: #fff;
width: 80%;
height: auto;
}
.down {
text-align: right;
}
.down span {
color: gray;
font-size: 26px;
padding: 15px;
}
.shade p {
margin: 0;
font-size: 18px;
}
.shade .list {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.shade .item {
width: 22%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
margin-bottom: 4%;
}
.other {
width: 94%;
background: rgba(0,0,0,.2);
color: #fff;
font-size: 16px;
border: 0;
outline: none;
border-radius: 2px;
padding: 10px;
margin-bottom: 20px;
}
.input {
width: 100%;
display: flex;
justify-content: center;
}
.custom {
text-align: center;
padding:10px 15px;
font-size: 16px;
outline: none;
margin: 30px 0;
border-radius: 2px;
}
.confirm {
width: 100%;
border: 0;
outline: none;
background: #fff;
border-top: 1px solid rgba(0,0,0,.1);
color: #00f;
font-size: 16px;
padding: 10px 0;
}
/* 动态添加的样式 */
.shade .addclass {
border-color: #00f;
}
</style>