sh-view 2.8.1 → 2.8.3

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

@@ -1,250 +1,250 @@
-<template>
-	<sh-row :gutter="10">
-		<template v-for="(menuitem, menuindex) in resetRenderList(list)" :key="menuindex">
-			<sh-col v-bind="colsConfig">
-				<sh-card :icon="menuitem.icon" size="small" :title="menuitem?.meta?.title" :icon-size="18" :color="getMenuColor(menuindex)" :padding="8" class="menuCard">
-					<div :ref="`cardBtnsWrap${menuindex}`" class="cardBtnsWrap">
-						<template v-for="cardBtn in menuitem.buttons" :key="cardBtn.value">
-							<template v-if="menuitem.children && menuitem.children.length > 0">
-								<sh-poptip
-									v-model="cardBtn.visible"
-									transfer
-									:title="cardBtn.name"
-									:width="poptipWidth"
-									:height="poptipHeight"
-									:placement="cardBtn.placement"
-									@popper-show="handleFocusBtn(cardBtn, menuindex)"
-									@popper-hide="handleBlurBtn(cardBtn, menuindex)">
-									<div class="cardBtn" :style="getCardStyle(menuindex, cardActive === cardBtn.value + menuindex)" @click="handleCardBtn($event, cardBtn, menuitem, menuindex)">
-										<sh-icon :type="cardBtn.icon" :size="16" class="mr-2" :color="getMenuColor(menuindex, cardActive === cardBtn.value + menuindex)" />
-										<span>{{ cardBtn.name }}</span>
-										<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
-									</div>
-									<template #content>
-										<menuBox v-if="cardActive.startsWith('menus')" :menu="menuitem" first></menuBox>
-										<sh-empty v-else></sh-empty>
-									</template>
-								</sh-poptip>
-							</template>
-							<template v-else>
-								<div class="cardBtn" :style="getCardStyle(menuindex, cardActive === cardBtn.value + menuindex)" @click="handleCardBtn($event, cardBtn, menuitem, menuindex)">
-									<sh-icon :type="cardBtn.icon" :size="16" class="mr-2" :color="getMenuColor(menuindex, cardActive === cardBtn.value + menuindex)" />
-									<span>{{ cardBtn.name }}</span>
-									<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
-								</div>
-							</template>
-						</template>
-					</div>
-				</sh-card>
-			</sh-col>
-		</template>
-	</sh-row>
-</template>
-
-<script>
-import { defineComponent, computed, provide, getCurrentInstance, ref, reactive, onMounted } from 'vue'
-import menuBox from './menu-box.vue'
-export default defineComponent({
-	name: 'MenuCard',
-	components: {
-		menuBox
-	},
-	props: {
-		list: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		menuColors: {
-			type: Array,
-			default() {
-				return [
-					{ default: '#e7f1ff', active: '#1890ff' },
-					{ default: '#FFEFEB', active: '#FF652E' },
-					{ default: '#F4F1FF', active: '#997BFF' },
-					{ default: '#E6F6F2', active: '#01A883' },
-					{ default: '#FFF6E8', active: '#FFA522' },
-					{ default: '#ffe5e5', active: '#e62340' },
-					{ default: '#dbffff', active: '#13C2C2' },
-					{ default: '#e2f1ff', active: '#003366' },
-					{ default: '#e6cdff', active: '#722ED1' },
-					{ default: '#ffccd6', active: '#ff5d7a' }
-				]
-			}
-		},
-		cardBtns: {
-			type: Array,
-			default() {
-				return [
-					{ name: '功能菜单', value: 'menus', icon: 'ios-apps' },
-					{ name: '操作指南', value: 'guides', icon: 'ios-navigate', placement: 'bottom-end' },
-					{ name: '待办事项', value: 'todo', icon: 'md-calendar' },
-					{ name: '已办事项', value: 'untodo', icon: 'ios-calendar', placement: 'bottom-end' }
-				]
-			}
-		},
-		labelField: {
-			type: String,
-			default: 'label'
-		},
-		labelFormat: {
-			type: Function
-		}
-	},
-	emits: ['select'],
-	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 } }
-		})
-
-		// 重新生成卡片列表
-		const resetRenderList = list => {
-			return $vUtils.mapTree(list, item => {
-				return {
-					buttons: props.cardBtns.map(btn => {
-						return {
-							visible: false,
-							placement: 'bottom-start',
-							...btn
-						}
-					}),
-					...item
-				}
-			})
-		}
-		// 动态角标配置
-		const btnCornerConfig = (cardBtn, menuitem, menuindex) => {
-			return {
-				title: getBudgeNum(menuitem, cardBtn),
-				dark: true,
-				width: '30',
-				height: '30',
-				color: getMenuColor(menuindex)
-			}
-		}
-		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 }
-		}
-		const getBudgeNum = (menu, card) => {
-			switch (card.value) {
-				case 'menus':
-					return $vUtils.toTreeArray(menu.children || []).length
-				default:
-					return ''
-			}
-		}
-		const handleCardBtn = ($event, cardBtn, menu, menuIndex) => {
-			if (!menu.children || menu.children.length < 1) {
-				cardBtn.visible = false
-				onMenuSelect(menu)
-				return
-			}
-			let windowWidth = window.document.body.clientWidth
-			let selfOffsetRight = windowWidth - $event.pageX
-			cardBtn.placement = selfOffsetRight < poptipWidth ? 'bottom-end' : 'bottom-start'
-			cardBtn.visible = true
-		}
-		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',
-			reactive({
-				props,
-				onMenuSelect
-			})
-		)
-
-		return {
-			cardActive,
-			poptipWidth,
-			poptipHeight,
-			colsConfig,
-			resetRenderList,
-			btnCornerConfig,
-			getMenuColor,
-			getCardStyle,
-			getBudgeNum,
-			handleFocusBtn,
-			handleBlurBtn,
-			handleCardBtn
-		}
-	}
-})
-</script>
-
-<style lang="scss">
-.menuCard {
-	margin-bottom: 10px;
-}
-.cardBtnsWrap {
-	position: relative;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	width: 100%;
-	> div {
-		width: 47%;
-		display: inline-flex;
-		align-items: center;
-		margin: 1.5%;
-		> .ivu-poptip-rel,
-		> .ivu-tooltip-rel,
-		> .ivu-dropdown-rel {
-			width: 100%;
-			display: block;
-		}
-	}
-	.cardBtn {
-		display: flex;
-		align-items: center;
-		background-color: #eee;
-		font-size: 1.1em;
-		padding: 10px;
-		box-sizing: border-box;
-		cursor: pointer;
-		position: relative;
-		&:hover {
-			opacity: 0.8;
-		}
-	}
-}
-.menuBoxWrap {
-	padding-left: 2em;
-	position: relative;
-	&.first {
-		padding-left: 0;
-	}
-	.menuBoxFilter {
-		margin-bottom: 5px;
-	}
-	.menuBoxTitle {
-		display: block;
-		padding: 5px 0;
-		cursor: pointer;
-	}
-}
-</style>
+<template>
+	<sh-row :gutter="10">
+		<template v-for="(menuitem, menuindex) in resetRenderList(list)" :key="menuindex">
+			<sh-col v-bind="colsConfig">
+				<sh-card :icon="menuitem.icon" size="small" :title="menuitem?.meta?.title" :icon-size="18" :color="getMenuColor(menuindex)" :padding="8" class="menuCard">
+					<div :ref="`cardBtnsWrap${menuindex}`" class="cardBtnsWrap">
+						<template v-for="cardBtn in menuitem.buttons" :key="cardBtn.value">
+							<template v-if="menuitem.children && menuitem.children.length > 0">
+								<sh-poptip
+									v-model="cardBtn.visible"
+									transfer
+									:title="cardBtn.name"
+									:width="poptipWidth"
+									:height="poptipHeight"
+									:placement="cardBtn.placement"
+									@popper-show="handleFocusBtn(cardBtn, menuindex)"
+									@popper-hide="handleBlurBtn(cardBtn, menuindex)">
+									<div class="cardBtn" :style="getCardStyle(menuindex, cardActive === cardBtn.value + menuindex)" @click="handleCardBtn($event, cardBtn, menuitem, menuindex)">
+										<sh-icon :type="cardBtn.icon" :size="16" class="mr-2" :color="getMenuColor(menuindex, cardActive === cardBtn.value + menuindex)" />
+										<span>{{ cardBtn.name }}</span>
+										<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
+									</div>
+									<template #content>
+										<menuBox v-if="cardActive.startsWith('menus')" :menu="menuitem" first></menuBox>
+										<sh-empty v-else></sh-empty>
+									</template>
+								</sh-poptip>
+							</template>
+							<template v-else>
+								<div class="cardBtn" :style="getCardStyle(menuindex, cardActive === cardBtn.value + menuindex)" @click="handleCardBtn($event, cardBtn, menuitem, menuindex)">
+									<sh-icon :type="cardBtn.icon" :size="16" class="mr-2" :color="getMenuColor(menuindex, cardActive === cardBtn.value + menuindex)" />
+									<span>{{ cardBtn.name }}</span>
+									<sh-corner v-if="getBudgeNum(menuitem, cardBtn)" v-bind="btnCornerConfig(cardBtn, menuitem, menuindex)"></sh-corner>
+								</div>
+							</template>
+						</template>
+					</div>
+				</sh-card>
+			</sh-col>
+		</template>
+	</sh-row>
+</template>
+
+<script>
+import { defineComponent, computed, provide, getCurrentInstance, ref, reactive, onMounted } from 'vue'
+import menuBox from './menu-box.vue'
+export default defineComponent({
+	name: 'MenuCard',
+	components: {
+		menuBox
+	},
+	props: {
+		list: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		menuColors: {
+			type: Array,
+			default() {
+				return [
+					{ default: '#e7f1ff', active: '#1890ff' },
+					{ default: '#FFEFEB', active: '#FF652E' },
+					{ default: '#F4F1FF', active: '#997BFF' },
+					{ default: '#E6F6F2', active: '#01A883' },
+					{ default: '#FFF6E8', active: '#FFA522' },
+					{ default: '#ffe5e5', active: '#e62340' },
+					{ default: '#dbffff', active: '#13C2C2' },
+					{ default: '#e2f1ff', active: '#003366' },
+					{ default: '#e6cdff', active: '#722ED1' },
+					{ default: '#ffccd6', active: '#ff5d7a' }
+				]
+			}
+		},
+		cardBtns: {
+			type: Array,
+			default() {
+				return [
+					{ name: '功能菜单', value: 'menus', icon: 'ios-apps' },
+					{ name: '操作指南', value: 'guides', icon: 'ios-navigate', placement: 'bottom-end' },
+					{ name: '待办事项', value: 'todo', icon: 'md-calendar' },
+					{ name: '已办事项', value: 'untodo', icon: 'ios-calendar', placement: 'bottom-end' }
+				]
+			}
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		labelFormat: {
+			type: Function
+		}
+	},
+	emits: ['select'],
+	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 } }
+		})
+
+		// 重新生成卡片列表
+		const resetRenderList = list => {
+			return $vUtils.mapTree(list, item => {
+				return {
+					buttons: props.cardBtns.map(btn => {
+						return {
+							visible: false,
+							placement: 'bottom-start',
+							...btn
+						}
+					}),
+					...item
+				}
+			})
+		}
+		// 动态角标配置
+		const btnCornerConfig = (cardBtn, menuitem, menuindex) => {
+			return {
+				title: getBudgeNum(menuitem, cardBtn),
+				dark: true,
+				width: '30',
+				height: '30',
+				color: getMenuColor(menuindex)
+			}
+		}
+		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 }
+		}
+		const getBudgeNum = (menu, card) => {
+			switch (card.value) {
+				case 'menus':
+					return $vUtils.toTreeArray(menu.children || []).length
+				default:
+					return ''
+			}
+		}
+		const handleCardBtn = ($event, cardBtn, menu, menuIndex) => {
+			if (!menu.children || menu.children.length < 1) {
+				cardBtn.visible = false
+				onMenuSelect(menu)
+				return
+			}
+			let windowWidth = window.document.body.clientWidth
+			let selfOffsetRight = windowWidth - $event.pageX
+			cardBtn.placement = selfOffsetRight < poptipWidth ? 'bottom-end' : 'bottom-start'
+			cardBtn.visible = true
+		}
+		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',
+			reactive({
+				props,
+				onMenuSelect
+			})
+		)
+
+		return {
+			cardActive,
+			poptipWidth,
+			poptipHeight,
+			colsConfig,
+			resetRenderList,
+			btnCornerConfig,
+			getMenuColor,
+			getCardStyle,
+			getBudgeNum,
+			handleFocusBtn,
+			handleBlurBtn,
+			handleCardBtn
+		}
+	}
+})
+</script>
+
+<style lang="scss">
+.menuCard {
+	margin-bottom: 10px;
+}
+.cardBtnsWrap {
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	width: 100%;
+	> div {
+		width: 47%;
+		display: inline-flex;
+		align-items: center;
+		margin: 1.5%;
+		> .ivu-poptip-rel,
+		> .ivu-tooltip-rel,
+		> .ivu-dropdown-rel {
+			width: 100%;
+			display: block;
+		}
+	}
+	.cardBtn {
+		display: flex;
+		align-items: center;
+		background-color: #eee;
+		font-size: 1.1em;
+		padding: 10px;
+		box-sizing: border-box;
+		cursor: pointer;
+		position: relative;
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+}
+.menuBoxWrap {
+	padding-left: 2em;
+	position: relative;
+	&.first {
+		padding-left: 0;
+	}
+	.menuBoxFilter {
+		margin-bottom: 5px;
+	}
+	.menuBoxTitle {
+		display: block;
+		padding: 5px 0;
+		cursor: pointer;
+	}
+}
+</style>

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

@@ -1,87 +1,87 @@
-<template>
-	<div class="menuBoxWrap" :class="{ first }">
-		<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>
-			<template v-for="(item, itemindex) in menuBoxList" :key="itemindex">
-				<a class="menuBoxTitle" @click="handleMenuClick(item)">{{ getItemTitle(item) }}</a>
-				<menuBox v-if="hasChildren(item)" :menu="item"></menuBox>
-			</template>
-		</template>
-		<sh-empty v-else></sh-empty>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, watch, ref, inject } from 'vue'
-export default defineComponent({
-	name: 'MenuBox',
-	props: {
-		menu: {
-			type: [Object, Array],
-			default() {
-				return {}
-			}
-		},
-		first: {
-			type: Boolean
-		}
-	},
-	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
-		}
-		const getItemTitle = menu => {
-			const { labelField, labelFormat } = MenuCardInstance.props
-			return labelFormat ? labelFormat(menu) : $vUtils.get(menu, labelField) || ''
-		}
-		const handleMenuClick = item => {
-			MenuCardInstance.onMenuSelect(item)
-		}
-		// 全局搜索过滤事件
-		const handleMenuFilter = text => {
-			let filterText = $vUtils.toValueString(text).trim().toLowerCase()
-			let searchData = null
-			if (filterText) {
-				searchData = $vUtils.searchTree(menusList.value, menu => getItemTitle(menu).indexOf(filterText) > -1)
-			}
-			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>
+<template>
+	<div class="menuBoxWrap" :class="{ first }">
+		<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>
+			<template v-for="(item, itemindex) in menuBoxList" :key="itemindex">
+				<a class="menuBoxTitle" @click="handleMenuClick(item)">{{ getItemTitle(item) }}</a>
+				<menuBox v-if="hasChildren(item)" :menu="item"></menuBox>
+			</template>
+		</template>
+		<sh-empty v-else></sh-empty>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, watch, ref, inject } from 'vue'
+export default defineComponent({
+	name: 'MenuBox',
+	props: {
+		menu: {
+			type: [Object, Array],
+			default() {
+				return {}
+			}
+		},
+		first: {
+			type: Boolean
+		}
+	},
+	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
+		}
+		const getItemTitle = menu => {
+			const { labelField, labelFormat } = MenuCardInstance.props
+			return labelFormat ? labelFormat(menu) : $vUtils.get(menu, labelField) || ''
+		}
+		const handleMenuClick = item => {
+			MenuCardInstance.onMenuSelect(item)
+		}
+		// 全局搜索过滤事件
+		const handleMenuFilter = text => {
+			let filterText = $vUtils.toValueString(text).trim().toLowerCase()
+			let searchData = null
+			if (filterText) {
+				searchData = $vUtils.searchTree(menusList.value, menu => getItemTitle(menu).indexOf(filterText) > -1)
+			}
+			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>