Vue 给两个元素绑定相同事件,共用同一个弹窗


<van-field v-model="form.sendDate" label="开始日期:" input-align="right" is-link readonly required :rules="[{ required: true, message: '请选开始时间' }]" @click="showDatePicker=true;selectDate=1;">
  </van-field>

<van-field v-model="form.finishTime" label="完成时间:" input-align="right" is-link readonly required :rules="[{ required: true, message: '请选择完成时间' }]" @click="showDatePicker=true;selectDate=2;">
 </van-field>
/*****************************
***********/
//日期弹窗组件
 <van-popup v-model="showDatePicker" position="bottom" :style="{ height: '40%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        @confirm="confirmDatePicker"
        @cancel="cancelDatePicker"
      />
    </van-popup>
/*************************************************/
//在data中维护一个状态
 selectDate: 0,
showDatePicker: false, 
//逻辑部分
confirmDatePicker(v) {
      v = new Date(v).toLocaleDateString().replace(/\//g, '-')
      console.log(v)
      this.selectDate == 1 ? this.form.sendDate = v : this.selectDate == 2 ? this.form.finishTime = v : ''
      this.showDatePicker = false;
    },

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM