右键菜单

Dettan

2021-04-10 / 0 评论 / 0 点赞 / 104 阅读 / 4,337 字

04/10

温馨提示：

本文最后更新于 2022-04-30，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

/ 前端 / 自用组件 / 右键菜单

contextMenuTarget:document.getElementById("main"+this.videoId),
contextMenuVisible:false,
created: function () ,

mounted:function(),

<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>

            <div style="color: inherit; fill: inherit;">
                <div style="display: flex;">

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>' }

)

右键菜单

评论区