contextMenuTarget:document.getElementById("main"+this.videoId),
contextMenuVisible:false,
created: function () {
var self = this;
this.contextMenuVisible =false;
this.contextMenuTarget=document.getElementById("main"+this.videoId);
},
mounted:function(){
this.contextMenuVisible =false;
this.contextMenuTarget=document.getElementById("main"+this.videoId);
},
<context-menu class="right-menu" style="z-index:2001;"
:target="contextMenuTarget"
:show="contextMenuVisible"
@update:show="(show) => contextMenuVisible = show">
<div id="div-menu-right">
<el-row style="margin: 7px 0;">
<el-col :span=12>
<p style="margin: 4px 0;">取流方式:</p>
</el-col>
<el-col :span=12>
<el-select size="mini" style="width: 80px" v-model="preview.transportType"
placeholder="请选择取流方式" @change="onTransportTypeSelectionChange">
<el-option
v-for="item in transportTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
<div style="margin: 11px 0;display: block; height: 1px; width: 100%;background-color: #DCDFE6;"/>
<el-row style="margin: 7px 0;">
<el-col :span=12>
<p style="margin: 4px 0;">视频流格式:</p>
</el-col>
<el-col :span=12>
<el-select size="mini" style="width: 80px" v-model="preview.streamType"
placeholder="请选择视频流格式" @change="onFormatSelectionChange">
<el-option
v-for="item in streamTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
<div style="margin: 11px 0;display: block; height: 1px; width: 100%;background-color: #DCDFE6;"/>
<el-row style="margin: 7px 0;">
<el-col :span=12>
<p style="margin: 4px 0;">云台控制:</p>
</el-col>
<el-col :span=12>
<el-switch size="mini"
v-model="ptz.show"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-col>
</el-row>
<div style="margin: 11px 0;display: block; height: 1px; width: 100%;background-color: #DCDFE6;"/>
<el-row style="margin: 7px 0;">
<el-col :span=12>
<p style="margin: 4px 0;">复合流:</p>
</el-col>
<el-col :span=12>
<el-switch size="mini"
@change="muxerSwitchChange"
v-model="muxer.state"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-col>
</el-row>
</div>
</context-menu>
Vue.component('context-menu',
{
data() {
return {
triggerShowFn: () => {
},
triggerHideFn: () => {
},
x: null,
y: null,
style: {},
binded: false
}
},
props: {
target: null,
show: Boolean
},
mounted() {
console.log(this.target);
this.bindEvents();
this.$nextTick(() => {
this.$emit('update:show', false)
});
},
watch: {
show(show) {
if (show) {
this.bindHideEvents()
} else {
this.unbindHideEvents()
}
},
target(target) {
this.bindEvents()
}
},
methods: {
// 初始化事件
bindEvents() {
this.$nextTick(() => {
if (!this.target || this.binded) return
this.triggerShowFn = this.contextMenuHandler.bind(this)
this.target.addEventListener('contextmenu', this.triggerShowFn)
this.binded = true
})
},
// 取消绑定事件
unbindEvents() {
if (!this.target) return
this.target.removeEventListener('contextmenu', this.triggerShowFn)
},
// 绑定鼠标点击和滚动 隐藏菜单事件
bindHideEvents() {
this.triggerHideFn = this.clickDocumentHandler.bind(this)
document.addEventListener('mousedown', this.triggerHideFn)
document.addEventListener('mousewheel', this.triggerHideFn)
},
// 取消绑定隐藏菜单事件
unbindHideEvents() {
document.removeEventListener('mousedown', this.triggerHideFn)
document.removeEventListener('mousewheel', this.triggerHideFn)
},
// 鼠标按压事件处理器
clickDocumentHandler(e) {
this.$emit('update:show', false)
},
// 右键事件事件处理
contextMenuHandler(e) {
this.x = e.clientX
this.y = e.clientY
this.layout()
this.$emit('update:show', true)
e.preventDefault()
},
// 布局
layout() {
this.style = {
left: this.x + 'px',
top: this.y + 'px'
}
}
},
template:
'<div :style="style" style="display:none;position: fixed; width: 200px; background-color: white; border-radius: 3px; padding: 4px 8px;" v-show="show"\n' +
'@mousedown.stop\n' +
'@contextmenu.prevent\n' +
'>\n' +
'<slot></slot>\n' +
'</div>'
}
)
评论区