记录Vue+DataV + Element UI 项目问题
记录vue+datav + element ui 项目问题1. nginx跨域问题首先是配置，在nginx.conf文件里配置文件路径location / {roothtml/vue-sreen/dist;indexindex.html;add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-C
·
记录vue+datav + element ui 项目问题
1. nginx跨域问题
首先是配置，在nginx.conf文件里配置文件路径
location / { root html/vue-sreen/dist; index index.html;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET';}
配置
proxy_passlocation /api/getImageFile/dca6321268a5/{
proxy_pass http://xiaolongqx.natapp1.cc/getImageFile/dca6321268a5; }
(不确定是否影响)
location ~ \.php$ { proxy_pass http://xiaolongqx.natapp1.cc;}在vue中请求http://xiaolongqx.natapp1.cc/getImageFile/dca6321268a5时改为api/getImageFile/dca6321268a5`
- 2.在vue中使用萤石云直播地址（已弃用）
首先引入ezuikit.js
import ezuikit from'./ezuikit.js'
import 'uikit/dist/css/uikit.min.css'
import './jquery.min.js'
不确定是否引入video.js（安装时不能冲突重复安装，命令行会报错）使用
<video id="myPlayer1" style="width: 600px;height: 373px;" :src="http_url2" controls playsinline webkit-playsinline autoplay> </video>
updated () { if(this.rtmp_url!=""){ //如果在mounted中声明，直播地址还未取到，导致视频不显示。
所以放在了这里
this.player = new EZUIPlayer('myPlayer'); } },
问题：在动态更改src链接时，数据会改变，但不会渲染到视图层，需要强制刷新页面才能更改，需手动刷新页面才能可以，但使用感不好，在刷新时会出现页面闪白状态，可以使用跳转空白页，在空白页设置
beforeRouteEnter (to, from, next) { next(vm => { vm.$router.replace(from.path) }) }
路由会有一瞬间的变化，但页面不会闪
-
datav折线图
使用折线图时必须有x轴或y轴的data值为‘value’（根据数据上的值自动显示对应的长度距离）
.轮播预览
<div style="width:1080px;height:786px;" class="banner">
<div style="z-index: 0;" class="item">
<img style="width:1060px;height:770px;margin-top: 10px;z-index: 0;" :src="dataList[currentIndex]">
</div>
<div style="margin-top: -135px;background: #6786aa;z-index: 100;position: absolute;width:1060px;margin-left: 10px;padding-top: 10px;" class="page" v-if="this.dataList.length > 1">
<ul>
<div style="width: 1060px;margin-left: -20px;overflow: hidden;">
<img src="./img/left1.jpg" style="width: 20px;height: 40px;background: #fff;" @click="gotoPage(prevIndex)"/>
<img :class="{'clickpic':currentIndex == index}" v-for="(item,index) in dataList" @click="gotoPage(index)" :src="item" class="rr"/>
<img src="./img/right1.jpg" style="width: 20px;height: 40px;background:#fff;"@click="gotoPage(nextIndex)"/>
</div>
</ul>
</div>
</div>
dataList: ["https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg","https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg","https://i1.mifile. cn/a4/xmad_15517939170939_oiXCK.jpg"],
currentIndex: 0, //默认显示图片
timer: null
computed: {
//上一张
prevIndex () {
if(this.currentIndex == 0) {
return this.dataList.length - 1;
}else{
return this.currentIndex - 1;
}
},
//下一张
nextIndex () {
if(this.currentIndex == this.dataList.length - 1) {
return 0;
}else {
return this.currentIndex + 1;
}
}
}
gotoPage(index) {
this.currentIndex = index; // console.log(index)
this.clickpic = "width:200px;height:100px;padding:4px;border:1px solid #000bf1"
},
runInv () {
this.timer = setInterval(() => {
this.gotoPage(this.nextIndex)
}, 1000) }
- 隔几秒操作
window.setInterval(() => { setTimeout(fn, 0) }, 5000)
-
elemen ui
- 表格
表格边框改变颜色
- 表格
<el-table
:data="tableData"
height="250"
@row-click = "clickshowpic"
:header-cell-style="getRowClass"
:cell-style="rowstyle"
highlight-current-row
@current-change="handleCurrentChange"
border
style="width: 540px;background:#030c1b;color:#8db6d4;border-color: #365595;">
getRowClass ({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'background:#030c1b;border:1px solid #365595!important'
} else {
return 'background:#030c1b;border:1px solid #365595!important'
}
},
rowstyle({ row, column, rowIndex, columnIndex }){
// if (rowIndex === 0) {
return 'background:#030c1b;border:1px solid #365595!important'
// } else {
// return 'background:#101239'
// }
},
el-table tbody tr:hover>td {
background-color:#3c3c3c!important
}
/* .el-table--border::after, .el-table--group::after, .el-table::before{
background-color: #000 !important;
} */
.el-table__body-wrapper::-webkit-scrollbar {
/*width: 0;宽度为0隐藏*/
width: 0px !important;
}
.el-table td.gutter, .el-table th.gutter {
width: 0px !important;
}
.el-table--border, .el-table--group, .el-table td, .el-table th.is-leaf{
border-color: #365595;
}
.el-table--border:after, .el-table--group:after, .el-table:before{
background-color: #365595;
content: "";
position: absolute;
z-index: 1;
}
.current-row > td {
background: #02274c !important;
}
.el-table tbody tr:hover>td /deep/{
background-color:#02274c!important
}
选中效果
handleCurrentChange(val){
this.currentRow = val
},
固定高度就可以滑动
- 编译后图片路径问题
config/index.jsdev: {
// Paths assetsSubDirectory: 'static',
assetsPublicPath: './',
proxyTable:{ '/api': {
target: '192.168.1.19:8090',//后端接口地址
changeOrigin: true,//是否允许跨越
pathRewrite: { '^/api': '/',//重写, }
} }
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'),
// Paths assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
编译后背景图片路径404问题
build/utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' //加上这句
}) }
- .浏览器记忆在index.html里修改项目名和改项目图标时
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
有一个问题，在创建vue项目时vue自动会有vue的图标，这时删掉也还会存在，原因是谷歌浏览器记忆的问题，换做欧朋浏览器就会没有，但有时直接在index.html修改不会变这时修改配置文件
**
- vue切换视频，不更新问题
**
使用纯js
var videoHtml='<video id="myPlayer" src="" style="width: 380px;height: 200px;" width="380px" height="200px" controls playsinline webkit-playsinline autoplay=true>';
$("#videourlde").html(videoHtml);
var src = res.data.dataSource.list[0].videoAddress
$('#myPlayer').attr("src", src);
player = new EZUIKit.EZUIPlayer('myPlayer');
// 播放
player.play();
这种切换src可以时刻换路径也会渲染到视图层
**
- vue监听不到srcolltop问题
**
window.addEventListener('scroll', () => {
let scrollTop = document.documentElement.scrollTop ||
document.body.scrollTop ||
document.querySelector('.element').scrollTop;
console.log(scrollTop);
if(scrollTop + window.innerHeight >= document.body.offsetHeight) {
console.log('bottom')
}//判断是否到底部
}, true)
**
- 开启websocket
**
$(document).ready(function() {
openSocket();
//setInterval("selectImageUrl()", 1000*3);//3秒查询一次设备状态
});
var socket;
// 心跳检测，每隔一段时间检测连接状态，如果处于连接中，就像Server主动发送消息，来重置Server段与客户端的最大连接时间，如果已经断开，发起重连
var heartCheck = {
// 9分钟发起一次心跳，比Server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间
timeout: 240000,
serverTimeoutObj: null,
reset: function () {
clearTimeout(this.serverTimeoutObj);
return this;
},
start: function () {
this.serverTimeoutObj = setInterval(function () {
if (socket.readyState == 1) {
console.log("连接状态，发送消息保持连接");
var msg = "{\"equipmentCode\":\"\",\"message\":\"{\\\"deviceState\\\":\\\"\\\",\\\"entercloseId\\\":\\\"\\\"}\"}";
socket.send(msg);
// 如果获取到消息，说明连接正常，重置心跳检测
heartCheck.reset().start();
} else {
console.log("断开连接，尝试重连");
openSocket();
}
}, this.timeout)
}
};
function openSocket() {
if(typeof(WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
}else{
console.log("您的浏览器支持WebSocket");
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
var socketUrl="http://192.168.1.29:33333/api/testOne?equipmentCode=0000000000000000b6d31fd46351531f";
socketUrl=socketUrl.replace("https","ws").replace("http","ws");
console.log(socketUrl);
if(socket!=null){
socket.close();
socket=null;
}
socket = new WebSocket(socketUrl);
//打开事件
socket.onopen = function() {
heartCheck.reset().start();
console.log("websocket已打开");
console.log(new Date());
//socket.send("这是来自客户端的消息" + location.href + new Date());
};
//获得消息事件
socket.onmessage = function(msg) {
heartCheck.reset().start();
console.log(msg.data);
var dataObj = JSON.parse(msg.data);
alert(dataObj);
//发现消息进入 开始处理前端触发逻辑
};
//关闭事件
socket.onclose = function(e) {
console.log('websocket已关闭: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
console.log(new Date());
};
//发生了错误事件
socket.onerror = function() {
console.log("websocket发生了错误");
}
}
}
</script>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)