基于uni-app开发的picker式下拉框组件带清空按钮

因为uni-app自带的uni-data-select只支持下拉，无法绑定picker事件，网上查阅资料也没有发现有相关的。

打算自己手搓一个，代码如下：

 <view class="leftButton">
          <view @click="show = true" :custom-style="accountBtn" style="display: flex;height: 56rpx;">
            <u--text :text="productType?selectProductType:'产品类型'" size="28" align="center"></u--text>
            <view v-if="productType" style="padding-top: 15rpx;padding-left: 40rpx;">
              <u-icon name="close-circle-fill" size="28" @click.native.stop="clickClearProductType"></u-icon>
            </view>
            <view v-else style="padding-left: 40rpx;">
              <u-icon customStyle="width: 24rpx; background-color: #f7f7f7;"></u-icon>
            </view>
            <view style="padding-top: 15rpx;padding-left: 18rpx;">
              <u-icon name="arrow-down" size="28" ></u-icon>
            </view>
          </view>
        </view>
 <u-picker :show="show" :columns="typeList " keyName="label" @cancel="show=false" @confirm="changeType">
        </u-picker>

js方法：

  changeType(e) {
      this.selectProductType = e.value[0].label;
      this.productType = e.value[0].value; // 获取所选值
      this.searchTip = false;
      // 重置页码为第一页
      this.keyword = ""
      this.page.curPage = 1;
      this.show = false
      // 调用 getPage 方法重新加载数据
      this.getPage();
    },
  clickClearIndustry() {
      this.industry = "";
      this.selectIndustry = "";
      // 重置页码
      this.page.curPage = 1;
      // 重新加载数据
      this.getPage();
      // 在这里添加你想要执行的逻辑
    },

CSS部分：

 .leftButton {
      border-radius: 10rpx;
      background: #F7F7F7;
      width: 30%;
      display: flex;
      padding-left: 10%;
      margin-left: 5%;
    }

定义一个show来判断是否展示。最终样式：