uniapp——自定義input清除事件


效果圖如下:

 

 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事件清空值


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM