vue文件下载与js方法

1.字符串的search方法，默认是不忽略大小写，'111'.search('1'),会搜索到第一个匹配的字符后返回其下标——0，如果没匹配到就会返回-1

2.VUE获取当前点击元素，我们可以做到点击子元素修改父元素的属性值或修改当前元素的属性值等操作

             <label @click="seeIt($event)">所属地域</label>








seeIt(e){console.log('e :>> ', e);// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素},

get请求，后端返回文件流下载

 batchExport() {
      if (!this.checkedIds.length) return this.$message.warning("请勾选数据");
       var token = sessionStorage.getItem("header");
      window.location.href =
        "/cbrc/work/book/export?token=" +
        token +
        "&ids=" +
        this.checkedIds.join(",");

// 第二种方法
   
      // this.$http({
      //   method: "GET",
      //   url: "/cbrc/work/book/export?ids=" + this.checkedIds.join(","),
      //   responseType: "blob"
      // }).then(res => {
      //   if (res) {
      //     this.downloadFile(res);
      //   }
      // });
    },
    downloadFile(res) {
      let url = window.URL.createObjectURL(
        new Blob([res.data], { type: res.headers["content-type"] })
      );
      let a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.setAttribute("download", `导出数据.xls`);
      document.body.appendChild(a);
      a.click();
      url = window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    },

post请求的文件流

 batchExport() {
      if (!this.checkedIds.length) return this.$message.warning("请勾选数据");
      this.$http({
        method: "POST",
        url: "/cbrc/work/hint/export",
        responseType: "blob",
        data: {
          idStr: this.checkedIds.join(","),
        },
      }).then((res) => {
        if (res) {
          this.downloadFile(res);
        }
      });
    },
    downloadFile(res) {
      let url = window.URL.createObjectURL(
        new Blob([res.data], { type: res.headers["content-type"] })
      );
      let a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.setAttribute("download", `导出数据.xls`);
      document.body.appendChild(a);
      a.click();
      url = window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    },

js判断值是否是数组方法

一、

Array.isArray(this.valueInfo)

二、

 !(typeof this.editList.orgIds === "string") &&

            this.editList.orgIds &&

            this.editList.orgIds.length

三、

val?.constructor === Array // true 代表为数组

js判断值是否是对象方法

val?.constructor === Object // true 代表为对象

四、webpack配置alias别名与vue在css中使用@路径报错问题

webpack.base.conf.js文件

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@images': resolve('src/images'),
      // 'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')
    }
  },

写完记得重新npm install，然后再启动项目

css loader 会把把非根路径的url解释为相对路径，加~前缀才会解释成模块路径（~@代表根路径）。

 // background: url(../../../images/mark.png) no-repeat left center;
    background: url(~@images/mark.png) no-repeat left center;

五、前端导入导出方法

1、

日常开发中我们经常需要导入一些文件

export const routes: RouteRecordRaw[] = [];

当有多个重名变量或方法时就需要用到重命名import { 导入变量名 as 新名字 } from 路径;

import { routes as externalRoutes } from '@views/external';
import { routes as workbenchRoutes } from '@views/workbench';
import { routes as knowledgeSharingRoutes } from '@views/knowledge-sharing';
import { routes as operationsManagementRoutes } from '@views/operations-management';
import { routes as systemAdministrationRoutes } from '@views/system-administration';
import { routes as accountRoutes } from '@views/account';

2、当有很多个export变量名

/** 药品说明书 */
export const DRUG_MANUAL = Symbol('DRUG_MANUAL');
/** 课程配置 */
export const COURSE_CONFIGURATION = Symbol('COURSE_CONFIGURATION');
/** 课程列表 */
export const COURSE_LIST = Symbol('COURSE_LIST');

我们导入时使用全部导出

import * as RouteNamesConst from '../constants/route-names.constants';

或

/** 药品说明书 */
const DRUG_MANUAL = Symbol('DRUG_MANUAL');
/** 课程配置 */
const COURSE_CONFIGURATION = Symbol('COURSE_CONFIGURATION');
/** 课程列表 */
const COURSE_LIST = Symbol('COURSE_LIST');
export default { DRUG_MANUAL, COURSE_CONFIGURATION, COURSE_LIST };

import RouteNamesConst from '../constants/route-names.constants';

使用时

RouteNamesConst.COURSE_LIST

 export * as RouteNamesConst from './constants/route-names.constants';

等于

import * as RouteNamesConst from './constants/route-names.constants';

export default RouteNamesConst;

export * from './constants/route-names.constants';//全部导出,不指定名称，直接使用的是导入文件中一个个指定的常量名

export default imUtils;

export { default as imUtils } from './im-utils';

等于

import imUtils from './im-utils';
export default imUtils;

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

等于

module.exports =function assetsPath(_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

六、elementui的@change监听，v-model数据层级太深监听不到，@change经常不触发

vue的elementui的@change有时触发有时不触发

场景是这样，在点击编辑时，明明id有赋值但@change没检测到，就没调接口回显相关数据，解决方法是在点编辑时判断，如果id有值直接去调接口，而不是等着@change，这样可能会导致有时接口调了两次，但这是很好的解决方法了，某些场景下大家也可以设置变量，如果调用过就不再调用

  <el-cascader
              :options="organization"
              filterable
              v-model="addMessage.organization.id"
              :props="{
                checkStrictly: 'true',
                label: 'name',
                value: 'id',
                children: 'childrenList',
                emitPath: false,
                expandTrigger: 'hover'
              }"
              @change="getDepartment(addMessage.organization.id)"
              :show-all-levels="false"
            ></el-cascader>

点编辑

if (this.addMessage.organization.id) {
          this.getDepartment(this.addMessage.organization.id);
        }

vue文件下载与js方法

猜你喜欢