vant weapp vant-field 自定义label+

image.png

 <van-field
    :value="formData.discount"
    right-icon="arrow"
    placeholder="请选择"
    @change="discountChange"
    @blur="discountChange"
    @click="discountShow1"
    input-align="right"
    :error-message="rules.discountMessage"
>
    <div slot="label" class="flex" @click="showTip1()">
        <span class="filed-label">是否申请折扣</span>
        <van-icon name="warning-o" color="#02A7F0" />
    </div>
</van-field>

 <!-- 弹窗组件 -->
<van-popup :show="discountShow" round position="bottom">
    <div style="height: 600rpx">
    <van-picker
        :columns="discountList"
        title="是否申请折扣"
        value-key="label"
        @confirm="discountConfirm"
        @cancel="discountCancel"
        show-toolbar
    />
    </div>
</van-popup>

data(){
    return{
        discount:"",
        discountId:"",
        discountList: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      rules: {
        discountMessage: "",
      },
    }
},
discountConfirm(e) {
    this.formData.discount = e.mp.detail.value.label;
    this.formData.discountId = e.mp.detail.value.value;
    this.discountShow = false;
    this.discountChange();
},
discountCancel() {
    this.discountShow = false;
    this.discountChange();
},
discountChange() {
    this.rules.discountMessage = "";
    if (!this.$utils.isEmpty(this.formData.discount)) {
    this.rules.discountMessage = "是否申请折扣不能为空";
    }
},
showTip1(type) {
    this.showTip = true;
}

点击下拉框，会同时弹出下拉列表是数据和提示信息，所以我这边又给了一个判断

image.png

discountShow1() {
    if (this.showTip == true) {
    this.discountShow = false;
    } else {
    this.discountShow = true;
    }
},

image.png
先前想用bind:click-icon 点击尾部图标时触发,但是不知道为啥无效
最终效果：
image.png