UniApp给input输入框增加删除按钮“清除小叉叉x”

 

图例

<view class="pt10 flex alcenter">
 <view class="ft16 ftw500 text-info">手机号</view>
   <input class="ml40" maxlength="11" :value="phone" type="text" placeholder-style="color:#cccccc;" placeholder="输入手机号码" @input="theBlur" />
   <text v-if="phone" class="icon_close" @click="close"></text>
</view>

data(){
　　phone:'',
},
methods:{
    close:function(){
        this.phone = ''
    },
    theBlur(e){
        console.log(e.target.value)
        this.phone = e.target.value
    }
},

//css
.icon_close {
            background-image: url(../../../static/images/btn_close3@3x.png); 
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 42upx;
            height: 32upx;
            margin-right: 10upx;
        }