'admin-21.04.02:去掉多余无用文件夹、新增web端自定义截屏演示'

README.md

@@ -118,6 +118,7 @@ cnpm run build
 - <a href="https://github.com/antvis/g6" target="_blank">@antv/g6</a>
 - <a href="https://github.com/davidshimjs/qrcodejs" target="_blank">qrcodejs</a>
 - <a href="https://github.com/crabbly/Print.js" target="_blank">print-js</a>
+- <a href="https://github.com/likaia/screen-shot" target="_blank">vue-web-screen-shot</a>
 
 #### 特别感谢
 

package.json

@@ -24,6 +24,7 @@
 		"vue": "^3.0.5",
 		"vue-i18n": "^9.0.0",
 		"vue-router": "^4.0.2",
+		"vue-web-screen-shot": "^1.1.8",
 		"vuex": "^4.0.0-rc.2",
 		"wangeditor": "^4.6.12"
 	},

src/api/menu/index.ts

@@ -1,7 +1,7 @@
 import request from '/@/utils/request.ts';
 
 /**
- * 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-next-admin-images/raw/master/menu/menu
+ * 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu
  * 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
  */
 // 获取后端动态路由菜单(admin)

src/components/notice/index.vue

@@ -1,113 +0,0 @@
-<template>
-	<div class="notice-container">
-		<ul class="notice-ul" :class="directionStyle">
-			<li v-for="(v, k) in noticeList" :key="k" class="notice-li">
-				{{ v }}
-			</li>
-		</ul>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onBeforeMount, onUnmounted } from 'vue';
-export default {
-	name: 'notice',
-	props: {
-		// 滚动方向 可选值"<upper|right|lower|left>"
-		direction: {
-			type: String,
-			default: () => 'lower',
-		},
-	},
-	setup(props) {
-		console.log(props);
-		const state = reactive({
-			noticeList: ['asdasds', 'bbbbb'],
-			isScroll: false,
-			directionStyle: '',
-		});
-		// 初始化通知滚动
-		const initNoticeScroll = () => {
-			window.setInterval(onNoticeScroll, 2000);
-		};
-		// 处理通知滚动数据
-		const onNoticeScroll = () => {
-			const { direction } = props;
-			if (direction === 'upper') setDirectionStyle();
-			state.isScroll = true;
-			if (direction === 'lower') setDirectionStyle();
-			window.setTimeout(() => {
-				if (direction === 'upper') {
-					state.noticeList.push(state.noticeList[0]);
-					state.noticeList.shift();
-				} else if (direction === 'lower') {
-					state.noticeList.unshift(state.noticeList[state.noticeList.length - 1]);
-					state.noticeList.pop();
-				}
-				state.isScroll = false;
-				setDirectionStyle();
-			}, 500);
-		};
-		// 动态设置方向样式
-		const setDirectionStyle = () => {
-			const { direction } = props;
-			if (direction === 'upper') {
-				state.isScroll ? (state.directionStyle = 'notice-ul-upper') : (state.directionStyle = '');
-				console.log(1111);
-			} else if (direction === 'lower') {
-				state.isScroll ? (state.directionStyle = 'notice-ul-lower') : (state.directionStyle = '');
-			}
-			console.log(state.directionStyle);
-		};
-		// 页面加载前
-		onBeforeMount(() => {
-			initNoticeScroll();
-		});
-		// 页面卸载时
-		onUnmounted(() => {
-			window.clearInterval();
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-};
-</script>
-
-<style scoped lang="scss">
-.notice-container {
-	position: relative;
-	height: 40px;
-	display: block;
-	position: relative;
-	overflow: hidden;
-	.notice-ul {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		display: block;
-		position: absolute;
-		width: 100%;
-		.notice-li {
-			height: 40px;
-			line-height: 40px;
-			color: #3a3a3a;
-			background-color: #ffe4ca;
-			padding: 0 15px;
-			cursor: pointer;
-		}
-	}
-	.notice-ul-upper {
-		transition: all 0.5s;
-		margin-top: -40px;
-		top: 0;
-		left: 0;
-	}
-	.notice-ul-lower {
-		transition: all 0.5s;
-		margin-bottom: -40px;
-		bottom: 0;
-		left: 0;
-	}
-}
-</style>

src/components/screenShort/index.vue

@@ -0,0 +1,48 @@
+<template>
+	<div>
+		<screen-short v-if="screenshotStatus" @destroy-component="destroyComponent" @get-image-data="getImageData"></screen-short>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent, onUnmounted } from 'vue';
+export default defineComponent({
+	name: 'screenShortComponent',
+	setup(props, { emit }) {
+		const state = reactive({
+			screenshotStatus: false,
+		});
+		// 打开截屏
+		const openScreenshot = () => {
+			state.screenshotStatus = true;
+			onMonitorKeyup();
+		};
+		// 销毁组件函数
+		const destroyComponent = (status: boolean) => {
+			state.screenshotStatus = status;
+		};
+		// 获取裁剪区域图片信息
+		const getImageData = (base64: string) => {
+			emit('getBase64', base64);
+		};
+		// 监听键盘 `esc` 按下
+		const onMonitorKeyup = () => {
+			if (!state.screenshotStatus) return false;
+			window.addEventListener('keydown', (e: any) => {
+				if (e.keyCode === 27) destroyComponent();
+			});
+		};
+		// 页面销毁时
+		onUnmounted(() => {
+			window.removeEventListener('keydown', () => {});
+		});
+		return {
+			openScreenshot,
+			destroyComponent,
+			getImageData,
+			onMonitorKeyup,
+			...toRefs(state),
+		};
+	},
+});
+</script>

src/i18n/lang/en.ts

@@ -31,6 +31,7 @@ export default {
 		funEchartsMap: 'EchartsMap',
 		funPrintJs: 'PrintJs',
 		funClipboard: 'Copy cut',
+		funScreenShort: 'screenCapture',
 		pagesIndex: 'pages',
 		pagesFiltering: 'Filtering',
 		pagesFilteringDetails: 'FilteringDetails',

src/i18n/lang/zh-cn.ts

@@ -31,6 +31,7 @@ export default {
 		funEchartsMap: '地理坐标/地图',
 		funPrintJs: '页面打印',
 		funClipboard: '复制剪切',
+		funScreenShort: 'web端自定义截屏',
 		pagesIndex: '页面',
 		pagesFiltering: '过滤筛选组件',
 		pagesFilteringDetails: '过滤筛选组件详情',

src/i18n/lang/zh-tw.ts

@@ -31,6 +31,7 @@ export default {
 		funEchartsMap: '地理座標/地圖',
 		funPrintJs: '頁面列印',
 		funClipboard: '複製剪切',
+		funScreenShort: '自定義截圖',
 		pagesIndex: '頁面',
 		pagesFiltering: '過濾篩選組件',
 		pagesFilteringDetails: '過濾篩選組件詳情',

src/main.ts

@@ -9,9 +9,10 @@ import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import '/@/theme/index.scss';
 import mitt from 'mitt';
+import screenShort from 'vue-web-screen-shot';
 
 const app = createApp(App);
-app.use(router).use(store, key).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).mount('#app');
+app.use(router).use(store, key).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(screenShort, { enableWebRtc: false }).mount('#app');
 app.config.globalProperties.mittBus = mitt();
 
 authDirective(app);

src/router/index.ts

@@ -484,6 +484,21 @@ export const dynamicRoutes = [
 							icon: 'el-icon-document-copy',
 						},
 					},
+					{
+						path: '/fun/screenShort',
+						name: 'funScreenShort',
+						component: () => import('/@/views/fun/screenShort/index.vue'),
+						meta: {
+							title: 'message.router.funScreenShort',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'el-icon-crop',
+						},
+					},
 				],
 			},
 			{

src/theme/other.scss

@@ -14,3 +14,15 @@
 	border-bottom-right-radius: 3px;
 	z-index: 1 !important;
 }
+
+/* web端自定义截屏
+------------------------------- */
+#screenShotContainer {
+	z-index: 9998 !important;
+}
+#toolPanel {
+	height: 42px !important;
+}
+#optionPanel {
+	height: 37px !important;
+}

src/views/fun/screenShort/index.vue

@@ -0,0 +1,41 @@
+<template>
+	<div>
+		<el-card shadow="hover" header="web端自定义截屏演示">
+			<el-alert
+				title="感谢优秀的 `vue-web-screen-shot`，项目地址：https://github.com/likaia/screen-shot"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<ScreenShort ref="screenShortRef" @getBase64="onGetBase64" />
+			<el-button type="primary" size="small" @click="onScreenShortClick" icon="el-icon-crop">点击截屏</el-button>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, ref } from 'vue';
+import ScreenShort from '/@/components/screenShort/index.vue';
+export default {
+	name: 'screenShort',
+	components: { ScreenShort },
+	setup() {
+		const screenShortRef = ref();
+		const state = reactive({});
+		// 截屏点击
+		const onScreenShortClick = () => {
+			screenShortRef.value.openScreenshot();
+		};
+		// 获取截屏数据
+		const onGetBase64 = (base64: string) => {
+			console.log(base64);
+		};
+		return {
+			screenShortRef,
+			onScreenShortClick,
+			onGetBase64,
+			...toRefs(state),
+		};
+	},
+};
+</script>

src/views/layout/lockScreen/index.vue

@@ -100,7 +100,7 @@ export default {
 					el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
 					state.moveDifference = -el.clientHeight;
 					setTimeout(() => {
-						el.remove();
+						el && el.parentNode?.removeChild(el);
 					}, 300);
 				}
 				if (state.moveDifference === -el.clientHeight) {