Nuxt/Vue+ElementUI开发错误记录
一、This may cause things to work incorrectly. Make sure to use the same version for both.
原因：版本不统一
解决办法：删除node_models文件夹和package-lock.json文件，重新 npm install。
二、ERROR Cannot convert undefined or null to object
原因：依赖包问题，不完整或者不兼容
解决办法：手动更改package.json文件，修改依赖包的版本，主要是修改这几个的版本，如下所示：
{ "dependencies": { "nuxt": "2.8.1", }, "devDependencies": { "node-sass": "^4.10.0", "sass-loader": "^8.0.0", } }
然后 npm install，npm run dev即可(这种情况不用删除node_models文件夹和package-lock.json文件)。
三、Nuxt项目，背景图片放置于static静态目录下，
引用1：background: url("/img/header-text-ico.png") no-repeat 10px center;
这种引用路径，在本地开发是可以找到的，但是上线之后，只能在服务器根目录下才可以获取到，如果项目是放在服务器的子目录，如big-data-platform-jinnan下，是获取不到的
引用2：background: url("~static/img/header-text-ico.png") no-repeat 10px center;
如果项目是放在服务器的子目录，如big-data-platform-jinnan下，是可以获取到的，这种写法是通用型。建议以后都使用这种写法。
四、今天加载图纸，遇见这种情况
因为地图图层初始化压根没有执行，_that.map_init('floor-g2map-view');方法执行了，但是floor-g2map-view这个div不存在，由于没有地图图层，导致图纸塞不进去，所以图纸不显示。
解决方法：使用定时器，在定时器里面先初始化地图，然后拿数据，展示图纸；
五、今天在nuxt里面使用jquery，点击箭头按钮展开隐藏弹框，data里面定义：onOff:true，第一次点击的时候，发现是undefined
原因是这里的this指向的是p.arrow这个jquery对象，而不是vue对象，所以里面压根没有代理这个onOff属性，自然是undefined
解决方法：
六、H5微信网页分享代码
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
obj = document.getElementById("shareDiv");
if (true) {
var wxShareTitle;
var wxShareDesc;
var wxShareImgUrl;
var contentId = '80068';
var channelId = '661';
var contentParentName = '太平新闻';
if (contentParentName != '产品及方案') {
if (contentId != "" && contentId != null) {
wxShareTitle = '';
if (wxShareTitle == "" || wxShareTitle == null) {
wxShareTitle = '【太平财富智赢保险产品计划】';
}
wxShareDesc = '定格美好生活，把财富“畅”给你听！';
wxShareImgUrl = "http://" + window.location.host + '/zhuanti/life/cfzyh5/img/cfzy_share.jpg';
/** if(wxShareImgUrl!="" && wxShareImgUrl!=null){
wxShareImgUrl = "http://"+window.location.host+"";
}else{
wxShareImgUrl = "http://"+window.location.host+"/tplresource/cms/www/taiping/img/bdshare/share.png";
} */
} else if ((channelId != "" && channelId != null) && (contentId == "" || contentId == null)) {
wxShareTitle = '';
if (wxShareTitle == "" || wxShareTitle == null) {
wxShareTitle = '集团要闻';
}
wxShareDesc = '';
if (wxShareDesc == "" || wxShareDesc == null) {
wxShareDesc = '集团要闻';
}
}
//alert(wxShareTitle+" "+wxShareDesc+" "+wxShareImgUrl);
function getQueryString(name) {//根据字段看网址是否拼接&字符串
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
var from = getQueryString('from');
if (from) {//假如拼接上了
window.location.href = window.location.href.split('?')[0];
}
$(function () {
//var url = window.location.href.replace('&', '%26');
var url = window.location.href.split('#')[0];
//alert('url1------------>' + url);
$.post(
"/wechatShareConfig.jspx",
{ "url": url },
function (data) {
data = eval(data);
// console.log(data);
// alert('url2 ------------->' + data.url);
//alert("公众号的唯一标识:"+data.appId+";生成签名的时间戳:"+data.timestamp+";生成签名的随机串:"+data.nonceStr+";签名:"+data.signature);
wx.config({
debug: false,//这里是开启测试，如果设置为true，则打开每个步骤，都会有提示，是否成功或者失败
appId: data.appId,//必填，公众号的唯一标识
timestamp: data.timestamp,//必填，生成签名的时间戳。
nonceStr: data.nonceStr,//必填，生成签名的随机串。
signature: data.signature,//必填，签名
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone'
]
});
wx.ready(function () {
//分享到朋友圈
wx.onMenuShareTimeline({
title: wxShareTitle, // 分享标题
desc: wxShareDesc, // 分享描述
link: data.url, // 分享链接
imgUrl: wxShareImgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: wxShareTitle, // 分享标题
desc: wxShareDesc, // 分享描述
link: data.url, // 分享链接
imgUrl: wxShareImgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享到QQ
wx.onMenuShareQQ({
title: wxShareTitle, // 分享标题
desc: wxShareDesc, // 分享描述
link: data.url, // 分享链接
imgUrl: wxShareImgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享到QQ空间
wx.onMenuShareQZone({
title: wxShareTitle, // 分享标题
desc: wxShareDesc, // 分享描述
link: data.url, // 分享链接
imgUrl: wxShareImgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
});
});
}
}
</script>
七、新增数据，类似下面这种结构，姓名调接口获取，是个下拉框，选择某个姓名自动带入后面的电话
template部分：
<gs-el-table :data="leaderTableData" stripe> <gs-el-table-column type="index" label="序号" width="100"></gs-el-table-column> <gs-el-table-column prop="" label="职务" show-overflow-tooltip> <template scope="scope"> <gs-el-input v-model="scope.row.position" placeholder="请输入内容"></gs-el-input> </template> </gs-el-table-column> <gs-el-table-column prop="" label="姓名"> <template scope="scope"> <gs-el-select @change="selectLeaderHandle(scope.row)" v-model="scope.row.workerId" placeholder="请选择"> <gs-el-option v-for="item in personNameData" :key="item.value" :label="item.label" :value="item.value"> </gs-el-option> </gs-el-select> </template> </gs-el-table-column> <gs-el-table-column prop="" label="电话" show-overflow-tooltip> <template scope="scope"> <gs-el-input v-model="scope.row.telephone" placeholder="请输入内容"></gs-el-input> </template> </gs-el-table-column> </gs-el-table>
vue部分：
data(){
return {
leaderTableData
}
},
mounted(){
this.leaderTableData = [
{
position:'',
positionType:'1',
workerId:'',
telephone:''
},
{
position:'',
positionType:'1',
workerId:'',
telephone:''
},
{
position:'',
positionType:'1',
workerId:'',
telephone:''
},
{
position:'',
positionType:'1',
workerId:'',
telephone:''
},
];
},
作者：XiaoXiao
本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。
浙公网安备 33010602011771号