CODE
<template> <div id="wrapper"> <main> <div>文件路径:{{filePath}}</div> <el-input type="textarea" :rows="18" style="margin-top: 10px" resize="none" placeholder="请输入内容" v-model="textarea"> </el-input> <div class="btn" @click="copyToClipBoard">复制转换后的文本</div> </main> </div> </template> <script> export default { name: 'landing-page', data() { return { filePath: null, textarea: null } }, methods: { fileLoad() { document.addEventListener('drop', (e) => { e.preventDefault(); e.stopPropagation(); for (const f of e.dataTransfer.files) { this.filePath = f.path } console.log(e.dataTransfer.files) let file = e.dataTransfer.files[0]; let that = this; let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (event) { that.textarea = event.target.result } }); document.addEventListener('dragover', (e) => { e.preventDefault(); e.stopPropagation(); }); }, copyToClipBoard() { let txt = document.querySelector('.el-textarea__inner'); txt.select(); // 选择对象 document.execCommand('Copy'); // 执行浏览器复制命令 this.$message({ showClose: true, message: '已经成功复制到剪切板', type: 'success' }); } }, mounted() { this.fileLoad() } } </script> <style> @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); /*滚动条样式*/ ::-webkit-scrollbar { 8px; height: 8px; background-color: transparent; } ::-webkit-scrollbar-thumb { border-radius: 2px; background: rgba(0, 0, 0, .2); } * { box-sizing: border-box; margin: 0; padding: 0; } body { /*font-family: 'Source Sans Pro', sans-serif;*/ font-family: "Microsoft YaHei", sans-serif; } #wrapper { background: radial-gradient( ellipse at top left, rgba(255, 255, 255, 1) 40%, rgba(229, 229, 229, .9) 100% ); height: 100vh; padding: 30px 30px; 100vw; font-size: 14px; } .btn { margin-top: 10px; 100%; height: 35px; line-height: 35px; text-align: center; color: #666; border: 1px solid #666; cursor: pointer; } </style>