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.