記錄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" target="_blank" rel="external nofollow" >
有一個問題，在建立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>
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)