環(huán)境:vue-cli3 vantUI

一.vue-cli3跨域
1.根目錄新建vue.config.js
2.添加內(nèi)容:

module.exports = {
    runtimeCompiler: true,
    publicPath: './', // 設(shè)置打包文件相對路徑
    devServer: {
        port: 8080,
        proxy: {
            '/api': {
                target: ' http://110.110.110.110:8080/', //對應(yīng)接口地址
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
}

3.打開main.js
4.添加內(nèi)容

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//設(shè)置請求頭的類型
Vue.prototype.$http = axios
axios.defaults.baseURL = "/api/"

5.根目錄新建.env.development
6.添加內(nèi)容 VUE_APP_BASE_API=/api

二.數(shù)組刷新不渲染

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

//應(yīng)該還有更好的方法

三.json數(shù)據(jù)處理

微信圖片_20191022160652.png

四.騰訊地圖定點(diǎn)查詢
1.跳轉(zhuǎn)到騰訊地圖

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;

五.點(diǎn)擊復(fù)制效果
1.創(chuàng)建復(fù)制元素和點(diǎn)擊復(fù)制按鈕元素

<div>您的: <p>{{reportCode}}</p>
<div class="copy" @click="getCopy($event,reportCode)" :data-clipboard-text="reportCode">點(diǎn)擊復(fù)制</div>

2.下載依賴clipboard
3.main.js配置
/* 引用點(diǎn)擊復(fù)制的插件 */

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

4.調(diào)用方法
//this.$Toast 是我的信息提示,如果是其他組件可以修改成自己的信息提示就行了

getCopy() {
    const clipboard = new this.Clipboard('.copy')
    clipboard.on('success', e => {
        this.$Toast("復(fù)制成功")
        // 釋放內(nèi)存
        clipboard.destroy()
    })
    clipboard.on('error', e => {
        this.$Toast("不支持復(fù)制")
        // 釋放內(nèi)存
        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); // 上一步中的函數(shù)
      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("出現(xiàn)異常!請檢查網(wǎng)絡(luò)");
      } else {
        this.$Toast("已成功刪除");
      }

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