'admin-21.12.21:更新优化内容请看CHANGELOG.md文件'

2021-12-21 21:32:26 +08:00 · 2021-12-21 21:32:26 +08:00 · 9051c31771
commit 9051c31771
parent 18ef20b230
8 changed files with 124 additions and 18 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,15 @@

 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）

+## 1.2.2
+
+`2021.12.21`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 iframes 滚动条问题
+- 🎉 新增 工具类百分比验证演示
+- 🐞 修复 [tag-view 标签右键会超出浏览器 #I4KN78](https://gitee.com/lyt-top/vue-next-admin/issues/I4KN78)
+
 ## 1.2.1

 `2021.12.12`
--- a/index.html
+++ b/index.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 	<head>
-		<meta charset="UTF-8" />
+		<meta charset="utf-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "1.2.0",
+	"version": "1.2.2",
 	"description": "vue3 vite next admin template",
 	"author": "lyt_20201208",
 	"license": "MIT",
@ -38,21 +38,21 @@
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.11.12",
+		"@types/node": "^17.0.2",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^5.6.0",
-		"@typescript-eslint/parser": "^5.6.0",
-		"@vitejs/plugin-vue": "^2.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.8.0",
+		"@typescript-eslint/parser": "^5.8.0",
+		"@vitejs/plugin-vue": "^2.0.1",
 		"@vue/compiler-sfc": "^3.2.26",
 		"dotenv": "^10.0.0",
-		"eslint": "^8.4.1",
+		"eslint": "^8.5.0",
 		"eslint-plugin-vue": "^8.2.0",
 		"prettier": "^2.5.1",
-		"sass": "^1.45.0",
+		"sass": "^1.45.1",
 		"sass-loader": "^12.4.0",
-		"typescript": "^4.5.3",
-		"vite": "^2.7.1",
+		"typescript": "^4.5.4",
+		"vite": "^2.7.4",
 		"vue-eslint-parser": "^8.0.1"
 	},
 	"browserslist": [
--- a/src/layout/navBars/tagsView/contextmenu.vue
+++ b/src/layout/navBars/tagsView/contextmenu.vue
@ -24,13 +24,13 @@
 					</li>
 				</template>
 			</ul>
-			<div class="el-popper__arrow" style="left: 10px"></div>
+			<div class="el-popper__arrow" :style="{ left: `${arrowLeft}px` }"></div>
 		</div>
 	</transition>
 </template>

 <script lang="ts">
-import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted } from 'vue';
+import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted, watch } from 'vue';
 export default defineComponent({
 	name: 'layoutTagsViewContextmenu',
 	props: {
@ -54,10 +54,19 @@ export default defineComponent({
 				},
 			],
 			item: {},
+			arrowLeft: 10,
 		});
 		// 父级传过来的坐标 x,y 值
 		const dropdowns = computed(() => {
-			return props.dropdown;
+			// 117 为 `Dropdown 下拉菜单` 的宽度
+			if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
+				return {
+					x: document.documentElement.clientWidth - 117 - 5,
+					y: props.dropdown.y,
+				};
+			} else {
+				return props.dropdown;
+			}
 		});
 		// 当前项菜单点击
 		const onCurrentContextmenuClick = (contextMenuClickId: number) => {
@ -84,6 +93,17 @@ export default defineComponent({
 		onUnmounted(() => {
 			document.body.removeEventListener('click', closeContextmenu);
 		});
+		// 监听下拉菜单位置
+		watch(
+			() => props.dropdown,
+			({ x }) => {
+				if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
+				else state.arrowLeft = 10;
+			},
+			{
+				deep: true,
+			}
+		);
 		return {
 			dropdowns,
 			openContextmenu,
@ -107,5 +127,10 @@ export default defineComponent({
 			font-size: 12px !important;
 		}
 	}
+	.el-dropdown-menu-arrow {
+		&::before {
+			content: '';
+		}
+	}
 }
 </style>
--- a/src/layout/routerView/iframes.vue
+++ b/src/layout/routerView/iframes.vue
@ -34,10 +34,10 @@ export default defineComponent({
 			let { isTagsview } = store.state.themeConfig.themeConfig;
 			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
 			if (isTagsViewCurrenFull) {
-				return `0px`;
+				return `1px`;
 			} else {
-				if (isTagsview) return `83px`;
-				else return `49px`;
+				if (isTagsview) return `85px`;
+				else return `51px`;
 			}
 		});
 		// 页面加载时
--- a/src/utils/toolsValidate.ts
+++ b/src/utils/toolsValidate.ts
@ -4,6 +4,39 @@
 * 新增多行注释信息，鼠标放到方法名即可查看
 */

+/**
+ * 验证百分比（不可以小数）
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberPercentage(val: string): string {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 只能是数字和小数点，不能是其他输入
+	v = v.replace(/[^\d]/g, '');
+	// 不能以0开始
+	v = v.replace(/^0/g, '');
+	// 数字超过100，赋值成最大值100
+	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 验证百分比（可以小数）
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberPercentageFloat(val: string): string {
+	let v = verifyNumberIntegerAndFloat(val);
+	// 数字超过100，赋值成最大值100
+	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
+	// 超过100之后不给再输入值
+	v = v.replace(/^100\.$/, '100');
+	// 返回结果
+	return v;
+}
+
 /**
 * 小数或整数(不可以负数)
 * @param val 当前值字符串
--- a/src/views/tools/index.vue
+++ b/src/views/tools/index.vue
@ -1,7 +1,23 @@
 <template>
 	<el-card shadow="hover" header="正则验证（一些项目中常用的正则）">
 		<el-form :model="ruleForm" :rules="rules" class="tools-warp-form" size="small" label-position="top">
-			<el-form-item label="小数或整数:" prop="a1">
+			<el-form-item label="验证百分比（不可以小数）:" prop="a22">
+				<div class="tools-warp-form-msg">验证可以输入大于0小于100的数字</div>
+				<div>
+					<el-input v-model="ruleForm.a22" @input="onVerifyNumberPercentage($event)" placeholder="请输入数字进行测试">
+						<template #append> % </template>
+					</el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="验证百分比（可以小数）:" prop="a23" class="mt20">
+				<div class="tools-warp-form-msg">验证可以输入大于0小于100的数字</div>
+				<div>
+					<el-input v-model="ruleForm.a23" @input="onVerifyNumberPercentageFloat($event)" placeholder="请输入数字进行测试">
+						<template #append> % </template>
+					</el-input>
+				</div>
+			</el-form-item>
+			<el-form-item label="小数或整数:" prop="a1" class="mt20">
 				<div class="tools-warp-form-msg">
 					验证可以输入小数或整数，0 开始， . 只能出现一次，保留小数点后保留2位小数。(负数时，模拟拼接负号给后台)。
 				</div>
@ -174,6 +190,8 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import {
+	verifyNumberPercentage,
+	verifyNumberPercentageFloat,
 	verifyNumberIntegerAndFloat,
 	verifiyNumberInteger,
 	verifyCnAndSpace,
@ -241,6 +259,8 @@ export default {
 				a19: '',
 				a20: '',
 				a21: '',
+				a22: '',
+				a23: '',
 			},
 			rules: {
 				a1: [
@ -318,8 +338,18 @@ export default {
 						trigger: 'change',
 					},
 				],
+				a22: [{ required: true, message: '请输入数字进行测试', trigger: 'change' }],
+				a23: [{ required: true, message: '请输入数字进行测试', trigger: 'change' }],
 			},
 		});
+		// 验证百分比（不可以小数）
+		const onVerifyNumberPercentage = (val: string) => {
+			state.ruleForm.a22 = verifyNumberPercentage(val);
+		};
+		// 验证百分比（可以小数）
+		const onVerifyNumberPercentageFloat = (val: string) => {
+			state.ruleForm.a23 = verifyNumberPercentageFloat(val);
+		};
 		// 小数或整数
 		const onVerifyNumberIntegerAndFloat = (val: string) => {
 			state.ruleForm.a1 = verifyNumberIntegerAndFloat(val);
@ -419,6 +449,8 @@ export default {
 			state.carNum = verifyCarNum(state.ruleForm.a21);
 		};
 		return {
+			onVerifyNumberPercentage,
+			onVerifyNumberPercentageFloat,
 			onVerifyNumberIntegerAndFloat,
 			onVerifiyNumberInteger,
 			onVerifyCnAndSpace,
--- a/vite.config.ts
+++ b/vite.config.ts
@ -40,6 +40,13 @@ const viteConfig: UserConfig = {
 		minify: 'esbuild',
 		sourcemap: false,
 		chunkSizeWarningLimit: 1500,
+		rollupOptions: {
+			output: {
+				entryFileNames: `assets/[name]-${new Date().getTime()}.js`,
+				chunkFileNames: `assets/[name]-${new Date().getTime()}.js`,
+				assetFileNames: `assets/[name]-${new Date().getTime()}.[ext]`,
+			},
+		},
 	},
 	define: {
 		__VUE_I18N_LEGACY_API__: JSON.stringify(false),