hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lyt 2021-12-21 21:32:26 +08:00
parent 18ef20b230
commit 9051c31771
8 changed files with 124 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -2,6 +2,15 @@
🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支） 🎉🎉🔥 `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 ## 1.2.1
`2021.12.12` `2021.12.12`

4
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta <meta

18
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-next-admin", "name": "vue-next-admin",
"version": "1.2.0", "version": "1.2.2",
"description": "vue3 vite next admin template", "description": "vue3 vite next admin template",
"author": "lyt_20201208", "author": "lyt_20201208",
"license": "MIT", "license": "MIT",
@ -38,21 +38,21 @@
"devDependencies": { "devDependencies": {
"@types/axios": "^0.14.0", "@types/axios": "^0.14.0",
"@types/clipboard": "^2.0.1", "@types/clipboard": "^2.0.1",
"@types/node": "^16.11.12", "@types/node": "^17.0.2",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/sortablejs": "^1.10.7", "@types/sortablejs": "^1.10.7",
"@typescript-eslint/eslint-plugin": "^5.6.0", "@typescript-eslint/eslint-plugin": "^5.8.0",
"@typescript-eslint/parser": "^5.6.0", "@typescript-eslint/parser": "^5.8.0",
"@vitejs/plugin-vue": "^2.0.0", "@vitejs/plugin-vue": "^2.0.1",
"@vue/compiler-sfc": "^3.2.26", "@vue/compiler-sfc": "^3.2.26",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"eslint": "^8.4.1", "eslint": "^8.5.0",
"eslint-plugin-vue": "^8.2.0", "eslint-plugin-vue": "^8.2.0",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"sass": "^1.45.0", "sass": "^1.45.1",
"sass-loader": "^12.4.0", "sass-loader": "^12.4.0",
"typescript": "^4.5.3", "typescript": "^4.5.4",
"vite": "^2.7.1", "vite": "^2.7.4",
"vue-eslint-parser": "^8.0.1" "vue-eslint-parser": "^8.0.1"
}, },
"browserslist": [ "browserslist": [

31
src/layout/navBars/tagsView/contextmenu.vue
View File

@ -24,13 +24,13 @@
</li> </li>
</template> </template>
</ul> </ul>
<div class="el-popper__arrow" style="left: 10px"></div> <div class="el-popper__arrow" :style="{ left: `${arrowLeft}px` }"></div>
</div> </div>
</transition> </transition>
</template> </template>
<script lang="ts"> <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({ export default defineComponent({
name: 'layoutTagsViewContextmenu', name: 'layoutTagsViewContextmenu',
props: { props: {
@ -54,10 +54,19 @@ export default defineComponent({
}, },
], ],
item: {}, item: {},
arrowLeft: 10,
}); });
// 父级传过来的坐标 x,y 值 // 父级传过来的坐标 x,y 值
const dropdowns = computed(() => { 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) => { const onCurrentContextmenuClick = (contextMenuClickId: number) => {
@ -84,6 +93,17 @@ export default defineComponent({
onUnmounted(() => { onUnmounted(() => {
document.body.removeEventListener('click', closeContextmenu); 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 { return {
dropdowns, dropdowns,
openContextmenu, openContextmenu,
@ -107,5 +127,10 @@ export default defineComponent({
font-size: 12px !important; font-size: 12px !important;
} }
} }
.el-dropdown-menu-arrow {
&::before {
content: '';
}
}
} }
</style> </style>

6
src/layout/routerView/iframes.vue
View File

@ -34,10 +34,10 @@ export default defineComponent({
let { isTagsview } = store.state.themeConfig.themeConfig; let { isTagsview } = store.state.themeConfig.themeConfig;
let { isTagsViewCurrenFull } = store.state.tagsViewRoutes; let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
if (isTagsViewCurrenFull) { if (isTagsViewCurrenFull) {
return `0px`; return `1px`;
} else { } else {
if (isTagsview) return `83px`; if (isTagsview) return `85px`;
else return `49px`; else return `51px`;
} }
}); });
// 页面加载时 // 页面加载时

33
src/utils/toolsValidate.ts
View File

@ -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 当前值字符串 * @param val 当前值字符串

34
src/views/tools/index.vue
View File

@ -1,7 +1,23 @@
<template> <template>
<el-card shadow="hover" header="正则验证（一些项目中常用的正则）"> <el-card shadow="hover" header="正则验证（一些项目中常用的正则）">
<el-form :model="ruleForm" :rules="rules" class="tools-warp-form" size="small" label-position="top"> <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"> <div class="tools-warp-form-msg">
验证可以输入小数或整数，0 开始， . 只能出现一次，保留小数点后保留2位小数。(负数时，模拟拼接负号给后台)。 验证可以输入小数或整数，0 开始， . 只能出现一次，保留小数点后保留2位小数。(负数时，模拟拼接负号给后台)。
</div> </div>
@ -174,6 +190,8 @@
<script lang="ts"> <script lang="ts">
import { reactive, toRefs } from 'vue'; import { reactive, toRefs } from 'vue';
import { import {
verifyNumberPercentage,
verifyNumberPercentageFloat,
verifyNumberIntegerAndFloat, verifyNumberIntegerAndFloat,
verifiyNumberInteger, verifiyNumberInteger,
verifyCnAndSpace, verifyCnAndSpace,
@ -241,6 +259,8 @@ export default {
a19: '', a19: '',
a20: '', a20: '',
a21: '', a21: '',
a22: '',
a23: '',
}, },
rules: { rules: {
a1: [ a1: [
@ -318,8 +338,18 @@ export default {
trigger: 'change', 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) => { const onVerifyNumberIntegerAndFloat = (val: string) => {
state.ruleForm.a1 = verifyNumberIntegerAndFloat(val); state.ruleForm.a1 = verifyNumberIntegerAndFloat(val);
@ -419,6 +449,8 @@ export default {
state.carNum = verifyCarNum(state.ruleForm.a21); state.carNum = verifyCarNum(state.ruleForm.a21);
}; };
return { return {
onVerifyNumberPercentage,
onVerifyNumberPercentageFloat,
onVerifyNumberIntegerAndFloat, onVerifyNumberIntegerAndFloat,
onVerifiyNumberInteger, onVerifiyNumberInteger,
onVerifyCnAndSpace, onVerifyCnAndSpace,

7
vite.config.ts
View File

@ -40,6 +40,13 @@ const viteConfig: UserConfig = {
minify: 'esbuild', minify: 'esbuild',
sourcemap: false, sourcemap: false,
chunkSizeWarningLimit: 1500, 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: { define: {
__VUE_I18N_LEGACY_API__: JSON.stringify(false), __VUE_I18N_LEGACY_API__: JSON.stringify(false),