<template><div class="m-feedback-wrap" :style="{ top: `${feedbackHeight}px` }"><div class="m-feedback-icon-wrap"><el-tooltipclass="item"effect="dark"content="内容"placement="left-end"><span:class="[`icon iconfont icon-xiaoxi m-feedback-icon`]"@click="handleOpen"@mousedown="handleFeedbackDrag"></span></el-tooltip></div><el-dialogtitle="标题":visible.sync="visible"width="1000px"append-to-bodyclass="m-dialog m-dialog-feedback"><div><el-form ref="form" :model="form" :rules="rules" label-width="100px"><div class="m-feedback-row-wrap"><el-row><el-col :span="24"><el-form-item label="问题描述" prop="describe"><el-input type="textarea" :rows="5" v-model="form.describe" /></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="附件" prop="attachment"><el-uploadclass="upload-demo m-feedback-upload"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove"multiple:on-exceed="handleExceed":file-list="fileList"list-type="picture"><el-button size="small" type="primary">点击上传</el-button><el-buttonsize="small"type="primary"@click.stop="handleCapture2">截图</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div></el-upload></el-form-item></el-col></el-row></div></el-form></div><div slot="footer" class="dialog-footer"><el-button type="primary" @click="handleSubmit">提交</el-button><el-button @click="handleClose">取消</el-button></div></el-dialog></div>
</template><script>
import {Button,Tooltip,Dialog,Form,Row,Col,FormItem,Upload,Link,Input,
} from 'element-ui'import html2canvas from 'html2canvas'
import ScreenShot from 'js-web-screen-shot'
import temp from './images/m-temp.jpg'
// import temp from '../../../bizapp/m-biz.jpg'
import temp2 from './images/m-temp2.jpg'import './font/iconfont.css'
import './index.css'let defaultFileList = [{name: 'food.jpg',url: temp,},{name: 'food2.jpg',url: temp2,},
]
export default {name: 'Feedback-Index',data() {return {visible: false,fileList: [...defaultFileList],form: {},// 表单校验rules: {title: [{ required: true, message: '请输入标题', trigger: 'blur' }],},feedbackMouseY: 0,feedbackDragging: false,feedbackHeight: 200,}},components: {[Button.name]: Button,[Tooltip.name]: Tooltip,[Dialog.name]: Dialog,[Form.name]: Form,[Row.name]: Row,[Col.name]: Col,[FormItem.name]: FormItem,[Upload.name]: Upload,[Link.name]: Link,[Input.name]: Input,},mounted() {document.addEventListener('mousemove', this.handleMouseMove)document.addEventListener('mouseup', this.handleMouseUp)},methods: {handleCapture() {html2canvas(document.body).then(function (canvas) {document.body.appendChild(canvas)})},convertBase64UrlToBlob(urlData) {let bytes = window.atob(urlData.split(',')[1]) //去掉url的头，并转换为byte//处理异常,将ascii码小于0的转换为大于0let ab = new ArrayBuffer(bytes.length)let ia = new Uint8Array(ab)for (var i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i)}return new Blob([ab], {type: 'image/jpg',})},async handleCapture2() {this.visible = falsesetTimeout(() => {try {new ScreenShot({enableWebRtc: false,completeCallback: this.callback,triggerCallback: this.triggerCallback,})} catch (error) {console.log(error)}}, 500)},callback(value) {this.visible = trueconsole.log(value)let file = this.convertBase64UrlToBlob(value.base64)console.log(file)this.fileList = [...this.fileList,{name: `${Date.now()}.png`,//url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',url: value.base64,},]},triggerCallback() {this.visible = false},handleSubmit() {this.$refs['form'].validate((valid) => {if (valid) {console.log(this.form)this.visible = falsethis.$message({message: '成功',type: 'success',})this.$refs['form'].resetFields()this.fileList = [...defaultFileList]}})},handleClose() {this.visible = falsethis.$refs['form'].clearValidate()this.$refs['form'].resetFields()this.fileList = [...defaultFileList]},handleOpen() {this.visible = true},handleRemove(file, fileList) {console.log(file, fileList)this.fileList = [...fileList]},handlePreview(file) {console.log(file)},handleExceed(files, fileList) {this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)},beforeRemove(file, fileList) {return this.$confirm(`确定删除这张图片吗？`, '提示', {type: 'warning',customClass: 'm-confirm',})},//#region 拖拽handleMouseMove(event) {if (this.feedbackDragging) {event.preventDefault()const deltaY = event.clientY - this.feedbackMouseYthis.feedbackMouseY = event.clientYlet tempFeedbackHeight = this.feedbackHeight + deltaYif (tempFeedbackHeight < 0) {tempFeedbackHeight = 0} else if (tempFeedbackHeight > window.innerHeight - 30) {tempFeedbackHeight = window.innerHeight - 30}this.feedbackHeight = tempFeedbackHeight}},handleMouseUp() {this.feedbackDragging = false},handleFeedbackDrag(event) {this.feedbackDragging = truethis.feedbackMouseY = event.clientY},//#endregion},
}
</script><style></style>

我开发的chatgpt项目：

https://chat.xutongbao.top