修改iview中的日期组件

待我称王封你为后i 2022-03-06 10:52 453阅读 0赞

日期组件如下：

/*
    组件中的属性有  
    type，value,placeholder,placement,options,width 属性值和iview中相对应的
    方法有 onChange, onClear, onOk
    
    
    */
    
    
    
    <template>
     <div>
      <DatePicker
       :open="open"
       :options="options"
       :value="value"
       confirm
       :type="type"
       :placement="placement"
       :placeholder="placeholder"
       @on-change="handleChange"
       @on-clear="handleClear"
       @on-ok="handleOk">
       <a href="javascript:void(0)" @click="handleClick">
        <Icon type="ios-calendar-outline"></Icon>
        <template v-if="value === ''||value===null||value[0]===''||value.length===0">{
       {placeholder}}</template>
        <template v-else-if="typeof value !== 'string'">{
       { value[0] }}至{
       {value[1]}}</template>
        <template v-else>{
       { value }}</template>
        <Icon type="md-arrow-dropdown" />
       </a>
      </DatePicker>
     </div>
    </template>
    <script>
     export default {
       data () {
         return {
           open: false
         }
       },
       props: {
         value: {
           type: [Array, String],
           default: ''
         },
         placeholder: {
           type: String,
           default: '请选择日期'
         },
         type: {
           type: String,
           default: 'date'
         },
         width: {
           type: Number,
           default: 200
         },
         options: {
           type: Object
         },
         placement: {
           type: String,
           default: 'bottom-start'
         }
       },
       watch: {
         value (val) {
           console.log(val)
         }
       },
       methods: {
         handleClick () {
           this.open = !this.open
         },
         handleChange (date) {
           this.$emit('onChange', date)
        // this.value = date
         },
         handleClear () {
           this.open = false
           this.$emit('onClear', '')
         },
         handleOk () {
           this.open = false
           this.$emit('onOk', this.value)
         }
       }
     }
    </script>
    <style lang="stylus">
     .ivu-date-picker
       padding 0 16px
     .ivu-icon-ios-calendar-outline:before
      content:''
     .ivu-date-picker-rel
      a
       color #8590a6
    </style>

使用举例

1、import dropdatePicker from '@/components/DropDatePicker'

2、注册使用：

components: {
      dropdatePicker
    }

3、使用

<dropdate-picker
         :value="nextContactTimeShow"
         type="daterange"
         placeholder="下次联系时间"
         @onChange="nextContactTimeChange"
         @onClear="ContactTimeSearch('next', 'CLEAR')"
         @onOk="ContactTimeSearch('next', 'SEARCH')"
         :options="optionsNextTime"
         placement="left-start"
        ></dropdate-picker>

效果如图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20220303/f76d10d3413a46a5b9066fab000b0ff3.png