zoukankan      html  css  js  c++  java
  • vue 监听两个时间插件都变化后执行

    1.

                               <DatePicker  id="startTime" v-on:on-change="getTaxDate" type="month" placement="bottom-start"
                                        placeholder="选择日期"></DatePicker>
                                <!-- <input class="timeInput" type="text" id="startTime"> -->
                                <span></span>
                                <DatePicker v-on:on-change="getTaxEndDate" type="month" placement="bottom-start"
                                        placeholder="选择日期" id="endTime"></DatePicker>

    methods: {
                getTaxDate: function (date) {
                    this.startTime = date
                },
                getTaxEndDate: function (date) {
                    this.endTime = date
                }
    }
     data () {
                return {
                    id: 'echartsBarType',
                    id2: 'echartsPieType',
                    option: {},
                    option2: {},
                    startTime: '',
                    endTime: ''
                }
            },
    watch:{
        startTime() {
                    if (this.startTime) {
                       console.log('开始时间',this.startTime)
                    } else {
                        this.actTaxDate = '';
                    }
                }
    }

    二:

    同时监听两个输入框,如果两个都有值才执行一些方法

    用computed

            computed: {
                timeChange() {
                    const { startTime, endTime } = this
                    return {
                        startTime,
                        endTime
                    }
                }
            },
            watch: {
                timeChange: {
                    handler: function(val) {
                        console.log('address change: ', val)
                    },
                    deep: true
                }
            },

     判断两个时间都有

    watch: {
                timeChange: {
                    handler: function(val) {
                        if(val.startTime!=''&&val.endTime!=''){
                            if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){
                                console.log('address change1: ',val)
                            }
                        }
                    },
                    deep: true
                }
            },

     加判断,结束时间必须大于开始时间(数据双向绑定)

    getTaxDate: function (date) {
                    if(date>this.endTime&&this.endTime!=''){
                        this.startTime = ''
                        alert('开始时间不能大于结束时间');
                    }else{
                        this.startTime = date
                    }
                },
                getTaxEndDate: function (date) {
                    if(date<this.startTime){
                        alert('结束时间必须大于开始时间');
                        this.endTime = ''
                    }else{
                        this.endTime = date
                    }
                },
    <DatePicker  v-model="startTime" id="startTime" v-on:on-change="getTaxDate" type="month" placement="bottom-start"
                                        placeholder="选择日期"></DatePicker>
                                <span></span>
                                <DatePicker v-model="endTime"  v-on:on-change="getTaxEndDate" type="month" placement="bottom-start"
                                        placeholder="选择日期" id="endTime"></DatePicker>

     完整代码:

    export default {
            name: 'incomeTotal',
            data () {
                return {
                    id: 'echartsBarType',
                    id2: 'echartsPieType',
                    option: {},
                    option2: {},
                    startTime: '',
                    endTime: ''
                }
            },
            components: {
                IncomeHeader,
                Echarts
            },
            mounted () {
                this.getAjax()
            },
            computed: {
                timeChange() {
                    const { startTime, endTime } = this
                    return {
                        startTime,
                        endTime
                    }
                }
            },
            watch: {
                timeChange: {
                    handler: function(val) {
                        if(val.startTime!=''&&val.endTime!=''){
                            if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){
                                console.log('address change1: ',val)
                            }
                        }
                    },
                    deep: true
                }
            },
            methods: {
                getTaxDate: function (date) {
                    if(date>this.endTime&&this.endTime!=''){
                        this.startTime = ''
                        alert('开始时间不能大于结束时间');
                    }else{
                        this.startTime = date
                    }
    			},
                getTaxEndDate: function (date) {
                    if(date<this.startTime){
                        alert('结束时间必须大于开始时间');
                        this.endTime = ''
                    }else{
                        this.endTime = date
                    }
    			},
    

      

  • 相关阅读:
    centos7.6 redis
    centos7.5 rabbitmq3.7.4
    centos7.6 nfs
    nginx跨域
    Linux进阶教程丨第1章:访问命令行
    Representation Learning for Event-based Visuomotor Policies
    Goland 2019下载和安装(带破解补丁和汉化包)
    Adobe XD CC 2020中文破解版(附破解教程)
    SSH 三步解决免密登录
    cygwin命令行安装
  • 原文地址:https://www.cnblogs.com/SunShineM/p/9046616.html
Copyright © 2011-2022 走看看