新增右键菜单

src/components/u-rightClickMenu/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="g-right-click-menu" :style="style" v-if="isShow" ref="rightMenu">
+    <div
+        v-for="item,index in data"
+        :key="index"
+        class="operating" @click.stop="operatingRightAction($event,item)">{{item.label}}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data:{
+      type:Array,
+      default:()=>[]
+    },
+    left: {
+      type: Number,
+      default: 0
+    },
+    type: {
+      type: Number,
+      default: 1
+    },
+    dataInfo: {
+      type: Object,
+      default: () => {}
+    },
+    top: {
+      type: Number,
+      default: 0
+    },
+    isViewInfo: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    left: {
+      handler (newName, oldName) {
+        if (newName) {
+          this.isShow = true
+        }
+      }
+      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
+      // immediate: true
+    }
+  },
+  computed: {
+    style () {
+      let clientHeight = document.body.clientHeight
+      let y = this.top
+      if (clientHeight - y < 100) {
+        return `left:${this.left}px;bottom:${clientHeight - y}px`
+      } else {
+        return `left:${this.left}px;top:${this.top}px`
+      }
+    }
+  },
+  data () {
+    return {
+      isShow: false
+    }
+  },
+  methods: {
+    /**
+       * @func 点击操作
+       * @param val 1、置顶/取消置顶 2、开启/关闭免打扰 3、开启/关闭星标 4、删除会话
+       */
+    operatingRightAction ($event, val) {
+      this.$emit('ok', $event, val)
+      this.isShow = false
+    }
+  },
+  mounted () {
+    let _self = this
+    window.addEventListener('click', function () {
+      _self.isShow = false
+    })
+    window.addEventListener('mousedown', function (e) {
+      if (e.which === 3) {
+        _self.isShow = false
+      }
+    })
+  }
+}
+</script>
+<style lang="scss" scoped>
+.g-right-click-menu {
+    left: 0;
+    background: white;
+    width: 148px;
+    height: auto;
+    position: fixed;
+    //border: 1px solid #c4c4c4;
+    z-index: 9;
+    //box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    .operating {
+        font-size: 12px;
+        padding-left: 23px;
+        cursor: pointer;
+        line-height: 27px;
+    }
+    .operating:hover {
+        background: #e2e2e2;
+    }
+
+    .last-delete {
+        border-top: 1px solid #ededed;
+    }
+}
+</style>

src/router/modules/other.ts

@@ -42,7 +42,12 @@ const othersRouter = {
             name: 'qrcode',
             meta: { title: '生成二维码', noCache: true  }
         },
-
+        {
+            path: 'right-menu',
+            component: () => import('@/views/other/right-menu.vue'),
+            name: 'qrcode',
+            meta: { title: '右键菜单', noCache: true  }
+        },
     ]
 }
 

src/utils/clipboard.ts

@@ -18,7 +18,7 @@ function clipboardError() {
 }
 
 export default function handleClipboard(text, event) {
-    const clipboard = new Clipboard(event.target, {
+    const clipboard:any = new Clipboard(event.target, {
         text: () => text
     })
     clipboard.on('success', () => {
@@ -30,4 +30,4 @@ export default function handleClipboard(text, event) {
         clipboard.destroy()
     })
     clipboard.onClick(event)
-}
+}

src/views/other/qrcode.vue

@@ -14,7 +14,7 @@
 <script lang="ts" setup>
     import {ref} from 'vue'
     import vueQr from 'vue-qr/src/packages/vue-qr.vue'
-    import three from '@/assets/3.png'
+    import three from '@/assets/logo.png'
     const src = ref(null)
     const src2 = ref()
     import clip from '@/utils/clipboard'
@@ -31,4 +31,4 @@
         }
     }
 
-</script>
+</script>

src/views/other/right-menu.vue

@@ -0,0 +1,58 @@
+<template>
+  <div style="min-height: 300px">
+    <el-button @contextmenu.prevent="rightClick">右键菜单</el-button>
+    <u-right-click-menu :left="clientX" :top="clientY" @ok="operatingRightAction" :data="data"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {ref} from 'vue'
+  import URightClickMenu from '@/components/u-rightClickMenu/index.vue'
+  const clientX = ref(0)
+  const clientY = ref(0)
+  import {useRouter} from 'vue-router'
+  const data = [
+    {
+      label:'打印',
+      value:1,
+      path:'/other/print'
+    },{
+      label:'头像裁剪',
+      value:2,
+      path:'/other/cropper'
+    },
+    {
+      label:'卡片拖拽',
+      value:3,
+      path:'/other/grid-sorter'
+    },
+    {
+      label:'分割模块',
+      value:4,
+      path:'/other/splitpane'
+    },
+    {
+      label:'生成二维码',
+      value:5,
+      path:'/other/qrcode'
+    }
+  ]
+
+  const rightClick = (event)=>{
+
+    clientX.value = event.clientX
+    clientY.value = event.clientY
+  }
+  const router = useRouter()
+
+  const operatingRightAction = ($event, val)=>{
+    console.log('获取数据',val)
+    router.push({
+      path:val.path
+    })
+  }
+</script>
+
+<style lang="scss">
+
+</style>