'admin-21.12.21:更新优化内容请看CHANGELOG.md文件'
This commit is contained in:
parent
18ef20b230
commit
9051c31771
@ -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`
|
||||
|
@ -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
|
||||
|
18
package.json
18
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": [
|
||||
|
@ -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>
|
||||
|
@ -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`;
|
||||
}
|
||||
});
|
||||
// 页面加载时
|
||||
|
@ -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 当前值字符串
|
||||
|
@ -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,
|
||||
|
@ -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),
|
||||
|
Loading…
Reference in New Issue
Block a user