Summary after project closure

Three-quarters of the one-month project cycle has been completed. The project is compatible with browsers ie9, 10, and 11. There are many problems, big and small. where 

1. Intranet development, unable to use npm to download various plug-in dependencies

As a contemporary most fashionable front-end developer, I can't use the almighty Internet for development. Haha..., I was ridiculed by my colleagues from 108,000 miles away. However, this does not affect the boss's wishes: the company's information is confidential, if it is leaked, it will not earn 100 million yuan less. Well, fortunately, there was a computer nearby that escaped the blockade of the intranet, and the function of being able to insert and read USB was preserved in the struggle against powerful forces.

We first use the vue-cli scaffolding to set up an empty project on our computer, npm install to download the plug-ins that may be used, including jquery, echarts, element-ui, etc., and then test the entire project on the company's computer, in src development folder. Bitter!

2. Specific issues

1. Navigation bar vheader

<router-link @click.native="titlechange($event)"></router-link>

Note: Binding native events to components requires .native to modify v-on, otherwise the registration cannot be successful

2.ie display blank

Download balbel and import it in main.js

import 'bable-polyfill'

3. The volume of echarts is 700k after being packaged

Introduce line/line chart pie/pie chart bar/column chart as needed

require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

4. Customize element-ui popup style

open.js

import View from 'view'
Vue.prototype.open = function(content){
    this.$confirm(content,{
      confirmButtonText: 'I got it' ,
        type:'warning' ,
       center:true
    }).then(()=>{})
}

 Style modification app.vue

<style>
    .el-message-box{width:324px !important;height:220px;}
</style>

5. Vue Bus pass value

bus.js

import View from 'view'
export default new Vue

components

import Bus from '../assets/js/bus'

use

beforeDestory(){
    Bus.$emit("tomsg",{
    "a":123,
    "b":"shuju"      
    })
}

Obtain

beforeCreate(){
  Bus.$on("tomsg",(res)=>{console.log(res)})  
}

Note: You may not get the value for the first time. Reason: $emit has been issued when $on has not been created, so it cannot be accepted.

Solution: 1. Above the delayer 2

6.keep-alive dynamic save page

Some pages in the project need to be saved, and some pages need to be partially refreshed

app.view

< template > 
    < div > 
        < keep-alive > 
              < router-view v-if = "$route.meta.keepAlive" > 
                    <!-- pages that need to be cached --> 
              </ router-view >

              < router-view v-if = "!$route.meta.keepAlive" > 
                    <!-- pages that do not need to be cached --> 
              </ router-view > 
        </ keep-alive >         
    </ div > 
</ template >

main.js

let router = new VueRouter({
   routes:[
      {
           path:'/home',
           name:'home',
           meta:{
              keepAlive: true , // The page that needs to be cached 
              isBack: false
           }   
       }
   ]
})            

components

boforeRouterEnter(to,from,next){
  if(from.name == 'heto'){//From the page that needs to be cached
   to.meta.isBack = true;
   }  else {
     to.meta.isBack = false;      
   }
   next();
},
activated(){//The life cycle that each jump will execute
    if(this.$route.meta.isBack == false){//Need to refresh
      this.a = ""//置空
    }
    this.$route.meta.isBack = false
}

7.ie9 simulate placeholder property

ie9placeholder(){
  / / Determine whether it is ie9
  if(navigator.userAgent.indexOf("MSIE 9.0")>0){
    $('#ipt').each(function(){
     var self = $(this);
     self.parent().append('<span class='placeholder' data-type="placeholder">请输入姓名</span>') 
     if(self.val() != ''){
      self.parent().find("span.placeholder").hide()
     }else{
      self.parent().find("span.placeholder").show()
     }
    }).on("focus",function(){
        self.parent().find("span.placeholder").hide()
    }).on("blur",function(){
       var self = $(this)
       if(self.val() != ''){
         self.parent().find("span.placeholder").hide()
       } else {
         self.parent().find("span.placeholder").show()
       }
    });
     $("span.placeholder").on('click',function(){
       $(this).hide()
      })
  }
}            

8.