sh-view 2.8.1 → 2.8.3

package/packages/components/sh-drawer/index.vue

@@ -1,579 +1,579 @@
-<template>
-	<teleport to="body" :disabled="!transfer">
-		<div class="sh-drawer-box">
-			<transition name="fade">
-				<div v-show="visible" v-if="mask" class="sh-drawer-mask" :class="{ 'sh-drawer-mask-inner': inner }" :style="maskStyle" @click="handleMask"></div>
-			</transition>
-			<div class="sh-drawer-wrap" :class="wrapClasses" @click="handleWrapClick">
-				<transition :name="transitionName">
-					<div v-show="visible" ref="drawerRef" class="sh-drawer" :class="classes" :style="mainStyles">
-						<div ref="drawerContent" class="sh-drawer-content" :class="{ 'sh-drawer-content-no-mask': !mask }">
-							<a v-if="closable" class="sh-drawer-close" @click="close">
-								<slot name="close">
-									<sh-icon type="ios-close"></sh-icon>
-								</slot>
-							</a>
-							<div v-if="showHead" class="sh-drawer-header">
-								<slot name="header">
-									<div class="sh-drawer-header-inner">{{ title }}</div>
-								</slot>
-							</div>
-							<div class="sh-drawer-body" :style="styles">
-								<slot v-if="modelValue || !destroyOnClose"></slot>
-							</div>
-							<div v-if="slots.footer" class="sh-drawer-footer">
-								<slot name="footer"></slot>
-							</div>
-						</div>
-						<div v-if="draggable" class="sh-drawer-drag" :class="'sh-drawer-drag-' + placement" @mousedown="handleTriggerMousedown">
-							<slot name="trigger">
-								<div class="sh-drawer-drag-move-trigger">
-									<div class="sh-drawer-drag-move-trigger-point"><i></i><i></i><i></i><i></i><i></i></div>
-								</div>
-							</slot>
-						</div>
-					</div>
-				</transition>
-			</div>
-		</div>
-	</teleport>
-</template>
-
-<script>
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, getCurrentInstance, computed } from 'vue'
-import useScrollbar from './scrollbar'
-export default defineComponent({
-	name: 'ShDrawer',
-	props: {
-		modelValue: {
-			type: Boolean,
-			default: false
-		},
-		title: {
-			type: String
-		},
-		width: {
-			type: [Number, String],
-			default: 256
-		},
-		height: {
-			type: [Number, String],
-			default: 256
-		},
-		closable: {
-			type: Boolean,
-			default: true
-		},
-		maskClosable: {
-			type: Boolean,
-			default: true
-		},
-		mask: {
-			type: Boolean,
-			default: true
-		},
-		maskStyle: {
-			type: Object
-		},
-		styles: {
-			type: Object
-		},
-		scrollable: {
-			type: Boolean,
-			default: false
-		},
-		placement: {
-			type: String,
-			default: 'right' // 'left', 'right', 'top', 'bottom'
-		},
-		zIndex: {
-			type: Number,
-			default: 1000
-		},
-		transfer: {
-			type: Boolean
-		},
-		className: {
-			type: String
-		},
-		inner: {
-			type: Boolean,
-			default: false
-		},
-		draggable: {
-			type: Boolean,
-			default: false
-		},
-		destroyOnClose: {
-			type: Boolean,
-			default: false
-		},
-		beforeClose: Function
-	},
-	emits: ['update:modelValue', 'close', 'resize-width', 'visible-change', 'drag'],
-	setup(props, context) {
-		const vm = getCurrentInstance()
-		const { $vUtils } = vm.proxy
-		const { emit, slots } = context
-		const drawerRef = ref()
-		const drawerContent = ref()
-
-		const visible = ref(props.modelValue)
-		const wrapShow = ref(false)
-		const showHead = ref(true)
-		const canMove = ref(false)
-		const dragWidth = ref(props.width)
-		const dragHeight = ref(props.height)
-		const wrapperWidth = ref(props.width)
-		const wrapperHeight = ref(props.height)
-		const wrapperLeft = ref(0)
-		const wrapperTop = ref(0)
-		const minWidth = ref(256)
-		const minHeight = ref(256)
-		const id = ref($vUtils.randomStr(6))
-		const tableList = ref([])
-		const sliderList = ref([])
-		let timer = null
-
-		const isHorizontal = computed(() => ['left', 'right'].includes(props.placement))
-		const wrapClasses = computed(() => {
-			return {
-				'sh-drawer-hidden': !wrapShow.value,
-				'sh-drawer-no-mask': !props.mask,
-				'sh-drawer-wrap-inner': props.inner,
-				'sh-drawer-wrap-dragging': canMove.value,
-				[`${props.className}`]: !!props.className
-			}
-		})
-		const mainStyles = computed(() => {
-			let style = {}
-			if (isHorizontal.value) {
-				const width = parseInt(dragWidth.value)
-				const styleWidth = {
-					width: width <= 100 ? `${width}%` : `${width}px`
-				}
-				Object.assign(style, styleWidth)
-			} else {
-				const height = parseInt(dragHeight.value)
-				const styleHeight = {
-					height: height <= 100 ? `${height}%` : `${height}px`
-				}
-				Object.assign(style, styleHeight)
-			}
-			return style
-		})
-		const classes = computed(() => {
-			return {
-				[`sh-drawer-${props.placement}`]: true,
-				'sh-drawer-no-header': !showHead.value,
-				'sh-drawer-inner': props.inner
-			}
-		})
-		const transitionName = computed(() => {
-			if (isHorizontal.value) return `move-${props.placement}`
-			else if (props.placement === 'top') return 'move-up'
-			else return 'move-down'
-		})
-
-		const { addScrollEffect, removeScrollEffect } = useScrollbar(props)
-
-		const close = () => {
-			if (!props.beforeClose) {
-				return handleClose()
-			}
-			const before = props.beforeClose()
-			if (before && before.then) {
-				before.then(() => {
-					handleClose()
-				})
-			} else {
-				handleClose()
-			}
-		}
-		const handleClose = () => {
-			visible.value = false
-			emit('update:modelValue', false)
-			emit('close')
-		}
-		const handleMask = () => {
-			if (canMove.value) return
-			if (props.maskClosable && props.mask) {
-				close()
-			}
-		}
-		const handleWrapClick = event => {
-			const className = event.target.getAttribute('class')
-			if (className && className.indexOf('sh-drawer-wrap') > -1) handleMask()
-		}
-		const handleMousemove = event => {
-			if (!canMove.value || !props.draggable || !visible.value) return
-			// 更新容器距离
-			handleSetWrapper()
-			if (isHorizontal.value) {
-				const left = event.pageX - wrapperLeft.value
-				// 如果抽屉方向为右边，宽度计算需用容器宽度减去left
-				let width = props.placement === 'right' ? wrapperWidth.value - left : left
-				// 限定最小宽度
-				width = Math.max(width, parseFloat(minWidth.value))
-				event.atMin = width === parseFloat(minWidth.value)
-				// 如果当前width不大于100，视为百分比
-				if (width <= 100) width = (width / wrapperWidth.value) * 100
-				if (width >= window.innerWidth) width = window.innerWidth
-				dragWidth.value = width
-				emit('resize-width', parseInt(dragWidth.value))
-				emit('drag', 'dragging', parseInt(dragWidth.value))
-			} else {
-				const top = event.pageY - wrapperTop.value
-				// 如果抽屉方向为下面，宽度计算需用容器宽度减去left
-				let heigth = props.placement === 'bottom' ? wrapperHeight.value - top : top
-				// 限定最小高度
-				heigth = Math.max(heigth, parseFloat(minHeight.value))
-				event.atMin = heigth === parseFloat(minHeight.value)
-				// 如果当前heigth不大于100，视为百分比
-				if (heigth <= 100) heigth = (heigth / wrapperHeight.value) * 100
-				if (heigth >= window.innerHeight) heigth = window.innerHeight
-				dragHeight.value = heigth
-				emit('resize-width', parseInt(dragHeight.value))
-				emit('drag', 'dragging', parseInt(dragHeight.value))
-			}
-		}
-		const handleSetWrapper = () => {
-			const { width, height, left, top } = drawerRef.value.getBoundingClientRect()
-			if (isHorizontal.value) {
-				wrapperWidth.value = width
-				wrapperLeft.value = left
-			} else {
-				wrapperHeight.value = height
-				wrapperTop.value = top
-			}
-		}
-		const handleMouseup = () => {
-			if (!props.draggable || !visible.value) return
-			setTimeout(() => {
-				canMove.value = false
-			})
-			emit('drag', 'end')
-		}
-		const handleTriggerMousedown = () => {
-			canMove.value = true
-			// 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
-			window.getSelection().removeAllRanges()
-			emit('drag', 'start')
-		}
-		const addDrawer = () => {
-			const root = vm.root
-			if (!root.drawerList) root.drawerList = []
-			root.drawerList.push({
-				id: id.value,
-				drawer: vm
-			})
-		}
-		const removeDrawer = () => {
-			const root = vm.root
-			if (!root.drawerList) return
-			const index = root.drawerList.findIndex(item => item.id === id.value)
-			root.drawerList.splice(index, 1)
-		}
-
-		watch(
-			() => props.modelValue,
-			value => {
-				visible.value = value
-			}
-		)
-		watch(
-			() => visible.value,
-			val => {
-				if (val === false) {
-					timer = setTimeout(() => {
-						wrapShow.value = false
-						const drawers = vm.root.drawerList.map(item => item.drawer)
-						const otherDrawers = drawers.filter(item => item.id !== id.value)
-						const isScrollDrawer = otherDrawers.some(item => item.visible && !item.scrollable)
-						if (!isScrollDrawer) {
-							removeScrollEffect()
-						}
-					}, 300)
-				} else {
-					if (timer) clearTimeout(timer)
-					wrapShow.value = true
-					if (!props.scrollable) {
-						addScrollEffect()
-					}
-				}
-				tableList.value.forEach(item => {
-					item.table.handleOnVisibleChange(val)
-				})
-				sliderList.value.forEach(item => {
-					item.slider.handleOnVisibleChange(val)
-				})
-				emit('visible-change', val)
-			}
-		)
-		watch(
-			() => props.scrollable,
-			val => {
-				if (!val) {
-					addScrollEffect()
-				} else {
-					removeScrollEffect()
-				}
-			}
-		)
-		watch(
-			() => props.title,
-			val => {
-				if (slots.header === undefined) {
-					showHead.value = !!val
-				}
-			}
-		)
-		watch(
-			() => props.width,
-			val => {
-				dragWidth.value = val
-			}
-		)
-		watch(
-			() => props.height,
-			val => {
-				dragHeight.value = val
-			}
-		)
-		onMounted(() => {
-			if (visible.value) {
-				wrapShow.value = true
-			}
-			let isShowHead = true
-			if (slots.header === undefined && !props.title) {
-				isShowHead = false
-			}
-			showHead.value = isShowHead
-			addDrawer()
-			$vUtils.onListener(document, 'mousemove', handleMousemove)
-			$vUtils.onListener(document, 'mouseup', handleMouseup)
-			handleSetWrapper()
-		})
-		onBeforeUnmount(() => {
-			removeDrawer()
-			$vUtils.offListener(document, 'mousemove', handleMousemove)
-			$vUtils.offListener(document, 'mouseup', handleMouseup)
-			removeScrollEffect()
-		})
-
-		return {
-			slots,
-			visible,
-			wrapClasses,
-			transitionName,
-			classes,
-			mainStyles,
-			showHead,
-			drawerRef,
-			drawerContent,
-			close,
-			handleMask,
-			handleWrapClick,
-			handleTriggerMousedown
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-.sh-drawer {
-	width: auto;
-	height: 100%;
-	position: fixed;
-	top: 0;
-	&-inner {
-		position: absolute;
-	}
-	&-left {
-		left: 0;
-	}
-	&-right {
-		right: 0;
-	}
-	&-top,
-	&-bottom {
-		width: 100%;
-		height: auto;
-		top: auto;
-	}
-	&-bottom {
-		bottom: 0;
-	}
-	&-hidden {
-		display: none !important;
-	}
-	&-wrap {
-		position: fixed;
-		overflow: auto;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		z-index: 1000;
-		-webkit-overflow-scrolling: touch;
-		outline: 0;
-		&-inner {
-			position: absolute;
-			overflow: hidden;
-		}
-		&-dragging {
-			user-select: none;
-		}
-	}
-	&-wrap * {
-		box-sizing: border-box;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-	}
-	&-mask {
-		position: fixed;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background-color: rgba(55, 55, 55, 0.6);
-		height: 100%;
-		z-index: 1000;
-		&-hidden {
-			display: none;
-		}
-		&-inner {
-			position: absolute;
-		}
-	}
-	&-content {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		background-color: var(--vxe-table-body-background-color);
-		border: 0;
-		background-clip: padding-box;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-		&-no-mask {
-			pointer-events: auto;
-		}
-	}
-	&-header {
-		border-bottom: 1px solid var(--vxe-table-border-color);
-		padding: 14px 16px;
-		line-height: 1;
-		&-inner {
-			display: inline-block;
-			width: 100%;
-			height: 20px;
-			line-height: 20px;
-			font-size: var(--vxe-font-size-medium);
-			font-weight: 500;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-	}
-	&-close {
-		z-index: 1;
-		position: absolute;
-		right: 8px;
-		top: 10px;
-		overflow: hidden;
-		cursor: pointer;
-		font-size: 26px;
-		display: inline-block;
-		vertical-align: top;
-		line-height: 1;
-	}
-	&-body {
-		width: 100%;
-		flex: 1;
-		padding: 16px;
-		font-size: var(--vxe-font-size);
-		line-height: 1.5;
-		word-wrap: break-word;
-		position: relative;
-		overflow: auto;
-	}
-	&-footer {
-		position: relative;
-		border-top: 1px solid var(--vxe-table-border-color);
-		padding: 14px 16px;
-		line-height: 1;
-	}
-	&-no-mask {
-		pointer-events: none;
-		.sh-drawer-drag {
-			pointer-events: auto;
-		}
-	}
-	&-drag {
-		top: 0;
-		height: 100%;
-		width: 0;
-		position: absolute;
-		&-left {
-			right: 0;
-		}
-		&-top,
-		&-bottom {
-			top: auto;
-			width: 100%;
-			height: 0;
-		}
-		&-top {
-			bottom: 0;
-		}
-		&-bottom {
-			top: 0;
-		}
-		&-move-trigger {
-			width: 8px;
-			height: 100px;
-			line-height: 100px;
-			position: absolute;
-			top: 50%;
-			background: rgb(243, 243, 243);
-			transform: translate(-50%, -50%);
-			border-radius: 4px;
-			box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
-			cursor: col-resize;
-			&-point {
-				display: inline-block;
-				width: 50%;
-				transform: translateX(50%);
-				i {
-					display: block;
-					border-bottom: 1px solid rgb(192, 192, 192);
-					padding-bottom: 2px;
-				}
-			}
-		}
-		&-top &-move-trigger,
-		&-bottom &-move-trigger {
-			width: 100px;
-			height: 8px;
-			line-height: 8px;
-			top: auto;
-			left: 50%;
-			cursor: row-resize;
-			&-point {
-				width: 100%;
-				height: 50%;
-				transform: translateY(-75%);
-				text-align: center;
-				i {
-					display: inline-block;
-					border-bottom: inherit;
-					width: 1px;
-					height: 100%;
-					border-left: 1px solid rgb(192, 192, 192);
-					padding-bottom: inherit;
-					margin-left: 2px;
-				}
-			}
-		}
-	}
-}
-</style>
+<template>
+	<teleport to="body" :disabled="!transfer">
+		<div class="sh-drawer-box">
+			<transition name="fade">
+				<div v-show="visible" v-if="mask" class="sh-drawer-mask" :class="{ 'sh-drawer-mask-inner': inner }" :style="maskStyle" @click="handleMask"></div>
+			</transition>
+			<div class="sh-drawer-wrap" :class="wrapClasses" @click="handleWrapClick">
+				<transition :name="transitionName">
+					<div v-show="visible" ref="drawerRef" class="sh-drawer" :class="classes" :style="mainStyles">
+						<div ref="drawerContent" class="sh-drawer-content" :class="{ 'sh-drawer-content-no-mask': !mask }">
+							<a v-if="closable" class="sh-drawer-close" @click="close">
+								<slot name="close">
+									<sh-icon type="ios-close"></sh-icon>
+								</slot>
+							</a>
+							<div v-if="showHead" class="sh-drawer-header">
+								<slot name="header">
+									<div class="sh-drawer-header-inner">{{ title }}</div>
+								</slot>
+							</div>
+							<div class="sh-drawer-body" :style="styles">
+								<slot v-if="modelValue || !destroyOnClose"></slot>
+							</div>
+							<div v-if="slots.footer" class="sh-drawer-footer">
+								<slot name="footer"></slot>
+							</div>
+						</div>
+						<div v-if="draggable" class="sh-drawer-drag" :class="'sh-drawer-drag-' + placement" @mousedown="handleTriggerMousedown">
+							<slot name="trigger">
+								<div class="sh-drawer-drag-move-trigger">
+									<div class="sh-drawer-drag-move-trigger-point"><i></i><i></i><i></i><i></i><i></i></div>
+								</div>
+							</slot>
+						</div>
+					</div>
+				</transition>
+			</div>
+		</div>
+	</teleport>
+</template>
+
+<script>
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, getCurrentInstance, computed } from 'vue'
+import useScrollbar from './scrollbar'
+export default defineComponent({
+	name: 'ShDrawer',
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String
+		},
+		width: {
+			type: [Number, String],
+			default: 256
+		},
+		height: {
+			type: [Number, String],
+			default: 256
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		maskStyle: {
+			type: Object
+		},
+		styles: {
+			type: Object
+		},
+		scrollable: {
+			type: Boolean,
+			default: false
+		},
+		placement: {
+			type: String,
+			default: 'right' // 'left', 'right', 'top', 'bottom'
+		},
+		zIndex: {
+			type: Number,
+			default: 1000
+		},
+		transfer: {
+			type: Boolean
+		},
+		className: {
+			type: String
+		},
+		inner: {
+			type: Boolean,
+			default: false
+		},
+		draggable: {
+			type: Boolean,
+			default: false
+		},
+		destroyOnClose: {
+			type: Boolean,
+			default: false
+		},
+		beforeClose: Function
+	},
+	emits: ['update:modelValue', 'close', 'resize-width', 'visible-change', 'drag'],
+	setup(props, context) {
+		const vm = getCurrentInstance()
+		const { $vUtils } = vm.proxy
+		const { emit, slots } = context
+		const drawerRef = ref()
+		const drawerContent = ref()
+
+		const visible = ref(props.modelValue)
+		const wrapShow = ref(false)
+		const showHead = ref(true)
+		const canMove = ref(false)
+		const dragWidth = ref(props.width)
+		const dragHeight = ref(props.height)
+		const wrapperWidth = ref(props.width)
+		const wrapperHeight = ref(props.height)
+		const wrapperLeft = ref(0)
+		const wrapperTop = ref(0)
+		const minWidth = ref(256)
+		const minHeight = ref(256)
+		const id = ref($vUtils.randomStr(6))
+		const tableList = ref([])
+		const sliderList = ref([])
+		let timer = null
+
+		const isHorizontal = computed(() => ['left', 'right'].includes(props.placement))
+		const wrapClasses = computed(() => {
+			return {
+				'sh-drawer-hidden': !wrapShow.value,
+				'sh-drawer-no-mask': !props.mask,
+				'sh-drawer-wrap-inner': props.inner,
+				'sh-drawer-wrap-dragging': canMove.value,
+				[`${props.className}`]: !!props.className
+			}
+		})
+		const mainStyles = computed(() => {
+			let style = {}
+			if (isHorizontal.value) {
+				const width = parseInt(dragWidth.value)
+				const styleWidth = {
+					width: width <= 100 ? `${width}%` : `${width}px`
+				}
+				Object.assign(style, styleWidth)
+			} else {
+				const height = parseInt(dragHeight.value)
+				const styleHeight = {
+					height: height <= 100 ? `${height}%` : `${height}px`
+				}
+				Object.assign(style, styleHeight)
+			}
+			return style
+		})
+		const classes = computed(() => {
+			return {
+				[`sh-drawer-${props.placement}`]: true,
+				'sh-drawer-no-header': !showHead.value,
+				'sh-drawer-inner': props.inner
+			}
+		})
+		const transitionName = computed(() => {
+			if (isHorizontal.value) return `move-${props.placement}`
+			else if (props.placement === 'top') return 'move-up'
+			else return 'move-down'
+		})
+
+		const { addScrollEffect, removeScrollEffect } = useScrollbar(props)
+
+		const close = () => {
+			if (!props.beforeClose) {
+				return handleClose()
+			}
+			const before = props.beforeClose()
+			if (before && before.then) {
+				before.then(() => {
+					handleClose()
+				})
+			} else {
+				handleClose()
+			}
+		}
+		const handleClose = () => {
+			visible.value = false
+			emit('update:modelValue', false)
+			emit('close')
+		}
+		const handleMask = () => {
+			if (canMove.value) return
+			if (props.maskClosable && props.mask) {
+				close()
+			}
+		}
+		const handleWrapClick = event => {
+			const className = event.target.getAttribute('class')
+			if (className && className.indexOf('sh-drawer-wrap') > -1) handleMask()
+		}
+		const handleMousemove = event => {
+			if (!canMove.value || !props.draggable || !visible.value) return
+			// 更新容器距离
+			handleSetWrapper()
+			if (isHorizontal.value) {
+				const left = event.pageX - wrapperLeft.value
+				// 如果抽屉方向为右边，宽度计算需用容器宽度减去left
+				let width = props.placement === 'right' ? wrapperWidth.value - left : left
+				// 限定最小宽度
+				width = Math.max(width, parseFloat(minWidth.value))
+				event.atMin = width === parseFloat(minWidth.value)
+				// 如果当前width不大于100，视为百分比
+				if (width <= 100) width = (width / wrapperWidth.value) * 100
+				if (width >= window.innerWidth) width = window.innerWidth
+				dragWidth.value = width
+				emit('resize-width', parseInt(dragWidth.value))
+				emit('drag', 'dragging', parseInt(dragWidth.value))
+			} else {
+				const top = event.pageY - wrapperTop.value
+				// 如果抽屉方向为下面，宽度计算需用容器宽度减去left
+				let heigth = props.placement === 'bottom' ? wrapperHeight.value - top : top
+				// 限定最小高度
+				heigth = Math.max(heigth, parseFloat(minHeight.value))
+				event.atMin = heigth === parseFloat(minHeight.value)
+				// 如果当前heigth不大于100，视为百分比
+				if (heigth <= 100) heigth = (heigth / wrapperHeight.value) * 100
+				if (heigth >= window.innerHeight) heigth = window.innerHeight
+				dragHeight.value = heigth
+				emit('resize-width', parseInt(dragHeight.value))
+				emit('drag', 'dragging', parseInt(dragHeight.value))
+			}
+		}
+		const handleSetWrapper = () => {
+			const { width, height, left, top } = drawerRef.value.getBoundingClientRect()
+			if (isHorizontal.value) {
+				wrapperWidth.value = width
+				wrapperLeft.value = left
+			} else {
+				wrapperHeight.value = height
+				wrapperTop.value = top
+			}
+		}
+		const handleMouseup = () => {
+			if (!props.draggable || !visible.value) return
+			setTimeout(() => {
+				canMove.value = false
+			})
+			emit('drag', 'end')
+		}
+		const handleTriggerMousedown = () => {
+			canMove.value = true
+			// 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
+			window.getSelection().removeAllRanges()
+			emit('drag', 'start')
+		}
+		const addDrawer = () => {
+			const root = vm.root
+			if (!root.drawerList) root.drawerList = []
+			root.drawerList.push({
+				id: id.value,
+				drawer: vm
+			})
+		}
+		const removeDrawer = () => {
+			const root = vm.root
+			if (!root.drawerList) return
+			const index = root.drawerList.findIndex(item => item.id === id.value)
+			root.drawerList.splice(index, 1)
+		}
+
+		watch(
+			() => props.modelValue,
+			value => {
+				visible.value = value
+			}
+		)
+		watch(
+			() => visible.value,
+			val => {
+				if (val === false) {
+					timer = setTimeout(() => {
+						wrapShow.value = false
+						const drawers = vm.root.drawerList.map(item => item.drawer)
+						const otherDrawers = drawers.filter(item => item.id !== id.value)
+						const isScrollDrawer = otherDrawers.some(item => item.visible && !item.scrollable)
+						if (!isScrollDrawer) {
+							removeScrollEffect()
+						}
+					}, 300)
+				} else {
+					if (timer) clearTimeout(timer)
+					wrapShow.value = true
+					if (!props.scrollable) {
+						addScrollEffect()
+					}
+				}
+				tableList.value.forEach(item => {
+					item.table.handleOnVisibleChange(val)
+				})
+				sliderList.value.forEach(item => {
+					item.slider.handleOnVisibleChange(val)
+				})
+				emit('visible-change', val)
+			}
+		)
+		watch(
+			() => props.scrollable,
+			val => {
+				if (!val) {
+					addScrollEffect()
+				} else {
+					removeScrollEffect()
+				}
+			}
+		)
+		watch(
+			() => props.title,
+			val => {
+				if (slots.header === undefined) {
+					showHead.value = !!val
+				}
+			}
+		)
+		watch(
+			() => props.width,
+			val => {
+				dragWidth.value = val
+			}
+		)
+		watch(
+			() => props.height,
+			val => {
+				dragHeight.value = val
+			}
+		)
+		onMounted(() => {
+			if (visible.value) {
+				wrapShow.value = true
+			}
+			let isShowHead = true
+			if (slots.header === undefined && !props.title) {
+				isShowHead = false
+			}
+			showHead.value = isShowHead
+			addDrawer()
+			$vUtils.onListener(document, 'mousemove', handleMousemove)
+			$vUtils.onListener(document, 'mouseup', handleMouseup)
+			handleSetWrapper()
+		})
+		onBeforeUnmount(() => {
+			removeDrawer()
+			$vUtils.offListener(document, 'mousemove', handleMousemove)
+			$vUtils.offListener(document, 'mouseup', handleMouseup)
+			removeScrollEffect()
+		})
+
+		return {
+			slots,
+			visible,
+			wrapClasses,
+			transitionName,
+			classes,
+			mainStyles,
+			showHead,
+			drawerRef,
+			drawerContent,
+			close,
+			handleMask,
+			handleWrapClick,
+			handleTriggerMousedown
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-drawer {
+	width: auto;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	&-inner {
+		position: absolute;
+	}
+	&-left {
+		left: 0;
+	}
+	&-right {
+		right: 0;
+	}
+	&-top,
+	&-bottom {
+		width: 100%;
+		height: auto;
+		top: auto;
+	}
+	&-bottom {
+		bottom: 0;
+	}
+	&-hidden {
+		display: none !important;
+	}
+	&-wrap {
+		position: fixed;
+		overflow: auto;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 1000;
+		-webkit-overflow-scrolling: touch;
+		outline: 0;
+		&-inner {
+			position: absolute;
+			overflow: hidden;
+		}
+		&-dragging {
+			user-select: none;
+		}
+	}
+	&-wrap * {
+		box-sizing: border-box;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	}
+	&-mask {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: rgba(55, 55, 55, 0.6);
+		height: 100%;
+		z-index: 1000;
+		&-hidden {
+			display: none;
+		}
+		&-inner {
+			position: absolute;
+		}
+	}
+	&-content {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		background-color: var(--vxe-table-body-background-color);
+		border: 0;
+		background-clip: padding-box;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		&-no-mask {
+			pointer-events: auto;
+		}
+	}
+	&-header {
+		border-bottom: 1px solid var(--vxe-table-border-color);
+		padding: 14px 16px;
+		line-height: 1;
+		&-inner {
+			display: inline-block;
+			width: 100%;
+			height: 20px;
+			line-height: 20px;
+			font-size: var(--vxe-font-size-medium);
+			font-weight: 500;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+	&-close {
+		z-index: 1;
+		position: absolute;
+		right: 8px;
+		top: 10px;
+		overflow: hidden;
+		cursor: pointer;
+		font-size: 26px;
+		display: inline-block;
+		vertical-align: top;
+		line-height: 1;
+	}
+	&-body {
+		width: 100%;
+		flex: 1;
+		padding: 16px;
+		font-size: var(--vxe-font-size);
+		line-height: 1.5;
+		word-wrap: break-word;
+		position: relative;
+		overflow: auto;
+	}
+	&-footer {
+		position: relative;
+		border-top: 1px solid var(--vxe-table-border-color);
+		padding: 14px 16px;
+		line-height: 1;
+	}
+	&-no-mask {
+		pointer-events: none;
+		.sh-drawer-drag {
+			pointer-events: auto;
+		}
+	}
+	&-drag {
+		top: 0;
+		height: 100%;
+		width: 0;
+		position: absolute;
+		&-left {
+			right: 0;
+		}
+		&-top,
+		&-bottom {
+			top: auto;
+			width: 100%;
+			height: 0;
+		}
+		&-top {
+			bottom: 0;
+		}
+		&-bottom {
+			top: 0;
+		}
+		&-move-trigger {
+			width: 8px;
+			height: 100px;
+			line-height: 100px;
+			position: absolute;
+			top: 50%;
+			background: rgb(243, 243, 243);
+			transform: translate(-50%, -50%);
+			border-radius: 4px;
+			box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
+			cursor: col-resize;
+			&-point {
+				display: inline-block;
+				width: 50%;
+				transform: translateX(50%);
+				i {
+					display: block;
+					border-bottom: 1px solid rgb(192, 192, 192);
+					padding-bottom: 2px;
+				}
+			}
+		}
+		&-top &-move-trigger,
+		&-bottom &-move-trigger {
+			width: 100px;
+			height: 8px;
+			line-height: 8px;
+			top: auto;
+			left: 50%;
+			cursor: row-resize;
+			&-point {
+				width: 100%;
+				height: 50%;
+				transform: translateY(-75%);
+				text-align: center;
+				i {
+					display: inline-block;
+					border-bottom: inherit;
+					width: 1px;
+					height: 100%;
+					border-left: 1px solid rgb(192, 192, 192);
+					padding-bottom: inherit;
+					margin-left: 2px;
+				}
+			}
+		}
+	}
+}
+</style>