'admin-21.07.02:系列组件优化，请查看CHANGELOG.md更新日志文件'

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 1.0.9
+
+`2021.07.02`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 图标选择器设置宽度、v-model 等问题
+- 🎯 优化 滚动通知栏在手机上的体验
+- 🎯 优化 系统管理/新增菜单（编辑菜单），使用 `图标选择器` 进行模拟
+- 🎯 优化 字体图标(自动载入) 逻辑
+- 🐞 修复 screenfull 全屏时，按键盘 esc 键图标不改变问题，感谢群友@伯牙已遇钟子期
+
 ## 1.0.8
 
 `2021.06.29`

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
@@ -13,7 +13,7 @@
 		"cropperjs": "^1.5.12",
 		"echarts": "^5.1.2",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.0.2-beta.53",
+		"element-plus": "^1.0.2-beta.54",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
 		"print-js": "^1.6.0",
@@ -27,18 +27,18 @@
 		"vue-router": "^4.0.8",
 		"vue-web-screen-shot": "^1.2.0",
 		"vuex": "^4.0.1",
-		"wangeditor": "^4.7.4"
+		"wangeditor": "^4.7.5"
 	},
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^15.12.5",
+		"@types/node": "^15.14.0",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.6",
 		"@typescript-eslint/eslint-plugin": "^4.28.1",
 		"@typescript-eslint/parser": "^4.28.1",
 		"@vitejs/plugin-vue": "^1.2.4",
-		"@vue/compiler-sfc": "^3.1.2",
+		"@vue/compiler-sfc": "^3.1.3",
 		"dotenv": "^10.0.0",
 		"eslint": "^7.29.0",
 		"eslint-plugin-vue": "^7.12.1",
@@ -47,7 +47,7 @@
 		"sass-loader": "^12.1.0",
 		"typescript": "^4.3.5",
 		"vite": "^2.3.8",
-		"vue-eslint-parser": "^7.6.0"
+		"vue-eslint-parser": "^7.7.1"
 	},
 	"browserslist": [
 		"> 1%",

src/components/iconSelector/index.vue

@@ -10,9 +10,18 @@
 					:size="size"
 					ref="inputWidthRef"
 					@clear="onClearFontIcon"
+					@input="onIconInput"
 				>
 					<template #prepend>
-						<i :class="fontIconPrefix === '' ? prepend : fontIconPrefix" class="font14"></i>
+						<i
+							:class="[
+								fontIconIndex === '' ? prepend : fontIconPrefix,
+								{ iconfont: fontIconTabsIndex === 0 },
+								{ ele: fontIconTabsIndex === 1 },
+								{ fa: fontIconTabsIndex === 2 },
+							]"
+							class="font14"
+						></i>
 					</template>
 				</el-input>
 			</template>
@@ -21,13 +30,13 @@
 					<div class="icon-selector-warp-title">{{ title }}</div>
 					<div class="icon-selector-warp-row">
 						<el-scrollbar>
-							<el-row :gutter="10">
+							<el-row :gutter="10" v-if="fontIconSheetsFilterList.length > 0">
 								<el-col
-									:xs="4"
+									:xs="6"
 									:sm="4"
-									:md="2"
+									:md="4"
-									:lg="2"
+									:lg="4"
-									:xl="1"
+									:xl="4"
 									:class="`${fontIconTabsIcon}-col`"
 									@click="onColClick(v, k)"
 									v-for="(v, k) in fontIconSheetsFilterList"
@@ -56,6 +65,7 @@ import { ref, toRefs, reactive, onMounted, nextTick, computed } from 'vue';
 import initIconfont from '/@/utils/getStyleSheets';
 export default {
 	name: 'iconSelector',
+	emits: ['update:modelValue', 'get', 'clear'],
 	props: {
 		// 输入框前置内容
 		prepend: {
@@ -97,6 +107,9 @@ export default {
 			type: String,
 			default: () => '无相关图标',
 		},
+		// 双向绑定值，字段名为固定，改了之后将不生效
+		// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
+		modelValue: String,
 	},
 	setup(props, { emit }) {
 		const inputWidthRef = ref();
@@ -110,6 +123,25 @@ export default {
 			fontIconTabsIcon: 'iconfont ali',
 			fontIconSheetsList: [],
 		});
+		// icon input 改变时，实现双向绑定
+		const onIconInput = (icon) => {
+			emit('update:modelValue', icon);
+		};
+		// 处理 icon 双向绑定数值回显
+		const initModeValueEcho = () => {
+			// 父级 v-model 为空，不执行下一步
+			if (props.modelValue === '') return false;
+			// 双向绑定赋值回显
+			state.fontIconSearch = props.modelValue;
+			// 处理回显
+			let iconData: object = {};
+			for (let i in state.fontIconSheetsList) {
+				if (state.fontIconSheetsList[i].toLowerCase().indexOf(props.modelValue) !== -1) {
+					iconData = { item: state.fontIconSheetsList[i] };
+				}
+			}
+			onColClick(iconData.item, 0);
+		};
 		// 设置无数据时的空状态
 		const fontIconSheetsFilterList = computed(() => {
 			if (!state.fontIconSearch) return state.fontIconSheetsList;
@@ -131,34 +163,35 @@ export default {
 			});
 		};
 		// 初始化数据
-		const initFontIconData = () => {
+		const initFontIconData = async () => {
 			if (props.type === 'ali') {
-				initIconfont.ali().then((res: any) => {
+				await initIconfont.ali().then((res: any) => {
-					state.fontIconTabsIcon = 'iconfont ali';
+					state.fontIconTabsIcon = 'iconfont';
 					state.fontIconTabsIndex = 0;
 					state.fontIconSheetsList = res;
 				});
 			} else if (props.type === 'ele') {
-				initIconfont.ele().then((res: any) => {
+				await initIconfont.ele().then((res: any) => {
 					state.fontIconTabsIcon = 'ele';
 					state.fontIconTabsIndex = 1;
 					state.fontIconSheetsList = res;
 				});
 			} else if (props.type === 'awe') {
-				initIconfont.awe().then((res: any) => {
+				await initIconfont.awe().then((res: any) => {
-					state.fontIconTabsIcon = 'fa awe';
+					state.fontIconTabsIcon = 'fa';
 					state.fontIconTabsIndex = 2;
 					state.fontIconSheetsList = res;
 				});
 			}
+			initModeValueEcho();
 		};
 		// 获取当前点击的 icon 图标
 		const onColClick = (v: any, k: number) => {
 			state.fontIconIndex = k;
 			state.fontIconVisible = false;
-			if (state.fontIconTabsIndex === 0) state.fontIconPrefix = `iconfont ali ${v}`;
+			if (state.fontIconTabsIndex === 0) state.fontIconPrefix = `${v}`;
-			else if (state.fontIconTabsIndex === 1) state.fontIconPrefix = `ele ${v}`;
+			else if (state.fontIconTabsIndex === 1) state.fontIconPrefix = `${v}`;
-			else if (state.fontIconTabsIndex === 2) state.fontIconPrefix = `fa awe ${v}`;
+			else if (state.fontIconTabsIndex === 2) state.fontIconPrefix = `${v}`;
 			emit('get', state.fontIconPrefix);
 		};
 		// 清空当前点击的 icon 图标
@@ -178,6 +211,7 @@ export default {
 			fontIconSheetsFilterList,
 			onColClick,
 			onClearFontIcon,
+			onIconInput,
 			...toRefs(state),
 		};
 	},

src/components/noticeBar/index.vue

@@ -3,10 +3,8 @@
 		<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
 			<i v-if="leftIcon" class="notice-bar-warp-left-icon" :class="leftIcon"></i>
 			<div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
-				<div class="notice-bar-warp-text" ref="noticeBarWarpTextRef">
+				<div class="notice-bar-warp-text" ref="noticeBarTextRef" v-if="!scrollable">{{ text }}</div>
-					<template v-if="!scrollable">{{ text }}</template>
+				<div class="notice-bar-warp-slot" v-else><slot /></div>
-					<template v-else><slot /></template>
-				</div>
 			</div>
 			<i v-if="rightIcon" class="notice-bar-warp-right-icon" :class="rightIcon" @click="onRightIconClick"></i>
 		</div>
@@ -76,7 +74,7 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const noticeBarWarpRef = ref();
-		const noticeBarWarpTextRef = ref();
+		const noticeBarTextRef = ref();
 		const state = reactive({
 			order: 1,
 			oneTime: '',
@@ -89,7 +87,7 @@ export default defineComponent({
 		const initAnimation = () => {
 			nextTick(() => {
 				state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
-				state.textOWidth = noticeBarWarpTextRef.value.offsetWidth;
+				state.textOWidth = noticeBarTextRef.value.offsetWidth;
 				document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
 				document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
 				computeAnimationTime();
@@ -106,15 +104,15 @@ export default defineComponent({
 		// 改变 animation 动画调用
 		const changeAnimation = () => {
 			if (state.order === 1) {
-				noticeBarWarpTextRef.value.style.animation = `oneAnimation ${state.oneTime}s linear`;
+				noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
 				state.order = 2;
 			} else {
-				noticeBarWarpTextRef.value.style.animation = `twoAnimation ${state.twoTime}s linear infinite`;
+				noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
 			}
 		};
 		// 监听 animation 动画的结束
 		const listenerAnimationend = () => {
-			noticeBarWarpTextRef.value.addEventListener(
+			noticeBarTextRef.value.addEventListener(
 				'animationend',
 				() => {
 					changeAnimation();
@@ -140,7 +138,7 @@ export default defineComponent({
 		});
 		return {
 			noticeBarWarpRef,
-			noticeBarWarpTextRef,
+			noticeBarTextRef,
 			onRightIconClick,
 			...toRefs(state),
 		};
@@ -169,7 +167,10 @@ export default defineComponent({
 				white-space: nowrap;
 				position: absolute;
 				left: 0;
+			}
+			.notice-bar-warp-slot {
 				width: 100%;
+				white-space: nowrap;
 				::v-deep(.el-carousel__item) {
 					display: flex;
 					align-items: center;
@@ -178,10 +179,12 @@ export default defineComponent({
 		}
 		.notice-bar-warp-left-icon {
 			width: 24px;
+			font-size: inherit !important;
 		}
 		.notice-bar-warp-right-icon {
 			width: 24px;
 			text-align: right;
+			font-size: inherit !important;
 			&:hover {
 				cursor: pointer;
 			}

src/layout/navBars/breadcrumb/user.vue

@@ -120,7 +120,10 @@ export default {
 				return false;
 			}
 			screenfull.toggle();
-			state.isScreenfull = !state.isScreenfull;
+			screenfull.on('change', () => {
+				if (screenfull.isFullscreen) state.isScreenfull = true;
+				else state.isScreenfull = false;
+			});
 		};
 		// 布局配置 icon 点击时
 		const onLayoutSetingClick = () => {

src/theme/iconSelector.scss

@@ -3,7 +3,7 @@
 .icon-selector-popper {
 	padding: 0 !important;
 	.icon-selector-warp {
-		height: 300px;
+		height: 260px;
 		overflow: hidden;
 		.icon-selector-warp-title {
 			height: 40px;
@@ -11,7 +11,7 @@
 			padding: 0 15px;
 		}
 		.icon-selector-warp-row {
-			height: 260px;
+			height: 230px;
 			overflow: hidden;
 			border-top: 1px solid #ebeef5;
 			.el-row {
@@ -20,17 +20,10 @@
 			.el-scrollbar__bar.is-horizontal {
 				display: none;
 			}
-			.ele-col:nth-last-child(1),
-			.ele-col:nth-last-child(2) {
-				display: none;
-			}
-			.awe-col:nth-child(-n + 24) {
-				display: none;
-			}
 			.icon-selector-warp-item {
 				display: flex;
 				border: 1px solid #ebeef5;
-				padding: 10px;
+				padding: 5px;
 				border-radius: 5px;
 				margin-bottom: 10px;
 				.icon-selector-warp-item-value {

src/utils/getStyleSheets.ts

@@ -36,9 +36,11 @@ const getElementPlusIconfont = () => {
 			for (let i = 0; i < styles.length; i++) {
 				for (let j = 0; j < styles[i].cssRules.length; j++) {
 					if (styles[i].cssRules[j].selectorText && styles[i].cssRules[j].selectorText.indexOf('.el-icon-') === 0) {
-						sheetsIconList.push(
+						if (!/--/.test(styles[i].cssRules[j].selectorText)) {
-							`${styles[i].cssRules[j].selectorText.substring(1, styles[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
+							sheetsIconList.push(
-						);
+								`${styles[i].cssRules[j].selectorText.substring(1, styles[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
+							);
+						}
 					}
 				}
 			}
@@ -67,9 +69,11 @@ const getAwesomeIconfont = () => {
 						sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 &&
 						sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1
 					) {
-						sheetsIconList.push(
+						if (/::before/.test(sheetsList[i].cssRules[j].selectorText)) {
-							`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
+							sheetsIconList.push(
-						);
+								`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
+							);
+						}
 					}
 				}
 			}

src/utils/setIconfont.ts

@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-	'//at.alicdn.com/t/font_2298093_wl7t9plo8fs.css',
+	'//at.alicdn.com/t/font_2298093_ke79kmw5s7r.css',
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 ];
 // 第三方 js url

src/views/fun/noticeBar/index.vue

@@ -11,7 +11,8 @@
 			<NoticeBar
 				text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
 				的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
-				leftIcon="el-icon-bell"
+				leftIcon="iconfont icon-tongzhi2"
+				rightIcon="el-icon-arrow-right"
 				background="#ecf5ff"
 				color="#409eff"
 			/>
@@ -55,9 +56,10 @@ export default defineComponent({
 	setup() {
 		const state = reactive({
 			noticeList: [
-				'🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）',
+				'🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等',
+				'适配手机、平板、pc的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）',
 				'仓库地址：https://gitee.com/lyt-top/vue-next-admin',
-				'演示地址：vue3.x 版本预览（vue-next-admin）https://lyt-top.gitee.io/vue-next-admin-preview/#/login',
+				'演示地址：https://lyt-top.gitee.io/vue-next-admin-preview/#/login',
 			],
 			tableData: [
 				{
@@ -120,7 +122,7 @@ export default defineComponent({
 					a1: 'scrollable',
 					a2: '是否开启垂直滚动',
 					a3: 'boolean',
-					a4: '',
+					a4: 'true',
 					a5: 'false',
 				},
 				{

src/views/fun/selector/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="selector-container">
 		<el-card shadow="hover" header="图标选择器(宽度自动)：简单版本">
-			<IconSelector @get="onGetIcon" @clear="onClearIcon" />
+			<IconSelector @get="onGetIcon" @clear="onClearIcon" v-model="modelIcon" />
 		</el-card>
 
 		<el-card shadow="hover" header="图标选择器(宽度自动)：参数" class="mt15">
@@ -33,6 +33,7 @@ export default defineComponent({
 	components: { IconSelector },
 	setup() {
 		const state = reactive({
+			modelIcon: '',
 			tableData: [
 				{
 					a1: 'prepend',

src/views/pages/awesome/index.vue

@@ -46,9 +46,6 @@ export default {
 	.iconfont-row {
 		border-top: 1px solid #ebeef5;
 		border-left: 1px solid #ebeef5;
-		.el-col:nth-child(-n + 24) {
-			display: none;
-		}
 		.iconfont-warp {
 			text-align: center;
 			border-right: 1px solid #ebeef5;

src/views/pages/element/index.vue

@@ -46,10 +46,6 @@ export default {
 	.iconfont-row {
 		border-top: 1px solid #ebeef5;
 		border-left: 1px solid #ebeef5;
-		.el-col:nth-last-child(1),
-		.el-col:nth-last-child(2) {
-			display: none;
-		}
 		.iconfont-warp {
 			text-align: center;
 			border-right: 1px solid #ebeef5;

src/views/system/menu/component/addMenu.vue

@@ -15,7 +15,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="菜单图标">
-							<el-input v-model="ruleForm.meta.icon" placeholder="请输入菜单图标" clearable></el-input>
+							<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" />
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -98,9 +98,11 @@
 
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
+import IconSelector from '/@/components/iconSelector/index.vue';
 // import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
 export default {
 	name: 'systemAddMenu',
+	components: { IconSelector },
 	setup() {
 		const state = reactive({
 			isShowDialog: false,

src/views/system/menu/component/editMenu.vue

@@ -15,7 +15,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="菜单图标">
-							<el-input v-model="ruleForm.meta.icon" placeholder="请输入菜单图标" clearable></el-input>
+							<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" />
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -98,10 +98,12 @@
 
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
+import IconSelector from '/@/components/iconSelector/index.vue';
 import { useI18n } from 'vue-i18n';
 // import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
 export default {
 	name: 'systemEditMenu',
+	components: { IconSelector },
 	setup() {
 		const { t } = useI18n();
 		const state = reactive({
@@ -136,6 +138,7 @@ export default {
 			state.ruleForm.isLink = row.meta.isLink ? 'true' : '';
 			state.ruleForm.menuSort = '';
 			state.ruleForm.meta.title = t(row.meta.title);
+			// 回显时，图标选择器有这个图标才可以回显，菜单中使用了阿里的、element plus的，二者不可共存
 			state.ruleForm.meta.icon = row.meta.icon;
 			state.ruleForm.meta.isHide = row.meta.isHide ? 'true' : 'false';
 			state.ruleForm.meta.isKeepAlive = row.meta.isKeepAlive ? 'true' : 'false';