项目实训九

在实现输入和输出功能中，需要手绘框的手写功能，图片上传中的本地上传和手机拍摄上传的功能，因此在点击相关功能的实现按钮时，存在界面的冲突，需通过getScreen函数实现对手机端打开还是电脑端打开的方式，对相应的设备写入，通过isMobile.value实现

let isMobile = ref(false)
const getScreen = () => {
  if (
    navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  ) {
    isMobile.value = true
    // console.log('手机')
  } else {
    isMobile.value = false
    // console.log('pc')
  }
}

进入页面代码

onMounted(() => {
  console.log('%c Code & Theme By zy', 'color:#C779D0')
  console.log('%c xxxxxx', 'color:#C779D0')
  getScreen()
})

画板功能补充

绑定手绘板补充说明

const esign = ref(null)

经过网上学习，用esign组建绑定手绘板dom组件，用essign操控组件

利用组件的方法实现画板的清空

在设置默认值后，考虑到图片识别结束，需再次进行下一次识别，再次识别时以及清空画板之后，默认画笔和线宽保持之前的值，实现方式如下：

const lineWidth = ref(6) // 默认线宽
const lineColor = ref('#000000') // 默认笔颜色
const bgColor = ref('rgba(255,255,255,1)') // 默认手绘板背景
const resultImg = ref('') // 手绘板生成的图片，默认为空
const isCrop = ref(false) // 默认不剪切
const latexValue = ref()
const penType = ref('画笔') // 默认笔类型

为了实现恢复之前所选的数据，设置临时存储画笔和线宽的值

const t_lineWidth = ref(6) // 默认线宽
const t_lineColor = ref('#000000') // 默认笔颜色

输入输出框的实现

输出框，通过.out-title类进行实现

.out-title {
    text-align: left;
    line-height: 200%;
    background-color: #fff2d4;
    border-radius: 20px 20px 0 0;
  }

输出latex公式，带有按钮“复制”公式

<div class="latex">
        <el-input v-model="latexValue" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" placeholder="latex 公式" />
        <el-button style="margin: 0 0 0 10px" type="danger" v-clipboard="'洛埋名'" v-clipboard:success="onSuccess"
          v-clipboard:error="onError">复制</el-button>
      </div>

输出图片，带有按钮“下载”图片

<div class="result">
        <div class="esigh-result">
          <img v-if="resultImg" :src="resultImg" alt="" />
        </div>
        <el-button style="margin: 0 0 0 10px" type="danger" @click="downImg">下载</el-button>
      </div>
    </div>