右键菜单

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

    }
)