vant weapp vant-field 自定义label+图标

image.png
 
    
是否申请折扣
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

你可能感兴趣的:(vant weapp vant-field 自定义label+图标)