classroom-instruments/src/components/CDatePicker/index.tsx

import { defineComponent, ref, watch } from 'vue';
import styles from './index.module.less';
import { NIcon, NImage, NDatePicker } from 'naive-ui';
import dateIcons from './images/dateIcon.png';
import disDate from './images/disDate.png';
export default defineComponent({
  name: 'CDatePicker',
  props: {
    type: {
      type: String,
      default: 'daterange'
    },
    separator: {
      type: String,
      default: '-'
    },
    timerValue: {
      type: Array,
      default: [] as any
    }
  },
  setup(props, { emit, attrs }) {
    const isFocus = ref(false);
    const timer = ref(null as any);
    const updateTimer = () => {
      console.log('更新日期', timer.value);
      emit('update:value', timer.value);
    };
    timer.value =
      props.timerValue && props.timerValue.length > 0 ? props.timerValue : null;
    watch(
      () => props.timerValue,
      (value: any) => {
        timer.value = value && value.length ? value : null;
      }
    );
    return () => (
      <>
        <div class={styles.CdataWrap}>
          <NImage
            previewDisabled
            class={styles.dateIcons}
            src={isFocus.value ? dateIcons : disDate}></NImage>
          <NDatePicker
            {...attrs}
            class={styles.CDatePicker}
            v-model:value={timer.value}
            separator={props.separator}
            type={props.type as any}
            onUpdate:value={updateTimer}
            onFocus={() => {
              isFocus.value = true;
            }}
            onBlur={() => {
              isFocus.value = false;
            }}
            v-slots={{
              'date-icon': () => (
                <>
                  <span></span>
                </>
              )
            }}></NDatePicker>
        </div>
      </>
    );
  }
});