vue1分钟实现右键菜单，懒人的福音！

楂樻晥瀹炵幇闇€姹傦紝閬垮厤閲嶅閫犺疆瀛愩€備粖澶╃粰澶у鍒嗕韩鐨勬槸濡備綍鍦ㄦ渶鐭殑鏃堕棿鍐呭疄鐜板彸閿彍鍗曘€傛柟娉曚篃寰堢畝鍗曪紝涓€涓彃浠跺氨鍙互鎼炲畾锛屼笉澶氳浜嗭紝鏁堟灉鍥撅細鏁堟灉鍥惧畨瑁卬pminstallvue-contextmenujs鎴栬€厃arnaddvue-contextmenujsuseimportContextmenufrom"vue-contextmenujs"Vue.use锛堜笂涓嬫枃鑿滃崟锛?浠ｇ爜瀹炵幇浠lement-ui鍥炬爣涓轰緥锛屽疄鐜板彸閿彍鍗曪紝鍥炬爣浼氭覆鏌撲负锛屼唬鐮佸涓嬶細鑿滃崟閫夐」閮藉湪items鏁扮粍涓紝鍙互鏍规嵁闇€瑕佽嚜琛岄厤缃€傝繖鏃跺€欏彸鍑伙紝鑿滃崟寮圭獥灏辩濂囧湴鍑虹幇浜嗐€傛槸涓嶆槸寰堢畝鍗曪紒鑷畾涔夋牱寮忔墦寮€鎺у埗鍙板拰鏌ョ湅鍏冪礌鏌ョ湅鑿滃崟鐨勭被鍚嶃€傛渶澶栧眰鐨刢lass灏辨槸涓婇潰customClass灞炴€ц缃殑鍊硷紝鏍峰紡鍙互鏍规嵁闇€瑕佽皟鏁淬€?style>.custom-class.menu_item__available:hover,.custom-class.menu_item_expand{background:#ffecf2!important;color:#ff4050!important;}鎬荤粨浠ヤ笂灏辨槸鍩烘湰鐨勪娇鐢ㄦ柟娉曪紝鏄笉鏄瘮鑷繁灏佽鐪佷簡寰堝鏃堕棿銆傛敞鎰忥紝褰撶偣鍑诲乏閿垨婊氬姩婊氳疆鏃讹紝鑿滃崟浼氳嚜鍔ㄩ攢姣侊紝鍏朵粬鍦烘櫙涔熷彲浠ヨ皟鐢╰his.$contextmenu.destroy()鑷閿€姣併€備笅闈㈡槸鎻掍欢鐨勫弬鏁伴厤缃細MenuOptions鑿滃崟灞炴€у睘鎬ф弿杩扮被鍨嬪彲閫夊€奸粯璁ゅ€奸」鑿滃崟缁撴瀯淇℃伅MenuItemOptions[]鈥斺€斾簨浠堕紶鏍囦簨浠朵俊鎭簨浠垛€斺€攛鑿滃崟鏄剧ずX鍧愭爣锛屼簨浠朵负鏃犳晥鏁板瓧鈥斺€?y鑿滃崟鏄剧ずY鍧愭爣锛屽鏋滄湁浜嬩欢鍒欐棤鏁坣umber鈥?zIndex鑿滃崟鏍峰紡z-indexnumber鈥?customClass鑷畾涔夎彍鍗昪lassstring鈥攎inWidth涓昏彍鍗曟渶灏忓搴umber鈥?50MenuItemOptionsoptionattribute灞炴€escriptiontypeoptionalvalue榛樿鍊糽abelmenuitemnamestring鈥斺€斿浘鏍囪彍鍗曢」Icon锛岀敓鎴?iclass="icon">鍏冪礌string鈥斺€攄isabled鏄惁绂佺敤鑿滃崟椤筨oolean鈥斺€攆alsedivided鏄惁鏄剧ず鍒嗗壊绾縝oolean鈥斺€攆alsecustomClass鑷畾涔夊瓙鑿滃崟classstring鈥斺€斺€攎inWidth瀛愯彍鍗曟渶灏忓搴︽暟鈥?50onClick鑿滃崟椤圭偣鍑讳簨浠禙unction()鈥斺€斿瓙鑿滃崟缁撴瀯淇℃伅MenuItemOptions[]鈥斺€斿垎浜埌姝ょ粨鏉燂紝濡傛灉瀵逛綘鏈夊府鍔╋紝鍒繕浜嗙偣涓禐鍝鍚浠婂勾鐐硅禐鐨勪汉璁剧垎浜嗭紝骞寸粓濂栫炕鍊嶅暒馃ぉ