需求

点击会话列表某个会话，右击下拉菜单
自己懒得写，于是使用了组件

• 直接上代码
• 思路是先让下拉菜单隐藏，右击显示，再通过iview源码，设置显示位置

<template>
    <div>
        <h1>jkfjjfkfkjk</h1>
        <div @contextmenu.prevent="dblclickGo($event)"
             style="height: 50px;width: 100px;margin: 300px;background-color: #d92727;"></div>
        <Dropdown ref="contentMenu" trigger="click" v-show="showMsgDropdown">
            <a href="javascript:void(0)">
                click 触发
                <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
                <DropdownItem>驴打滚</DropdownItem>
                <DropdownItem>炸酱面</DropdownItem>
                <DropdownItem>豆汁儿</DropdownItem>
                <DropdownItem>冰糖葫芦</DropdownItem>
                <DropdownItem>北京烤鸭</DropdownItem>
            </DropdownMenu>
        </Dropdown>

    </div>
</template>

<script>
  export default {
    name: 'aa',
    data() {
      return {
        showMsgDropdown: false,
      };
    },
    mounted() {
      console.log(this.$store.getters.userAccount);
      alert(this.$router.query.userAccount);
    },
    created: {},
    methods: {
      dbClic() {
        alert('1');
        console.log('kfdkk');
      },
      dblclickGo(e) {
        this.showMsgDropdown = true;
        this.Msgcontextmenu(e);
      },
      Msgcontextmenu(event) {
        event.preventDefault();
        this.$refs.contentMenu.$refs.reference = event.target;//在此dom附件弹出
        console.log(this.$refs.contentMenu.$refs.reference);
        this.$refs.contentMenu.currentVisible = !this.$refs.contentMenu.currentVisible;//仿click弹出界面
      },
    },

  };
</script>

<style scoped>

</style>

效果

应用到聊天模块