feat(date-picker): add preview to close #654

varletjs · Jul 25, 2022 · ed23775 · ed23775
1 parent 3fe98f9
commit ed23775
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 7 deletions.
diff --git a/packages/varlet-ui/src/date-picker/DatePicker.vue b/packages/varlet-ui/src/date-picker/DatePicker.vue
@@ -316,7 +316,7 @@ export default defineComponent({
     }
 
     const getChooseMonth = (month: MonthDict) => {
-      const { type, readonly, range, multiple, onChange, 'onUpdate:modelValue': updateModelValue } = props
+      const { type, readonly, range, multiple, onChange, onPreview, 'onUpdate:modelValue': updateModelValue } = props
       reverse.value = getReverse('month', month)
 
       if (type === 'month' && !readonly) {
@@ -330,6 +330,8 @@ export default defineComponent({
         }
       } else {
         previewMonth.value = month
+
+        call(onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index))
       }
 
       isMonthPanel.value = false
@@ -339,6 +341,8 @@ export default defineComponent({
       previewYear.value = `${year}`
       isYearPanel.value = false
       isMonthPanel.value = true
+
+      call(props.onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index))
     }
 
     const checkPreview = (type: string, checkType: string) => {
@@ -361,6 +365,8 @@ export default defineComponent({
 
         previewMonth.value = MONTH_LIST.find((month) => toNumber(month.index) === checkIndex) as MonthDict
       }
+
+      call(props.onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index))
     }
 
     const checkValue = () => {

diff --git a/packages/varlet-ui/src/date-picker/docs/en-US.md b/packages/varlet-ui/src/date-picker/docs/en-US.md
@@ -148,9 +148,10 @@ const change = (date) => {
 
 ### Events
 
-| Event | Description | arguments |
-| ----- | -------------- | -------- |
-| `change` | Emitted after date changed | `value: string \| string[]` |
+| Event | Description                 | arguments |
+| ----- |-----------------------------| -------- |
+| `preview` | Emitted after date switched | `year: number` <br>`month: number` |
+| `change` | Emitted after date changed  | `value: string \| string[]` |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/date-picker/docs/zh-CN.md b/packages/varlet-ui/src/date-picker/docs/zh-CN.md
@@ -151,9 +151,10 @@ const change = (date) => {
 
 ### 事件
 
-| 事件名 | 说明 | 回调参数 |
-| ----- | -------------- | -------- |
-| `change` | 日期变化时触发 | `value: string \| string[]` |
+| 事件名       | 说明      | 回调参数                              |
+|-----------|---------|-----------------------------------|
+| `preview` | 日期切换时触发 | `year: number` <br>`month: number` |
+| `change`  | 日期改变时触发 | `value: string \| string[]` |
 
 ### 插槽
 `weekIndex` 表示一周的第 `n` 天，从周末的 `0` 开始

diff --git a/packages/varlet-ui/src/date-picker/example/index.vue b/packages/varlet-ui/src/date-picker/example/index.vue
@@ -24,6 +24,9 @@ const allowedDates1 = (date) => {
 const change = (date) => {
   console.log(date)
 }
+const preview = (year, month) => {
+  console.log(year, month)
+}
 
 watchLang(use)
 watchDarkMode(dark)
@@ -56,6 +59,7 @@ watchDarkMode(dark)
     header-color="purple"
     color="#7bb872"
     first-day-of-week="1"
+    @preview="preview"
     @change="change"
   >
     <template #year="{ year }">

diff --git a/packages/varlet-ui/src/date-picker/props.ts b/packages/varlet-ui/src/date-picker/props.ts
@@ -169,6 +169,9 @@ export const props = {
     type: Boolean,
     default: true,
   },
+  onPreview: {
+    type: Function as PropType<(year: number, month: number) => void>,
+  },
   onChange: {
     type: Function as PropType<(value: string | string[]) => void>,
   },

diff --git a/packages/varlet-ui/types/datePicker.d.ts b/packages/varlet-ui/types/datePicker.d.ts
@@ -16,6 +16,7 @@ export interface DatePickerProps extends BasicAttributes {
   multiple?: boolean
   range?: boolean
   touchable?: boolean
+  onPreview?: (year: number, month: number) => void
   onChange?: (value: string | string[]) => void
   'onUpdate:modelValue'?: (value: string | string[]) => void
 }