前端小新手，记录项目中不懂的问题
2017-11-9:
1.对于vue配置路由的时候，应该要想着性能，因此采用懒加载（作用:按需加载，提高性能）
例子：
旧的:
import index from '@/pages/index'
export default new Router ({
{ path: name: 'index',component: index,},
})
新的：（为了方便管理，拆分开来写）
const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'index') //就相当于是 import index from '@/pages/index'
const routes = [{path:'/index',name:'index',component,meta:{XXX:'sss',uid:'0'}]
const router = new Routet({routes,linkActiveClass: "my-active"})
export default router
或者是另外一种写法：{path：‘/’,component:resolve =>require(['@components/index.vue'],resolve)
2.对于vue搭建好了环境之后，
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-touch-fullscreen" content="yes">
<meta name=full-screen content=yes>
<meta name=browsermode content=application>
<meta name=x5-orientation content=portrait>
<meta name=x5-fullscreen content=true>
<meta name=x5-page-mode content=app>
<meta name="format-detection" content="telephone=no, email=no">
<!--清除缓存-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
若想使100px = 1rem ;
则需要加上
<script type="text/javascript"></script>
<script>
(function(d, c, e) {
var f = d.documentElement,
b = "orientationchange" in c ? "orientationchange" : "resize",
a = function() {
var g = f.clientWidth;
if (g >= 750) {
g = 750
}
if (g === e) {
return
}
f.style.fontSize = 200 * (g / 750) + "px"
};
if (d.addEventListener === e) {
return
}
c.addEventListener(b, a, false);
d.addEventListener("DOMContentLoaded", a, false)
})(document, window);
</script>
2017-11-10
1.对于公共组件的使用------如使用公共的弹出选择框
父组件使用子组件： <all-select ref="auditor" :selectDate="auditor" :parameter="'auditor'" :content="dateSlots3" @select="selectAuditor"></all-select>
子组件：<mt-picker value-key="name" :slots="slots" @change="onValChange"></mt-picker>
父组件传给子组件的值，子组件用props接收
//content为选项内容 selectDate为已经选好的值 parameter为赋予给上层的值
props:['content','selectDate','parameter'],
子组件通过$emit事件去触发父组件，向父组件传值
this.$emit('select',{value:this.value,type:this.parameter})
父组件通过@select="selectAuditor" selectAuditor（）{} 这个方法去接收子组件传递给父组件的值
2017-11-14
//判断是否为安卓或者苹果
isiOS(){
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
return isiOS;
},
//处理聚焦 软键盘遮挡input 注意 此处的id 是可显示区域
fouces(e,id){
if(!this.isiOS()){
setTimeout(function(){
document.getElementById(id).scrollIntoView();
document.getElementById(id).scrollIntoViewIfNeeded();
},200)
}
},
2017-11-17
给与点击事件添加事件，让它不可点击
// .noEdit_binding.msgs{
// .my_jdsearch,.entrance_fist{
// pointer-events: none;
// }
// }
总结 css 样式的绑定 :class="{noEdit_binding:apimsg.name=='未绑定'}"
事件的绑定 @click="apimsg.name=='未绑定'?prompt($event):enterSearch(true)" placeholder="项目名称、项目编号、甲方全称" ref="MainsearchVal" id="MainsearchVal" class="mint-searchbar-core" @keyup.enter="apimsg.name=='未绑定'?'':_searchDate()"
判断选择的图片是什么类型
if (fileObj[i].type != 'image/png' && fileObj[i].type != 'image/gif' && fileObj[i].type != 'image/jpeg') {
isUpdate =false;
break;
}else{
Indicator.open({
text: '加载中...',
spinnerType: 'fading-circle'
});
事件 @blur="contenteditable($event,index)"
contenteditable(event,index){
if(event.target.innerHTML!=""){
// this.project_payment_line_ids[index].remark="<div>"+event.target.innerHTML+"</div>";
this.project_payment_line_ids[index].remark=event.target.innerText;
}
},
正则表达式的领悟：
例子：^\d\w+@[a-z]+[.]\D{2} => /^\d\w+@[a-z]+[.]\D{2}\d？$/ 意思是 以数字开头中间是至少一个任意字符@a-z之间至少一个 . 非数字字符至少两个,以数字结尾
？ 最多一位 + 最少一位 * 不限位数
