#vue-ts

项目依赖

1、Node >= 16，依赖管理工具推荐使用 pnpm >= 8
2、项目使用dayjs替代moment时间依赖

| key | Type | Required | Default | Description | | --------------- | -------- | -------- | ------------------------ | ---------------------------------------------------------------- | | value(v-model) | string[] | true | | | | showTime | boolean | false | true | 是否显示时间 | | format | string | false | YYYY-MM-DD HH:mm:ss | 日期显示格式 | | valueFormat | string | false | YYYY-MM-DD HH:mm:ss | 日期输出格式 | | disabledDate | boolean | false | false | 是否检验开始结束时间逻辑 | | allowClear | boolean | false | true | 是否显示清除按钮 | | placeholder | string[] | false | ['开始时间', '结束时间'] | 默认显示 | | specifications | boolean | false | true | 含近时间段： true：从当天往前， false: 从当天往后 | | showLeftPanel | boolean | false | true | 是否显示左侧快捷操作面板 | | change | function | false | | 点击确定触发得回调方法 | | visibleChange | function | false | | 面板弹出收起触发得回调方法：params(visible: Boolean) | | dateClassName | string | false | | 给面板增加外部 class | | showCurrentTime | boolean | false | true | 当只选择日期时，时间显示当前时间, false 则显示 00:00:00-23:59:59 |

使用

1. 全局中引入样式文件，必须引入在 ant-design-vue 的样式之前
@import "ztf-datepicker/lib/style.css";
@import 'ant-design-vue/dist/antd.less';

2. vue文件中引用
<template>
  <div style="margin-top: 1000px">
    <DatePicker v-model:value="value">
      <ant-design-vue date-picker原插槽；如下>
       <template #separator> ~ </template>
    </DatePicker>
  </div>
</template>
<script setup lang="ts">
import DatePicker from "ztf-datepicker";
import { ref } from "vue";
const value = ref([]);
</script>

3. 可使用ant-design-vue中的插槽更改图标