侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

右键菜单

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 104 阅读 / 4,337 字
温馨提示:
本文最后更新于 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:
        '&lt;div :style=&quot;style&quot; style=&quot;display:none;position: fixed; width: 200px; background-color: white; border-radius: 3px; padding: 4px 8px;&quot; v-show=&quot;show&quot;\n' +
        '@mousedown.stop\n' +
        '@contextmenu.prevent\n' +
        '&gt;\n' +
        '&lt;slot&gt;&lt;/slot&gt;\n' +
        '&lt;/div&gt;'

}

)

0

评论区