SumUp

页面跳转时缓存用户填写的数据

问题： 企业新装页面用户选择银行时跳转到新页面，因为没有使用路由缓存，所以无法保存页面数据，用户选择完银行后返回页面，页面数据丢失。

解决方法：跳转到开户行页面时通过 query 传递企业新装页面内的数据，并保存在开户行页面的 data 中，选择完开户行后通过 parmas 传回，在企业新装页面的 mounted 钩子中判断，如果传递的有值，则设置 data 为传回的值，并设置页面滚动到最底部（页面原来滚动的位置）。

其他方法：

1、把选择开户行页面改为企业新装页面子组件，用 v-if 或 v-show 控制显示，此方法要修改很多代码。

2、使用 keep-alive 缓存单个指定路由：include 指定要缓存的页面的 name（可以使用 v-bind 绑定一个 name 数组，也可用 '，' 隔开，也可使用正则表达式）

3、VueX、LocalStorage、SessionStorage 等

注意点： 跳转路由时：path 和 parmas 不能共存，应该使用 name 和 parmas

web 页面调用摄像头功能

问题： 在资料收集页面需要用到上传/拍摄产权证明，使用 iPhone 测试可成功调起摄像头；使用 Android 调用失败，直接跳转到 Android 系统选择文件界面。

原生方法：

​ input 标签使用 file 属性时，指定 capture 属性可以调用系统默认相机、摄像和录音功能。

​ capture 表示可以捕获到系统默认设备的媒体信息。

​ 如下：camera（相机）、camcorder（摄像机）、microphone（录音）。

​ 实例：

<input type="file" accept="image/*" capture="camera" />
<input type="file" accept="video/*" capture="camcorder" />
<input type="file" accept="audio/*" capture="microphone" />

Vue 方法： Vue 调用摄像头拍照以及获取相片本地路径(实测有效) (opens new window)

注意点： 如果使用的浏览器没有调用摄像头的权限，则打不开摄像头，只能跳转到原生选择文件的界面。

​ 把 IP 地址输入微信聊天（微信有权限），点击进去可成功调起摄像头。

Vue 设置路径简写

Vue CLI 内部的 webpack 配置是通过 webpack-chain (opens new window) 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

它允许我们更细粒度的控制其内部配置。接下来有一些常见的在 vue.config.js 中的 chainWebpack 修改的例子。

配置实例：

chainWebpack: (config) => {
  config.resolve.alias.set('viewsPath', path.resolve(__dirname, 'src/views'))
}

使用 canvas 出现跨域问题（画布已被跨原点数据污染）

解决方法： 给图片添加 img.crossOrigin = "Anonymous"

注意点： 如果设置了 crossOrigin，就要小心了。若在 html <img/> 标签内没有使用该属性，会造成两次图片请求，达不到预加载的效果。 原理是 crossOrigin 属性会在 http 请求头增加 Origin 头，导致两次请求是不同的（类似请求地址增加随机数去缓存效果）。 但是 crossOrigin 在处理 canvas 图片跨域报错时，是有用的。

关于 Vue.config.devtools 与 Vue.config.productionTip

Vue.config.devtools：

1、类型：boolean

2、默认值：true (生产版为 false)

3、用法：务必在加载 Vue 之后，立即同步设置以下内容（一般在 main.js 中）

Vue.config.devtools = true

配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。

Vue.config.productionTip:

1、类型：boolean

2、默认值：true (生产版为 false)

默认阻止生产消息，这两条指令通常在项目文件的 main.js 中设置

IE 浏览器发送 Ajax 请求时报错：XMLHttpRequest：网络错误 0x2efd

XMLHttpRequest：网络错误 0x2efd，由于出现错误 00002efd 而导致此项操作无法完成

网络上有很多关于 IE 发送 ajax 请求时报错的文章，但都不能解决此问题

原因：Window 本身问题，某些软件修改了代理，导致网络请求无法发出

解决方法：window 设置 -> 网络和 Internet -> 代理 -> 使用脚本地址 关闭

使用 JavaScript 来设置/退出/判断全屏的方法

设置全屏

function requestFullScreen() {
  var docEle = document.documentElement
  if (docEle.requestFullscreen) {
    docEle.requestFullscreen()
  } else if (docEle.mozRequestFullScreen) {
    docEle.mozRequestFullScreen()
  } else if (docEle.webkitRequestFullScreen) {
    docEle.webkitRequestFullScreen()
  }
}

退出全屏

function exitFullscreen() {
  var de = document
  if (de.exitFullscreen) {
    de.exitFullscreen()
  } else if (de.mozCancelFullScreen) {
    de.mozCancelFullScreen()
  } else if (de.webkitCancelFullScreen) {
    de.webkitCancelFullScreen()
  }
}

参考：H5 DOM 全屏 api requestFullscreen (opens new window)

js 实现 2S 内 5 次连点触发事件（Vue 版）

<template>
  <div @click="Combo">JavaScript实现5连击触发事件</div>
</template>

<script>
export default {
  data() {
    return { count: 0, timer: 'initial' }
  },
  methods: {
    Combo() {
      if (this.timer == 'initial' || new Date().getTime() - this.timer > 2000) {
        this.count = 1
        return (this.timer = new Date().getTime())
      }

      if (this.count < 4) {
        return ++this.count
      } else {
        // 完成连击5次，重置
        this.count = 0
        this.timer = 'initial'
      }
    },
  },
}
</script>

Vue3 的 reactive 创建的响应式对象

<script>
// reactive 生成的 Proxy 对象 若直接重新赋值为 新的对象时 会失去响应式，可改用ref创建响应式，通过.value更改
var test = reactive({
  test: 'test',
})
test = { test: 'test' } //此时会失去响应式，因为此时内存中的指针发生了更改
// 可以使用ref来创建响应式
var test = ref({ test: 'test' })
test.value = { test: 'test' }
// 或者在数据的外层包裹一下
var test = reactive({
  data: {
    test: 'test',
  },
})
test.data = { test: 'test' }
</script>