微信input组件添加清除图标,点击清空不生效

微信小程序中使用input组件，点击上面的清空图标不生效问题

问题原因：在真机调试中,因为微信小程序中input组件的层级在聚焦时会最高，会覆盖清空图标，所以点击不生效,在pc开发者工具中是不存在问题的

解决方法：
1.设置 input 的 padding-right 大于图标的宽度。
2.使用uview-UI中的input组件,修改input组件的深度样式,不要试图将清空图标放在input组件的上面，图标使用 cover-view 和 cover-image 组件也不可以。

代码实现(方法1):

html:

<view class="content-brandSearch">
  <input v-model="brandName" class="brandSearch-input" type="text"/>
  <view view v-if="brandName" class="brandSearch-icon" @click="clear(0)">
      <img src="@img/close.png" alt=""/>
  </view>
</view>

css:

        .content-brandSearch {
            position: relative;
            .brandSearch-input {
                /******加这行代码,超过图标的宽度*********/
                padding-right: rpx(35);
                /**************************************/
                width: rpx(351);
                height: rpx(36);
                background: #f6f7f9;
                border-radius: rpx(24.5);
            }
            .brandSearch-icon {
                width: rpx(15);
                height: rpx(15);
                position: absolute;
                right: rpx(26);
                top: rpx(26);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

js:

    data() {
        return {
            brandName: "",
            factoryName: "",
        };
    },
    methods:{
       //input上的x
        clear(type) {
            if (type == 0) {
                this.brandName = "";
            } else {
                this.factoryName = "";
            }
        },
     }