效果圖如下:
HTML:
<view class="disF"> <view class="qhItem"> <view class="m-qhTit">取號人姓名:</view> <view class="qhInput uni-input-wrapper"> <input type="text" placeholder="請填寫取號人姓名" v-model="cusname" /> <text class="iconfont iconshanchu" v-if="cusname.length>0" @click="cusname=''"></text> </view> </view> <view class="qhItem"> <view class="m-qhTit">手機號:</view> <view class="qhInput uni-input-wrapper"> <input type="number" placeholder="請填寫手機號" v-model="mobile" /> <text class="iconfont iconshanchu" v-if="mobile.length>0" @click="mobile=''"></text> </view> </view> <view class="qhItem"> <view class="m-qhTit">排隊號:</view> <view class="qhInput uni-input-wrapper"> <input type="number" placeholder="請填寫排隊號" v-model="number" /> <text class="iconfont iconshanchu" v-if="number.length>0" @click="number=''"></text> </view> </view> </view>
CSS:
.disF{
display: flex;
width: 730px;
.qhItem{
width: 33%;
.m-qhTit{
min-width: 85px;
height: 34px;
line-height: 34px;
font-size: 14px;
text-align: right;
margin-right: 6px;
}
.qhInput{
position: relative;
input{
width: 144px;
height: 34px;
line-height: 34px;
border: 1px solid #ccc;
padding: 0 8px;
font-size: 14px;
border-radius: 2px;
}
.iconshanchu{
font-size: 16px;
color: #ccc;
position: absolute;
top: 3px;
right: 15px;
cursor: pointer;
}
}
}
}
js:
歸納總結:
1.data中聲明變量
2.input綁定變量
3.清除按鈕:判斷變量的長度,如果大於0點擊click事件清空值