sh-view 2.8.1 → 2.8.2

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

@@ -1,426 +1,426 @@
-<template>
-	<div class="sh-tabs" :class="tabClass">
-		<div class="sh-tabs-nav">
-			<div v-if="slots.left" class="sh-tabs-nav-slot sh-tabs-nav-left"><slot name="left"></slot></div>
-			<div ref="navWrapRef" v-resize="handleResize" class="sh-tabs-nav-wrap" :class="{ 'sh-tabs-nav-scrollable': scrollable }">
-				<span v-if="scrollable" class="sh-tabs-nav-prev" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollPrev">
-					<sh-icon :type="isHorizontal ? 'ios-arrow-up' : 'ios-arrow-back'"></sh-icon>
-				</span>
-				<div ref="navScrollRef" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
-					<div ref="navRef" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
-						<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
-							<div
-								:class="{ 'sh-tab-item': true, 'sh-tab-item-disabled': tab.disabled, 'sh-tab-item-active': tab[labelKey] === activeKey }"
-								:style="getTabItemStyle(tab, tabIndex)"
-								@click="handleChange(tab)">
-								<slot name="tabItem" v-bind="{ ...tab, isActive: tab[labelKey] === activeKey }">
-									<div v-if="tab.icon" class="sh-tab-icon"><sh-icon :type="tab.icon"></sh-icon></div>
-									<div class="sh-tab-label">{{ tab[labelField] }}</div>
-									<div v-if="getTabIsClosable(tab)" class="sh-tab-close" @click.stop="handleClose(tab)"><sh-icon type="ios-close"></sh-icon></div>
-								</slot>
-							</div>
-						</template>
-					</div>
-				</div>
-				<span v-if="scrollable" class="sh-tabs-nav-next" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollNext">
-					<sh-icon :type="isHorizontal ? 'ios-arrow-down' : 'ios-arrow-forward'"></sh-icon>
-				</span>
-			</div>
-			<div v-if="slots.right" class="sh-tabs-nav-slot sh-tabs-nav-right"><slot name="right"></slot></div>
-		</div>
-		<div v-if="hasContent" class="sh-tabs-content">
-			<div ref="contentWrap" class="sh-tabs-content-wrap" :class="{ 'sh-tabs-content-animated': animated }" :style="contentStyle">
-				<slot name="tabContent" v-bind="tabList">
-					<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
-						<div class="sh-tabs-content-item">
-							<slot :name="tab[labelKey]" v-bind="tab">{{ tab[labelField] }}</slot>
-						</div>
-					</template>
-				</slot>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
-export default defineComponent({
-	name: 'ShTabs',
-	props: {
-		modelValue: {
-			type: [String, Number]
-		},
-		options: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		labelField: {
-			type: String,
-			default: 'label'
-		},
-		labelKey: {
-			type: String,
-			default: 'value'
-		},
-		type: {
-			type: String,
-			default: 'line' // 'line', 'card'
-		},
-		size: {
-			type: String,
-			default: 'default' // 'small', 'default'
-		},
-		animated: {
-			type: Boolean,
-			default: true
-		},
-		closable: {
-			type: Boolean,
-			default: false
-		},
-		isContent: {
-			type: Boolean,
-			default: true
-		},
-		gutter: {
-			type: Number,
-			default: 5
-		},
-		placement: {
-			type: String,
-			default: 'top' // 'left', 'right', 'top', 'bottom'
-		}
-	},
-	emits: ['update:modelValue', 'close', 'change'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const navRef = ref()
-		const navWrapRef = ref()
-		const navScrollRef = ref()
-		const contentWrapRef = ref()
-		const activeKey = ref(props.modelValue)
-		const scrollable = ref(false)
-		const closedList = ref([])
-		const navStyle = ref({ transform: '' })
-
-		const isHorizontal = computed(() => ['left', 'right'].includes(props.placement))
-		const hasContent = computed(() => props.isContent && activeKey.value && props.options.map(item => item[props.labelKey]).includes(activeKey.value))
-		const tabClass = computed(() => {
-			return {
-				'sh-tabs-card': props.type === 'card',
-				'sh-tabs-reverse': ['bottom', 'right'].includes(props.placement),
-				[isHorizontal.value ? 'sh-tabs-horizontal' : 'sh-tabs-vertical']: true
-			}
-		})
-		const tabList = computed(() => props.options.filter(tab => !closedList.value.includes(tab[props.labelKey])) || [])
-		const contentStyle = computed(() => {
-			const x = tabList.value.findIndex(tab => tab[props.labelKey] === activeKey.value)
-			const p = x === 0 ? '0%' : `-${x}00%`
-			let style = {}
-			if (x > -1) {
-				style = { transform: `translateX(${p}) translateZ(0px)` }
-			}
-			return style
-		})
-
-		const scrollPrev = () => {
-			const navScrollOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
-			const currentOffset = getCurrentScrollOffset()
-			if (!currentOffset) return
-			let newOffset = 0
-			if (currentOffset > navScrollOffset) {
-				newOffset = currentOffset - navScrollOffset
-			}
-			setOffset(newOffset)
-		}
-		const scrollNext = () => {
-			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
-			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
-			const currentOffset = getCurrentScrollOffset()
-			if (navOffset - currentOffset <= containerOffset) return
-			let newOffset = navOffset - currentOffset > containerOffset * 2 ? currentOffset + containerOffset : navOffset - containerOffset
-			setOffset(newOffset)
-		}
-		const setOffset = value => {
-			const direction = isHorizontal.value ? 'Y' : 'X'
-			navStyle.value.transform = `translate${direction}(-${value}px)`
-		}
-		const getCurrentScrollOffset = () => {
-			if (navStyle.value.transform && isHorizontal.value) {
-				return Number(navStyle.value.transform.match(/translateY\(-(\d+(\.\d+)*)px\)/)[1])
-			} else if (navStyle.value.transform) {
-				return Number(navStyle.value.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1])
-			}
-			return 0
-		}
-		const getTabIsClosable = tab => {
-			return props.closable && !tab.disabled && !tab.unClosed
-		}
-		const getTabItemStyle = (tab, tabIndex) => {
-			let itemStyle = {}
-			if (isHorizontal.value) {
-				itemStyle.marginTop = tabIndex ? `${props.gutter}px` : 0
-			} else {
-				itemStyle.marginLeft = tabIndex ? `${props.gutter}px` : 0
-			}
-			return itemStyle
-		}
-		const handleResize = e => {
-			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
-			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
-			const currentOffset = getCurrentScrollOffset()
-			if (containerOffset < navOffset) {
-				scrollable.value = true
-				if (navOffset - currentOffset < containerOffset) {
-					setOffset(navOffset - containerOffset)
-				}
-			} else {
-				scrollable.value = false
-				if (currentOffset > 0) {
-					setOffset(0)
-				}
-			}
-		}
-		const handleScroll = e => {
-			e.preventDefault()
-			e.stopPropagation()
-			let delta = 0
-			if (e.type === 'DOMMouseScroll' || e.type === 'mousewheel') {
-				delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40
-			}
-			if (delta > 0) {
-				scrollPrev()
-			} else {
-				scrollNext()
-			}
-		}
-		const handleChange = tab => {
-			if (!tab || tab.disabled) return
-			activeKey.value = tab[props.labelKey]
-			emit('change', tab)
-			if (!scrollable.value) return
-			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
-			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
-			const prevTabs = navRef.value.querySelectorAll('.sh-tab-item')
-			const tabIndex = tabList.value.findIndex(tb => tb[props.labelKey] === tab[props.labelKey])
-			const offsetName = isHorizontal.value ? 'offsetHeight' : 'offsetWidth'
-			let barOffset = 0
-			if (tabIndex > 0) {
-				let offset = 0
-				for (let i = 0; i < tabIndex; i++) {
-					offset += parseFloat(prevTabs[i][offsetName]) + props.gutter
-				}
-				barOffset = offset
-			}
-			let newOffset = navOffset - barOffset < containerOffset ? navOffset - containerOffset : barOffset
-			setOffset(newOffset)
-		}
-		const handleClose = tab => {
-			closedList.value.push(tab[props.labelKey])
-			if (tab[props.labelKey] === activeKey.value) {
-				let isNotDisabledList = tabList.value.filter(tab => !tab.disabled)
-				activeKey.value = isNotDisabledList.length ? isNotDisabledList[0][props.labelKey] : ''
-			}
-			emit('close', tab)
-		}
-
-		watch(
-			() => props.modelValue,
-			value => {
-				activeKey.value = value
-			}
-		)
-		watch(
-			() => activeKey.value,
-			value => {
-				emit('update:modelValue', value)
-			}
-		)
-		watch(
-			() => props.options,
-			value => {
-				closedList.value = []
-			}
-		)
-
-		return {
-			navRef,
-			navWrapRef,
-			navScrollRef,
-			contentWrapRef,
-			slots,
-			isHorizontal,
-			scrollable,
-			navStyle,
-			tabClass,
-			tabList,
-			activeKey,
-			hasContent,
-			contentStyle,
-			scrollPrev,
-			scrollNext,
-			handleScroll,
-			handleResize,
-			handleChange,
-			handleClose,
-			getTabIsClosable,
-			getTabItemStyle
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-.sh-tabs {
-	width: 100%;
-	position: relative;
-	display: flex;
-	.sh-tab-close {
-		display: inline-flex;
-		align-items: center;
-		padding: 0 1px;
-		&:hover {
-			background-color: rgba(0, 0, 0, 0.1);
-		}
-	}
-	&-vertical {
-		width: 100%;
-		flex-wrap: wrap;
-		flex-direction: column;
-		&.sh-tabs-reverse {
-			flex-direction: column-reverse;
-		}
-		.sh-tabs-nav {
-			width: 100%;
-		}
-	}
-	&-horizontal {
-		flex-wrap: nowrap;
-		flex-direction: row;
-		.sh-tabs-nav {
-			width: auto;
-		}
-		.sh-tabs-nav,
-		.sh-tabs-nav-wrap,
-		.sh-tabs-nav-inner {
-			flex-direction: column;
-		}
-		.sh-tabs-nav-prev,
-		.sh-tabs-nav-next {
-			width: 100%;
-			height: 26px;
-		}
-		&.sh-tabs-reverse {
-			flex-direction: row-reverse;
-		}
-	}
-	&-nav {
-		display: flex;
-		&-slot {
-			display: inline-flex;
-			align-items: center;
-		}
-		&-wrap {
-			flex: 1;
-			display: flex;
-			align-items: stretch;
-			overflow: hidden;
-		}
-		&-prev,
-		&-next {
-			width: 30px;
-			height: 100%;
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
-			position: relative;
-			z-index: 10;
-			&:hover {
-				color: var(--vxe-primary-color);
-			}
-			&.sh-tabs-nav-btn-disabled {
-			}
-		}
-		&-scroll {
-			flex: 1;
-			overflow: hidden;
-		}
-		&-inner {
-			display: flex;
-			width: fit-content;
-			white-space: nowrap;
-			transition: transform 0.2s ease-in-out;
-			.sh-tab-item {
-				display: inline-flex;
-				align-items: stretch;
-				cursor: pointer;
-				line-height: 20px;
-				box-sizing: border-box;
-				border-bottom: 2px solid transparent;
-				&:hover {
-					color: var(--vxe-primary-color);
-				}
-				&.sh-tab-item-active {
-					border-bottom: 2px solid var(--vxe-primary-darken-color);
-					color: var(--vxe-primary-color) !important;
-				}
-				&.sh-tab-item-disabled {
-					cursor: not-allowed;
-					color: var(--vxe-input-disabled-color) !important;
-				}
-				.sh-tab-icon {
-					display: inline-flex;
-					align-items: center;
-					padding: 0 2px 0 5px;
-				}
-				.sh-tab-label {
-					flex: 1;
-					padding: 5px;
-				}
-			}
-		}
-	}
-	&.sh-tabs-card {
-		.sh-tabs-nav-prev,
-		.sh-tabs-nav-next {
-			border: 1px solid var(--vxe-table-border-color);
-		}
-		.sh-tabs-nav-inner {
-			.sh-tab-item {
-				border: 1px solid var(--vxe-table-border-color);
-			}
-			.sh-tab-item-active {
-				background-color: var(--vxe-primary-color);
-				border-color: var(--vxe-primary-color);
-				color: #fff !important;
-			}
-		}
-	}
-	&-content {
-		display: flex;
-		overflow-x: hidden;
-		width: 100%;
-		&-wrap {
-			flex: 1;
-			display: flex;
-			white-space: nowrap;
-			width: 100%;
-			&.sh-tabs-content-animated {
-				transition: transform 0.2s ease-in-out;
-			}
-		}
-		&-item {
-			display: inline-block;
-			min-width: 100%;
-			vertical-align: top;
-			position: relative;
-		}
-	}
-}
-</style>
+<template>
+	<div class="sh-tabs" :class="tabClass">
+		<div class="sh-tabs-nav">
+			<div v-if="slots.left" class="sh-tabs-nav-slot sh-tabs-nav-left"><slot name="left"></slot></div>
+			<div ref="navWrapRef" v-resize="handleResize" class="sh-tabs-nav-wrap" :class="{ 'sh-tabs-nav-scrollable': scrollable }">
+				<span v-if="scrollable" class="sh-tabs-nav-prev" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollPrev">
+					<sh-icon :type="isHorizontal ? 'ios-arrow-up' : 'ios-arrow-back'"></sh-icon>
+				</span>
+				<div ref="navScrollRef" class="sh-tabs-nav-scroll" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
+					<div ref="navRef" v-resize="handleResize" class="sh-tabs-nav-inner" :style="navStyle">
+						<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
+							<div
+								:class="{ 'sh-tab-item': true, 'sh-tab-item-disabled': tab.disabled, 'sh-tab-item-active': tab[labelKey] === activeKey }"
+								:style="getTabItemStyle(tab, tabIndex)"
+								@click="handleChange(tab)">
+								<slot name="tabItem" v-bind="{ ...tab, isActive: tab[labelKey] === activeKey }">
+									<div v-if="tab.icon" class="sh-tab-icon"><sh-icon :type="tab.icon"></sh-icon></div>
+									<div class="sh-tab-label">{{ tab[labelField] }}</div>
+									<div v-if="getTabIsClosable(tab)" class="sh-tab-close" @click.stop="handleClose(tab)"><sh-icon type="ios-close"></sh-icon></div>
+								</slot>
+							</div>
+						</template>
+					</div>
+				</div>
+				<span v-if="scrollable" class="sh-tabs-nav-next" :class="{ 'sh-tabs-nav-btn-disabled': scrollable }" @click="scrollNext">
+					<sh-icon :type="isHorizontal ? 'ios-arrow-down' : 'ios-arrow-forward'"></sh-icon>
+				</span>
+			</div>
+			<div v-if="slots.right" class="sh-tabs-nav-slot sh-tabs-nav-right"><slot name="right"></slot></div>
+		</div>
+		<div v-if="hasContent" class="sh-tabs-content">
+			<div ref="contentWrap" class="sh-tabs-content-wrap" :class="{ 'sh-tabs-content-animated': animated }" :style="contentStyle">
+				<slot name="tabContent" v-bind="tabList">
+					<template v-for="(tab, tabIndex) in tabList" :key="tabIndex">
+						<div class="sh-tabs-content-item">
+							<slot :name="tab[labelKey]" v-bind="tab">{{ tab[labelField] }}</slot>
+						</div>
+					</template>
+				</slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
+export default defineComponent({
+	name: 'ShTabs',
+	props: {
+		modelValue: {
+			type: [String, Number]
+		},
+		options: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		labelKey: {
+			type: String,
+			default: 'value'
+		},
+		type: {
+			type: String,
+			default: 'line' // 'line', 'card'
+		},
+		size: {
+			type: String,
+			default: 'default' // 'small', 'default'
+		},
+		animated: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		isContent: {
+			type: Boolean,
+			default: true
+		},
+		gutter: {
+			type: Number,
+			default: 5
+		},
+		placement: {
+			type: String,
+			default: 'top' // 'left', 'right', 'top', 'bottom'
+		}
+	},
+	emits: ['update:modelValue', 'close', 'change'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const navRef = ref()
+		const navWrapRef = ref()
+		const navScrollRef = ref()
+		const contentWrapRef = ref()
+		const activeKey = ref(props.modelValue)
+		const scrollable = ref(false)
+		const closedList = ref([])
+		const navStyle = ref({ transform: '' })
+
+		const isHorizontal = computed(() => ['left', 'right'].includes(props.placement))
+		const hasContent = computed(() => props.isContent && activeKey.value && props.options.map(item => item[props.labelKey]).includes(activeKey.value))
+		const tabClass = computed(() => {
+			return {
+				'sh-tabs-card': props.type === 'card',
+				'sh-tabs-reverse': ['bottom', 'right'].includes(props.placement),
+				[isHorizontal.value ? 'sh-tabs-horizontal' : 'sh-tabs-vertical']: true
+			}
+		})
+		const tabList = computed(() => props.options.filter(tab => !closedList.value.includes(tab[props.labelKey])) || [])
+		const contentStyle = computed(() => {
+			const x = tabList.value.findIndex(tab => tab[props.labelKey] === activeKey.value)
+			const p = x === 0 ? '0%' : `-${x}00%`
+			let style = {}
+			if (x > -1) {
+				style = { transform: `translateX(${p}) translateZ(0px)` }
+			}
+			return style
+		})
+
+		const scrollPrev = () => {
+			const navScrollOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
+			const currentOffset = getCurrentScrollOffset()
+			if (!currentOffset) return
+			let newOffset = 0
+			if (currentOffset > navScrollOffset) {
+				newOffset = currentOffset - navScrollOffset
+			}
+			setOffset(newOffset)
+		}
+		const scrollNext = () => {
+			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
+			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
+			const currentOffset = getCurrentScrollOffset()
+			if (navOffset - currentOffset <= containerOffset) return
+			let newOffset = navOffset - currentOffset > containerOffset * 2 ? currentOffset + containerOffset : navOffset - containerOffset
+			setOffset(newOffset)
+		}
+		const setOffset = value => {
+			const direction = isHorizontal.value ? 'Y' : 'X'
+			navStyle.value.transform = `translate${direction}(-${value}px)`
+		}
+		const getCurrentScrollOffset = () => {
+			if (navStyle.value.transform && isHorizontal.value) {
+				return Number(navStyle.value.transform.match(/translateY\(-(\d+(\.\d+)*)px\)/)[1])
+			} else if (navStyle.value.transform) {
+				return Number(navStyle.value.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1])
+			}
+			return 0
+		}
+		const getTabIsClosable = tab => {
+			return props.closable && !tab.disabled && !tab.unClosed
+		}
+		const getTabItemStyle = (tab, tabIndex) => {
+			let itemStyle = {}
+			if (isHorizontal.value) {
+				itemStyle.marginTop = tabIndex ? `${props.gutter}px` : 0
+			} else {
+				itemStyle.marginLeft = tabIndex ? `${props.gutter}px` : 0
+			}
+			return itemStyle
+		}
+		const handleResize = e => {
+			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
+			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
+			const currentOffset = getCurrentScrollOffset()
+			if (containerOffset < navOffset) {
+				scrollable.value = true
+				if (navOffset - currentOffset < containerOffset) {
+					setOffset(navOffset - containerOffset)
+				}
+			} else {
+				scrollable.value = false
+				if (currentOffset > 0) {
+					setOffset(0)
+				}
+			}
+		}
+		const handleScroll = e => {
+			e.preventDefault()
+			e.stopPropagation()
+			let delta = 0
+			if (e.type === 'DOMMouseScroll' || e.type === 'mousewheel') {
+				delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40
+			}
+			if (delta > 0) {
+				scrollPrev()
+			} else {
+				scrollNext()
+			}
+		}
+		const handleChange = tab => {
+			if (!tab || tab.disabled) return
+			activeKey.value = tab[props.labelKey]
+			emit('change', tab)
+			if (!scrollable.value) return
+			const navOffset = isHorizontal.value ? navRef.value.offsetHeight : navRef.value.offsetWidth
+			const containerOffset = isHorizontal.value ? navScrollRef.value.offsetHeight : navScrollRef.value.offsetWidth
+			const prevTabs = navRef.value.querySelectorAll('.sh-tab-item')
+			const tabIndex = tabList.value.findIndex(tb => tb[props.labelKey] === tab[props.labelKey])
+			const offsetName = isHorizontal.value ? 'offsetHeight' : 'offsetWidth'
+			let barOffset = 0
+			if (tabIndex > 0) {
+				let offset = 0
+				for (let i = 0; i < tabIndex; i++) {
+					offset += parseFloat(prevTabs[i][offsetName]) + props.gutter
+				}
+				barOffset = offset
+			}
+			let newOffset = navOffset - barOffset < containerOffset ? navOffset - containerOffset : barOffset
+			setOffset(newOffset)
+		}
+		const handleClose = tab => {
+			closedList.value.push(tab[props.labelKey])
+			if (tab[props.labelKey] === activeKey.value) {
+				let isNotDisabledList = tabList.value.filter(tab => !tab.disabled)
+				activeKey.value = isNotDisabledList.length ? isNotDisabledList[0][props.labelKey] : ''
+			}
+			emit('close', tab)
+		}
+
+		watch(
+			() => props.modelValue,
+			value => {
+				activeKey.value = value
+			}
+		)
+		watch(
+			() => activeKey.value,
+			value => {
+				emit('update:modelValue', value)
+			}
+		)
+		watch(
+			() => props.options,
+			value => {
+				closedList.value = []
+			}
+		)
+
+		return {
+			navRef,
+			navWrapRef,
+			navScrollRef,
+			contentWrapRef,
+			slots,
+			isHorizontal,
+			scrollable,
+			navStyle,
+			tabClass,
+			tabList,
+			activeKey,
+			hasContent,
+			contentStyle,
+			scrollPrev,
+			scrollNext,
+			handleScroll,
+			handleResize,
+			handleChange,
+			handleClose,
+			getTabIsClosable,
+			getTabItemStyle
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-tabs {
+	width: 100%;
+	position: relative;
+	display: flex;
+	.sh-tab-close {
+		display: inline-flex;
+		align-items: center;
+		padding: 0 1px;
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.1);
+		}
+	}
+	&-vertical {
+		width: 100%;
+		flex-wrap: wrap;
+		flex-direction: column;
+		&.sh-tabs-reverse {
+			flex-direction: column-reverse;
+		}
+		.sh-tabs-nav {
+			width: 100%;
+		}
+	}
+	&-horizontal {
+		flex-wrap: nowrap;
+		flex-direction: row;
+		.sh-tabs-nav {
+			width: auto;
+		}
+		.sh-tabs-nav,
+		.sh-tabs-nav-wrap,
+		.sh-tabs-nav-inner {
+			flex-direction: column;
+		}
+		.sh-tabs-nav-prev,
+		.sh-tabs-nav-next {
+			width: 100%;
+			height: 26px;
+		}
+		&.sh-tabs-reverse {
+			flex-direction: row-reverse;
+		}
+	}
+	&-nav {
+		display: flex;
+		&-slot {
+			display: inline-flex;
+			align-items: center;
+		}
+		&-wrap {
+			flex: 1;
+			display: flex;
+			align-items: stretch;
+			overflow: hidden;
+		}
+		&-prev,
+		&-next {
+			width: 30px;
+			height: 100%;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+			position: relative;
+			z-index: 10;
+			&:hover {
+				color: var(--vxe-primary-color);
+			}
+			&.sh-tabs-nav-btn-disabled {
+			}
+		}
+		&-scroll {
+			flex: 1;
+			overflow: hidden;
+		}
+		&-inner {
+			display: flex;
+			width: fit-content;
+			white-space: nowrap;
+			transition: transform 0.2s ease-in-out;
+			.sh-tab-item {
+				display: inline-flex;
+				align-items: stretch;
+				cursor: pointer;
+				line-height: 20px;
+				box-sizing: border-box;
+				border-bottom: 2px solid transparent;
+				&:hover {
+					color: var(--vxe-primary-color);
+				}
+				&.sh-tab-item-active {
+					border-bottom: 2px solid var(--vxe-primary-darken-color);
+					color: var(--vxe-primary-color) !important;
+				}
+				&.sh-tab-item-disabled {
+					cursor: not-allowed;
+					color: var(--vxe-input-disabled-color) !important;
+				}
+				.sh-tab-icon {
+					display: inline-flex;
+					align-items: center;
+					padding: 0 2px 0 5px;
+				}
+				.sh-tab-label {
+					flex: 1;
+					padding: 5px;
+				}
+			}
+		}
+	}
+	&.sh-tabs-card {
+		.sh-tabs-nav-prev,
+		.sh-tabs-nav-next {
+			border: 1px solid var(--vxe-table-border-color);
+		}
+		.sh-tabs-nav-inner {
+			.sh-tab-item {
+				border: 1px solid var(--vxe-table-border-color);
+			}
+			.sh-tab-item-active {
+				background-color: var(--vxe-primary-color);
+				border-color: var(--vxe-primary-color);
+				color: #fff !important;
+			}
+		}
+	}
+	&-content {
+		display: flex;
+		overflow-x: hidden;
+		width: 100%;
+		&-wrap {
+			flex: 1;
+			display: flex;
+			white-space: nowrap;
+			width: 100%;
+			&.sh-tabs-content-animated {
+				transition: transform 0.2s ease-in-out;
+			}
+		}
+		&-item {
+			display: inline-block;
+			min-width: 100%;
+			vertical-align: top;
+			position: relative;
+		}
+	}
+}
+</style>