Vue30实现原生高度可自定义菜单组件vue3menusWord下载.docx

Vue30实现原生高度可自定义菜单组件vue3menusWord下载.docx

《Vue30实现原生高度可自定义菜单组件vue3menusWord下载.docx》由会员分享，可在线阅读，更多相关《Vue30实现原生高度可自定义菜单组件vue3menusWord下载.docx（14页珍藏版）》请在冰豆网上搜索。

//只注册组件

app.directive（'

menus'

directive）;

//只注册指令

app.config.globalProperties.$menusEvent=menusEvent;

//只绑定方法

<

/code>

/pre>

<

pre>

codeclass="

html"

>

template>

divstyle="

height:

98vh;

width:

;

"

v-menus:

left="

menus"

divclass="

div"

指令打菜单<

/div>

@click.stop@contextmenu="

（$event）=>

$menusEvent（$event,menus）"

打菜单<

rightClick"

组件打菜单<

vue3-menusv-model:

open="

isOpen"

:

event="

eventVal"

menus="

menus.menus"

hasIcon>

template#icon="

{item:

{activeIndex}}"

{{activeIndex}}<

/template>

template#label="

{item:

{item}}"

槽：

{{item.label}}<

/vue3-menus>

script>

import{defineComponent,nextTick,ref,shallowRef}from"

vue"

import{SyncOutlined,WindowsOutlined,QrcodeOutlined}from'

@ant-design/icons-vue'

import{Printer}from'

@element-plus/icons'

exportdefaultdefineComponent（{

name:

"

App"

setup（）{

constisOpen=ref（false）;

consteventVal=ref（{}）;

functionrightClick（event）{

isOpen.value=false;

nextTick（（）=>

{

eventVal.value=event;

isOpen.value=true;

}）

event.preventDefault（）;

}

constmenus=shallowRef（{

menus:

[

label:

返回（B）"

tip:

'

Alt+向左箭头'

click:

（）=>

window.history.back（-1）;

},

击不关闭菜单"

不关闭菜单'

returnfalse;

前进（F）"

Alt+向右箭头'

disabled:

true

重新加载（R）"

Ctrl+R'

icon:

node:

SyncOutlined,

option:

spin:

location.reload（）,

divided:

另存为（A）..."

Ctrl+S'

打印（P）..."

Ctrl+P'

Printer,

color:

red'

window.print（）,

投（C）..."

到你的设备'

WindowsOutlined,

children:

iPhone'

iPad'

Windows11'

]

为此页面创建"

true,

QrcodeOutlined,

style:

aqua'

使用网页翻译（F）"

{label:

翻译成繁体中文"

XX翻译"

children:

},]

搜狗翻译"

有道翻译"

截取网页（R）"

查看网页源代码（U）"

tip:

Ctrl+U'

检查（N）"

Ctrl+Shift+I'

return{menus,isOpen,rightClick,eventVal}

}）;

.div{

display:

inline-block;

background-color:

aqua;

margin:

020px;

line-height:

200px;

paing:

height:

}

指令使用

指令打菜单

import{defineComponent,shallowRef}from"

import{directive}from'

directives:

directive

return{menus}

方法使用

打菜单

import{menusEvent}from'

}）;

menusEvent（event,menus.value）;

return{rightClick}

组件使用

组件打菜单

{{activeIndex}}

槽：

{{item.label}}

import{Vue3Menus}from'

ponents:

Vue3Menus

constmenus=shallowRef（[

]）;

Vite下使用

使用1

importVue3Menusfrom'

//也可以将1.0.3换成其他版本号

使用2

在vite配置文件vite.config中进行别名替换

exportdefault{

resolve:

alias:

//其他配置

:

也可以将1.0.3换成其他版本号

参数说明

单个菜单项参数MenusItemOptions

属性

描述

类型

否必填

默认值

label

菜单项名称

string

true

—

style

每一项菜单的自定义样式

object

false

{}

icon

string:

传入图标html代码、object:

传入组件或者{node:

组件,option:

组件配置参数}

string\

disabled

否禁用菜单项

boolean

undefined

divided

否显示分割线

tip

没项菜单后面的小提示

'

click

菜单项击，返回null或false不关闭菜单

Function（）

children

子菜单列表信息

MenusItemOptions[]

公共参数MenuOptions

menus

菜单列表信息

[]

menusStyle

菜单容器的样式

menusItemClass

菜单每一项的class名

null

event

鼠标信息（指令使用时可以不传）

Event

与position必填一项

position

手动传入菜单显示位置（指令使用时可以不传）

{x:

number,y:

number}

与event必填一项

minWidth

菜单容器最小宽度

number\

maxWidth

菜单容器最打宽度

zIndex

菜单层级

组件Vue3Menus参数

槽传入值

open

控制菜单组件显示:

v-model:

default

默认槽

Slot

-

activeIndex:

当前选中项,item:

当前菜单属性值

图标槽

菜单标题槽

suffix

菜单后缀槽

指令使用配置

参数类型

参数否必填

v-menus

绑定元素右击打菜单

MenuOptions

v-menus:

all

绑定元素左右击均可打菜单

left

绑定元素左击打

right

绑定元素右击打