This is the 7th day of my participation in the August More Text Challenge

Address configuration in proxy and HTTPS

In the vUE development process, we will encounter a problem is cross-domain, so we all know that cross-domain configuration is in the configuration file, but some novice confused, which address to use. The first thing to understand here is that the cross-domain configuration in the configuration file is only for the development phase, that is, to call a colleague’s IP address or the address of the test server during development. Generally, the addresses configured in HTTPS encapsulating the interface request are one for the development environment and one for the production environment. In this case, the development environment addresses are special and are usually written according to the matching rules in the cross-domain configuration, such as the usual/API.

Automatic loading of custom instructions and filters under the directory

We know that when vue2 is developed, there will be a filter and a custom directive, so both of these can be configured locally and fully. Filters are usually defined in a file exported by export default and then imported in main.js.

Import filters from './filters' object.keys (filters).foreach (key => {vue.filter (key, filters[key])}) import filters from './filters' object.keys (filters).foreach (key => {vue.filter (key, filters[key])})Copy the code

Custom directives are a little more than filters. For example, an instruction is usually defined for a single file, so there are many files in the instruction directory, which are read from the file and added to the VUE

// Automatically obtain the custom directives under the directives directory and register global 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$/)) })Copy the code

Asynchronous generation error

Our project in the development of the vue or other framework, we encounter a situation in which is clearly for its interface to the data, but it said error could not find a value, so this time to get you’d see if, because of the asynchronous, usually we are static pages will render first, then the interface may not have access to that page has finished rendering, This leads to this problem, and how to solve it is very simple to make a judgment:

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

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

Table action column popup to modify values

When doing the background management system, usually there will be a modified form operation columns inside a row of data, through the popup form change, if we put the same data directly assigned to a variable, then you will find that the inside of the form after modification data also follow change, this time you will need to copy this line data is assigned to a variable after will not be affected.

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

Table action column deleted

If we want to delete a row from the action column of the table, we can do this:

handleDel(index,rows){
  rows.splice(index, 1)
}
Copy the code

Convenient deep copy

JSON.parse(JSON.stringify(row))

Style to modify the value of the UI component

We know that in a Vue project you cannot modify the styles of UI components directly after scoped, either globally or with the /deep/ keyword before the style modification

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

Modifies the value of an item in an array

This.$set(this.table,'thead[3]. Label ',' discount ') this.$set(this.table,'thead[3]. Label ',' discount ')Copy the code

The policy pattern resolves many ifelse judgments

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

The string is quickly converted to a number

this.editInfo.item * 1
Copy the code

Images are downloaded

downloadQrcode(el,name){ var oQrcode = document.querySelectorAll('.'+el+' img'); Var a = document.createElement('a') var event = new MouseEvent('click' name+'.png'; a.href = url; a.setAttribute("target", "__blank"); // if(el ! = 'oilall' || el ! = 'exall'){ // this.downloadIamge(url,name); // a.patchEvent (event) // a.patchEvent (event)}Copy the code

Merge data to remove duplicates

ReduceArr (arr,disArr){ Var result = arr.filter(function(coupon) {return disarr. every(function(item) {return item.id! == coupon.id }) }) return disArr.concat(result) }Copy the code

Element UI custom parameter transfer solution

The handleSelect binding defaults to the selected data. If a page has several components that are the same, which one to choose?

< el-autoComplete V-model ="state4" :fetch-suggestions="querySearchAsync" placeholder=" @select="handleSelect" ></el-autocomplete>Copy the code

Solution:

< el-autoComplete V-model ="state4" :fetch-suggestions="querySearchAsync" placeholder=" @select="($event,index)" ></el-autocomplete>Copy the code

Elder-ui framework el-Input does not trigger @key.enter

<el-input v-model="form.loginName" placeholder=" @keyup.enter="doLogin"> </el-input>Copy the code

Solution: Use @key.center. Native

Native ="doLogin"> </el-input> </el-input>Copy the code