pc-component-v5/packages/time/src/Time.vue

<template>
  <input v-model="innerValue" autocomplete="off" type="time" :readonly="readonly" />
</template>

<script>

export default {
  // eslint-disable-next-line
  name: 'Time',

  props:{
    'modelValue':
    {
      type: String,
      default: '',
    }, 
    'readonly':{
      type: Boolean,
      default: false,
    },
  },

  emits: ['update:modelValue', 'on-value-change'],

  data: function(){
    return{
      innerValue : '',
    };
  },

  watch:{
    modelValue: {
      handler(newValue, oldValue){    // eslint-disable-line
        if(newValue != null && newValue != ''){
          this.innerValue = this.getTimeValue(newValue);
        }else{
          this.innerValue = newValue;
        }
      },
      immediate: true,
    },


    innerValue: function(newValue, oldValue){  // eslint-disable-line
      // 向外部发送事件通知
      let newValue1 = '';
      if(newValue == null || newValue == ''){
        newValue1 = newValue;
      }else{
        newValue1 = newValue + ':00';
      }
      console.log('time has been changed:', newValue1);
      this.$emit('update:modelValue', newValue1);
      this.$emit('on-value-change', newValue1);
    },
  },

  methods: {
    getTimeValue: function(value){
      if(value != null && value.length == 8){
        return value.substring(0, 5);
      }else{
        return value;
      }
    },
  },
};
</script>