这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

代理和https里面的地址配置

在vue开发过程中，我们会遇到一个问题就是跨域，那么我们都知道跨域就是在配置文件中配置就好了，但有的新手就懵逼了，到底用哪个地址。这里首先要明白配置文件里面的跨域配置只是针对开发阶段，也就是说开发的时候调用同事的ip地址或者是测试服地址。通常我们在封装接口请求的https里面配置的地址一个是开发环境一个是生产环境的，这里的开发环境的地址比较特殊，通常都是根据跨域配置中匹配规则来的，如通常的/api等写法。

自动载入目录下的自定义指令和过滤器

我们知道vue2开发的时候会有一个叫过滤器、一个叫自定义指令的东西，那么这两个东西都是可以局部和全部配置的，如果全局配置的话如果是多个文件如何自动加载呢，首先我们看过滤器： 过滤器的话通常我们都会定义在一个文件里面通过export default导出，然后再main.js中导入即可。

// 注册全局过滤器
import filters from './filters'
Object.keys(filters).forEach(key => {
	Vue.filter(key, filters[key])
})

自定义指令呢就比过滤器稍微多一点，比如通常会一个指令单独为一个文件来定义，那么指令目录下就会有很多文件，通过件文件读取然后加入到vue中

// 自动获取directives目录下的自定义指令并注册全局
Vue.use((Vue)=>{
  ((requireContext) => {
    const arr = requireContext.keys().map(requireContext);
    (arr || []).forEach((directive) => {
      directive = directive.__esModule && directive.default ? directive.default : directive
      Object.keys(directive).forEach((key) => {
        Vue.directive(key, directive[key])
      })
    })
  })(require.context('./directives', false, /^\.\/.*\.js$/))
})

异步产生错误

我们在开发vue或者是其他框架项目时，惠遇到一种情况就是明明接口成功获取到数据了，但是还是报错说找不到某个值，那么这个时候获取你就该看看是不是因为异步的原因导致的，通常我们的静态页面是会先渲染，然后接口可能还没获取到，页面已经渲染完了，这样就会导致这个问题，如何解决呢，很简单做个判断就行：

<template>
  <div>{{info.params && info.params.name}}</div>
</template>

<script>
export default {
  data(){
    return{
      info:{}
    }
  }
}
</script>

表格操作列弹窗修改值

在做后台管理系统时，通常表格操作列里面会有修改某一行的数据，通过弹窗形式修改，如果我们将这一样的数据直接赋值给一个变量，那么你在修改后会发现表格里面的数据也跟着修改了，这个时候你就是需要将这一行数据进行拷贝过后赋值给变量才会不受影响。

editItem(row){
  // this.detailInfo = row
  this.detailInfo = JSON.parse(JSON.stringify(row))
}

表格操作列删除

在表格的操作列上如果我们想要删除一行数据那么我们可以这样做：

handleDel(index,rows){
  rows.splice(index, 1)
}

方便的深拷贝

JSON.parse(JSON.stringify(row))

样式中修改ui组件的值

我们知道在vue的项目中如果给样式加上了scoped后是不能直接修改ui组件的样式，要么全局修改要么就需要在修改样式之前加上/deep/关键字来修改才会有效果

<style lang="less" scoped>
.price {
  /deep/.edit-dialog {
    .el-select {
      width: 100%;
    }
  }
}
</style>

修改数组中某一项的值

this.$set(this.tableData[index],'isEdit',false)
this.$set(this.table,'thead[3].label','优惠券金额')

策略模式解决很多ifelse判断

this[key]
this['couponList'+couponType]
this['save'+this.activeName]()

字符串快速转为数值

this.editInfo.item * 1

图片下载

downloadQrcode(el,name){
    var oQrcode = document.querySelectorAll('.'+el+' img');
    var url = oQrcode[0].src
    var a = document.createElement('a')
    var event = new MouseEvent('click')
    // 下载图名字
    a.download = name+'.png';
    a.href = url;
    a.setAttribute("target", "__blank");
    // if(el != 'oilall' || el != 'exall'){
    //     this.downloadIamge(url,name);
    // }else{
    //     // 合成函数，执行下载
    //     a.dispatchEvent(event)
    // }
    a.dispatchEvent(event)
}

合并数据去掉重复项

reduceArr(arr,disArr){
  // 数组去重，去掉已经选中的
  var result = arr.filter(function(coupon) {
    return disArr.every(function(item) {
      return item.id !== coupon.id
    })
  })
  return disArr.concat(result)
}

element UI 自定义传参的解决方法

这里的handleSelect默认绑定的参数是选中的那条数据。如果一个页面有好几个相同的组件，要想知道选的是哪个？

<el-autocomplete
    v-model="state4"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    @select="handleSelect"
></el-autocomplete>

解决方案：

<el-autocomplete
    v-model="state4"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    @select="($event,index)"
></el-autocomplete>

element-UI 框架 el-input 触发不了 @key.enter事件

<el-input v-model="form.loginName" 
placeholder="账号" 
@keyup.enter="doLogin">
</el-input>

解决方案：使用@key.center.native

<el-input v-model="form.loginName"
placeholder="账号" 
@keyup.enter.native="doLogin">
</el-input>