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