sh-view 2.1.0 → 2.2.0

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

@@ -1,6 +1,6 @@
 <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)" />
+		<menuItemContent ref="groupItemRef" :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" />
@@ -13,17 +13,13 @@
 </template>
 
 <script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted, inject } from 'vue'
 import menuItemContent from './menu-item-content.vue'
-export default {
+export default defineComponent({
 	name: 'MenuGroupContent',
 	components: {
 		menuItemContent
 	},
-	inject: {
-		MenuInstance: {
-			default: null
-		}
-	},
 	props: {
 		menuLevel: {
 			type: Number,
@@ -36,51 +32,43 @@ export default {
 			}
 		}
 	},
-	data() {
-		return {
-			expand: false,
-			groupListStyle: {}
-		}
-	},
-	computed: {
-		menuNextLevel() {
-			return this.menuLevel + 1
-		},
-		isArrow() {
-			return this.MenuInstance.collapsed ? !!this.menuLevel : true
-		},
-		groupClass() {
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+		const MenuInstance = inject('MenuInstance')
+
+		const groupItemRef = ref()
+		const expand = ref(false)
+		const groupListStyle = ref({})
+
+		const menuNextLevel = computed(() => props.menuLevel + 1)
+		const isArrow = computed(() => {
+			return MenuInstance.collapsed ? !!props.menuLevel : true
+		})
+		const groupClass = computed(() => {
 			return {
-				is__level: !this.menuLevel,
-				is__active: this.MenuInstance.activeNames.includes(this.menuItem.name),
-				is__expand: this.expand
+				is__level: !props.menuLevel,
+				is__active: MenuInstance.activeNames.value.includes(props.menuItem.name),
+				is__expand: expand.value
 			}
-		},
-		groupListClass() {
-			const { mode, collapsed } = this.MenuInstance
+		})
+		const groupListClass = computed(() => {
+			const { mode, collapsed } = 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 setMenuExpand = () => {
+			const { mode, collapsed, openedNames } = MenuInstance
+			let names = openedNames.value
+			expand.value = names.includes(props.menuItem.name)
+			if (expand.value && groupItemRef.value && ((mode === 'vertical' && collapsed) || mode === 'horizontal')) {
+				nextTick(() => {
+					const { offsetHeight, offsetWidth, itemRef } = groupItemRef.value
+					const { left, right, top, bottom } = itemRef.value.getBoundingClientRect()
 					const winWidth = window.innerWidth
 					const winHeight = window.innerHeight
 					if (mode === 'vertical') {
@@ -93,30 +81,54 @@ export default {
 						} else {
 							groupStyle.top = `${top}px`
 						}
-						this.groupListStyle = groupStyle
+						groupListStyle.value = groupStyle
 					} else {
-						let groupStyle = { top: `${this.menuLevel ? top : bottom}px` }
+						let groupStyle = { top: `${props.menuLevel ? top : bottom}px` }
 						if (right + offsetWidth >= winWidth) {
 							groupStyle.right = '10px'
 						} else {
-							groupStyle.left = `${this.menuLevel ? right : left}px`
+							groupStyle.left = `${props.menuLevel ? right : left}px`
 						}
-						this.groupListStyle = groupStyle
+						groupListStyle.value = groupStyle
 					}
 				})
 			}
-		},
-		showChildren(item) {
+		}
+		const showChildren = item => {
 			return item.children && item.children.length > 0
-		},
-		onMenuClick() {
-			this.MenuInstance.onMenuSelect(this.menuItem)
-		},
-		onMenuExpand(value) {
-			this.MenuInstance.onMenuExpand(value, this.menuItem)
+		}
+		const onMenuClick = () => {
+			MenuInstance.onMenuSelect(props.menuItem)
+		}
+		const onMenuExpand = value => {
+			MenuInstance.onMenuExpand(value, props.menuItem)
+		}
+
+		watch(
+			() => MenuInstance.openedNames.value,
+			() => {
+				setMenuExpand()
+			}
+		)
+
+		onMounted(() => {
+			setMenuExpand()
+		})
+
+		return {
+			groupItemRef,
+			groupClass,
+			groupListClass,
+			groupListStyle,
+			isArrow,
+			expand,
+			menuNextLevel,
+			showChildren,
+			onMenuExpand,
+			onMenuClick
 		}
 	}
-}
+})
 </script>
 
 <style scoped></style>

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

@@ -1,5 +1,5 @@
 <template>
-	<div ref="shMenuItem" class="sh-menu-item" :class="itemClass" :style="itemStyle">
+	<div ref="itemRef" 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">{{ itemTitle }}</span>
 		<sh-icon v-if="arrow" class="sh-menu-item-arrow" type="ios-arrow-forward"></sh-icon>
@@ -7,13 +7,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, getCurrentInstance, ref, inject } from 'vue'
+export default defineComponent({
 	name: 'MenuItemBox',
-	inject: {
-		MenuInstance: {
-			default: null
-		}
-	},
 	props: {
 		arrow: Boolean,
 		menuLevel: {
@@ -26,36 +22,50 @@ export default {
 			}
 		}
 	},
-	computed: {
-		defaultIcon() {
-			if (!this.menuLevel || this.menuLevel < 2) return 'md-folder'
-			else if (this.menuLevel === 2) return 'md-bookmark'
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+		const MenuInstance = inject('MenuInstance')
+
+		const itemRef = ref()
+
+		const defaultIcon = computed(() => {
+			if (!props.menuLevel || props.menuLevel < 1) return 'md-folder'
+			else if (props.menuLevel === 1) return 'md-bookmark'
 			else return ''
-		},
-		iconType() {
-			return this.menuItem.meta?.icon || this.menuItem.icon || this.defaultIcon
-		},
-		itemClass() {
+		})
+		const iconType = computed(() => {
+			return props.menuItem.meta?.icon || props.menuItem.icon || defaultIcon.value
+		})
+		const itemClass = computed(() => {
 			return {
-				'sh-menu-item-level': !this.menuLevel,
-				'sh-menu-item-active': this.MenuInstance.activeName === this.menuItem.name
+				'sh-menu-item-level': !props.menuLevel,
+				'sh-menu-item-active': MenuInstance.activeName.value === props.menuItem.name
 			}
-		},
-		itemStyle() {
+		})
+		const itemStyle = computed(() => {
 			let result = {}
-			const { mode, collapsed, indent } = this.MenuInstance
-			if (mode === 'vertical' && !collapsed && this.menuLevel) {
-				result.paddingLeft = `${indent * this.menuLevel}px`
+			const { mode, collapsed, indent } = MenuInstance
+			if (mode === 'vertical' && !collapsed && props.menuLevel) {
+				result.paddingLeft = `${indent * props.menuLevel}px`
 			}
 			return result
-		},
-		itemTitle() {
-			const { labelField, labelFormat } = this.MenuInstance
-			return labelFormat ? labelFormat(this.menuItem) : this.$vUtils.get(this.menuItem, labelField)
+		})
+		const itemTitle = computed(() => {
+			const { labelField, labelFormat } = MenuInstance
+			return labelFormat ? labelFormat(props.menuItem) : $vUtils.get(props.menuItem, labelField)
+		})
+
+		return {
+			itemRef,
+			itemClass,
+			itemStyle,
+			itemTitle,
+			iconType
 		}
-	},
-	methods: {}
-}
+	}
+})
 </script>
 
 <style scoped></style>

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

@@ -11,6 +11,7 @@
 									transfer
 									:title="cardBtn.name"
 									:width="poptipWidth"
+									:height="poptipHeight"
 									:placement="cardBtn.placement"
 									@popper-show="handleFocusBtn(cardBtn, menuindex)"
 									@popper-hide="handleBlurBtn(cardBtn, menuindex)">
@@ -20,10 +21,8 @@
 										<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
 									</div>
 									<template #content>
-										<div class="cardPoptipContent">
-											<menuBox v-if="cardActive.startsWith('menus')" :menu="menuitem" first></menuBox>
-											<sh-empty v-else></sh-empty>
-										</div>
+										<menuBox v-if="cardActive.startsWith('menus')" :menu="menuitem" first></menuBox>
+										<sh-empty v-else></sh-empty>
 									</template>
 								</sh-poptip>
 							</template>
@@ -43,17 +42,13 @@
 </template>
 
 <script>
+import { defineComponent, computed, provide, getCurrentInstance, ref, onMounted } from 'vue'
 import menuBox from './menu-box.vue'
-export default {
+export default defineComponent({
 	name: 'MenuCard',
 	components: {
 		menuBox
 	},
-	provide() {
-		return {
-			MenuCardInstance: this
-		}
-	},
 	props: {
 		list: {
 			type: Array,
@@ -98,30 +93,24 @@ export default {
 		}
 	},
 	emits: ['select'],
-	data() {
-		return {
-			poptipWidth: 320,
-			cardActive: ''
-		}
-	},
-	computed: {
-		colsConfig() {
-			return {
-				xs: { span: 24 },
-				sm: { span: 24 },
-				md: { span: 12 },
-				lg: { span: 8 },
-				xl: { span: 8 },
-				xxl: { span: 6 }
-			}
-		}
-	},
-	methods: {
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const poptipWidth = 320
+		const poptipHeight = 300
+		const cardActive = ref('')
+
+		const colsConfig = computed(() => {
+			return { xs: { span: 24 }, sm: { span: 24 }, md: { span: 12 }, lg: { span: 8 }, xl: { span: 8 }, xxl: { span: 6 } }
+		})
+
 		// 重新生成卡片列表
-		resetRenderList(list) {
-			return this.$vUtils.mapTree(list, item => {
+		const resetRenderList = list => {
+			return $vUtils.mapTree(list, item => {
 				return {
-					buttons: this.cardBtns.map(btn => {
+					buttons: props.cardBtns.map(btn => {
 						return {
 							visible: false,
 							placement: 'bottom-start',
@@ -131,65 +120,82 @@ export default {
 					...item
 				}
 			})
-		},
+		}
 		// 动态角标配置
-		btnCornerConfig(cardBtn, menuitem, menuindex) {
+		const btnCornerConfig = (cardBtn, menuitem, menuindex) => {
 			return {
-				title: this.getBudgeNum(menuitem, cardBtn),
+				title: getBudgeNum(menuitem, cardBtn),
 				dark: true,
 				width: '30',
 				height: '30',
-				color: this.getMenuColor(menuindex)
+				color: getMenuColor(menuindex)
 			}
-		},
-		getMenuColor(menuindex, active) {
-			return this.getCardStyle(menuindex, true)[active ? 'color' : 'backgroundColor']
-		},
-		getCardStyle(index, active) {
-			let themeLength = this.menuColors.length
-			let backgroundColor = this.menuColors[index % themeLength][active ? 'active' : 'default']
+		}
+		const getMenuColor = (menuindex, active) => {
+			return getCardStyle(menuindex, true)[active ? 'color' : 'backgroundColor']
+		}
+		const getCardStyle = (index, active) => {
+			let themeLength = props.menuColors.length
+			let backgroundColor = props.menuColors[index % themeLength][active ? 'active' : 'default']
 			let color = active ? '#fff' : ''
 			return { backgroundColor, color }
-		},
-		getBudgeNum(menu, card) {
+		}
+		const getBudgeNum = (menu, card) => {
 			switch (card.value) {
 				case 'menus':
-					return this.$vUtils.toTreeArray(menu.children || []).length
+					return $vUtils.toTreeArray(menu.children || []).length
 				default:
 					return ''
 			}
-		},
-		handleCardBtn($event, cardBtn, menu, menuIndex) {
+		}
+		const handleCardBtn = ($event, cardBtn, menu, menuIndex) => {
 			if (!menu.children || menu.children.length < 1) {
 				cardBtn.visible = false
-				return this.routerTo(menu)
+				onMenuSelect(menu)
+				return
 			}
 			let windowWidth = window.document.body.clientWidth
 			let selfOffsetRight = windowWidth - $event.pageX
-			cardBtn.placement = selfOffsetRight < this.poptipWidth ? 'bottom-end' : 'bottom-start'
+			cardBtn.placement = selfOffsetRight < poptipWidth ? 'bottom-end' : 'bottom-start'
 			cardBtn.visible = true
-		},
-		handleFocusBtn(card, index) {
-			this.cardActive = card.value + index
-		},
-		handleBlurBtn(card, index) {
-			if (this.cardActive === card.value + index) this.cardActive = ''
-		},
-		onMenuSelect(menu) {
-			this.$emit('select', menu)
+		}
+		const handleFocusBtn = (card, index) => {
+			cardActive.value = card.value + index
+		}
+		const handleBlurBtn = (card, index) => {
+			if (cardActive.value === card.value + index) cardActive.value = ''
+		}
+		const onMenuSelect = menu => {
+			emit('select', menu)
+		}
+
+		provide('MenuCardInstance', {
+			...props,
+			onMenuSelect
+		})
+
+		return {
+			cardActive,
+			poptipWidth,
+			poptipHeight,
+			colsConfig,
+			resetRenderList,
+			btnCornerConfig,
+			getMenuColor,
+			getCardStyle,
+			getBudgeNum,
+			handleFocusBtn,
+			handleBlurBtn,
+			handleCardBtn
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss">
 .menuCard {
 	margin-bottom: 10px;
 }
-.cardPoptipContent {
-	max-height: 400px;
-	overflow: auto;
-}
 .cardBtnsWrap {
 	position: relative;
 	display: flex;

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

@@ -1,6 +1,6 @@
 <template>
 	<div class="menuBoxWrap" :class="{ first }">
-		<template v-if="menus.length > 0">
+		<template v-if="menusList.length > 0">
 			<div v-if="first" class="menuBoxFilter">
 				<vxe-input v-model="filterText" size="mini" class="w-100" clearable placeholder="请输入关键词" prefix-icon="vxe-icon-search"></vxe-input>
 			</div>
@@ -14,13 +14,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, getCurrentInstance, watch, ref, inject } from 'vue'
+export default defineComponent({
 	name: 'MenuBox',
-	inject: {
-		MenuCardInstance: {
-			default: null
-		}
-	},
 	props: {
 		menu: {
 			type: [Object, Array],
@@ -32,50 +28,60 @@ export default {
 			type: Boolean
 		}
 	},
-	data() {
-		return {
-			filterText: '',
-			filterData: null,
-			filterChangeDebounce: this.$vUtils.debounce(this.handleMenuFilter, 500)
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+		const MenuCardInstance = inject('MenuCardInstance')
+
+		const filterText = ref('')
+		const filterData = ref(null)
+
+		const menusList = computed(() => {
+			return Array.isArray(props.menu) ? props.menu : props.menu?.children || []
+		})
+		const menuBoxList = computed(() => {
+			return filterData.value || menusList.value
+		})
+
+		const hasChildren = menu => {
+			return menu && menu.children && Array.isArray(menu.children) && menu.children.length > 0
 		}
-	},
-	computed: {
-		menus() {
-			return Array.isArray(this.menu) ? this.menu : this.menu?.children || []
-		},
-		menuBoxList() {
-			return this.filterData || this.menus
+		const getItemTitle = menu => {
+			const { labelField, labelFormat } = MenuCardInstance
+			return labelFormat ? labelFormat(menu) : $vUtils.get(menu, labelField) || ''
 		}
-	},
-	watch: {
-		filterText: {
-			handler(newvalue, oldValue) {
-				this.filterChangeDebounce(newvalue)
-			}
+		const handleMenuClick = item => {
+			MenuCardInstance.onMenuSelect(item)
 		}
-	},
-	methods: {
-		hasChildren(menu) {
-			return menu && menu.children && Array.isArray(menu.children) && menu.children.length > 0
-		},
-		getItemTitle(menu) {
-			const { labelField, labelFormat } = this.MenuCardInstance
-			return labelFormat ? labelFormat(menu) : this.$vUtils.get(menu, labelField) || ''
-		},
-		handleMenuClick(item) {
-			this.MenuCardInstance.onMenuSelect(item)
-		},
 		// 全局搜索过滤事件
-		handleMenuFilter(text) {
-			const { menus, $vUtils, getItemTitle } = this
+		const handleMenuFilter = text => {
 			let filterText = $vUtils.toValueString(text).trim().toLowerCase()
-			let filterData = null
+			let searchData = null
 			if (filterText) {
-				filterData = $vUtils.searchTree(menus, menu => getItemTitle(menu).indexOf(filterText) > -1)
+				searchData = $vUtils.searchTree(menusList.value, menu => getItemTitle(menu).indexOf(filterText) > -1)
 			}
-			if (this.filterData === null && !filterText) return
-			this.filterData = filterData
+			if (filterData.value === null && !filterText) return
+			filterData.value = searchData
+		}
+
+		const filterChangeDebounce = $vUtils.debounce(handleMenuFilter, 500)
+
+		watch(
+			() => filterText.value,
+			nv => {
+				filterChangeDebounce(nv)
+			}
+		)
+
+		return {
+			menusList,
+			filterText,
+			menuBoxList,
+			getItemTitle,
+			hasChildren,
+			handleMenuClick
 		}
 	}
-}
+})
 </script>