'admin-21.12.17:修复tagsView拖拽问题，感谢@简单爱、'

src/layout/navBars/breadcrumb/setings.vue

@@ -201,10 +201,10 @@
 						<el-switch v-model="getThemeConfig.isCacheTagsView" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
-				<div class="layout-breadcrumb-seting-bar-flex mt15">
+				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: isMobile ? 0.5 : 1 }">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsSortableTagsView') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
-						<el-switch v-model="getThemeConfig.isSortableTagsView" @change="onSortableTagsViewChange"></el-switch>
+						<el-switch v-model="getThemeConfig.isSortableTagsView" :disabled="isMobile ? true : false" @change="onSortableTagsViewChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -381,19 +381,23 @@
 </template>
 
 <script lang="ts">
-import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed } from 'vue';
+import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed, reactive, toRefs } from 'vue';
 import { useStore } from '/@/store/index';
 import { getLightColor } from '/@/utils/theme';
 import { verifyAndSpace } from '/@/utils/toolsValidate';
 import { Local } from '/@/utils/storage';
 import Watermark from '/@/utils/wartermark';
 import commonFunction from '/@/utils/commonFunction';
+import other from '/@/utils/other';
 export default defineComponent({
 	name: 'layoutBreadcrumbSeting',
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();
 		const { copyText } = commonFunction();
+		const state = reactive({
+			isMobile: false,
+		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
@@ -613,6 +617,7 @@ export default defineComponent({
 					getThemeConfig.value.isDrawer = false;
 					initLayoutChangeFun();
 					onMenuBarHighlightChange();
+					state.isMobile = other.isMobile();
 				});
 				setTimeout(() => {
 					// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
@@ -661,6 +666,7 @@ export default defineComponent({
 			onShareTagsViewChange,
 			onCopyConfigClick,
 			onResetConfigClick,
+			...toRefs(state),
 		};
 	},
 });

src/layout/navBars/tagsView/tagsView.vue

@@ -49,6 +49,7 @@ import { ElMessage } from 'element-plus';
 import { useStore } from '/@/store/index';
 import { Session } from '/@/utils/storage';
 import { isObjectValueEqual } from '/@/utils/arrayOperation';
+import other from '/@/utils/other';
 import Contextmenu from '/@/layout/navBars/tagsView/contextmenu.vue';
 export default {
 	name: 'layoutTagsView',
@@ -397,10 +398,10 @@ export default {
 			});
 		};
 		// 设置 tagsView 可以进行拖拽
-		const initSortable = () => {
+		const initSortable = async () => {
 			const el = document.querySelector('.layout-navbars-tagsview-ul') as HTMLElement;
 			if (!el) return false;
-			state.sortable && state.sortable.destroy();
+			state.sortable.el && state.sortable.destroy();
 			state.sortable = Sortable.create(el, {
 				animation: 300,
 				dataIdAttr: 'data-url',
@@ -417,11 +418,9 @@ export default {
 			});
 		};
 		// 拖动问题，https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI
-		const onSortableResize = () => {
+		const onSortableResize = async () => {
-			const clientWidth = document.body.clientWidth;
+			await initSortable();
-			if (clientWidth < 1000) getThemeConfig.value.isSortableTagsView = false;
+			if (other.isMobile()) state.sortable.el && state.sortable.destroy();
-			else getThemeConfig.value.isSortableTagsView = true;
-			initSortable();
 		};
 		// 页面加载前
 		onBeforeMount(() => {

src/utils/other.ts

@@ -89,6 +89,21 @@ export function deepClone(obj: any) {
 	return newObj;
 }
 
+/**
+ * 判断是否是移动端
+ */
+export function isMobile() {
+	if (
+		navigator.userAgent.match(
+			/('phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone')/i
+		)
+	) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
 /**
  * 统一批量导出
  * @method elSvg 导出全局注册 element plus svg 图标
@@ -96,6 +111,7 @@ export function deepClone(obj: any) {
  * @method lazyImg 图片懒加载
  * @method globalComponentSize element plus 全局组件大小
  * @method deepClone 对象深克隆
+ * @method isMobile 判断是否是移动端
  */
 const other = {
 	elSvg: (app: App) => {
@@ -113,6 +129,9 @@ const other = {
 	deepClone: (obj: any) => {
 		deepClone(obj);
 	},
+	isMobile: () => {
+		return isMobile();
+	},
 };
 
 // 统一批量导出