Vue抽离公共方法并全局注册使用
举例说明:抽离一个公共下载方法创建两个页面的原因是确定全局方法在不同页面都可使用别忘了在main.js引入router三、封装axios请求assets文件夹下新建api文件夹并在此文件下新建home.js四、创建公共下载方法在assets文件夹下新建utils文件夹并在此文件下新建downLoadTempFile.js......
·
Vue抽离公共方法并全局注册使用
前言:在开发工程中必定有很多重复的代码逻辑,为提高开发速度和减少代码冗余,我们需要将公共的JS方法进行抽离,在需要的时候调用
举例说明:抽离一个公共下载方法
一、搭建Vue页面
// index.vue
<template>
<div class="index">
<button @click="$router.push('/home2')">跳转</button>
<button @click="downLoadTempFile(1)">触发公共下载方法</button>
</div>
</template>
//index2.vue
<template>
<div class="index2">
<button @click="$router.push('/home')">跳转</button>
<button @click="downLoadTempFile(2)">触发公共下载方法</button>
</div>
</template>
创建两个页面的原因是确定全局方法在不同页面都可使用
二、配置VueRouter
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
name: 'home',
//根据自己文件所在目录进行修改,这里只是简单举例
component: () => import('../views/home/index.vue'),
meta: {
title: '首页',
},
},
{
path: '/home2',
name: 'home2',
component: () => import('../views/home/index2.vue'),
meta: {
title: '首页2',
},
},
]
})
别忘了在main.js引入router
import router from './router';
new Vue({
//记得此处要写上
router,
render: h => h(App),
}).$mount('#app')
三、封装axios请求
import axios from 'axios';
// 三元表达式判断是开发环境还是生产环境
let baseURL =
process.env.NODE_ENV == 'production' ? 'http://153.12.168.169:8380/base' : 'http://192.168.0.110:8088/base'
const service = axios.create({
baseURL
});
// 最基本的二次封装配置,不多讲,不是重点
service.interceptors.response.use(
response => {
if (response.status === 200) {
return response.data;
} else {
Promise.reject();
}
},
error => {
console.log(error);
return Promise.reject(error);
}
);
export default service;
assets文件夹下新建api文件夹并在此文件下新建home.js
import request from '../assets/utils/request'
// 附件下载
export const downTemplateFile = params => {
return request({
url: '/fileManage/downTemplateFile',
method: 'POST',
// 文件流
responseType:'blob',
params
})
}
四、创建公共下载方法
在assets文件夹下新建utils文件夹并在此文件下新建downLoadTempFile.js
// 引入axios封装的接口
import { downTemplateFile } from '../../api/home'
//DownLoadTempFile函数接收参数
function DownLoadTempFile(id) {
downTemplateFile({ id1: id}).then(res => {
let blob = new Blob([res])
let objectUrl = window.URL.createObjectURL(blob)
// 解决火狐兼容性问题,可以看我历史博客有介绍
if (navigator.msSaveBlob) {
return navigator.msSaveBlo(blob, '工业软件与基础软件分类说明.doc')
} else {
let a = document.createElement('a')
document.body.appendChild(a);
a.style.display = 'none'
a.setAttribute('href', objectUrl)
a.setAttribute('download', '工业软件与基础软件分类说明.doc')
a.click();
URL.revokeObjectURL(objectUrl);
}
}).catch(err => {
console.log(err);
})
}
// 一定要导出函数,不导出不可食用
export default DownLoadTempFile
五、main.js注册引入公共下载方法
import DownLoadTempFile from './assets/utils/downLoadTempFile'
Vue.prototype.DownLoadTempFile = DownLoadTempFile
六、页面使用公共下载方法
methods:{
// 页面button的点击方法并传参
async downLoadTempFile(id){
//调用公共下载方法并把id传入
this.DownLoadTempFile(id)
}
}
更多推荐
已为社区贡献13条内容
所有评论(0)