sh-view 2.8.0 → 2.8.2

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

@@ -1,597 +1,597 @@
-<template>
-	<div v-clickout="handleClose" class="sh-poptip" :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
-		<div ref="referenceRef" class="sh-poptip-rel" @click="handleClick" @mousedown="handleFocus(false)" @mouseup="handleBlur(false)"><slot></slot></div>
-		<teleport to="body" :disabled="!transfer">
-			<transition name="fade">
-				<div v-show="visible" ref="popperRef" :class="popperClasses" :style="styles" @click="handleTransferClick" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
-					<div class="sh-poptip-content">
-						<div class="sh-poptip-arrow"></div>
-						<div v-if="confirm" class="sh-poptip-inner">
-							<div class="sh-poptip-body">
-								<sh-icon type="ios-help-circle"></sh-icon>
-								<div class="sh-poptip-body-message">
-									<slot name="title">{{ title }}</slot>
-								</div>
-							</div>
-							<div class="sh-poptip-footer">
-								<vxe-button type="text" size="small" @click="cancel">{{ cancelText }}</vxe-button>
-								<vxe-button status="primary" size="small" @click="ok">{{ comfirmText }}</vxe-button>
-							</div>
-						</div>
-						<div v-else class="sh-poptip-inner">
-							<div v-if="showTitle" ref="title" class="sh-poptip-title" :style="titleStyle">
-								<slot name="title">
-									<div class="sh-poptip-title-inner">{{ title }}</div>
-								</slot>
-							</div>
-							<div class="sh-poptip-body" :style="contentStyle">
-								<div :class="contentClasses">
-									<slot name="content">
-										<div class="sh-poptip-body-content-inner">{{ content }}</div>
-									</slot>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</transition>
-		</teleport>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, onMounted, onUpdated, onBeforeUnmount, getCurrentInstance, ref, watch, nextTick } from 'vue'
-import { transferIndex, transferIncrease } from '../../utils/transfer-queue'
-import Popper from 'popper.js'
-const handleGetIndex = () => {
-	transferIncrease()
-	return transferIndex
-}
-export default defineComponent({
-	name: 'ShPoptip',
-	props: {
-		modelValue: {
-			type: Boolean,
-			default: false
-		},
-		trigger: {
-			type: String,
-			default: 'click' // 'click', 'focus', 'hover'
-		},
-		placement: {
-			type: String,
-			default: 'top' // 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'
-		},
-		title: {
-			type: [String, Number]
-		},
-		content: {
-			type: [String, Number],
-			default: ''
-		},
-		width: {
-			type: [String, Number]
-		},
-		height: {
-			type: [String, Number]
-		},
-		confirm: {
-			type: Boolean,
-			default: false
-		},
-		comfirmText: {
-			type: String,
-			default: '确认'
-		},
-		cancelText: {
-			type: String,
-			default: '取消'
-		},
-		transfer: {
-			type: Boolean,
-			default: false
-		},
-		popperClass: {
-			type: String
-		},
-		wordWrap: {
-			type: Boolean,
-			default: false
-		},
-		padding: {
-			type: String
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		capture: {
-			type: Boolean
-		},
-		transferClassName: {
-			type: String
-		},
-		eventsEnabled: {
-			type: Boolean,
-			default: false
-		},
-		boundariesPadding: {
-			type: Number,
-			default: 5
-		},
-		reference: Object,
-		popper: Object,
-		offset: {
-			type: Number,
-			default: 0
-		},
-		transition: String,
-		options: {
-			type: Object,
-			default() {
-				return {
-					modifiers: {
-						computeStyle: {
-							gpuAcceleration: false
-						},
-						preventOverflow: {
-							boundariesElement: 'window'
-						}
-					}
-				}
-			}
-		}
-	},
-	emits: ['update:modelValue', 'popper-show', 'popper-hide', 'created', 'confirm', 'cancel'],
-	setup(props, context) {
-		const { emit, slots } = context
-		const popperRef = ref()
-		const referenceRef = ref()
-		const visible = ref(props.modelValue)
-		const showTitle = ref(true)
-		const isInput = ref(false)
-		const disableCloseUnderTransfer = ref(false)
-		const tIndex = ref(handleGetIndex())
-		let enterTimer = null
-		let popperJS = null
-
-		const classes = computed(() => {
-			return {
-				'sh-poptip-confirm': props.confirm
-			}
-		})
-		const popperClasses = computed(() => {
-			return {
-				'sh-poptip-popper': true,
-				'sh-poptip-confirm': props.transfer && props.confirm,
-				'sh-poptip-transfer': props.transfer,
-				[`${props.popperClass}`]: props.popperClass,
-				[`${props.transferClassName}`]: props.transferClassName
-			}
-		})
-		const styles = computed(() => {
-			let style = {
-				width: `${props.width}px`
-			}
-			if (props.transfer) style['z-index'] = 1060 + tIndex.value
-			return style
-		})
-		const contentClasses = computed(() => {
-			return {
-				'sh-poptip-body-content': true,
-				'sh-poptip-body-content-word-wrap': props.wordWrap
-			}
-		})
-		const titleStyle = computed(() => {
-			return {
-				padding: props.padding
-			}
-		})
-		const contentStyle = computed(() => {
-			return {
-				height: `${props.height}px`,
-				padding: props.padding
-			}
-		})
-
-		const handleClick = () => {
-			if (props.disabled) return
-			if (props.confirm) {
-				visible.value = !visible.value
-				return true
-			}
-			if (props.trigger !== 'click') {
-				return false
-			}
-			visible.value = !visible.value
-		}
-		const handleTransferClick = () => {
-			if (props.transfer) disableCloseUnderTransfer.value = true
-		}
-		const handleClose = () => {
-			if (disableCloseUnderTransfer.value) {
-				disableCloseUnderTransfer.value = false
-				return false
-			}
-			if (props.confirm) {
-				visible.value = false
-				return true
-			}
-			if (props.trigger !== 'click') {
-				return false
-			}
-			visible.value = false
-		}
-		const handleFocus = (fromInput = true) => {
-			if (props.disabled) return
-			if (props.trigger !== 'focus' || props.confirm || (isInput.value && !fromInput)) {
-				return false
-			}
-			visible.value = true
-		}
-		const handleBlur = (fromInput = true) => {
-			if (props.trigger !== 'focus' || props.confirm || (isInput.value && !fromInput)) {
-				return false
-			}
-			visible.value = false
-		}
-		const handleMouseenter = () => {
-			if (props.disabled) return
-			if (props.trigger !== 'hover' || props.confirm) {
-				return false
-			}
-			if (enterTimer) clearTimeout(enterTimer)
-			enterTimer = setTimeout(() => {
-				visible.value = true
-			}, 100)
-		}
-		const handleMouseleave = () => {
-			if (props.trigger !== 'hover' || props.confirm) {
-				return false
-			}
-			if (enterTimer) {
-				clearTimeout(enterTimer)
-				enterTimer = setTimeout(() => {
-					visible.value = false
-				}, 100)
-			}
-		}
-		const cancel = () => {
-			visible.value = false
-			emit('cancel')
-		}
-		const ok = () => {
-			visible.value = false
-			emit('confirm')
-		}
-		const getInputChildren = () => {
-			const $input = referenceRef.value.querySelectorAll('input')
-			const $textarea = referenceRef.value.querySelectorAll('textarea')
-			let $children = null
-			if ($input.length) {
-				$children = $input[0]
-			} else if ($textarea.length) {
-				$children = $textarea[0]
-			}
-			return $children
-		}
-		const handleIndexIncrease = () => {
-			tIndex.value = handleGetIndex()
-		}
-		const createPopper = () => {
-			if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(props.placement)) {
-				return
-			}
-			const options = props.options
-			const popper = props.popper || popperRef.value
-			const reference = referenceRef.value
-			if (!popper || !reference) return
-			if (popperJS && popperJS.hasOwnProperty('destroy')) {
-				popperJS.destroy()
-			}
-			options.eventsEnabled = props.eventsEnabled
-			options.placement = props.placement
-			if (!options.modifiers.offset) {
-				options.modifiers.offset = {}
-			}
-			options.modifiers.offset.offset = props.offset
-			options.onCreate = () => {
-				nextTick(updatePopper)
-				emit('created')
-			}
-			popperJS = new Popper(reference, popper, options)
-		}
-		const updatePopper = () => {
-			popperJS ? popperJS.update() : createPopper()
-		}
-		watch(
-			() => props.modelValue,
-			val => {
-				visible.value = val
-				emit('update:modelValue', val)
-			}
-		)
-		watch(
-			() => visible.value,
-			val => {
-				if (val) {
-					if (handleIndexIncrease) handleIndexIncrease() // just use for Poptip
-					updatePopper()
-					emit('popper-show')
-				} else {
-					emit('popper-hide')
-				}
-				emit('update:modelValue', val)
-			}
-		)
-		onMounted(() => {
-			if (!props.confirm) {
-				showTitle.value = slots.title !== undefined || props.title
-			}
-			if (props.trigger === 'focus') {
-				nextTick(() => {
-					const $children = getInputChildren()
-					if ($children) {
-						isInput.value = true
-						$children.addEventListener('focus', handleFocus, false)
-						$children.addEventListener('blur', handleBlur, false)
-					}
-				})
-			}
-		})
-		onUpdated(() => {
-			nextTick(() => updatePopper())
-		})
-		onBeforeUnmount(() => {
-			if (popperJS) {
-				popperJS.destroy()
-			}
-			const $children = getInputChildren()
-			if ($children) {
-				$children.removeEventListener('focus', handleFocus, false)
-				$children.removeEventListener('blur', handleBlur, false)
-			}
-		})
-
-		return {
-			referenceRef,
-			popperRef,
-			classes,
-			visible,
-			popperClasses,
-			styles,
-			titleStyle,
-			contentStyle,
-			contentClasses,
-			showTitle,
-			handleClose,
-			handleMouseenter,
-			handleMouseleave,
-			handleClick,
-			handleFocus,
-			handleBlur,
-			handleTransferClick,
-			cancel,
-			ok
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-$poptip-arrow: sh-poptip-arrow;
-$poptip-arrow-width: 7px;
-$poptip-arrow-outer-width: ($poptip-arrow-width + 1);
-$poptip-distance: $poptip-arrow-width - 1 + 4;
-$poptip-arrow-color: hsla(0, 0%, 85%, 0.5);
-@mixin popper($arrow, $arrow-width, $arrow-distance, $bg) {
-	display: block;
-	visibility: visible;
-	position: absolute;
-	z-index: 2000;
-	&[x-placement^='top'] {
-		padding: $arrow-width 0 $arrow-distance 0;
-	}
-	&[x-placement^='right'] {
-		padding: 0 $arrow-width 0 $arrow-distance;
-	}
-	&[x-placement^='bottom'] {
-		padding: $arrow-distance 0 $arrow-width 0;
-	}
-	&[x-placement^='left'] {
-		padding: 0 $arrow-distance 0 $arrow-width;
-	}
-	&[x-placement^='top'] .#{$arrow} {
-		bottom: $arrow-distance - $arrow-width;
-		border-width: $arrow-width $arrow-width 0;
-		border-top-color: $bg;
-	}
-	&[x-placement='top'] .#{$arrow} {
-		left: 50%;
-		margin-left: -$arrow-width;
-	}
-	&[x-placement='top-start'] .#{$arrow} {
-		left: 16px;
-	}
-	&[x-placement='top-end'] .#{$arrow} {
-		right: 16px;
-	}
-	&[x-placement^='right'] .#{$arrow} {
-		left: $arrow-distance - $arrow-width;
-		border-width: $arrow-width $arrow-width $arrow-width 0;
-		border-right-color: $bg;
-	}
-	&[x-placement='right'] .#{$arrow} {
-		top: 50%;
-		margin-top: -$arrow-width;
-	}
-	&[x-placement='right-start'] .#{$arrow} {
-		top: 8px;
-	}
-	&[x-placement='right-end'] .#{$arrow} {
-		bottom: 8px;
-	}
-	&[x-placement^='left'] .#{$arrow} {
-		right: $arrow-distance - $arrow-width;
-		border-width: $arrow-width 0 $arrow-width $arrow-width;
-		border-left-color: $bg;
-	}
-	&[x-placement='left'] .#{$arrow} {
-		top: 50%;
-		margin-top: -$arrow-width;
-	}
-	&[x-placement='left-start'] .#{$arrow} {
-		top: 8px;
-	}
-	&[x-placement='left-end'] .#{$arrow} {
-		bottom: 8px;
-	}
-	&[x-placement^='bottom'] .#{$arrow} {
-		top: $arrow-distance - $arrow-width;
-		border-width: 0 $arrow-width $arrow-width;
-		border-bottom-color: $bg;
-	}
-	&[x-placement='bottom'] .#{$arrow} {
-		left: 50%;
-		margin-left: -$arrow-width;
-	}
-	&[x-placement='bottom-start'] .#{$arrow} {
-		left: 16px;
-	}
-	&[x-placement='bottom-end'] .#{$arrow} {
-		right: 16px;
-	}
-}
-.sh-poptip {
-	display: inline-block;
-	&-rel {
-		display: inline-block;
-		position: relative;
-		width: 100%;
-	}
-	&-title {
-		margin: 0;
-		padding: 8px 16px;
-		position: relative;
-		&:after {
-			content: '';
-			display: block;
-			height: 1px;
-			position: absolute;
-			left: 8px;
-			right: 8px;
-			bottom: 0;
-			background-color: var(--vxe-table-border-color);
-		}
-		&-inner {
-			color: var(--vxe-font-color);
-			font-size: var(--vxe-font-size);
-			font-weight: 500;
-		}
-	}
-	&-body {
-		padding: 8px 16px;
-		overflow: auto;
-		&-content {
-			&-word-wrap {
-				white-space: pre-wrap;
-				text-align: justify;
-			}
-			&-inner {
-				color: var(--vxe-font-color);
-			}
-		}
-	}
-	&-inner {
-		width: 100%;
-		background-color: var(--vxe-table-body-background-color);
-		background-clip: padding-box;
-		border-radius: var(--vxe-border-radius);
-		box-shadow: var(--box-shadow);
-		white-space: nowrap;
-	}
-	&-popper {
-		min-width: 150px;
-		font-size: var(--vxe-font-size);
-		z-index: 100;
-		@include popper($poptip-arrow, $poptip-arrow-width, $poptip-distance, $poptip-arrow-color);
-		&[x-placement^='top'] .sh-poptip-arrow:after {
-			content: ' ';
-			bottom: 1px;
-			margin-left: -$poptip-arrow-width;
-			border-bottom-width: 0;
-			border-top-width: $poptip-arrow-width;
-			border-top-color: #fff;
-		}
-		&[x-placement^='right'] .sh-poptip-arrow:after {
-			content: ' ';
-			left: 1px;
-			bottom: -$poptip-arrow-width;
-			border-left-width: 0;
-			border-right-width: $poptip-arrow-width;
-			border-right-color: #fff;
-		}
-		&[x-placement^='bottom'] .sh-poptip-arrow:after {
-			content: ' ';
-			top: 1px;
-			margin-left: -$poptip-arrow-width;
-			border-top-width: 0;
-			border-bottom-width: $poptip-arrow-width;
-			border-bottom-color: #fff;
-		}
-		&[x-placement^='left'] .sh-poptip-arrow:after {
-			content: ' ';
-			right: 1px;
-			border-right-width: 0;
-			border-left-width: $poptip-arrow-width;
-			border-left-color: #fff;
-			bottom: -$poptip-arrow-width;
-		}
-	}
-	&-arrow {
-		display: block;
-		width: 0;
-		height: 0;
-		position: absolute;
-		border-color: transparent;
-		border-style: solid;
-		border-width: 8px;
-		&:after {
-			display: block;
-			width: 0;
-			height: 0;
-			position: absolute;
-			border-color: transparent;
-			border-style: solid;
-			content: '';
-			border-width: 7px;
-		}
-	}
-	&-confirm &-popper {
-		max-width: 300px;
-	}
-	&-confirm &-inner {
-		white-space: normal;
-	}
-	&-confirm &-body {
-		padding: 12px 12px 8px;
-		.sh-icon {
-			font-size: 16px;
-			color: var(--vxe-warning-color);
-			line-height: 20px;
-			position: absolute;
-		}
-
-		&-message {
-			padding-left: 20px;
-		}
-	}
-	&-confirm &-footer {
-		text-align: right;
-		padding: 8px 12px 12px;
-		button {
-			margin-left: 4px;
-		}
-	}
-}
-</style>
+<template>
+	<div v-clickout="handleClose" class="sh-poptip" :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
+		<div ref="referenceRef" class="sh-poptip-rel" @click="handleClick" @mousedown="handleFocus(false)" @mouseup="handleBlur(false)"><slot></slot></div>
+		<teleport to="body" :disabled="!transfer">
+			<transition name="fade">
+				<div v-show="visible" ref="popperRef" :class="popperClasses" :style="styles" @click="handleTransferClick" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
+					<div class="sh-poptip-content">
+						<div class="sh-poptip-arrow"></div>
+						<div v-if="confirm" class="sh-poptip-inner">
+							<div class="sh-poptip-body">
+								<sh-icon type="ios-help-circle"></sh-icon>
+								<div class="sh-poptip-body-message">
+									<slot name="title">{{ title }}</slot>
+								</div>
+							</div>
+							<div class="sh-poptip-footer">
+								<vxe-button type="text" size="small" @click="cancel">{{ cancelText }}</vxe-button>
+								<vxe-button status="primary" size="small" @click="ok">{{ comfirmText }}</vxe-button>
+							</div>
+						</div>
+						<div v-else class="sh-poptip-inner">
+							<div v-if="showTitle" ref="title" class="sh-poptip-title" :style="titleStyle">
+								<slot name="title">
+									<div class="sh-poptip-title-inner">{{ title }}</div>
+								</slot>
+							</div>
+							<div class="sh-poptip-body" :style="contentStyle">
+								<div :class="contentClasses">
+									<slot name="content">
+										<div class="sh-poptip-body-content-inner">{{ content }}</div>
+									</slot>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</transition>
+		</teleport>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, onMounted, onUpdated, onBeforeUnmount, getCurrentInstance, ref, watch, nextTick } from 'vue'
+import { transferIndex, transferIncrease } from '../../utils/transfer-queue'
+import Popper from 'popper.js'
+const handleGetIndex = () => {
+	transferIncrease()
+	return transferIndex
+}
+export default defineComponent({
+	name: 'ShPoptip',
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		trigger: {
+			type: String,
+			default: 'click' // 'click', 'focus', 'hover'
+		},
+		placement: {
+			type: String,
+			default: 'top' // 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'
+		},
+		title: {
+			type: [String, Number]
+		},
+		content: {
+			type: [String, Number],
+			default: ''
+		},
+		width: {
+			type: [String, Number]
+		},
+		height: {
+			type: [String, Number]
+		},
+		confirm: {
+			type: Boolean,
+			default: false
+		},
+		comfirmText: {
+			type: String,
+			default: '确认'
+		},
+		cancelText: {
+			type: String,
+			default: '取消'
+		},
+		transfer: {
+			type: Boolean,
+			default: false
+		},
+		popperClass: {
+			type: String
+		},
+		wordWrap: {
+			type: Boolean,
+			default: false
+		},
+		padding: {
+			type: String
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		capture: {
+			type: Boolean
+		},
+		transferClassName: {
+			type: String
+		},
+		eventsEnabled: {
+			type: Boolean,
+			default: false
+		},
+		boundariesPadding: {
+			type: Number,
+			default: 5
+		},
+		reference: Object,
+		popper: Object,
+		offset: {
+			type: Number,
+			default: 0
+		},
+		transition: String,
+		options: {
+			type: Object,
+			default() {
+				return {
+					modifiers: {
+						computeStyle: {
+							gpuAcceleration: false
+						},
+						preventOverflow: {
+							boundariesElement: 'window'
+						}
+					}
+				}
+			}
+		}
+	},
+	emits: ['update:modelValue', 'popper-show', 'popper-hide', 'created', 'confirm', 'cancel'],
+	setup(props, context) {
+		const { emit, slots } = context
+		const popperRef = ref()
+		const referenceRef = ref()
+		const visible = ref(props.modelValue)
+		const showTitle = ref(true)
+		const isInput = ref(false)
+		const disableCloseUnderTransfer = ref(false)
+		const tIndex = ref(handleGetIndex())
+		let enterTimer = null
+		let popperJS = null
+
+		const classes = computed(() => {
+			return {
+				'sh-poptip-confirm': props.confirm
+			}
+		})
+		const popperClasses = computed(() => {
+			return {
+				'sh-poptip-popper': true,
+				'sh-poptip-confirm': props.transfer && props.confirm,
+				'sh-poptip-transfer': props.transfer,
+				[`${props.popperClass}`]: props.popperClass,
+				[`${props.transferClassName}`]: props.transferClassName
+			}
+		})
+		const styles = computed(() => {
+			let style = {
+				width: `${props.width}px`
+			}
+			if (props.transfer) style['z-index'] = 1060 + tIndex.value
+			return style
+		})
+		const contentClasses = computed(() => {
+			return {
+				'sh-poptip-body-content': true,
+				'sh-poptip-body-content-word-wrap': props.wordWrap
+			}
+		})
+		const titleStyle = computed(() => {
+			return {
+				padding: props.padding
+			}
+		})
+		const contentStyle = computed(() => {
+			return {
+				height: `${props.height}px`,
+				padding: props.padding
+			}
+		})
+
+		const handleClick = () => {
+			if (props.disabled) return
+			if (props.confirm) {
+				visible.value = !visible.value
+				return true
+			}
+			if (props.trigger !== 'click') {
+				return false
+			}
+			visible.value = !visible.value
+		}
+		const handleTransferClick = () => {
+			if (props.transfer) disableCloseUnderTransfer.value = true
+		}
+		const handleClose = () => {
+			if (disableCloseUnderTransfer.value) {
+				disableCloseUnderTransfer.value = false
+				return false
+			}
+			if (props.confirm) {
+				visible.value = false
+				return true
+			}
+			if (props.trigger !== 'click') {
+				return false
+			}
+			visible.value = false
+		}
+		const handleFocus = (fromInput = true) => {
+			if (props.disabled) return
+			if (props.trigger !== 'focus' || props.confirm || (isInput.value && !fromInput)) {
+				return false
+			}
+			visible.value = true
+		}
+		const handleBlur = (fromInput = true) => {
+			if (props.trigger !== 'focus' || props.confirm || (isInput.value && !fromInput)) {
+				return false
+			}
+			visible.value = false
+		}
+		const handleMouseenter = () => {
+			if (props.disabled) return
+			if (props.trigger !== 'hover' || props.confirm) {
+				return false
+			}
+			if (enterTimer) clearTimeout(enterTimer)
+			enterTimer = setTimeout(() => {
+				visible.value = true
+			}, 100)
+		}
+		const handleMouseleave = () => {
+			if (props.trigger !== 'hover' || props.confirm) {
+				return false
+			}
+			if (enterTimer) {
+				clearTimeout(enterTimer)
+				enterTimer = setTimeout(() => {
+					visible.value = false
+				}, 100)
+			}
+		}
+		const cancel = () => {
+			visible.value = false
+			emit('cancel')
+		}
+		const ok = () => {
+			visible.value = false
+			emit('confirm')
+		}
+		const getInputChildren = () => {
+			const $input = referenceRef.value.querySelectorAll('input')
+			const $textarea = referenceRef.value.querySelectorAll('textarea')
+			let $children = null
+			if ($input.length) {
+				$children = $input[0]
+			} else if ($textarea.length) {
+				$children = $textarea[0]
+			}
+			return $children
+		}
+		const handleIndexIncrease = () => {
+			tIndex.value = handleGetIndex()
+		}
+		const createPopper = () => {
+			if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(props.placement)) {
+				return
+			}
+			const options = props.options
+			const popper = props.popper || popperRef.value
+			const reference = referenceRef.value
+			if (!popper || !reference) return
+			if (popperJS && popperJS.hasOwnProperty('destroy')) {
+				popperJS.destroy()
+			}
+			options.eventsEnabled = props.eventsEnabled
+			options.placement = props.placement
+			if (!options.modifiers.offset) {
+				options.modifiers.offset = {}
+			}
+			options.modifiers.offset.offset = props.offset
+			options.onCreate = () => {
+				nextTick(updatePopper)
+				emit('created')
+			}
+			popperJS = new Popper(reference, popper, options)
+		}
+		const updatePopper = () => {
+			popperJS ? popperJS.update() : createPopper()
+		}
+		watch(
+			() => props.modelValue,
+			val => {
+				visible.value = val
+				emit('update:modelValue', val)
+			}
+		)
+		watch(
+			() => visible.value,
+			val => {
+				if (val) {
+					if (handleIndexIncrease) handleIndexIncrease() // just use for Poptip
+					updatePopper()
+					emit('popper-show')
+				} else {
+					emit('popper-hide')
+				}
+				emit('update:modelValue', val)
+			}
+		)
+		onMounted(() => {
+			if (!props.confirm) {
+				showTitle.value = slots.title !== undefined || props.title
+			}
+			if (props.trigger === 'focus') {
+				nextTick(() => {
+					const $children = getInputChildren()
+					if ($children) {
+						isInput.value = true
+						$children.addEventListener('focus', handleFocus, false)
+						$children.addEventListener('blur', handleBlur, false)
+					}
+				})
+			}
+		})
+		onUpdated(() => {
+			nextTick(() => updatePopper())
+		})
+		onBeforeUnmount(() => {
+			if (popperJS) {
+				popperJS.destroy()
+			}
+			const $children = getInputChildren()
+			if ($children) {
+				$children.removeEventListener('focus', handleFocus, false)
+				$children.removeEventListener('blur', handleBlur, false)
+			}
+		})
+
+		return {
+			referenceRef,
+			popperRef,
+			classes,
+			visible,
+			popperClasses,
+			styles,
+			titleStyle,
+			contentStyle,
+			contentClasses,
+			showTitle,
+			handleClose,
+			handleMouseenter,
+			handleMouseleave,
+			handleClick,
+			handleFocus,
+			handleBlur,
+			handleTransferClick,
+			cancel,
+			ok
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+$poptip-arrow: sh-poptip-arrow;
+$poptip-arrow-width: 7px;
+$poptip-arrow-outer-width: ($poptip-arrow-width + 1);
+$poptip-distance: $poptip-arrow-width - 1 + 4;
+$poptip-arrow-color: hsla(0, 0%, 85%, 0.5);
+@mixin popper($arrow, $arrow-width, $arrow-distance, $bg) {
+	display: block;
+	visibility: visible;
+	position: absolute;
+	z-index: 2000;
+	&[x-placement^='top'] {
+		padding: $arrow-width 0 $arrow-distance 0;
+	}
+	&[x-placement^='right'] {
+		padding: 0 $arrow-width 0 $arrow-distance;
+	}
+	&[x-placement^='bottom'] {
+		padding: $arrow-distance 0 $arrow-width 0;
+	}
+	&[x-placement^='left'] {
+		padding: 0 $arrow-distance 0 $arrow-width;
+	}
+	&[x-placement^='top'] .#{$arrow} {
+		bottom: $arrow-distance - $arrow-width;
+		border-width: $arrow-width $arrow-width 0;
+		border-top-color: $bg;
+	}
+	&[x-placement='top'] .#{$arrow} {
+		left: 50%;
+		margin-left: -$arrow-width;
+	}
+	&[x-placement='top-start'] .#{$arrow} {
+		left: 16px;
+	}
+	&[x-placement='top-end'] .#{$arrow} {
+		right: 16px;
+	}
+	&[x-placement^='right'] .#{$arrow} {
+		left: $arrow-distance - $arrow-width;
+		border-width: $arrow-width $arrow-width $arrow-width 0;
+		border-right-color: $bg;
+	}
+	&[x-placement='right'] .#{$arrow} {
+		top: 50%;
+		margin-top: -$arrow-width;
+	}
+	&[x-placement='right-start'] .#{$arrow} {
+		top: 8px;
+	}
+	&[x-placement='right-end'] .#{$arrow} {
+		bottom: 8px;
+	}
+	&[x-placement^='left'] .#{$arrow} {
+		right: $arrow-distance - $arrow-width;
+		border-width: $arrow-width 0 $arrow-width $arrow-width;
+		border-left-color: $bg;
+	}
+	&[x-placement='left'] .#{$arrow} {
+		top: 50%;
+		margin-top: -$arrow-width;
+	}
+	&[x-placement='left-start'] .#{$arrow} {
+		top: 8px;
+	}
+	&[x-placement='left-end'] .#{$arrow} {
+		bottom: 8px;
+	}
+	&[x-placement^='bottom'] .#{$arrow} {
+		top: $arrow-distance - $arrow-width;
+		border-width: 0 $arrow-width $arrow-width;
+		border-bottom-color: $bg;
+	}
+	&[x-placement='bottom'] .#{$arrow} {
+		left: 50%;
+		margin-left: -$arrow-width;
+	}
+	&[x-placement='bottom-start'] .#{$arrow} {
+		left: 16px;
+	}
+	&[x-placement='bottom-end'] .#{$arrow} {
+		right: 16px;
+	}
+}
+.sh-poptip {
+	display: inline-block;
+	&-rel {
+		display: inline-block;
+		position: relative;
+		width: 100%;
+	}
+	&-title {
+		margin: 0;
+		padding: 8px 16px;
+		position: relative;
+		&:after {
+			content: '';
+			display: block;
+			height: 1px;
+			position: absolute;
+			left: 8px;
+			right: 8px;
+			bottom: 0;
+			background-color: var(--vxe-table-border-color);
+		}
+		&-inner {
+			color: var(--vxe-font-color);
+			font-size: var(--vxe-font-size);
+			font-weight: 500;
+		}
+	}
+	&-body {
+		padding: 8px 16px;
+		overflow: auto;
+		&-content {
+			&-word-wrap {
+				white-space: pre-wrap;
+				text-align: justify;
+			}
+			&-inner {
+				color: var(--vxe-font-color);
+			}
+		}
+	}
+	&-inner {
+		width: 100%;
+		background-color: var(--vxe-table-body-background-color);
+		background-clip: padding-box;
+		border-radius: var(--vxe-border-radius);
+		box-shadow: var(--box-shadow);
+		white-space: nowrap;
+	}
+	&-popper {
+		min-width: 150px;
+		font-size: var(--vxe-font-size);
+		z-index: 100;
+		@include popper($poptip-arrow, $poptip-arrow-width, $poptip-distance, $poptip-arrow-color);
+		&[x-placement^='top'] .sh-poptip-arrow:after {
+			content: ' ';
+			bottom: 1px;
+			margin-left: -$poptip-arrow-width;
+			border-bottom-width: 0;
+			border-top-width: $poptip-arrow-width;
+			border-top-color: #fff;
+		}
+		&[x-placement^='right'] .sh-poptip-arrow:after {
+			content: ' ';
+			left: 1px;
+			bottom: -$poptip-arrow-width;
+			border-left-width: 0;
+			border-right-width: $poptip-arrow-width;
+			border-right-color: #fff;
+		}
+		&[x-placement^='bottom'] .sh-poptip-arrow:after {
+			content: ' ';
+			top: 1px;
+			margin-left: -$poptip-arrow-width;
+			border-top-width: 0;
+			border-bottom-width: $poptip-arrow-width;
+			border-bottom-color: #fff;
+		}
+		&[x-placement^='left'] .sh-poptip-arrow:after {
+			content: ' ';
+			right: 1px;
+			border-right-width: 0;
+			border-left-width: $poptip-arrow-width;
+			border-left-color: #fff;
+			bottom: -$poptip-arrow-width;
+		}
+	}
+	&-arrow {
+		display: block;
+		width: 0;
+		height: 0;
+		position: absolute;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 8px;
+		&:after {
+			display: block;
+			width: 0;
+			height: 0;
+			position: absolute;
+			border-color: transparent;
+			border-style: solid;
+			content: '';
+			border-width: 7px;
+		}
+	}
+	&-confirm &-popper {
+		max-width: 300px;
+	}
+	&-confirm &-inner {
+		white-space: normal;
+	}
+	&-confirm &-body {
+		padding: 12px 12px 8px;
+		.sh-icon {
+			font-size: 16px;
+			color: var(--vxe-warning-color);
+			line-height: 20px;
+			position: absolute;
+		}
+
+		&-message {
+			padding-left: 20px;
+		}
+	}
+	&-confirm &-footer {
+		text-align: right;
+		padding: 8px 12px 12px;
+		button {
+			margin-left: 4px;
+		}
+	}
+}
+</style>