'admin-21.12.22:优化更新请看CHANGELOG.md文件'

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 🎉🎉🔥 `vue-prev-admin` 基于 vue2.x + webpack + element ui，适配手机、平板、pc 的后台开源免费模板库（vue3.x 请切换 master 分支）
 
+## 1.0.9
+
+`2021.12.22`
+
+- 🎯 优化 部署后每次都要强制刷新清浏览器缓存问题
+- 🎉 新增 工具类百分比验证演示
+- 🐞 修复 tag-view 标签右键会超出浏览器
+
 ## 1.0.8
 
 `2021.12.16`

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-prev-admin",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"private": true,
 	"description": "vue2 webpack admin template",
 	"author": "lyt_20201208",

src/layout/navBars/tagsView/contextmenu.vue

@@ -3,7 +3,7 @@
 		<transition name="el-zoom-in-center">
 			<ul
 				class="el-dropdown-menu el-popper el-dropdown-menu--medium custom-contextmenu"
-				:style="`top: ${this.dropdown.y}px;left: ${this.dropdown.x}px;`"
+				:style="`top: ${dropdowns.y}px;left: ${dropdowns.x}px;`"
 				x-placement="bottom-end"
 				id="contextmenu"
 				v-show="isShow"
@@ -14,7 +14,7 @@
 						<span>{{ $t(v.txt) }}</span>
 					</template>
 				</li>
-				<div x-arrow class="popper__arrow" style="left: 5px"></div>
+				<div x-arrow class="popper__arrow" :style="{ left: `${arrowLeft}px` }"></div>
 			</ul>
 		</transition>
 	</div>
@@ -38,8 +38,22 @@ export default {
 				{ id: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'el-icon-folder-delete' },
 			],
 			path: {},
+			arrowLeft: 5,
 		};
 	},
+	computed: {
+		dropdowns() {
+			// 99 为 `Dropdown 下拉菜单` 的宽度
+			if (this.dropdown.x + 99 > document.documentElement.clientWidth) {
+				return {
+					x: document.documentElement.clientWidth - 99 - 5,
+					y: this.dropdown.y,
+				};
+			} else {
+				return this.dropdown;
+			}
+		},
+	},
 	mounted() {
 		// 监听页面监听进行右键菜单的关闭
 		document.body.addEventListener('click', this.closeContextmenu);
@@ -67,6 +81,16 @@ export default {
 		// 页面卸载时，移除右键菜单监听事件
 		document.body.removeEventListener('click', this.closeContextmenu);
 	},
+	// 监听下拉菜单位置
+	watch: {
+		dropdown: {
+			handler({ x }) {
+				if (x + 99 > document.documentElement.clientWidth) this.arrowLeft = 99 - (document.documentElement.clientWidth - x);
+				else this.arrowLeft = 10;
+			},
+			deep: true,
+		},
+	},
 };
 </script>
 

src/utils/toolsValidate.js

@@ -1,8 +1,41 @@
 /**
- * 2020.11.29 整理
+ * 2020.11.29 lyt 整理
  * 工具类集合，适用于平时开发
  */
 
+/**
+ * 验证百分比（不可以小数）
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberPercentage(val) {
+	// 匹配空格
+	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) {
+	let v = verifyNumberIntegerAndFloat(val);
+	// 数字超过100，赋值成最大值100
+	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
+	// 超过100之后不给再输入值
+	v = v.replace(/^100\.$/, '100');
+	// 返回结果
+	return v;
+}
+
 // 小数或整数(不可以负数)
 export function verifyNumberIntegerAndFloat(val) {
 	// 匹配空格
@@ -14,10 +47,7 @@ export function verifyNumberIntegerAndFloat(val) {
 	// 保证第一位只能是数字，不能是点
 	v = v.replace(/^\./g, '');
 	// 小数只能出现1位
-	v = v
-		.replace('.', '$#$')
-		.replace(/\./g, '')
-		.replace('$#$', '.');
+	v = v.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
 	// 小数点后面保留2位
 	v = v.replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
 	// 返回结果

vue.config.js

@@ -25,4 +25,16 @@ module.exports = {
 		config.plugins.delete('preload');
 		config.plugins.delete('prefetch');
 	},
+	configureWebpack: {
+		output: {
+			filename: `js/[name].${new Date().getTime()}.js`,
+			chunkFilename: `js/[name].${new Date().getTime()}.js`,
+		},
+	},
+	css: {
+		extract: {
+			filename: `css/[name].${new Date().getTime()}.css`,
+			chunkFilename: `css/[name].${new Date().getTime()}.css`,
+		},
+	},
 };