美文网首页vue 组件
vue 后端导出 mixin 混入式开发 以及 get 请求数组

vue 后端导出 mixin 混入式开发 以及 get 请求数组

作者: 生爱_存在 | 来源:发表于2021-12-24 16:22 被阅读0次

先上代码

网络请求代码

/**
 * 下载文件
 * @param url 文件路径
 * @param fileName 文件名
 * @param parameter
 * @param callback 运行结束后执行
 * @param data.type 如果是 json 则失败了
 * @returns {*}
 */
export function downloadFile(url, fileName, parameter, callback, method = "get") {
    if (method == "get") {
        parameter = checkParamsArr(parameter);
    }
    return downFile(url, parameter, method).then((data) => {
        if (!data || data.size === 0 || data.type === 'application/json') {
            Vue.prototype["$message"].warning("文件下载失败"); // 看着处理
            return;
        }
        if (typeof window.navigator.msSaveBlob !== "undefined") {
            window.navigator.msSaveBlob(new Blob([data]), fileName); // edge 浏览器没此 api 不知道有没有用
        } else {
            let url = window.URL.createObjectURL(new Blob([data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", fileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
        }
    }).finally(() => callback());
}

// 判断 get 请求中 是否存在 数组,如果有,则转换成字符串
export function checkParamsArr(params) {
    if (params) {
        params = JSON.parse(JSON.stringify(params));
        let arr = Object.keys(params);
        arr.forEach((item) => {
            if ( params[item] && Object.prototype.toString.call(params[item]) === "[object Array]") params[item] = params[item].toString();
            else if (params[item] && Object.prototype.toString.call(params[item]) === "[object Object]") params[item] = checkParamsArr(params[item]); // 对象,递归处理
        });
    }
    return params;
}

混入中的处理

/**
 * @param url 文件路径 是全路径,在使用的时候请注意添加域名
 * @param fileName 文件名 默认没有后缀,浏览器会导出 txt 文件
 * @param params 第三个参数,如果是对象,则是请求体,如果是字符串,则是按钮 loading 字符串,需要在this中自定义
 * @param loading 默认 loading
 * @function downloadFileAfter 文件下载成功之后会执行的方法,默认用来添加 loading 使用,默认会传一个参数,在重写的时候要注意
 * @function checkDownMust 判断是否有必传条件 如果没有 就判断 checkMust 方法,用法和 checkMust一样
 * @function checkMust 获取列表时判断是否有必传字段 用法在 tableLoadMixin 里面
 */
import { downloadFile } from '@/api/manage'
export const downloadFileMixin = {
    data() {
        return {
            downloadLoading: false,
        }
    },
    methods: {
        downloadFile(url = "123", fileName = "fileName", params = this.queryParam, loading = 'downloadLoading') {
            if (!this.checkDownMust ? (!this.checkMust || this.checkMust() === true) : this.checkDownMust() === true) {
                if (Object.prototype.toString.call(params) !== "[object Object]") loading = params, params = this.queryParam
                this[loading] = true
                downloadFile(url, fileName, params, () => this.downloadFileAfter(loading))
            }
        },
        downloadFileAfter(loading) {
            this[loading] = false
        }
    }
}

vue 组件中

<template>
  <a-button @click="downloadFile('url', '话务统计.xls', params)" :loading="downloadLoading">导出</a-button>
</template>
<script>
import { downloadFileMixin } from '../littleMixin/downloadFileMixin'
export default {
  mixins: [downloadFileMixin],
  methods: {
    checkDownMust () {
      if (!this.params.schoolIds) this.$message.warning('请先选择校区')
      else return true
    },
  },
}
</script>

仙人指路

  1. moment.js 获取 昨天、今天、上周、本周、上月、本月、上季度、本季度、去年 时间段,并集成到 vue Ant Design a-range-picker 日期选择器中
  2. vue Ant Design Select 选择框输入搜索已有数据 mixin
  3. vue + Ant Design 表格多选 mixin

为什么不封装组件

  1. 混入不涉及页面交互,只对数据进行操作,分离视图与数据操作;
  2. 混入里面的方法可以在组件中重写,在设计的时候,不用考虑太多的可扩展性;
  3. 混入可以直接使用组件中的所有数据,可以将部分数据功能进行抽离,减少重复操作;
  4. 组件的维护成本相对较高,父子组件通信也是成本,在开发中对组件进行维护后会显得臃肿;

相关文章

  • vue 后端导出 mixin 混入式开发 以及 get 请求数组

    先上代码 网络请求代码 混入中的处理 vue 组件中 仙人指路 moment.js 获取 昨天、今天、上周、本周、...

  • mixin注入全局分享

    在Vue中具有Mixin 混入属性 mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样...

  • vue中get请求如何传递数组参数

    前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,...

  • vue 组件的理解

    Vue.mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • vue混入mixin

    Vue.mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • vue mixin

    混入 mixin 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象...

  • vue mixin(混入)

    目的 增强组件功能的可复用性,一个混入对象可以包含任意组件选项

  • vue混入mixin

    mixin主要作用是提取组件中相同的代码,对生命周期、methods、components、data都可以做提取,...

  • Vue混入(mixin)

    理解:一个混入对象可以包含任意组件选项,这些选项将混入到组件本身的选项;作用:用来分发Vue组件中的可服用功能; ...

  • vue 混入 (mixin)

    何为混入? 混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”。但是与继承不同的是,继承一...

网友评论

    本文标题:vue 后端导出 mixin 混入式开发 以及 get 请求数组

    本文链接:https://www.haomeiwen.com/subject/gwwlqrtx.html