【Vue】utils公共方法编写与使用教程

一、编写

目录结构

|--项目名
|--|--src
|--|--|--utils
|--|--|--|--utils.js

utils.js

/**
 * 获取相对路径
 * @method getRelativePath
 * @return {*} 返回主机地址
 * @example http://172.19.82.130:8080/uploadfiles/summary/7c54efed-fbc0-49c0-8568-62b07b5c1816/temp/3.png
 */
let getRelativePath = url => {
  let str = url.split("http://")[1]; //172.19.82.130:8080/uploadfiles/summary/7c54efed-fbc0-49c0-8568-62b07b5c1816/temp/3.png
  if(str){
    let pos = str.indexOf("/"); //获取 相对路径 在 str 的索引号,如:18
    let relativePath = str.substring(pos + 1, url.length); //获取相对路径,如: uploadfiles/summary/7c54efed-fbc0-49c0-8568-62b07b5c1816/temp/3.png
    return relativePath;
  }
};
export { getRelativePath };

二、使用

utils.vue

<script>
import { mapActions } from 'vuex';
import { getRelativePath } from '@/utils/utils';//A.引用其中某几个方法
//const utils = require('@/utils/utils');//B.全部引用
export default {
  methods:{
    let relativePath = getRelativePath(this.canvasBgInfo.url);//A
    //let relativePath = utils.getRelativePath(this.canvasBgInfo.url);//B
  }
}
</script>