uniapp 文本框增加删除图标

代码块存档

//扫描框
 <view class="scanCodeBox">
        <input class="inputContent" type="number" @blur="loseFocus" :disabled="false" :value="textValue"
              placeholder="请扫描条码内容" :auto-blur="true" />
        <uni-icons v-if="showClearIcon" class="iconS" @click="clearIcon" type="clear" size="22"
              color="#C0C4CC"></uni-icons>
</view>


const textValue = ref("")
let showClearIcon = ref(false)

//收起键盘 失去焦点
function loseFocus(e) {
    if (e.detail.value != '') {
        console.log(e)
        textValue.value = e.detail.value
        resData.value.rmCode = e.detail.value
        showClearIcon.value = true
        getListdata(resData.value)
    } else {
        showClearIcon.value = false
    }

}

//删除文本框
function clearIcon() {
    textValue.value = ''
    //resData.value.rmCode = ''
    //getListdata(resData.value)
    showClearIcon.value = false
}

 .scanBox {
      display: flex;
      margin-bottom: 20rpx;
      height: 70rpx;

      .scanCodeBox {
        display: flex;
      }

      .inputContent {
        padding-left: 10rpx;
        height: 74rpx;
        line-height: 74rpx;
        width: 640rpx;
        font-size: 28rpx;
        border: 2rpx #E5E5E5 solid;
        border-radius: 6rpx;
      }

      .iconS {
        position: absolute;
        right: 60rpx;
        top: 26rpx;
      }

    }