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
                    }
    			},
    

      

  • 相关阅读:
    在UNITY中按钮的高亮用POINT灯实现,效果别具一番风味
    打包场景出错
    探讨 .NET 4 新增的 SortedSet 类
    error CS1010 CS8025 CS1012 CS1525 常见文档错误解决
    安卓机在按HOME键时,UNITY触发的APPLICATION_PAUSE事件
    有几个Pass,对象就会绘制几次
    华东师范大学2017年高等代数考研试题
    华东师范大学2017年数学分析考研试题
    无穷级数的收敛性
    南开大学2017年数学分析高等代数考研试题
  • 原文地址:https://www.cnblogs.com/SunShineM/p/9046616.html
Copyright © 2011-2022 走看看