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

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>