Vue 3集成?？礧eb插件實(shí)現(xiàn)視頻監(jiān)控功能
更新時(shí)間：2024年11月15日 16:25:07 作者：前端青山
本文詳細(xì)介紹了如何使用 Vue 3 框架集成?？礧eb插件實(shí)現(xiàn)視頻監(jiān)控功能,通過(guò)定義屬性、事件、變量,以及編寫初始化、播放視頻、處理節(jié)點(diǎn)點(diǎn)擊事件等方法,我們成功實(shí)現(xiàn)了視頻監(jiān)控系統(tǒng)的前端部分,感興趣的朋友一起看看吧
引言
最近在項(xiàng)目中使用了 Vue 3 結(jié)合?？礧eb插件來(lái)實(shí)現(xiàn)視頻監(jiān)控功能，過(guò)程中遇到了一些挑戰(zhàn)和解決方案。為了幫助開(kāi)發(fā)小伙伴們更好地理解和應(yīng)用這一技術(shù)棧，特此分享一下我們的經(jīng)驗(yàn)和代碼實(shí)現(xiàn)。
項(xiàng)目背景
在當(dāng)前的項(xiàng)目中，我們需要實(shí)現(xiàn)一個(gè)視頻監(jiān)控系統(tǒng)，能夠展示多個(gè)監(jiān)控點(diǎn)的實(shí)時(shí)視頻流，并支持用戶通過(guò)樹(shù)形結(jié)構(gòu)選擇不同的監(jiān)控點(diǎn)。為了實(shí)現(xiàn)這一需求，我們選擇了 Vue 3 作為前端框架，并集成了海康Web插件來(lái)處理視頻流的播放和管理。
準(zhǔn)備工作
1. 官網(wǎng)下載
在官網(wǎng)海康開(kāi)放平臺(tái)下載視頻web插件
2.安裝插件
3.插件js文件引入vue項(xiàng)目
將這3個(gè)js文件引入vue項(xiàng)目中的public文件夾下新建文件夾放入
然后在index.html文件中根路徑引入配置文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" rel="external nofollow" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端青山</title>
</head>
<body>
<div id="screen"></div>
<!-- 連接內(nèi)網(wǎng)部署離線天地圖 -->
<script src="/h5player/h5player.min.js"></script>
<script src="/webControl/jquery-1.12.4.min.js"></script>
<script src="/webControl/jsencrypt.min.js"></script>
<script src="/webControl/web-control_1.2.5.min.js"></script>
<script type="module" src="/src/main.ts"></script>
<script src="/src/utils/d3/d3.js" charset="utf-8"></script>
<script src="/src/utils/d3/D3SvgOverlay.js"></script>
</body>
</html>最后我們開(kāi)始構(gòu)建本次所需要調(diào)用的組件封裝功能
子組件結(jié)構(gòu)
1. 模板部分
<template>
<div class="play_windows" v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)">
<div class="tree-form">
<el-tree
ref="tree"
:data="dataTree"
:props="defaultProps"
:highlight-current="true"
@node-click="pitchOns"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
{{ data.name }}
</span>
</template>
</el-tree>
</div>
<div class="videosp" ref="videosp">
<div id='corpvideo' ref="corpvideo"></div>
</div>
</div>
</template><div class="play_windows">: 主容器，包含視頻樹(shù)形結(jié)構(gòu)和視頻播放區(qū)域。<el-tree>: Element Plus 的樹(shù)形組件，用于展示視頻監(jiān)控點(diǎn)的層級(jí)結(jié)構(gòu)。<div class="videosp">: 視頻播放區(qū)域，包含一個(gè)id為corpvideo的div，用于嵌入海康Web插件。
2. 腳本部分
2.1 導(dǎo)入依賴
<script setup lang="ts">
import { ref, onMounted, nextTick, defineProps, defineExpose, defineEmits, watch, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus'
import { videoallList } from '@/api/screenVideo/index'
import { getGetByCode } from "@/api/videoSurveillance/index";ref: Vue 3 的響應(yīng)式變量。onMounted: 生命周期鉤子，組件掛載后執(zhí)行。nextTick: 在 DOM 更新后執(zhí)行。defineProps: 定義組件接收的屬性。defineEmits: 定義組件觸發(fā)的事件。watch: 監(jiān)聽(tīng)數(shù)據(jù)變化。onBeforeUnmount: 組件卸載前執(zhí)行。
2.2 定義屬性和事件
const emit = defineEmits(["handleSpjkPOIClick"]);
const props = defineProps({
playURL: String, // 視頻url
splitNum: Number, // 分屏播放，默認(rèn)最大分屏4*4
dataTree: Object, // 樹(shù) 數(shù)據(jù)
defaultProps: Object
});props: 定義組件接收的屬性，包括playURL、splitNum、dataTree和defaultProps。emit: 定義組件觸發(fā)的事件，如handleSpjkPOIClick。
2.3 定義變量
let dataTree = ref<any>(props.dataTree); let defaultProps = ref<any>(props.defaultProps); let loading = ref<Boolean>(false); const corpvideo = ref<any>(); const videosp = ref<any>(null); let width: any = 0; let height: any = 0; let oWebControl: any = null; let initCount: any = 0; let pubKey: any = '';
dataTree: 樹(shù)形結(jié)構(gòu)的數(shù)據(jù)。defaultProps: 樹(shù)形組件的默認(rèn)屬性。loading: 加載狀態(tài)。corpvideo: 視頻播放容器的引用。videosp: 視頻播放區(qū)域的引用。width和height: 視頻播放區(qū)域的寬度和高度。oWebControl: ?？礧eb插件的實(shí)例。initCount: 初始化計(jì)數(shù)器。pubKey: RSA公鑰。
2.4 RSA加密
const setEncrypt = (value: any) => {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
}setEncrypt: 使用 JSEncrypt 庫(kù)進(jìn)行 RSA 加密。
2.5 初始化插件
const initPlugin = () => {
nextTick(() => {
width = videosp.value.offsetWidth;
height = videosp.value.offsetHeight;
oWebControl = new webControl({
szPluginContainer: "corpvideo",
iServicePortStart: 15900,
iServicePortEnd: 15900,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
cbConnectSuccess: function () {
oWebControl.JS_StartService("window", {
dllPath: "./VideoPluginConnect.dll"
}).then(function () {
oWebControl.JS_CreateWnd("corpvideo", width, height).then(function () {
init();
});
}, function () {});
},
cbConnectError: function () {
oWebControl = null;
webControl.JS_WakeUp("VideoWebPlugin://");
initCount++;
if (initCount < 3) {
setTimeout(function () {
initPlugin();
}, 3000);
} else {
console.log("插件啟動(dòng)失敗，請(qǐng)檢查插件是否安裝！");
}
},
cbConnectClose: function (bNormalClose: any) {
oWebControl = null;
webControl.JS_WakeUp("VideoWebPlugin://");
initCount++;
if (initCount < 3) {
setTimeout(function () {
initPlugin();
}, 3000);
} else {
console.log("插件啟動(dòng)失敗，請(qǐng)檢查插件是否安裝！");
}
}
});
});
}initPlugin: 創(chuàng)建海康Web插件實(shí)例，并設(shè)置連接成功、連接失敗和連接關(guān)閉的回調(diào)函數(shù)。cbConnectSuccess: 連接成功后啟動(dòng)服務(wù)并創(chuàng)建視頻播放窗口。cbConnectError: 連接失敗后嘗試重新連接。cbConnectClose: 連接關(guān)閉后嘗試重新連接。
2.6 獲取公鑰
const getPubKey = (callback: any) => {
oWebControl.JS_RequestInterface({
funcName: "funcName",
argument: JSON.stringify({
keyLength: 1024
})
}).then((oData: any) => {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback();
}
});
}getPubKey: 請(qǐng)求公鑰并調(diào)用回調(diào)函數(shù)。
2.7 初始化視頻播放
const init = () => {
getPubKey(() => {
appkey = "appkey ";
secret = setEncrypt("secret");
ip = "ip ";
playMode = 0;
port = 443;
snapDir = "D:\\SnapDir";
videoDir = "D:\\VideoDir";
layout = "1x1";
enableHTTPS = 1;
encryptedFields = 'secret';
showToolbar = 1;
showSmart = 1;
buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";
oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey,
secret: secret,
ip: ip,
playMode: playMode,
port: port,
snapDir: snapDir,
videoDir: videoDir,
layout: layout,
enableHTTPS: enableHTTPS,
encryptedFields: encryptedFields,
showToolbar: showToolbar,
showSmart: showSmart,
buttonIDs: buttonIDs
})
}).then((oData: any) => {
oWebControl.JS_Resize(width, height);
});
});
}init: 使用公鑰加密敏感信息，并請(qǐng)求初始化視頻播放。
2.8 播放視頻
const JSRequestInterface = (code: any) => {
cameraIndexCode = code.replace(/(^\s*)/g, "").replace(/(\s*$)/g, "");
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId: wndId
})
});
}JSRequestInterface: 請(qǐng)求播放指定監(jiān)控點(diǎn)的視頻。
2.9 隱藏和顯示窗口
const JSHideWnd = () => {
oWebControl.JS_HideWnd();
oWebControl.JS_DestroyWnd().then(function () {}, function () {});
}
const JSShowWnd = () => {
initPlugin();
oWebControl.JS_ShowWnd();
}JSHideWnd: 隱藏并銷毀視頻播放窗口。JSShowWnd: 重新初始化并顯示視頻播放窗口。
2.10 監(jiān)聽(tīng)窗口關(guān)閉和調(diào)整大小
window.addEventListener('unload', JSHideWnd);
const getElementPosition = () => {
width = window.innerWidth * 0.3;
height = window.innerHeight * 0.56;
oWebControl.JS_Resize(width, height);
};
window.addEventListener('resize', getElementPosition);window.addEventListener('unload', JSHideWnd): 監(jiān)聽(tīng)窗口關(guān)閉事件，隱藏并銷毀視頻播放窗口。getElementPosition: 獲取窗口大小并調(diào)整視頻播放窗口的尺寸。window.addEventListener('resize', getElementPosition): 監(jiān)聽(tīng)窗口調(diào)整大小事件，動(dòng)態(tài)調(diào)整視頻播放窗口的尺寸。
2.11 處理節(jié)點(diǎn)點(diǎn)擊事件
const pitchOns = (e: any) => {
if (!e || !e.self) {
if (e.equipmentCoding) {
handleAddChild(e);
}
return;
}
if (e.children) {
emit("handleSpjkPOIClick", e.self.indexCode, '');
return;
} else {
handleAddChild(e);
}
}
const handleAddChild = (e: any) => {
if (!e || !e.self) {
if (e.equipmentCoding) {
videoUrl(e.equipmentCoding);
}
return;
}
if (e.self.indexCode) {
let params = {
UnitIndexCode: e.self.indexCode,
};
videoallList(params).then((res: any) => {
if (res.data.rows.length == 0) {
emit("handleSpjkPOIClick", e.self.indexCode, '');
} else {
e.children = e.children || [];
res.data.rows = res.data.rows.map((child: any) => ({
...child,
name: child.equipmentName,
}));
res.data.rows.forEach((child: any) => {
e.children.push(child);
});
(e as any).expanded = true;
}
});
}
}
const videoUrl = (equipmentCoding: string) => {
let params = {
equipmentCoding: equipmentCoding,
};
JSRequestInterface(equipmentCoding)
}pitchOns: 處理樹(shù)形節(jié)點(diǎn)點(diǎn)擊事件，根據(jù)節(jié)點(diǎn)類型調(diào)用相應(yīng)的方法。handleAddChild: 處理節(jié)點(diǎn)的子節(jié)點(diǎn)加載，請(qǐng)求子節(jié)點(diǎn)數(shù)據(jù)并展開(kāi)節(jié)點(diǎn)。videoUrl: 請(qǐng)求指定監(jiān)控點(diǎn)的視頻URL并播放視頻。
2.12 暴露方法
defineExpose({
initPlugin,
JSHideWnd,
JSShowWnd,
JSRequestInterface
})defineExpose: 暴露組件的方法，供外部調(diào)用。
3. 樣式部分
<style scoped lang="scss">
// 公共element樣式
@import '@/styles/eleCustomize.scss';
/* 樣式 */
.play_windows {
display: flex;
width: 100% !important;
.tree-form {
width: 18vw;
height: 28vw;
overflow: auto;
padding: 0;
}
}
.videosp {
width: 32vw;
height: 60vh !important;
#corpvideo {
width: 100% !important;
height: 100% !important;
margin-top: 0.5vh;
}
#player-container-0 {
width: 100% !important;
height: 100% !important;
}
}
/* 屏幕寬度超過(guò)1920px時(shí)應(yīng)用 */
@media (min-width: 8000px) {
.play_windows {
.tree-form {
width: 10vw;
height: 18vw;
}
}
.videosp {
width: 45vw;
}
}
::v-deep(.el-radio-button__inner) {
width: 2vw;
height: 1vw;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.6vw;
}
.video-button {
width: 3vw;
height: 1vw;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.6vw;
}
::v-deep(.el-radio-button__inner) {
background: transparent !important;
color: white !important;
border: 0 !important;
display: flex;
align-items: center;
height: 3.5vh !important;
color: white !important;
margin: 0.2vw;
font-size: 1.6vh !important;
background: transparent !important;
border: 0.1vw solid #009392 !important;
border-radius: 0.2vw !important;
}
::v-deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
background: linear-gradient(90deg, rgba(0, 96, 204, 0.2) 0%, rgba(0, 165, 189, 0.6) 100%) !important;
color: white !important;
border-color: none !important;
}
</style>子組件 ScreenMonitoring 主要實(shí)現(xiàn)了監(jiān)控點(diǎn)的樹(shù)形結(jié)構(gòu)展示和視頻播放控制。通過(guò) el-tree 組件展示監(jiān)控點(diǎn)的樹(shù)形結(jié)構(gòu)，并在節(jié)點(diǎn)被點(diǎn)擊時(shí)調(diào)用視頻播放插件的初始化和播放方法。子組件提供了 JSRequestInterface 方法請(qǐng)求視頻流，initialize 方法初始化視頻播放，以及 JSHideWnd 方法停止視頻播放，確保視頻監(jiān)控功能的完整性和可控性。
父組件調(diào)用
1. 模板部分
<template>
<screenVideoDialog
v-model="dialogVideo"
title="公安監(jiān)控"
width="55%"
@close="onCloseDialog"
@open="onOpenDialog"
:draggable="false"
>
<div class="my_dialog_slot" style="height:60vh;" v-if="dialogVideo">
<ScreenMonitoring
ref="screenmonitoring"
:dataTree="dataTree"
:defaultProps="defaultProps"
@handleSpjkPOIClick="handleSpjkPOIClick"
/>
</div>
</screenVideoDialog>
</template><screenVideoDialog>: 這是一個(gè)自定義的對(duì)話框組件，用于顯示視頻監(jiān)控內(nèi)容。通過(guò)v-model綁定dialogVideo變量來(lái)控制對(duì)話框的顯示和隱藏。@close="onCloseDialog": 當(dāng)對(duì)話框關(guān)閉時(shí)，調(diào)用onCloseDialog方法。@open="onOpenDialog": 當(dāng)對(duì)話框打開(kāi)時(shí)，調(diào)用onOpenDialog方法。<div class="my_dialog_slot">: 包含ScreenMonitoring子組件的容器，設(shè)置高度為60vh，并使用v-if指令確保只有在dialogVideo為true時(shí)才渲染。<ScreenMonitoring>: 子組件，用于顯示視頻監(jiān)控內(nèi)容。通過(guò)ref綁定screenmonitoring變量，以便在父組件中調(diào)用子組件的方法。傳遞dataTree和defaultProps屬性，并監(jiān)聽(tīng)handleSpjkPOIClick事件。
2. 腳本部分
<script setup lang="ts">
import { ref } from 'vue';
import screenVideoDialog from '@/components/Dialog/screenVideoDialog.vue';
import ScreenMonitoring from '@/components/Dialog/screenMonitoring.vue';
const dialogVideo = ref(false);
const dataTree = ref([
// 樹(shù)形結(jié)構(gòu)數(shù)據(jù)
]);
const defaultProps = ref({
children: 'children',
label: 'label'
});
const screenmonitoring = ref<InstanceType<typeof ScreenMonitoring> | null>(null);
// 處理監(jiān)控點(diǎn)點(diǎn)擊事件
const handleSpjkPOIClick = (poiId: string, coord: string) => {
let params = {
UnitIndexCode: poiId
};
screenmonitoring.value?.JSRequestInterface(poiId);
// getGetByCodes(params).then(res => {
// setTimeout(() => {
// screenmonitoring.value?.initialize(res.data.urls[0], res.data.urls);
// }, 1000);
// });
};
// 關(guān)閉對(duì)話框時(shí)停止視頻
const onCloseDialog = (e: any) => {
screenmonitoring.value?.JSHideWnd();
};
// 打開(kāi)對(duì)話框時(shí)初始化視頻
const onOpenDialog = (e: any) => {
screenmonitoring.value?.initPlugin();
};
</script>dialogVideo: 一個(gè)響應(yīng)式變量，用于控制對(duì)話框的顯示和隱藏。dataTree: 樹(shù)形結(jié)構(gòu)的數(shù)據(jù)，用于傳遞給ScreenMonitoring子組件。defaultProps: 樹(shù)形組件的默認(rèn)屬性，用于傳遞給ScreenMonitoring子組件。screenmonitoring: 一個(gè)響應(yīng)式變量，用于存儲(chǔ)ScreenMonitoring子組件的實(shí)例，以便在父組件中調(diào)用其方法。handleSpjkPOIClick: 處理監(jiān)控點(diǎn)點(diǎn)擊事件的方法。當(dāng)用戶點(diǎn)擊某個(gè)監(jiān)控點(diǎn)時(shí)，會(huì)調(diào)用子組件的JSRequestInterface方法，并傳遞poiId參數(shù)。注釋掉的部分是獲取視頻 URL 的邏輯，可以根據(jù)實(shí)際需求啟用。onCloseDialog: 當(dāng)對(duì)話框關(guān)閉時(shí)調(diào)用的方法。調(diào)用子組件的JSHideWnd方法，停止視頻播放。onOpenDialog: 當(dāng)對(duì)話框打開(kāi)時(shí)調(diào)用的方法。調(diào)用子組件的initPlugin方法，初始化視頻播放。
3. 樣式部分
<style scoped>
.my_dialog_slot {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>.my_dialog_slot: 設(shè)置對(duì)話框內(nèi)容的樣式，確保內(nèi)容居中顯示。
通過(guò)上述代碼，我們?cè)诟附M件中實(shí)現(xiàn)了視頻監(jiān)控對(duì)話框的顯示和隱藏，并在對(duì)話框打開(kāi)和關(guān)閉時(shí)調(diào)用子組件的相應(yīng)方法，以控制視頻的播放和停止。
本文詳細(xì)介紹了如何使用 Vue 3 框架集成海康Web插件實(shí)現(xiàn)視頻監(jiān)控功能。通過(guò)定義屬性、事件、變量，以及編寫初始化、播放視頻、處理節(jié)點(diǎn)點(diǎn)擊事件等方法，我們成功實(shí)現(xiàn)了視頻監(jiān)控系統(tǒng)的前端部分。同時(shí)，通過(guò)樣式部分的定制，確保了良好的用戶體驗(yàn)。希望本文對(duì)讀者在開(kāi)發(fā)類似項(xiàng)目時(shí)有所幫助。
到此這篇關(guān)于Vue 3集成?？礧eb插件實(shí)現(xiàn)視頻監(jiān)控的文章就介紹到這了,更多相關(guān)Vue?？礧eb插件視頻監(jiān)控內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue播放flv、m3u8視頻流(監(jiān)控)的方法實(shí)例
- 使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)
- vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼
- vue+flv.js+SpringBoot+websocket實(shí)現(xiàn)視頻監(jiān)控與回放功能
- vue-video-player實(shí)現(xiàn)實(shí)時(shí)視頻播放方式(監(jiān)控設(shè)備-rtmp流)
- vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能
相關(guān)文章
使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時(shí)間軸的中文化(案例代碼)
這篇文章主要介紹了使用vis-timeline繪制甘特圖并實(shí)現(xiàn)時(shí)間軸的中文化(案例代碼),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了淺談vue中.vue文件解析流程,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue中前端代理跨域問(wèn)題實(shí)例總結(jié)
前后端分離進(jìn)行項(xiàng)目開(kāi)發(fā),跨域問(wèn)題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
本文主要介紹了在使用el-select實(shí)現(xiàn)下拉選擇緩存時(shí)遇到的問(wèn)題及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
這篇文章主要介紹了Vue.js?前端路由和異步組件介紹，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
本文主要介紹了Vue中使用Tailwind CSS的具體方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue使用$attrs實(shí)現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue如何使用$attrs實(shí)現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-02-02
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue組件值變化但不刷新強(qiáng)制組件刷新的問(wèn)題
這篇文章主要介紹了vue組件值變化但不刷新強(qiáng)制組件刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06