您现在的位置是:首页
>程序人生
>WEB前端
vue技术栈使用过程中遇到的一些问题以及解决之道
发布时间:2019-08-02 编辑:杰霖 浏览:5694 评论:0
1.vue-router与nuxt-link使用跟路径('/')作为路由地址时,点击其他路由会出现'/'路由高亮效果不消失的情况,加上exact可以解决该问题
2.vue methods方法中使用过滤器
this.$options.filters['resultKey'](result);
其中resultKey为过滤器的方法名,result为要过滤的对象
3.某些情况下为了dom加载完成再调用方法,通常为mounted函数中加个延迟函数,一般为20ms,因为浏览器的刷新时间一般为17ms
mounted() {
setTimeout(() => {
this._initSlider()
}, 20)
}
4.nuxt中使用高德地图,使用cdn方式引用,如果一进页面就要显示地图需要dom加载完成才能调用地图的方法(SSR渲染),看上面的例子!
api: http://webapi.amap.com/maps?v=1.4.4&key=你申请的key
local为经纬度
loadmap(local) {
const map = new window.AMap.Map('mapContainer', {
resizeEnable: true,
zoom: 18,
center: local
})
var marker = new AMap.Marker({
position: local, //默认的地图中心经纬度
})
marker.setMap(map);
//设置介绍信息
var info = new AMap.InfoWindow({
content: "我在这里",
offset: new AMap.Pixel(0, -28)
})
info.open(map, marker.getPosition())
map.setFitView();
}
5. 在data中引用资源的路径问题
正确的写法(图片必须是相对路径且必须加上require) url: require('../../assets/img/blank_image_qrcode_small@2x@2x.png')
错误的写法:url: '../../assets/img/blank_image_qrcode_small@2x@2x.png'
6.通过v-for遍历路由
错误的写法: 此写法不会生效
正确的写法: <router-link v-for="“url" in="" links”="" :to="‘{path:" url.url}'="">
7.在vue中使用音频播放器或视频播放器src的加载问题
错误的写法:这样写将无法进行播放
正确的写法: 应该在事件中加载 this.$refs.music.src = this.music.url
8.音频播放器暂停Uncaught (in promise) DOMException
我的解决方法是通过setTimeout延迟的方式在监听播放和暂停的状态
出现上述错误的写法:
watch: { // 当playing状态改变时自动触发播放和暂停按钮
playing() {
this.playing ? this.$refs.bgMusic.play() : this.$refs.bgMusic.pause();
}
}
解决错误的写法:
watch: {
playing() {
setTimeout(() => {
return this.playing ? this.$refs.bgMusic.play() : this.$refs.bgMusic.pause();
}, 300);
}
}
9.使用better-scroll插件的注意事项
wrapper与content的高度问题:只有content的高度大于wrapper的时候,才可以滚动,需要给wrapper设定max-height:(高度根据实际情况自定义),另外wrapper加上overflow:hidden属性
10.当页面有使用定时器时,在离开页面时需要在生命周期函数destroyed()销毁该定时器,以此来优化内存
destroyed() {
clearTime(this.timer)
}
11.使用better-scroll渲染带有图片路径返回的data时出现无法滚动的现象
原因是当图片还没加载完成better-scroll就已经计算了dom的高度,应该在数据或者图片渲染后重新计算,使用better-scroll的refresh()方法
loadImage() {
if (!this.checkloaded) {
this.checkloaded = true
this.$refs.scroll.refresh()
}
}
this.checkloaded是对多张图片进行优化,如果有一张的图片已经加载好就不需要再重新去计算dom的高度
12.better-scroll 点击事件与fastclick点击事件相冲突导致图片点击无反应
只需要将需要点击的图片添加fastclick默认的class属性即可needsclick,表示监听该属性 如果需要点击时则不拦截点击事件
13.当后端的数据结构返回比较复杂时,导致vue更新data后视图无法实时更新,使用this.$forceUpdate()也无效
如 obj = {
[],[],[],score: 4.5
}
一个对象包含多个数组再加上一些其它的属性,当你更改了obj中的某一个数组对象时,该页面视图不会跟着更新,解决办法就是定义多个变量将他们分离出来
14.解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
可以定义一个上传图片的方法,将图片上传到服务器,将返回的地址加载到富文本编辑器中
上传组件:
富文本:上传方法
UploadImageEditor(file) {
if (
!(
file.raw.type === "image/png" ||
file.raw.type === "image/gif" ||
file.raw.type === "image/jpg" ||
file.raw.type === "image/jpeg"
)
) {
this.$message.error(
"请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片"
);
}
let size = file.size / 1024 / 1024 / 2;
if (size > 2) {
this.$message.warning("图片大小必须小于2M");
this.$refs.quillUploader.clearFiles();
return;
}
const formData = new FormData();
formData.append("file", file.raw);
const uploadLoading = this.$loading({
lock: true,
text: "图片上传中",
spinner: "el-icon-loading",
});
// 这是封装的上传图片返回url接口
updataImage(formData)
.then((res) => {
uploadLoading.close();
if (res.data.code == 200) {
const url = "https://qn.xxxxxxxxxxx/" + res.data.data;
let quill = this.$refs.myQuillEditor.quill;
let length = quill.getSelection().index;
// 图片上传到对象存储后的具体地址
quill.insertEmbed(length, "image", url);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error(res.data.msg);
}
this.$refs.quillUploader.clearFiles();
})
.catch((err) => {
uploadLoading.close();
this.$message.error(err);
this.$refs.quillUploader.clearFiles();
});
},
15.el-select 选择对象 value-key属性
16.当axios需要传送application/x-www-form-urlencoded格式参数的问题
方案1:
var qs = require('qs');
qs.stringify({ loginName: this.userName, loginPwd: this.password })
方案2:
let param = new URLSearchParams();
param.append("loginName", this.userName);
param.append("loginPwd", this.password);
上一篇: 已经是第一篇了,没有了!
下一篇: 前端开发常遇问题以及解决方案