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
