{"id":3369,"date":"2022-09-09T17:33:56","date_gmt":"2022-09-09T09:33:56","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3369"},"modified":"2024-05-14T17:01:15","modified_gmt":"2024-05-14T09:01:15","slug":"%e9%bc%a0%e6%a0%87%e5%8f%b3%e9%94%ae%e5%bc%b9%e5%87%ba%e8%8f%9c%e5%8d%95%e5%88%97%e8%a1%a8","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3369","title":{"rendered":"\u9f20\u6807\u53f3\u952e\u5f39\u51fa\u83dc\u5355\u5217\u8868"},"content":{"rendered":"

\u9879\u76ee\u5f00\u53d1\u4e2d\u5b9e\u73b0\u591a\u6807\u7b7e\u5bfc\u822a\u6a21\u5757, \u70b9\u51fb\u53f3\u952e\u5173\u95ed\u6240\u6709\u6807\u7b7e\u529f\u80fd\u3002\u5982\u4e0b\u56fe\u6240\u793a<\/span><\/span><\/p>\n

\"\"<\/span><\/a><\/span><\/span><\/p>\n

\u5b9e\u73b0\u601d\u8def\uff1a<\/span><\/span><\/p>\n

\u200b 1. \u5728\u591a\u6807\u7b7e\u5bfc\u822a\u533a\u57df\u70b9\u51fb\u9f20\u6807\u53f3\u952e\uff0c\u89e6\u53d1\u53f3\u952e\u4e8b\u4ef6contextmenu . <\/span><\/p>\n

\u200b 2. \u83b7\u53d6\u9f20\u6807\u53f3\u952e\u5750\u6807x,y. \u5728\u5f53\u524d\u4f4d\u7f6e\u5f39\u51fa\u81ea\u5b9a\u4e49\u5173\u95ed\u6240\u6709\u6807\u7b7e\u83dc\u5355.<\/span><\/p>\n

\u200b 3. \u70b9\u51fb\u5173\u95ed\u89e6\u53d1\u5173\u95ed\u6807\u7b7e\u4e8b\u4ef6\uff0c \u70b9\u51fb\u5176\u5b83\u533a\u57df\u5173\u95ed\u83dc\u5355\u3002<\/span><\/span><\/p>\n

\u200b 1,2\u6b65\u5b9e\u73b0\u90fd\u65e0\u5927\u95ee\u9898\uff0c\u5728\u5b9e\u73b0\u7b2c3\u6b65\u65f6\u5173\u95ed\u6807\u7b7e\u4e8b\u4ef6\u548c\u5173\u95ed\u83dc\u5355\u4e8b\u4ef6\u51fa\u73b0\u4e8b\u4ef6\u51b2\u7a81\u3002\u540e\u6765\u7528\u7b2c\u4e09\u53f3\u952e\u83dc\u5355\u5e93 vue-contextmenujs \u89e3\u51b3\u95ee\u9898.<\/span><\/span><\/p>\n

\u5177\u4f53\u4f7f\u7528\u8bb0\u5f55\u5982\u4e0b<\/span><\/p>\n

    \n
  1. \n

    \u200b \u5b89\u88c5:<\/span><\/p>\n

    npm<\/span> install<\/span> vue<\/span>-<\/span>contextmenujs<\/span>\n\u200b\nyarn<\/span> add<\/span> vue<\/span>-<\/span>contextmenujs<\/span><\/pre>\n<\/li>\n<\/ol>\n
      \n
    1. \n
      \u5728vue\u9879\u76eemain.js\u6587\u4ef6\u4e2d\u5f15\u5165\u96c6\u6210<\/span><\/p>\n
      \/\/ main.js<\/span>\nimport<\/span> Contextmenu<\/span> from<\/span> 'vue-contextmenujs'<\/span>\nVue<\/span>.use<\/span>(Contextmen<\/span>)<\/pre>\n<\/li>\n
    2. \n
      \u591a\u6807\u7b7e\u5bfc\u822a\u533a\u57df\u7ed1\u5b9a\u4e8b\u4ef6delAllTag<\/span><\/p>\n
      <<\/span>div<\/span>\n    class<\/span>=\"tag-wrap\"<\/span>\n    :class<\/span>=\"tagList.length > 0 ? 'tags-view-container' : ''\"<\/span>\n    @contextmenu.prevent.stop<\/span>=\"delAllTag($event)\"<\/span>\n  ><\/span>\n\u200b<\/pre>\n
       methods<\/span>: {\n    delAllTag<\/span>(event<\/span>) {\n        this<\/span>.$contextmenu<\/span>({\n          x<\/span>:event<\/span>.offsetX<\/span>,\n          y<\/span>:event<\/span>.offsetY<\/span>,\n            items<\/span>: [\n              {\n                label<\/span>: '\u5173\u95ed\u6240\u6709\u6807\u7b7e'<\/span>,\n                divided<\/span>: true<\/span>,\n                minWidth<\/span>: 0<\/span>,\n                onClick<\/span>: () =><\/span> {\n                  this<\/span>.$store<\/span>.dispatch<\/span>('deleteAlltag'<\/span>)\n                }\n              },\n             \n            ],\n            event<\/span>,\n            customClass<\/span>: 'mzss-cx'<\/span>, \/\/ \u81ea\u5b9a\u4e49\u83dc\u5355 class<\/span>\n            zIndex<\/span>: 3<\/span>, \/\/ \u83dc\u5355\u6837\u5f0f z-index<\/span>\n            minWidth<\/span>: 160<\/span> \/\/ \u4e3b\u83dc\u5355\u6700\u5c0f\u5bbd\u5ea6<\/span>\n          })\n          return<\/span> false<\/span>\n\u200b\n    },\n  },<\/pre>\n<\/li>\n
    3. \u53c2\u6570\u8bf4\u660e<\/span>
      \n\"1662715488234\"<\/a><\/li>\n
    4. \n
      \u5176\u5b83\u6848\u4f8b<\/span><\/span>
      \n      \"1662715543009\"<\/a><\/p>\n
        \n
      1. \n
        \u793a\u4f8b\u53c2\u8003<\/a><\/span><\/span><\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
        \u9879\u76ee\u5f00\u53d1\u4e2d\u5b9e\u73b0\u591a\u6807\u7b7e\u5bfc\u822a\u6a21\u5757, \u70b9\u51fb\u53f3\u952e\u5173\u95ed\u6240\u6709\u6807\u7b7e\u529f\u80fd\u3002\u5982\u4e0b\u56fe\u6240\u793a \u5b9e\u73b0\u601d\u8def\uff1a \u200b 1. \u5728\u591a\u6807\u7b7e\u5bfc\u822a\u533a\u57df\u70b9 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":[],"categories":[106],"tags":[],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3369"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3369"}],"version-history":[{"count":8,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3369\/revisions"}],"predecessor-version":[{"id":3518,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3369\/revisions\/3518"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}