gjwwjb-pro

环境:vue-cli3 vantUI

一.vue-cli3跨域
1.根目录新建vue.config.js
2.添加内容:

module.exports = {
    runtimeCompiler: true,
    publicPath: './', // 设置打包文件相对路径
    devServer: {
        port: 8080,
        proxy: {
            '/api': {
                target: ' http://110.110.110.110:8080/', //对应接口地址
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
}

3.打开main.js
4.添加内容

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//设置请求头的类型
Vue.prototype.$http = axios
axios.defaults.baseURL = "/api/"

5.根目录新建.env.development
6.添加内容 VUE_APP_BASE_API=/api

二.数组刷新不渲染

this.columns[1].values = levelObj
this.$set(this.columns,1,this.columns[1])

//应该还有更好的方法

三.json数据处理

微信图片_20191022160652.png

四.腾讯地图定点查询
1.跳转到腾讯地图

let url = escape(
        `${window.location.origin}${window.location.pathname}/#/online/olReporInfoDetail/${this.key}`
      );
      window.location.href = `https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=${url}&key=地图key&referer=myapp`;

2.取出返回值
var urlData = this.$route.query;

五.点击复制效果
1.创建复制元素和点击复制按钮元素

<div>您的: <p>{{reportCode}}</p>
<div class="copy" @click="getCopy($event,reportCode)" :data-clipboard-text="reportCode">点击复制</div>

2.下载依赖clipboard
3.main.js配置
/* 引用点击复制的插件 */

  import Clipboard from 'clipboard';
  Vue.prototype.Clipboard = Clipboard

4.调用方法
//this.$Toast 是我的信息提示,如果是其他组件可以修改成自己的信息提示就行了

getCopy() {
    const clipboard = new this.Clipboard('.copy')
    clipboard.on('success', e => {
        this.$Toast("复制成功")
        // 释放内存
        clipboard.destroy()
    })
    clipboard.on('error', e => {
        this.$Toast("不支持复制")
        // 释放内存
        clipboard.destroy()
    })
}

六.去除移动端阴影边框

input {
    outline: none;
    padding-left: 3%;
    background-color: transparent;
    FILTER: alpha(opacity=0);
    -moz-appearance: none;
    -webkit-appearance: none;
}

textarea {
    outline: none;
    padding-left: 3%;
    background-color: transparent;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    -moz-appearance: none;
    -webkit-appearance: none;
}

七.图片上传

使用vantUI 图片为base64 上传的请求头是multipart/form-data

<div class="upload">
          <div>
            <span></span>
            <p>附件</p>
            <i>
              <van-uploader v-show="true" :after-read="afterRead" multiple></van-uploader>
            </i>
          </div>
        </div>
        <div class="preview-file">
          <div class="goodsImg" v-for="(item,index) in fileList" :key="index" ref="preview">
            <div class="img-css">
              <img :src="item.url" alt />
            </div>
            <p>{{item.name}}</p>
            <i class="delete" @click="deleteFile(item.key)"></i>
          </div>
        </div>

async afterRead(file) {
      console.log(file.content);

      // const fContent = file.content.slice(file.content.indexOf(",")+1)

      const fileInfo = `phoneInfo=1&fileName=${file.file.name}&file=${file.content}&businesskey=${this.businessKey}`;

      let params = new FormData();
      params.append("phoneInfo", 1);
      params.append("fileName", file.file.name);
      params.append("businesskey", this.businessKey);

      var blob = this.dataURItoBlob(file.content); // 上一步中的函数
      var canvas = document.createElement('canvas');
      var dataURL = canvas.toDataURL('image/jpeg', 0.5);
      params.append("file", blob, file.file.name);

      const { data: res } = await this.$http.post(
        "/appInterfaceCommonController/uploadFile",
        params,
        { headers: { "Content-Type": "multipart/form-data" } }
      );
      const oneFile = {
        url: file.content,
        name: file.file.name,
        size: file.file.size,
        key: res.fileKey
      };
      this.fileList.push(oneFile);
    },
    dataURItoBlob(base64Data) {
      var byteString;
      if (base64Data.split(",")[0].indexOf("base64") >= 0)
        byteString = atob(base64Data.split(",")[1]);
      else byteString = unescape(base64Data.split(",")[1]);
      var mimeString = base64Data
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];
      var ia = new Uint8Array(byteString.length);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeString });
    },
    async deleteFile(key) {
      const data = `phoneInfo=1&fileId=${key}`;

      // this.$store.commit('showLoading')
      const { data: res } = await this.$http.post(
        "appInterfaceCommonController/delBussAttach",
        data
      );
      if (!res.success) {
        this.$Toast("出现异常!请检查网络");
      } else {
        this.$Toast("已成功删除");
      }

      // this.$store.commit('hideLoading')
      this.fileList.splice(
        this.fileList.findIndex(item => item.key === key),
        1
      );
    }