'admin-21.04.30:新增波浪效果指令及演示、窗格拆分器等'

src/utils/authDirective.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import { store } from '/@/store/index.ts';
 import { judementSameArr } from '/@/utils/arrayOperation.ts';
 
+// 用户权限指令
 export function authDirective(app: App) {
 	// 单个权限验证（v-auth="xxx"）
 	app.directive('auth', {

src/utils/customDirective.ts

@@ -0,0 +1,50 @@
+import type { App } from 'vue';
+
+// 按钮波浪指令
+export function wavesDirective(app: App) {
+	app.directive('waves', {
+		mounted(el, binding) {
+			el.classList.add('waves-effect');
+			binding.value && el.classList.add('waves-' + binding.value);
+			function setConvertStyle(obj: any) {
+				let style: string = '';
+				for (let i in obj) {
+					if (obj.hasOwnProperty(i)) style += i + ':' + obj[i] + ';';
+				}
+				return style;
+			}
+			function onCurrentClick(e: any) {
+				let elDiv = document.createElement('div');
+				elDiv.classList.add('waves-ripple');
+				el.appendChild(elDiv);
+				let styles = {
+					left: `${e.layerX}px`,
+					top: `${e.layerY}px`,
+					opacity: 1,
+					transform: `scale(${(el.clientWidth / 100) * 10})`,
+					'transition-duration': `750ms`,
+					'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`,
+				};
+				elDiv.setAttribute('style', setConvertStyle(styles));
+				setTimeout(() => {
+					elDiv.setAttribute(
+						'style',
+						setConvertStyle({
+							opacity: 0,
+							transform: styles.transform,
+							left: styles.left,
+							top: styles.top,
+						})
+					);
+					setTimeout(() => {
+						elDiv && el.removeChild(elDiv);
+					}, 750);
+				}, 450);
+			}
+			el.addEventListener('mousedown', onCurrentClick, false);
+		},
+		unmounted(el) {
+			el.addEventListener('mousedown', () => {});
+		},
+	});
+}

src/utils/directive.ts

@@ -0,0 +1,11 @@
+import type { App } from 'vue';
+import { authDirective } from '/@/utils/authDirective.ts';
+import { wavesDirective } from '/@/utils/customDirective.ts';
+
+// 导出指令方法
+export function directive(app: App) {
+	// 用户权限指令
+	authDirective(app);
+	// 按钮波浪指令
+	wavesDirective(app);
+}

src/utils/setIconfont.ts

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