sh-view 2.7.8 → 2.8.0

package/other.js

@@ -0,0 +1,8 @@
+import { defineAsyncComponent } from 'vue'
+
+export const ShCronModal = defineAsyncComponent(() => import('./packages/other/sh-cron-modal/index.vue'))
+export const ShMarkdown = defineAsyncComponent(() => import('./packages/other/sh-markdown/index.vue'))
+export const ShMenu = defineAsyncComponent(() => import('./packages/other/sh-menu/index.vue'))
+export const ShMenuCard = defineAsyncComponent(() => import('./packages/other/sh-menu-card/index.vue'))
+export const ShPreview = defineAsyncComponent(() => import('./packages/other/sh-preview/index.vue'))
+export const ShSystemTip = defineAsyncComponent(() => import('./packages/other/sh-system-tip/index.vue'))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.7.8",
+  "version": "2.8.0",
   "description": "基于vxe-table二次封装,更包含Alert,Badge,Card,CodeEditor,Col,Corner,CountTo,Drawer,Empty,Form,Header,Icon,List,Loading,Modal,Noticebar,Poptip,Progress,PullRefresh,Query,Result,Row,Split,Grid,Table,Tabs,Tag,Toolbar,Tree,Upload,WaterFall,WaterMark等丰富组件库",
   "main": "packages/index.js",
   "scripts": {
@@ -18,6 +18,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.2",
     "@tinymce/tinymce-vue": "^5.0.0",
+    "@wolf-table/table": "^0.0.1",
     "babel-polyfill": "^6.26.0",
     "codemirror": "^6.0.1",
     "core-js": "^3.32.2",
@@ -29,12 +30,12 @@
     "jszip": "^3.10.1",
     "lunar-typescript": "^1.6.10",
     "popper.js": "^1.16.1",
-    "sh-tools": "^2.2.2",
+    "sh-tools": "^2.2.5",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
     "vue-masonry": "^0.16.0",
     "vue-router": "^4.2.4",
-    "vxe-table": "^4.5.12",
+    "vxe-table": "^4.5.13",
     "vxe-table-plugin-export-pdf": "^3.0.4",
     "vxe-table-plugin-export-xlsx": "^3.0.5",
     "xe-clipboard": "^1.10.2",

package/packages/components/index.js

@@ -1,39 +1,39 @@
 // 全局公共封装组件
-import ShAlert from './global-components/sh-alert/index.vue'
-import ShBadge from './global-components/sh-badge/index.vue'
-import ShCalendar from './global-components/sh-calendar/index.vue'
-import ShCard from './global-components/sh-card/index.vue'
-import ShCodeEditor from './global-components/sh-code-editor/index.vue'
-import ShCol from './global-components/sh-col/index.vue'
-import ShCorner from './global-components/sh-corner/index.vue'
-import ShCountTo from './global-components/sh-count-to/index.vue'
-import ShDate from './global-components/sh-date/index.vue'
-import ShDrawer from './global-components/sh-drawer/index.vue'
-import ShEmpty from './global-components/sh-empty/index.vue'
-import ShForm from './global-components/sh-form/form.vue'
-import ShHeader from './global-components/sh-header/index.vue'
-import ShIcon from './global-components/sh-icon/index.vue'
-import ShImage from './global-components/sh-image/index.vue'
-import ShList from './global-components/sh-list/index.vue'
-import ShLoading from './global-components/sh-loading/index.vue'
-import ShModal from './global-components/sh-modal/index.vue'
-import ShNoticebar from './global-components/sh-noticebar/index.vue'
-import ShPoptip from './global-components/sh-poptip/index.vue'
-import ShProgress from './global-components/sh-progress/index.vue'
-import ShPullRefresh from './global-components/sh-pull-refresh/index.vue'
-import ShQuery from './global-components/sh-form/query.vue'
-import ShResult from './global-components/sh-result/index.vue'
-import ShRow from './global-components/sh-row/index.vue'
-import ShSplit from './global-components/sh-split/index.vue'
-import ShGrid from './global-components/sh-table/grid.vue'
-import ShTable from './global-components/sh-table/table.vue'
-import ShTabs from './global-components/sh-tabs/index.vue'
-import ShTag from './global-components/sh-tag/index.vue'
-import ShToolbar from './global-components/sh-toolbar/index.vue'
-import ShTree from './global-components/sh-tree/index.vue'
-import ShUpload from './global-components/sh-upload/index.vue'
-import ShWaterFall from './global-components/sh-water-fall/index.vue'
-import ShWaterMark from './global-components/sh-water-mark/index.vue'
+import ShAlert from './sh-alert/index.vue'
+import ShBadge from './sh-badge/index.vue'
+import ShCalendar from './sh-calendar/index.vue'
+import ShCard from './sh-card/index.vue'
+import ShCodeEditor from './sh-code-editor/index.vue'
+import ShCol from './sh-col/index.vue'
+import ShCorner from './sh-corner/index.vue'
+import ShCountTo from './sh-count-to/index.vue'
+import ShDate from './sh-date/index.vue'
+import ShDrawer from './sh-drawer/index.vue'
+import ShEmpty from './sh-empty/index.vue'
+import ShForm from './sh-form/form.vue'
+import ShHeader from './sh-header/index.vue'
+import ShIcon from './sh-icon/index.vue'
+import ShImage from './sh-image/index.vue'
+import ShList from './sh-list/index.vue'
+import ShLoading from './sh-loading/index.vue'
+import ShModal from './sh-modal/index.vue'
+import ShNoticebar from './sh-noticebar/index.vue'
+import ShPoptip from './sh-poptip/index.vue'
+import ShProgress from './sh-progress/index.vue'
+import ShPullRefresh from './sh-pull-refresh/index.vue'
+import ShQuery from './sh-form/query.vue'
+import ShResult from './sh-result/index.vue'
+import ShRow from './sh-row/index.vue'
+import ShSplit from './sh-split/index.vue'
+import ShGrid from './sh-table/grid.vue'
+import ShTable from './sh-table/table.vue'
+import ShTabs from './sh-tabs/index.vue'
+import ShTag from './sh-tag/index.vue'
+import ShToolbar from './sh-toolbar/index.vue'
+import ShTree from './sh-tree/index.vue'
+import ShUpload from './sh-upload/index.vue'
+import ShWaterFall from './sh-water-fall/index.vue'
+import ShWaterMark from './sh-water-mark/index.vue'
 import { VxeButton, VxeInput, VxeTextarea, VxeSelect } from 'vxe-table'
 
 const components = {

package/packages/components/{global-components/sh-alert → sh-alert}/index.vue

@@ -55,23 +55,16 @@ export default defineComponent({
 		const { slots, emit } = context
 		const closed = ref(false)
 
+		const iconTypeMap = {
+			success: 'ios-checkmark-circle',
+			info: 'ios-information-circle',
+			warning: 'ios-alert',
+			error: 'ios-close-circle'
+		}
+
 		const isDesc = computed(() => !!slots.content)
 		const iconType = computed(() => {
-			let type = ''
-			switch (props.type) {
-				case 'success':
-					type = 'ios-checkmark-circle'
-					break
-				case 'info':
-					type = 'ios-information-circle'
-					break
-				case 'warning':
-					type = 'ios-alert'
-					break
-				case 'error':
-					type = 'ios-close-circle'
-					break
-			}
+			let type = iconTypeMap[props.type]
 			if (isDesc.value) type += '-outline'
 			return type
 		})

package/packages/components/{global-components/sh-badge → sh-badge}/index.vue

@@ -72,19 +72,20 @@ export default defineComponent({
 			return parseInt(props.count) >= parseInt(props.overflowCount) ? `${props.overflowCount}+` : props.count
 		})
 		const hasBadge = computed(() => {
+			let hasStatus = false
 			if (props.count) {
-				status = !(parseInt(props.count) === 0)
+				hasStatus = !(parseInt(props.count) === 0)
 			}
 			if (props.dot) {
-				status = true
+				hasStatus = true
 				if (props.count !== null) {
 					if (parseInt(props.count) === 0) {
-						status = false
+						hasStatus = false
 					}
 				}
 			}
-			if (props.text !== '') status = true
-			return status || props.showZero
+			if (props.text !== '') hasStatus = true
+			return hasStatus || props.showZero
 		})
 		const hasCount = computed(() => {
 			if (props.count || props.text !== '') return true

package/packages/components/{global-components/sh-calendar → sh-calendar}/index.vue

@@ -1,7 +1,10 @@
 <template>
 	<div class="sh-calendar">
 		<div v-if="header" class="sh-calendar-row sh-calendar-head">
-			<div class="info">{{ monthInfo }}</div>
+			<div class="info">
+				<sh-select v-if="type !== 'year'" v-bind="yearSelectConfig" @change="onYearChange" />
+				<sh-select v-if="!['month', 'year'].includes(type)" v-bind="monthSelectConfig" @change="onMonthChange"></sh-select>
+			</div>
 			<div class="extra">
 				<template v-for="item in headerHandles" :key="item.code">
 					<span class="sh-calendar-btn" @click="handleBtn(item)"><i :class="item.icon"></i></span>
@@ -9,7 +12,7 @@
 			</div>
 		</div>
 		<table class="sh-calendar-table" :class="{ 'sh-calendar-pulldown': pulldown }" v-bind="tableConfig">
-			<thead>
+			<thead v-if="showHeader">
 				<tr>
 					<template v-for="(head, headIndex) in headers" :key="headIndex">
 						<th :style="{ textAlign: headerAlign }">{{ head.label }}</th>
@@ -17,13 +20,13 @@
 				</tr>
 			</thead>
 			<tbody @mouseleave="dateMouseleaveEvent">
-				<template v-for="(row, rowIndex) in dayDatas" :key="rowIndex">
+				<template v-for="(row, rowIndex) in bodyDatas" :key="rowIndex">
 					<tr>
 						<template v-for="(item, itemIndex) in row" :key="itemIndex">
 							<td :class="getCellClass(item)" @mouseenter="dateMouseenterEvent(item)" @click="dateSelectEvent(item)">
 								<slot name="cell" v-bind="item">
 									<div class="sh-calendar-cell" :style="{ textAlign: align }">
-										<div class="sh-calendar-cell-head">{{ item.label }}</div>
+										<div class="sh-calendar-cell-head" :class="{ 'is-month': type === 'month' }">{{ item.label }}</div>
 										<div v-if="note" class="sh-calendar-cell-body" :style="{ height: noteHeight }">{{ noteMethod(item) }}</div>
 										<div v-if="festival" class="sh-calendar-cell-foot">{{ getLunarDate(item.date) }}</div>
 									</div>
@@ -73,7 +76,7 @@ export default defineComponent({
 	name: 'ShCalendar',
 	props: {
 		modelValue: [String, Number, Date],
-		type: { type: String, default: 'day' }, // day, month, year 暂时只支持day
+		type: { type: String, default: 'day' }, // day, month, year
 		startDay: { type: [String, Number], default: 1 },
 		headerAlign: { type: String, default: 'center' },
 		align: { type: String, default: 'center' },
@@ -99,6 +102,8 @@ export default defineComponent({
 		const { $vUtils } = proxy
 		const { emit, slots } = context
 
+		const yearSize = 12
+		const monthSize = 12
 		const headerHandles = [
 			{ code: 'prev', icon: 'vxe-icon-caret-left' },
 			{ code: 'current', icon: 'vxe-icon-dot' },
@@ -133,6 +138,55 @@ export default defineComponent({
 			const dateValue = computeDateValue.value
 			return dateValue ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0
 		})
+
+		const computeYearList = computed(() => {
+			const { selectMonth, currentDate } = reactData
+			const years = []
+			if (selectMonth && currentDate) {
+				const currFullYear = currentDate.getFullYear()
+				const selectFullYear = selectMonth.getFullYear()
+				const startYearDate = new Date(selectFullYear - (selectFullYear % yearSize), 0, 1)
+				for (let index = -4; index < yearSize + 4; index++) {
+					const date = $vUtils.getWhatYear(startYearDate, index, 'first')
+					const itemFullYear = date.getFullYear()
+					years.push({
+						date,
+						isCurrent: true,
+						isPrev: index < 0,
+						isNow: currFullYear === itemFullYear,
+						isNext: index >= yearSize,
+						year: itemFullYear,
+						label: `${itemFullYear}年`
+					})
+				}
+			}
+			return years
+		})
+		const computeMonthList = computed(() => {
+			const { selectMonth, currentDate } = reactData
+			const months = []
+			if (selectMonth && currentDate) {
+				const currFullYear = currentDate.getFullYear()
+				const currMonth = currentDate.getMonth()
+				const selFullYear = $vUtils.getWhatYear(selectMonth, 0, 'first').getFullYear()
+				for (let index = 0; index < monthSize; index++) {
+					const date = $vUtils.getWhatYear(selectMonth, 0, index)
+					const itemFullYear = date.getFullYear()
+					const itemMonth = date.getMonth()
+					const isPrev = itemFullYear < selFullYear
+					months.push({
+						date,
+						isPrev,
+						isCurrent: itemFullYear === selFullYear,
+						isNow: itemFullYear === currFullYear && itemMonth === currMonth,
+						isNext: !isPrev && itemFullYear > selFullYear,
+						month: itemMonth,
+						label: `${itemMonth + 1}月`
+					})
+				}
+			}
+			return months
+		})
 		const computeDayList = computed(() => {
 			const { selectMonth, currentDate } = reactData
 			const days = []
@@ -159,13 +213,13 @@ export default defineComponent({
 						isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
 						isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
 						isNext: !isPrev && selMonth !== itemMonth,
+						day: itemDate,
 						label: itemDate
 					})
 				}
 			}
 			return days
 		})
-
 		// 以下为日历需要
 		const tableConfig = computed(() => ({ cellspacing: 0, cellpadding: 0, border: 0 }))
 		const headers = computed(() => {
@@ -174,9 +228,13 @@ export default defineComponent({
 				return { value: day, label: props.weeks[day] }
 			})
 		})
-		const dayDatas = computed(() => {
-			const dayList = computeDayList.value
-			return $vUtils.chunk(dayList, 7)
+		const bodyDatas = computed(() => {
+			if ('month' === props.type) {
+				return $vUtils.chunk(computeMonthList.value, 3)
+			} else if ('year' === props.type) {
+				return $vUtils.chunk(computeYearList.value, 4)
+			}
+			return $vUtils.chunk(computeDayList.value, 7)
 		})
 		const computeDateValue = computed(() => {
 			const { inputValue } = reactData
@@ -189,8 +247,40 @@ export default defineComponent({
 			}
 			return val
 		})
-		const monthInfo = computed(() => $vUtils.toDateString(reactData.selectMonth, 'yyyy 年 MM 月'))
-		const dayInfo = computed(() => $vUtils.toDateString(reactData.currentDate, 'yyyyMMdd'))
+		const showHeader = computed(() => !['month', 'year'].includes(props.type))
+		const yearValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'yyyy'))
+		const monthValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'MM'))
+		const dayValue = computed(() => $vUtils.toDateString(reactData.selectMonth, 'dd'))
+		const yearSelectConfig = computed(() => {
+			const options = []
+			for (let index = 1880; index < 2116; index++) {
+				options.push({
+					value: index + '',
+					label: `${index}年`
+				})
+			}
+			return {
+				modelValue: yearValue.value,
+				options: options,
+				filterable: true,
+				style: { width: '85px' }
+			}
+		})
+		const monthSelectConfig = computed(() => {
+			const options = []
+			for (let index = 1; index < 13; index++) {
+				options.push({
+					value: index + '',
+					label: `${index}月`
+				})
+			}
+			return {
+				modelValue: monthValue.value,
+				options: options,
+				filterable: true,
+				style: { width: '75px' }
+			}
+		})
 		const lunarInfo = computed(() => {
 			let dayDate = reactData.inputValue || reactData.currentDate
 			let lunarDate = Lunar.fromDate(dayDate)
@@ -216,12 +306,7 @@ export default defineComponent({
 			emit('change', date)
 		}
 		const dateSelectItem = date => {
-			const { type } = props
-			if (type === 'month') {
-			} else if (type === 'year') {
-			} else {
-				dateChange(date)
-			}
+			dateChange(date)
 		}
 		const dateCheckMonth = date => {
 			const month = $vUtils.getWhatMonth(date, 0, 'first')
@@ -229,13 +314,29 @@ export default defineComponent({
 				reactData.selectMonth = month
 			}
 		}
-		const dateMoveDay = date => {
-			if (isDateDisabled(date)) return
+		const dateMoveDay = offsetDay => {
+			if (isDateDisabled({ date: offsetDay })) return
 			const dayList = computeDayList.value
-			if (!dayList.some(item => $vUtils.isDateSame(item.date, date.date, 'yyyyMMdd'))) {
-				dateCheckMonth(date.date)
+			if (!dayList.some(item => $vUtils.isDateSame(item.date, offsetDay, 'yyyyMMdd'))) {
+				dateCheckMonth(offsetDay)
 			}
-			dateParseValue(date.date)
+			dateParseValue(offsetDay)
+		}
+		const dateMoveMonth = offsetMonth => {
+			if (isDateDisabled({ date: offsetMonth })) return
+			const monthList = computeMonthList.value
+			if (!monthList.some(item => $vUtils.isDateSame(item.date, offsetMonth, 'yyyyMM'))) {
+				dateCheckMonth(offsetMonth)
+			}
+			dateParseValue(offsetMonth)
+		}
+		const dateMoveYear = offsetYear => {
+			if (isDateDisabled({ date: offsetYear })) return
+			const yearList = computeYearList.value
+			if (!yearList.some(item => $vUtils.isDateSame(item.date, offsetYear, 'yyyy'))) {
+				dateCheckMonth(offsetYear)
+			}
+			dateParseValue(offsetYear)
 		}
 		const dateSelectEvent = item => {
 			if (isDateDisabled(item)) return
@@ -243,13 +344,12 @@ export default defineComponent({
 		}
 		const dateMouseenterEvent = item => {
 			if (isDateDisabled(item)) return
-			const { datePanelType } = reactData
-			if (datePanelType === 'month') {
-				// dateMoveMonth(item.date)
-			} else if (datePanelType === 'year') {
-				// 	dateMoveYear(item.date)
+			if (props.type === 'month') {
+				dateMoveMonth(item.date)
+			} else if (props.type === 'year') {
+				dateMoveYear(item.date)
 			} else {
-				dateMoveDay(item)
+				dateMoveDay(item.date)
 			}
 		}
 		const dateMouseleaveEvent = () => {
@@ -285,8 +385,10 @@ export default defineComponent({
 		const getCellClass = item => {
 			const { panelValue } = reactData
 			const dateValue = computeDateValue.value
-			const matchFormat = 'yyyyMMdd'
-			const ymd = $vUtils.toDateString(item.date, matchFormat)
+			let matchFormat = 'yyyyMMdd'
+			if ('month' === props.type) matchFormat = 'yyyyMM'
+			else if ('year' === props.type) matchFormat = 'yyyy'
+			const ymd = $vUtils.toDateString(item.date, 'yyyyMMdd')
 			const lunarDate = Lunar.fromDate(item.date)
 			const holiday = HolidayUtil.getHoliday(ymd)
 			let rest = false
@@ -309,12 +411,16 @@ export default defineComponent({
 		const handleBtn = ({ code }) => {
 			try {
 				const { currentDate, selectMonth } = reactData
+				let getName = 'getWhatMonth'
+				let getSize = 1
+				if (['month', 'year'].includes(props.type)) getName = 'getWhatYear'
+				if (['year'].includes(props.type)) getSize = yearSize
 				switch (code) {
 					case 'prev':
-						reactData.selectMonth = $vUtils.getWhatMonth(selectMonth, -1, 'first')
+						reactData.selectMonth = $vUtils[getName](selectMonth, getSize * -1, 'first')
 						break
 					case 'next':
-						reactData.selectMonth = $vUtils.getWhatMonth(selectMonth, 1, 'first')
+						reactData.selectMonth = $vUtils[getName](selectMonth, getSize, 'first')
 						break
 					case 'current':
 						reactData.selectMonth = $vUtils.getWhatMonth(currentDate, 0, 'first')
@@ -334,7 +440,23 @@ export default defineComponent({
 		// 初始化
 		const initValue = () => {
 			reactData.currentDate = $vUtils.getWhatDay(Date.now(), 0, 'first')
-			reactData.selectMonth = $vUtils.getWhatMonth(reactData.currentDate, 0, 'first')
+			reactData.selectMonth = $vUtils.getWhatMonth(computeDateValue.value || reactData.currentDate, 0, 'first')
+		}
+		// 年度切换
+		const onYearChange = ({ value }) => {
+			const { selectMonth } = reactData
+			const selMonth = selectMonth.getMonth() + 1
+			const selDate = selectMonth.getDate()
+			const changeDate = `${value}-${selMonth}-${selDate}`
+			reactData.selectMonth = $vUtils.toStringDate(changeDate)
+		}
+		// 月份切换
+		const onMonthChange = ({ value }) => {
+			const { selectMonth } = reactData
+			const selYear = selectMonth.getFullYear()
+			const selDate = selectMonth.getDate()
+			const changeDate = `${selYear}-${value}-${selDate}`
+			reactData.selectMonth = $vUtils.toStringDate(changeDate)
 		}
 
 		onBeforeMount(() => {
@@ -349,13 +471,19 @@ export default defineComponent({
 		)
 
 		return {
+			reactData,
 			tableConfig,
+			yearSelectConfig,
+			monthSelectConfig,
 			headers,
-			dayDatas,
-			monthInfo,
-			dayInfo,
+			bodyDatas,
 			lunarInfo,
 			headerHandles,
+			computeYearList,
+			computeMonthList,
+			showHeader,
+			onYearChange,
+			onMonthChange,
 			getLunarDate,
 			getCellClass,
 			handleBtn,
@@ -439,6 +567,9 @@ export default defineComponent({
 			& + .sh-calendar-cell-foot {
 				padding-top: 0;
 			}
+			&.is-month {
+				padding: 20px 5px;
+			}
 		}
 		&-body {
 			overflow: auto;

package/packages/components/{global-components/sh-date → sh-date}/index.vue

@@ -13,9 +13,9 @@
 				</template>
 				<template #dropdown>
 					<div class="sh-date-content">
-						<sh-calendar v-model="rangeValue[0]" v-bind="startCalendarConfig"></sh-calendar>
+						<sh-calendar v-model="rangeValue[0]" v-bind="startCalendarConfig" @change="onCalendarChange($event, 1)"></sh-calendar>
 						<div style="min-width: 10px"></div>
-						<sh-calendar v-model="rangeValue[1]" v-bind="endCalendarConfig"></sh-calendar>
+						<sh-calendar v-model="rangeValue[1]" v-bind="endCalendarConfig" @change="onCalendarChange($event, 2)"></sh-calendar>
 					</div>
 				</template>
 			</vxe-pulldown>
@@ -78,6 +78,8 @@ export default defineComponent({
 		transfer: Boolean,
 		// 个性化参数
 		range: Boolean,
+		rangeFormat: String,
+		autoBlur: { type: Boolean, default: true },
 		separator: { type: String, default: '至' },
 		startPlaceholder: { type: String, default: '起始日期' },
 		endPlaceholder: { type: String, default: '截止日期' },
@@ -121,18 +123,32 @@ export default defineComponent({
 		const pulldownConfig = computed(() => {
 			return Object.assign({ transfer: true }, props.pulldown)
 		})
+		const calendarFormat = computed(() => {
+			if (props.rangeFormat) return props.rangeFormat
+			else if (props.type === 'month') return 'yyyy-MM'
+			else if (props.type === 'year') return 'yyyy'
+			return props.valueFormat
+		})
 		const rangeInputConfig = computed(() => ({ type: 'text', readonly: true }))
 		const startInputConfig = computed(() => {
 			let startValue = rangeValue.value[0] || ''
-			let startLabel = $vUtils.toDateString(startValue, props.labelFormat)
+			let startLabel = $vUtils.toDateString(startValue, calendarFormat.value)
 			return { ...rangeInputConfig.value, value: startLabel, placeholder: props.startPlaceholder }
 		})
 		const endInputConfig = computed(() => {
 			let endValue = rangeValue.value[1] || ''
-			let endLabel = $vUtils.toDateString(endValue, props.labelFormat)
+			let endLabel = $vUtils.toDateString(endValue, calendarFormat.value)
 			return { ...rangeInputConfig.value, value: endLabel, placeholder: props.endPlaceholder }
 		})
-		const calendarConfig = computed(() => ({ pulldown: true, style: { height: '100%' }, align: 'center', valueFormat: props.valueFormat }))
+		const calendarConfig = computed(() => {
+			return {
+				pulldown: true,
+				style: { height: '100%' },
+				align: 'center',
+				valueFormat: calendarFormat.value,
+				type: props.type
+			}
+		})
 		const startCalendarConfig = computed(() => {
 			let startValue = rangeValue.value[0] || ''
 			return {
@@ -175,12 +191,23 @@ export default defineComponent({
 			dispatch('blur')
 		}
 
+		const onCalendarChange = (date, type) => {
+			let valueList = rangeValue.value.filter(_ => _)
+			if (props.autoBlur && valueList.length === 2) {
+				pulldownValue.value = false
+				onHidePanel()
+			}
+		}
+
 		// 回调事件
 		const dispatch = (code, params) => {
-			if (code === 'value') {
-				emit('update:modelValue', rangeValue.value)
-			} else if (props.range) {
-				emit(code, { value: rangeValue.value, params })
+			if (props.range) {
+				let formarValue = rangeValue.value.map(item => $vUtils.toDateString(item, calendarFormat.value))
+				if (code === 'value') {
+					emit('update:modelValue', formarValue)
+				} else {
+					emit(code, { value: formarValue, params })
+				}
 			} else {
 				if (code === 'change') {
 					emit('update:modelValue', params.value)
@@ -213,6 +240,7 @@ export default defineComponent({
 			onRangeFocus,
 			onHidePanel,
 			onRangeClear,
+			onCalendarChange,
 			dispatch
 		}
 	}