sh-view 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {
@@ -26,19 +26,18 @@
     "core-js": "^3.32.0",
     "countup.js": "^1.9.3",
     "cron-parser": "^4.8.1",
-    "element-resize-detector": "^1.2.0",
     "exceljs": "^4.3.0",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
     "popper.js": "^1.16.1",
-    "sh-tools": "^1.4.0",
+    "sh-tools": "^1.5.0",
     "tinymce": "^5.10.5",
     "vue": "^3.3.4",
     "vue-demi": "^0.13.11",
     "vue-masonry": "^0.16.0",
     "vue-router": "^4.2.2",
     "vuex": "^4.1.0",
-    "vxe-table": "^4.5.5",
+    "vxe-table": "^4.5.6",
     "vxe-table-plugin-export-pdf": "^3.0.4",
     "vxe-table-plugin-export-xlsx": "^3.0.5",
     "xe-clipboard": "^1.10.2",

package/packages/components/global-components/sh-card/index.vue

@@ -103,12 +103,12 @@ export default {
 		}
 	}
 	.sh-card-body {
+		display: block;
 		border-top: 1px solid var(--vxe-table-border-color);
-		@include layoutFlex;
 	}
 	.sh-card-foot {
-		border-top: 1px solid var(--vxe-table-border-color);
 		@include layoutFlex;
+		border-top: 1px solid var(--vxe-table-border-color);
 	}
 	&.large {
 		.sh-card-head .sh-card-head-title {

package/packages/components/global-components/sh-col/index.vue

@@ -51,13 +51,14 @@ export default {
 					[`${prefixCls}-pull-${this.pull}`]: this.pull
 				}
 			]
-			;['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
+			let sizeList = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+			sizeList.forEach(size => {
 				if (typeof this[size] === 'number') {
 					classList.push(`${prefixCls}-span-${size}-${this[size]}`)
 				} else if (typeof this[size] === 'object') {
 					let props = this[size]
 					Object.keys(props).forEach(prop => {
-						classList.push(prop !== 'span' ? `${prefixCls}-${size}-${prop}-${props[prop]}` : `${prefixCls}-${size}-span-${props[prop]}`)
+						classList.push(`${prefixCls}-${size}-${prop}-${props[prop]}`)
 					})
 				}
 			})

package/packages/components/global-components/sh-split/index.vue

@@ -116,7 +116,9 @@ export default {
 		}
 	},
 	created() {},
-	mounted() {},
+	mounted() {
+		this.computeOffset()
+	},
 	beforeUnmount() {},
 	methods: {
 		px2percent(numerator, denominator) {

package/packages/components/global-components/sh-tabs/index.vue

@@ -246,7 +246,7 @@ export default {
 			overflow: hidden;
 		}
 		&-inner {
-			display: block;
+			display: flex;
 			width: fit-content;
 			white-space: nowrap;
 			transition: transform 0.2s ease-in-out;
@@ -294,7 +294,7 @@ export default {
 			}
 			.sh-tab-item-active {
 				background-color: var(--vxe-primary-color);
-				border-color: var(--vxe-primary-darken-color);
+				border-color: var(--vxe-primary-color);
 				color: #fff !important;
 			}
 		}

package/packages/components/global-components/sh-tag/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="sh-tag" :class="classes" :style="[borderStyle, backgroundStyle]" @click.stop="check">
-		<span v-if="type === 'dot'" class="sh-tag-dot" :style="[backgroundStyle]"></span>
+		<span v-if="type === 'dot'" class="sh-tag-other"><span class="sh-tag-dot" :style="[backgroundStyle]"></span></span>
 		<span class="sh-tag-text" :class="textClasses" :style="[fontStyle]"><slot></slot></span>
-		<a v-if="closable" class="sh-tag-close" :style="[borderStyle]" @click="close">
+		<a v-if="closable" class="sh-tag-other sh-tag-close" :style="[borderStyle]" @click="close">
 			<slot name="close"><sh-icon type="ios-close"></sh-icon></slot>
 		</a>
 	</div>
@@ -118,7 +118,7 @@ export default {
 $default-color: #f7f7f7;
 .sh-tag {
 	display: inline-flex;
-	align-items: center;
+	align-items: stretch;
 	margin: 2px 4px 2px 0;
 	border: 1px solid var(--vxe-table-border-color);
 	border-radius: var(--vxe-border-radius);
@@ -141,13 +141,17 @@ $default-color: #f7f7f7;
 			border: none !important;
 		}
 	}
+	&-other {
+		display: inline-flex;
+		align-items: center;
+	}
 	&-dot {
 		display: inline-block;
 		width: 12px;
 		height: 12px;
 		border-radius: 50%;
 		background-color: #ccc;
-		margin: 0 5px 0 12px;
+		margin: 0 2px 0 8px;
 	}
 	&-text {
 		padding: 0 8px;

package/packages/components/index.js

@@ -6,7 +6,6 @@ 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/index.vue'
@@ -41,7 +40,6 @@ const components = {
 	ShCol,
 	ShCorner,
 	ShCountTo,
-	ShDate,
 	ShDrawer,
 	ShEmpty,
 	ShForm,

package/packages/components/other-components/sh-menu/index.vue

@@ -0,0 +1,304 @@
+<template>
+	<div class="sh-menu" :class="classes">
+		<div v-clickout="handleOut" class="sh-menu-inner">
+			<template v-for="(item, index) in options" :key="index">
+				<menuGroupContent :menu-item="item" />
+			</template>
+		</div>
+	</div>
+</template>
+
+<script>
+import menuGroupContent from './menu-group-content.vue'
+export default {
+	name: 'ShMenu',
+	components: {
+		menuGroupContent
+	},
+	provide() {
+		return {
+			MenuInstance: this
+		}
+	},
+	props: {
+		modelValue: {
+			type: String
+		},
+		mode: {
+			type: String,
+			default: 'vertical' // horizontal
+		},
+		indent: {
+			type: Number,
+			default: 20
+		},
+		accordion: {
+			type: Boolean,
+			default: true
+		},
+		theme: {
+			type: Boolean
+		},
+		fix: {
+			type: Boolean
+		},
+		collapsed: {
+			type: Boolean
+		},
+		options: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		labelFormat: {
+			type: Function
+		}
+	},
+	emits: ['update:modelValue', 'change', 'expand'],
+	data() {
+		return {
+			activeName: this.modelValue,
+			activeNames: [],
+			openedNames: []
+		}
+	},
+	computed: {
+		classes() {
+			return {
+				theme: this.theme,
+				fix: this.fix,
+				collapsed: this.collapsed,
+				[`${this.mode}`]: this.mode
+			}
+		}
+	},
+	watch: {
+		modelValue(to, from) {
+			this.resetMenu()
+		}
+	},
+	mounted() {
+		this.resetMenu()
+	},
+	methods: {
+		// 重新渲染菜单
+		resetMenu() {
+			this.activeName = this.modelValue
+			this.resetExpand(this.activeName, true)
+		},
+		resetExpand(menuName, mount) {
+			let activeNames = []
+			let parentTree = this.$vUtils.searchTree(this.options, item => item.name === menuName)
+			this.$vUtils.eachTree(parentTree, item => {
+				activeNames.push(item.name)
+			})
+			if (mount) {
+				this.activeNames = activeNames
+				if (this.collapsed) return
+			}
+			// 过滤掉所有子节点
+			let menuIndex = activeNames.findIndex(item => item === menuName)
+			let parentNames = activeNames.filter((item, itemIndex) => menuIndex >= itemIndex)
+			if (!this.accordion) parentNames = Array.from(new Set(this.openedNames.concat(parentNames)))
+			this.openedNames = parentNames
+		},
+		onMenuSelect(menu) {
+			this.handleOut()
+			this.$emit('change', menu)
+		},
+		onMenuExpand(expand, menu) {
+			this.$emit('expand', expand, menu)
+			if (!expand) {
+				this.openedNames = this.openedNames.filter(name => name !== menu.name)
+				return
+			}
+			this.resetExpand(menu.name)
+		},
+		handleOut() {
+			if (!this.collapsed && this.mode === 'vertical') return
+			this.openedNames = []
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$textColor: var(--vxe-font-color);
+$textActive: var(--vxe-primary-color);
+$mainBgColor: var(--vxe-table-body-background-color);
+$expandBgColor: var(--vxe-table-header-background-color);
+
+$textDkColor: hsla(0, 0%, 100%, 0.6);
+$textDkActive: #fff;
+$mainDkBgColor: var(--vxe-primary-color);
+$expandDkBgColor: var(--vxe-primary-darken-color);
+.sh-menu {
+	position: relative;
+	background-color: $mainBgColor;
+	&.theme {
+		background-color: $mainDkBgColor;
+		.sh-menu-group {
+			&.is__expand {
+				background: $expandDkBgColor;
+				& > .sh-menu-item {
+					color: $textDkActive;
+				}
+			}
+			&.is__active {
+				& > .sh-menu-item {
+					color: $textDkActive;
+				}
+			}
+			& > .sh-menu-group-dropdown,
+			& > .sh-menu-group-dropright {
+				background-color: $mainDkBgColor;
+			}
+		}
+		.sh-menu-item {
+			color: $textDkColor;
+			&:hover {
+				color: $textDkActive;
+				background: var(--vxe-primary-lighten-color) !important;
+			}
+			&.sh-menu-item-active {
+				color: $textDkActive;
+				background: var(--vxe-primary-lighten-color);
+				&:after {
+					background: $textDkColor;
+				}
+			}
+		}
+	}
+	&.fix {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+	&.horizontal {
+		.sh-menu-inner {
+			display: flex;
+			align-items: center;
+			height: 100%;
+		}
+		.sh-menu-item {
+			height: 100%;
+			&.sh-menu-item-active {
+				&:after {
+					width: 100%;
+					height: 3px;
+					top: auto;
+					bottom: 0;
+				}
+			}
+			&.sh-menu-item-level {
+				.sh-menu-item-arrow {
+					transform: rotate(90deg);
+					transform-origin: center;
+				}
+			}
+		}
+		.sh-menu-group {
+			height: 100%;
+			&.is__expand {
+				& > .sh-menu-item-level {
+					.sh-menu-item-arrow {
+						transform: rotate(-90deg);
+						transform-origin: center;
+					}
+				}
+			}
+		}
+	}
+	&.collapsed {
+		.sh-menu-item.sh-menu-item-level {
+			flex-wrap: wrap;
+			text-align: center;
+			padding: 5px;
+			&.sh-menu-item-active {
+				&:after {
+					display: none;
+				}
+			}
+			.sh-menu-item-icon {
+				margin-right: 0;
+				margin-bottom: 3px;
+				flex: 1;
+			}
+			.sh-menu-item-title {
+				min-width: 100%;
+			}
+		}
+	}
+	.sh-menu-group {
+		position: relative;
+		&.is__expand {
+			background: $expandBgColor;
+			& > .sh-menu-item {
+				color: $textActive;
+				.sh-menu-item-arrow {
+					transform: rotate(90deg);
+					transform-origin: center;
+				}
+			}
+		}
+		&.is__active {
+			& > .sh-menu-item {
+				color: $textActive;
+			}
+		}
+		& > .sh-menu-group-dropdown,
+		& > .sh-menu-group-dropright {
+			position: fixed;
+			line-height: 1.5;
+			background-color: $mainBgColor;
+			box-shadow: var(--box-shadow);
+			overflow: auto;
+			z-index: 1000;
+		}
+	}
+	.sh-menu-item {
+		padding: 10px 12px;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		cursor: pointer;
+		position: relative;
+		user-select: none;
+		color: $textColor;
+		text-align: left;
+		&:hover {
+			color: $textActive;
+		}
+		&.sh-menu-item-active {
+			color: $textActive;
+			background: var(--primary-weak-color);
+			&:after {
+				width: 3px;
+				content: '';
+				position: absolute;
+				top: 0;
+				right: 0;
+				height: 100%;
+				background: var(--vxe-primary-color);
+			}
+		}
+		.sh-menu-item-icon {
+			margin-right: 8px;
+		}
+		.sh-menu-item-title {
+			flex: 1;
+			white-space: nowrap;
+		}
+		.sh-menu-item-arrow {
+			margin-left: 5px;
+			transition: 0.1s all ease-in-out;
+		}
+	}
+}
+</style>

package/packages/components/other-components/sh-menu/menu-group-content.vue

@@ -0,0 +1,122 @@
+<template>
+	<div v-if="showChildren(menuItem)" class="sh-menu-group" :class="groupClass">
+		<menuItemContent ref="groupItem" :menu-item="menuItem" :menu-level="menuLevel" :arrow="isArrow" @click="onMenuExpand(!expand)" />
+		<div v-show="expand" ref="groupList" class="sh-menu-group-list" :class="groupListClass" :style="groupListStyle">
+			<template v-for="(item, index) in menuItem.children" :key="`sh-menu-${menuLevel}-${index}`">
+				<menuGroupContent :menu-item="item" :menu-level="menuNextLevel" />
+			</template>
+		</div>
+	</div>
+	<template v-else>
+		<menuItemContent :menu-item="menuItem" :menu-level="menuLevel" @click.stop="onMenuClick" />
+	</template>
+</template>
+
+<script>
+import menuItemContent from './menu-item-content.vue'
+export default {
+	name: 'MenuGroupContent',
+	components: {
+		menuItemContent
+	},
+	inject: {
+		MenuInstance: {
+			default: null
+		}
+	},
+	props: {
+		menuLevel: {
+			type: Number,
+			default: 0
+		},
+		menuItem: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	data() {
+		return {
+			expand: false,
+			groupListStyle: {}
+		}
+	},
+	computed: {
+		menuNextLevel() {
+			return this.menuLevel + 1
+		},
+		isArrow() {
+			return this.MenuInstance.collapsed ? !!this.menuLevel : true
+		},
+		groupClass() {
+			return {
+				is__level: !this.menuLevel,
+				is__active: this.MenuInstance.activeNames.includes(this.menuItem.name),
+				is__expand: this.expand
+			}
+		},
+		groupListClass() {
+			const { mode, collapsed } = this.MenuInstance
+			return {
+				'sh-menu-group-dropdown': mode === 'horizontal',
+				'sh-menu-group-dropright': mode === 'vertical' && collapsed
+			}
+		}
+	},
+	watch: {
+		'MenuInstance.openedNames'(names) {
+			this.setMenuExpand()
+		}
+	},
+	mounted() {
+		this.setMenuExpand()
+	},
+	methods: {
+		setMenuExpand() {
+			let names = this.MenuInstance.openedNames
+			this.expand = names.includes(this.menuItem.name)
+			const { mode, collapsed } = this.MenuInstance
+			if (this.expand && this.$refs.groupItem && ((mode === 'vertical' && collapsed) || mode === 'horizontal')) {
+				this.$nextTick(() => {
+					const { left, right, top, bottom } = this.$refs.groupItem.$refs?.shMenuItem.getBoundingClientRect()
+					const { offsetHeight, offsetWidth } = this.$refs.groupList
+					const winWidth = window.innerWidth
+					const winHeight = window.innerHeight
+					if (mode === 'vertical') {
+						let groupStyle = { left: `${right}px` }
+						if (offsetHeight >= winHeight) {
+							groupStyle.top = '10px'
+							groupStyle.bottom = '10px'
+						} else if (top + offsetHeight >= winHeight) {
+							groupStyle.bottom = '10px'
+						} else {
+							groupStyle.top = `${top}px`
+						}
+						this.groupListStyle = groupStyle
+					} else {
+						let groupStyle = { top: `${this.menuLevel ? top : bottom}px` }
+						if (right + offsetWidth >= winWidth) {
+							groupStyle.right = '10px'
+						} else {
+							groupStyle.left = `${this.menuLevel ? right : left}px`
+						}
+						this.groupListStyle = groupStyle
+					}
+				})
+			}
+		},
+		showChildren(item) {
+			return item.children && item.children.length > 0
+		},
+		onMenuClick() {
+			this.MenuInstance.onMenuSelect(this.menuItem)
+		},
+		onMenuExpand(value) {
+			this.MenuInstance.onMenuExpand(value, this.menuItem)
+		}
+	}
+}
+</script>
+
+<style scoped></style>

package/packages/components/other-components/sh-menu/menu-item-content.vue

@@ -0,0 +1,61 @@
+<template>
+	<div ref="shMenuItem" class="sh-menu-item" :class="itemClass" :style="itemStyle">
+		<sh-icon v-if="iconType" class="sh-menu-item-icon" :type="iconType"></sh-icon>
+		<span class="sh-menu-item-title">{{ formatTitle(menuItem) }}</span>
+		<sh-icon v-if="arrow" class="sh-menu-item-arrow" type="ios-arrow-forward"></sh-icon>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'MenuItemBox',
+	inject: {
+		MenuInstance: {
+			default: null
+		}
+	},
+	props: {
+		arrow: Boolean,
+		menuLevel: {
+			type: Number
+		},
+		menuItem: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	computed: {
+		defaultIcon() {
+			if (!this.menuLevel || this.menuLevel < 2) return 'md-folder'
+			else if (this.menuLevel === 2) return 'md-bookmark'
+			else return ''
+		},
+		iconType() {
+			return this.menuItem.meta?.icon || this.menuItem.icon || this.defaultIcon
+		},
+		itemClass() {
+			return {
+				'sh-menu-item-level': !this.menuLevel,
+				'sh-menu-item-active': this.MenuInstance.activeName === this.menuItem.name
+			}
+		},
+		itemStyle() {
+			let result = {}
+			const { mode, collapsed, indent } = this.MenuInstance
+			if (mode === 'vertical' && !collapsed && this.menuLevel) {
+				result.paddingLeft = `${indent * this.menuLevel}px`
+			}
+			return result
+		},
+		itemTitle() {
+			const { labelField, labelFormat } = this.MenuInstance
+			return labelFormat ? labelFormat(this.menuItem) : this.$vUtils.get(this.menuItem, labelField)
+		}
+	},
+	methods: {}
+}
+</script>
+
+<style scoped></style>

package/packages/components/other-components/sh-menu-card/index.vue

@@ -180,6 +180,7 @@ export default {
 	justify-content: space-between;
 	align-items: center;
 	flex-wrap: wrap;
+	width: 100%;
 	> div {
 		width: 47%;
 		display: inline-flex;

package/packages/directive/module/resize.js

@@ -1,19 +1,159 @@
-import elementResizeDetectorMaker from 'element-resize-detector'
+/**
+ * 是否是IE浏览器的判断
+ * @function
+ * @return {Boolean} 是否IE浏览器的判断结果
+ */
+function isIE() {
+	let _isIE = false
+	if (typeof navigator !== 'undefined') {
+		_isIE = navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/Edge/)
+	}
+	return _isIE
+}
+
+var lastTime = 0
+var vendors = ['ms', 'moz', 'webkit', 'o']
+if (typeof window === 'undefined') {
+	global.window = {}
+}
+for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+	window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
+	window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']
+}
+
+if (!window.requestAnimationFrame) {
+	window.requestAnimationFrame = function (callback, element) {
+		var currTime = new Date().getTime()
+		var timeToCall = Math.max(0, 16 - (currTime - lastTime))
+		var id = window.setTimeout(function () {
+			callback(currTime + timeToCall)
+		}, timeToCall)
+		lastTime = currTime + timeToCall
+		return id
+	}
+}
+
+if (!window.cancelAnimationFrame) {
+	window.cancelAnimationFrame = function (id) {
+		clearTimeout(id)
+	}
+}
+
+/**
+ * requestAnimationFrame的兼容处理
+ */
+const $requestAnimationFrame = window.requestAnimationFrame
+
+/**
+ * cancelAnimationFrame的兼容处理
+ */
+const $cancelAnimationFrame = window.cancelAnimationFrame
+
+/**
+ * resize处理器，此处回调元素v-resize的方法
+ * @param event {Event} resizeTrigge的resize事件传递，来自{@link registereResizeHandler}方法中产生的事件源
+ * @function
+ */
+function resizeHandler(event) {
+	event.__currentTarget__ = this.__container__
+	this.__resize__handler__.call(
+		this,
+		{
+			width: this.offsetWidth,
+			height: this.offsetHeight
+		},
+		event
+	)
+}
+
+/**
+ * 优化resize监听
+ * @param event {Event} resizeTrigge的resize事件传递，来自{@link registereResizeHandler}方法中产生的事件源
+ * @function
+ */
+function resizeTriggerListener(event) {
+	const _resizeTrigger = event.currentTarget || event.srcElement
+	if (_resizeTrigger.__requestAnimationFrameID__) {
+		$cancelAnimationFrame(_resizeTrigger.__requestAnimationFrameID__)
+	}
+	_resizeTrigger.__requestAnimationFrameID__ = $requestAnimationFrame(resizeHandler.bind(this, event))
+}
+
+/**
+ * 注册resize处理方法
+ * @function
+ */
+function registereResizeHandler() {
+	if (document.attachEvent) {
+		this.__container__.attachEvent('onresize', resizeHandler.bind(this))
+	} else {
+		this.contentDocument.defaultView.addEventListener('resize', resizeTriggerListener.bind(this))
+	}
+}
+
+/**
+ * 创建resize真正的触发器
+ * @function
+ */
+function createResizeTrigger() {
+	const object = document.createElement('object')
+	object.setAttribute('aria-hidden', 'true')
+	object.setAttribute('tabindex', -1)
+	const objectStyle = `
+    display: block !important; 
+    position: absolute !important; 
+    top: 0 !important; 
+    left: 0 !important; 
+    width: 100% !important; 
+    height: 100% !important; 
+    overflow: hidden !important; 
+    pointer-events: none !important; 
+    z-index: -1 !important; 
+    opacity: 0 !important;
+  `
+	object.setAttribute('style', objectStyle)
+	object.type = 'text/html'
+	return object
+}
 
 export default {
-	// 使用 bind，会在初始化时调用两次handler
-	mounted(el, binding) {
-		function resizeHandler(e) {
-			binding.value(e)
+	beforeMount(el, binding, vnode, oldVnode) {
+		// 获得真正的触发器
+		el.__resizeTrigger__ = createResizeTrigger()
+		el.__resizeTrigger__.__container__ = el
+		el.__resizeTrigger__.__resize__handler__ = binding.value
+		el.__resizeTrigger__.onload = registereResizeHandler
+		// 将真正的触发器作为子元素添加到当前元素
+		const _isIE = isIE()
+		_isIE && el.appendChild(el.__resizeTrigger__)
+		el.__resizeTrigger__.data = 'about:blank'
+		!_isIE && el.appendChild(el.__resizeTrigger__)
+	},
+	mounted(el, binding, vnode, oldVnode) {
+		if (getComputedStyle(el).position === 'static') {
+			el.style.setProperty('position', 'relative', 'important')
 		}
-		el.__resizeHandler__ = resizeHandler
-		el.__observer__ = elementResizeDetectorMaker()
-		el.__observer__.listenTo(el, resizeHandler)
 	},
-	updated() {},
-	unmounted(el, binding) {
-		el.__observer__.removeListener(el, el.__resizeHandler__)
-		delete el.__resizeHandler__
-		delete el.__observer__
+	updated(el, binding, vnode, oldVnode) {
+		var inserted = false
+		for (var i = 0, length = el.children.length; i < length; i++) {
+			if (el.children[i] === el.__resizeTrigger__) {
+				inserted = true
+			}
+		}
+		if (!inserted) {
+			var _isIE = isIE()
+			_isIE && el.appendChild(el.__resizeTrigger__)
+			el.__resizeTrigger__.data = 'about:blank'
+			!_isIE && el.appendChild(el.__resizeTrigger__)
+		}
+	},
+	unmounted(el, binding, vnode, oldVnode) {
+		if (document.attachEvent) {
+			el.detachEvent('onresize', resizeHandler)
+		} else if (el.__resizeTrigger__ && el.__resizeTrigger__.contentDocument) {
+			el.__resizeTrigger__.contentDocument.defaultView.removeEventListener('resize', resizeTriggerListener)
+			el.__resizeTrigger__ = !el.removeChild(el.__resizeTrigger__)
+		}
 	}
 }

package/packages/components/global-components/sh-date/index.vue

@@ -1,40 +0,0 @@
-<template>
-	<div class="sh-date">
-		<div class="sh-date-input" @click="inputClick">{{ dataValue }}</div>
-		<div class="sh-date-drop">
-			<vxe-input ref="inputA" v-model="value1" type="date"></vxe-input>
-			<vxe-input ref="inputB" v-model="value2" type="date"></vxe-input>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShDate',
-	emits: ['update:modelValue'],
-	data() {
-		return {
-			dataValue: '',
-			value1: '',
-			value2: ''
-		}
-	},
-	computed: {},
-	methods: {
-		inputClick() {
-			this.$refs.inputA.focus()
-			this.$refs.inputB.focus()
-		}
-	}
-}
-</script>
-
-<style scoped lang="scss">
-.sh-date {
-	&-input {
-		width: 300px;
-		height: 50px;
-		border: 1px solid #ccc;
-	}
-}
-</style>