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

图例

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

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;
        }