一、url转码,url传值得时候中文会被转义,通过 decodeURIComponent( ) 进行转码
this.url = decodeURIComponent(item.split('=')[1])
编码的话用encodeURI( )
son.name = encodeURI(infoJson.name)
二、H5页面在ios中滑动不流畅问题,可以通过css进行解决,兼容safari浏览器。
//这三句缺一不可
height: 100%;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
还有一种办法就是在body上设置 overflow-x:hidden; 在需要滚动的元素上设置 overflow-y: auto 这个也可以解决
三、vue中v-html css样式不生效问题
去掉 style标签中的scope
四、vantUI中的下拉刷新与页面滚动冲突问题
我的解决办法是 给标签加上禁用属性,然后页面中写上监听scroll的方法,滚动距离为0的时候去开启下拉刷新,大于0的时候则禁用下拉刷新功能,这样就完美解决了下拉刷新与页面滚动冲突的问题
有的时候会监听不到页面滚动距离,window.addEventListener('scroll', this.handleScroll,true)第三个true属性是关键,可以alert出scrollTop值看看,再根据需求去判断
mounted() {
window.addEventListener('scroll', this.handleScroll,true)
},
methods: {
//var scrollTop = 0;
// if(document.documentElement && document.documentElement.scrollTop) {
// scrollTop = document.documentElement.scrollTop;
// } else if(document.body) {
// scrollTop = document.body.scrollTop;
// }
//监听页面滚动事件,来控制下拉刷新的禁用与开启
handleScroll () {
const scrollHeight = document.getElementById('box__')
//获取滚动距离,scrollTop属性
let scrollTop = scrollHeight.scrollTop
if(scrollTop == 0){
this.refreshShow = false;
}else{
this.refreshShow = true;
}
},
}
五、vue中使用canvas对网页进行裁剪
先引入html2canvas
npm install html2canvas --save
useCORS: true 这句话很重要,允许服务器跨域,裁剪的图片资源是不允许跨域的,服务端要处理跨域
再图片上加入跨域属性 crossorigin="Anonymous"
<template>
<img :src="head" alt="" crossorigin="Anonymous" class="head_">
</template>
import html2canvas from 'html2canvas'; //引入
canvasImg() {
let ref = this.$refs.faultTree // 截图区域
html2canvas(ref, {
backgroundColor: '#fff',
useCORS: true //****允许跨域****
}).then((canvas) => {
let img = canvas.toDataURL('image/png') //为base64格式的图片,自行按需转换
})
},
六、vue不识别textarea的 ↵ 换行符号
<p v-html="textarea"></p>
//改成pre标签就可以识别换行符了
<pre v-html="textarea"></pre>
七、移动端去除input type为number的箭头
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}