zoukankan      html  css  js  c++  java
  • 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;
        },
  • 相关阅读:
    Python第一周作业
    turtle库的学习笔记
    绘制五角星
    绘制六角形
    绘制同心圆
    绘制叠加三角形
    Slash And Black Slash/正斜杠和反斜杠
    OpenCv中avi视频的读取问题,以及内部格式要求
    OpenCv和matlab对图像的读取
    个人项目进度
  • 原文地址:https://www.cnblogs.com/jervy/p/13394689.html
Copyright © 2011-2022 走看看