flex坑
//不会压缩。会保持原来的宽度(1rem)
.main{
display：flex;
flex-shrink: 0;
flex-wrap: wrap; //元素换行
.item{
width:1rem;
}
}
水平居中
使内容居中
.flex__container {
place-content: center;
place-items: center;
}
等效于
.flex__container {
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
}
利用Grid 实现水平居中
.grid {
display: grid; // 或 inline-grid
place-items: center
}
vue坑
vue组件
vue-awesome-picker 组件的使用
vue-awesome-swiper 组件的使用
vue引入坑
在axios中引入 import {app} from '../main'的时候
这个时候一定要记得把 new Vue ()
export const app=new Vue() 导出去
局部刷新
<div class="customerdetails_tabs" v-if="isRouterAlive"></div>
export default {
provide(){
return{
reload:this.reload
}
},
data() {
return {
isRouterAlive:true,
}
},
methods: {
需要局部组件刷新的时候直接调用reload()方法就可以
reload(){
this.isRouterAlive=false;
this.$nextTick(function(){
this.isRouterAlive=true;
})
}
}
}
vue与原生交互原理
vue和原生的交互都是挂载在window上，供外部调用
mounted() {
vue调用原生
if (window.Android) {
window.Android.gone(‘name1’，‘name2’); //按顺序传递给原生
} else if (window.webkit) {
window.webkit.messageHandlers.isButtonTouchEnabled.postMessage({
isEnable: true
});
}
vue创建方法供原生调用
window.back = () => this.back(); 这个back()在methods中定义就行
可以接收原生给H5传递的参数 ，按原生传递顺序接收，不是一个对象。
window.refreshPage = conCode => this.callback(conCode);
},
vue路由坑 路由跳转部分android 不能刷新的坑
hash路由 # 后面变化，但是不会刷新页面，当前页面不能更新
history模式和hash原理相同。
history刷新的时候，url中的参数会消失 怎么解决？用sessionStorage.setItem() 存储
其他的博主：https://blog.csdn.net/oZhangBi/article/details/79939969?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control
解决方法：
使用keep-alive
这样给路由绑定key，路由中的参数改变就会刷新页面，记住路由中的参数改变。可以加时间戳 ，以下代码缺一不可。路由跳转使用的push，没用replace
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>
router/index.js
const routes=[
{
path:'/',
name:'index',
component:()=>import ('../views/index.vue'),
meta:{
title:'name',
keepAlive:true
},
}
]
const router =new VueRouter({
routes
})
index.vue
用这两个生命周期即可
mounted () {
this.init()
},
activated (){
this.init()
}
开始试了很多，只绑定key不可以，还得用keep-alive ，不能不分使用，不分不使用，还得全部使用keep-alive。keep-alive有缓存，记得每次进入路由的时候要记得初始化。
vue监听只能输入数字
监听只能输入数字
<input v-model="testValue" @input="testValue = testValue.replace(/[^\d]/g,'')">
input model 需要循环绑定自定义对象属性的时候不监听，如下写,这样vue就可以监听到了。
this.$set('obj','key','value')
vue关掉eslint
module.exports={
lintOnSave: false,
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //防止打包后index.Html空白
publicPath: './',
}
vue方法参数传递坑
<div v-for="(item,index) in obj" :key="index">
<input type="text" v-model.trim="peiPeopleObj.name">
<p @click="info(item)">
内容
</p>
<ul>
<li >item.name</li>
</ul>
</div>
methods(){
//这种方式传递邦迪，相当于this.peiPeopleObj绑定的是 obj对象中的item 对象，这样input中的peiPeopleObj.name改变的时候,li中的item.name也会改变
info(item){
this.peiPeopleObj=item
}
}
如下这样写就不会有这种情况
<div v-for="(item,index) in obj" :key="index">
<input type="text" v-model.trim="peiPeopleObj.name">
<p @click="info(item.namee,item.code)">
内容
</p>
<ul>
<li >item.name</li>
</ul>
</div>
methods(){
//这种方式传递邦迪，相当于this.peiPeopleObj绑定的是 obj对象中的item 对象，这样input中的peiPeopleObj.name改变的时候,li中的item.name也会改变
info(name,code){
this.peiPeopleObj.name=name
this.peiPeopleObj.code=code
}
}
数组坑
数组的筛选方法 arr.filter(()=>{})
在数组中删除指定的值
var arr = ['a', 'b', 'c', 'd'];
arr.splice($.inArray('a', arr), 1);
循环判断
const names=[]
for(const i of input){
if(i.job==="programmer")
names.push(i.name)
}
可转变成，集合管道
const names =input.filter(i=>i.job==="programmer").map(i=>i.name)
input file 坑
图片上传传给后台的格式需要new FormData()
var fromData=new FormData()
fromDdata.append('file',file) //不是base64
html android ,ios 都可以.如果不可以就找原生
android 原生的webview默认屏蔽了file自动调起相机，需要做处理。android可以换三方的webview即可，三方的webview应该是已经处理好了。
<input type="file" class="input" accept="image/*"> 这么写即可
<input
type="file"
accept="image/*"
@change="changeImg($event, index)"
/>
vue
methods{
changeImg(e, index) {
console.log(this.cancelList[index].imgList.length);
if (this.cancelList[index].imgList.length == 3) {
this.cancelList[index].hink = true;
sessionStorage.setItem("cancelList", JSON.stringify(this.cancelList));
this.reload();
setTimeout(() => {
this.cancelList[index].hink = false;
sessionStorage.setItem("cancelList", JSON.stringify(this.cancelList));
this.reload();
}, 2000);
return;
}
let input = e.target;
let files = e.target.files;
if (files && files[0]) {
let file = files[0];
if (
file.type != "image/png" &&
file.type != "image/jpg" &&
file.type != "image/jpeg"
) {
console.log("图片格式不正确");
this.$toast.show("图片格式不正确");
return;
}
// if (file.size > 1024 * 1024 * 3) {
// console.log("不得超多3M");
// input.value = "";
// return;
// }
if (!this.isIos) {
this.uploadFile(file, index);
} else {
// this.uploadFileIos(file, index);
this.uploadFile(file, index);
}
}
},
uploadFile(file, index) {
var formData = new FormData();
formData.append("picture", file);
this.$http
.post(
"getUploadUrl",
formData,
{ headers: { "Content-Type": "multipart/form-data" } }
)
.then(res => {
console.log(res);
if (res.code == 0) {
this.cancelList[index].imgList.push(res.data.path);
console.log(this.cancelList);
// sessionStorage.setItem("imgList", JSON.stringify(this.cancelList[index].imgList));
sessionStorage.setItem(
"cancelList",
JSON.stringify(this.cancelList)
);
this.reload();
}
});
},
}
后台需要json字符串的时候骚操作vue处理方式
let params = {
cameristId: this.accompanyStatus,
surveyOrderId: sessionStorage.getItem("orderId"),
userId: sessionStorage.getItem("userId"),
compId: sessionStorage.getItem("compId")
};
let params1 = { param: JSON.stringify(params) };
this.$qs.stringify(params1)
H5页面嵌入原生中的ios坑
iosinput 键盘弹出之后收不回
问题的核心：input不失去焦点，所以需要手动，通过其他办法去触发失去焦点
原生可以解决。监听键盘的高度，如果高度大于0 ，说明唤起了键盘，如果在点击H5页面的时候，就让键盘消失。
H5的思路同，获取页面可见区域，然后键盘弹起的时候在获取可见区域，相减就是键盘的高度，然后添加完成按钮，使input失焦，键盘收回。 但我没有试验成功，获取的可见高度总是手机的总高度
解决问题的思路：
找bug原因的时候一定要想清楚，当前的所处环境。尽可能100%还原环境根本，或者直接抓到线上的url去测试，去找原因。不是直接本地去试问题，找问题。除非本地一下能发现问题的。当发现本地可以，线上不可以的时候，立即抓线上的链接地址，去查看问题
发现难搞的问题，怎么解决？
先分析问题的根本，确定问题源。然后认真阅读，相关的文档知识点。一定是丢掉了某个细节，
ios输入框被键盘遮挡的问题
ios键盘遮挡问题，当获取焦点的时候，整体向上移动310。this.$refs.cmdlist.scrollTop = 310
this.$refs.cmdlist.scrollTop = 100
this.$refs.cmdlist.style.top = 100+'px'
网友评论