zoukankan      html  css  js  c++  java
  • Vue-ElementUI 自定义封装系列-改造DatePicker

    因为后台管理系统中经常会用到DatePicker 来作为常规查询条件中的时间范围,录入单据的创建时间范围,为了追加默认选项和一些常规配置例如:defalutTime来保证查询的时间范围是可以到指定日期之内的,快捷时间范围选项(一周内/一个月/三个月/半年/一年)等,为了将这些相关默认选项进行封装,将DatePicker组件进行默认封装,后续相关程序就可以大量减少代码。

    封装如下:

    <template>
      <el-date-picker
        v-model="timevalue1"
        :picker-options="pickerOptions"
        type="daterange"
        placeholder="选择日期时间"
        align="right"
        @change="changeTime"/>
    </template>
    
    <script>
    export default {
      name: 'd2DateTimePicker',
      model: {
        prop: 'timevalue',
        event: 'change'
      },
    
      props: {
        timevalue: {
          type: Array,
          required: true,
          default: () => {
            return []
          }
        }
    
      },
      data() {
        return {
          timevalue1: [new Date(), new Date(2021, 10, 11)],
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }]
          }
        }
      },
      watch: {
        timevalue: {
          immediate: true,
          // console.log(val, 'time')
          handler(val) {
            if (val.length > 0) {
              this.timevalue1 = val
            }
            this.$emit('change', val)
          }
    
        },
        timevalue1: {
          immediate: true,
          // console.log(val, 'time')
          handler(newVal) {
            this.$emit('change', newVal)
          }
    
        }
    
      },
      methods: {
        changeTime(val) {
          // var oval = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
          // console.log(val)
          this.$emit('change', val)
        }
      }
    
    }
    </script>
    

      

    外部使用示例:

    <d2-date-time-picker v-model="searchDateRange" />
    import d2DateTimePicker from './d2DateTimePicker'
    
    
    export default {
      name: 'HelloWorld',
      components: {
        d2DateTimePicker
      },
      data() {
        return {
          searchDateRange: [],
        }
      },
    

      

  • 相关阅读:
    如何做一个按钮二个事件
    JavaScript中onmouseover时如何让鼠标指针变成一个小手状
    英语口语整理,灵活运用了,口语基本就没问题了
    javascript 传递 '' 时出错 换成 '&' ok
    一个按钮触发两个事件可以吗?
    Select中DISTINCT关键字的用法?
    使下拉框某项不可选的方法
    新打开窗口属性 a href
    调试和测试 Swing 代码
    打造专业外观九宫图
  • 原文地址:https://www.cnblogs.com/volts0302/p/15094936.html
Copyright © 2011-2022 走看看