调用原生api获取相册图片
input.file-input(accept="image/*", type="file", ref="photo-input", @change="handleUpLoadImg")
handleUpLoadImg (e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file); // 将图片转为base64方便页面展示,详见https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
reader.onload = function (d) {
const imgData = reader.result;
uploadFile(file); // 上传文件
}
}
解决ios微信端失焦键盘隐藏后,被顶起的页面不回弹问题, vue代码片段
input(v-iosbugscroll)
function checkWxScroll() {
var currentPosition, timer;
var speed = 1;
timer = setInterval(function() {
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);
currentPosition+=speed;
window.scrollTo(0,currentPosition);
clearInterval(timer);
}, 1);
}
Vue.directive('iosbugscroll', { // 解决ios微信端失焦键盘隐藏后,被顶起的页面不回弹问题
inserted: function(el, binding, vnode) {
let ua = navigator.userAgent.toLowerCase();
if(/micromessenger/.test(ua)) {
if(/iphone|ipad|ipod/.test(ua)) {
// input、textarea被组件包装的场景
const childInput = el.getElementsByTagName('input');
const childTextarea = el.getElementsByTagName('textarea');
for (let i = 0; i < childInput.length; i++) {
childInput[i].onblur = function temporaryRepair() {
setTimeout(function() {
checkWxScroll();
}, 200);
};
}
for (let i = 0; i < childTextarea.length; i++) {
childTextarea[i].onblur = function temporaryRepair() {
setTimeout(function() {
checkWxScroll();
}, 200);
};
}
// input、textarea中的场景
el.onblur = function temporaryRepair() {
setTimeout(function() {
checkWxScroll();
}, 200);
};
}
}
}
});