官方的文档显示的都是左边,提供的API也没有移动到右边的功能
在ant-design-vue的群里面问了,然后又去各种问。有人建议可以用row和col来解决,也是可以,但是为了保持格式完整性,最好是在menu中去修改,不然,按键和其他按键不一样,很麻烦。
去ant-design(ant-design-vue算是ant-design的分支)的GitHub讨论群,还有人吐槽到目前为止没有完美这个问题(https://github.com/ant-design/ant-design/issues/10749)。
然后,在stackoverflow中有人提供了一些思路,经过我修改后,可以实现。
下面是官网中的样例代码(a-layout-header),完整代码可以在官网找到,经过了修改,格式是vue
<a-layout-header>
<div class="logo" />
<a-menu
v-model:selectedKeys="selectedKeys"
theme="dark"
mode="horizontal"
:style="{ lineHeight: '64px'}"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
<a-menu-item key="12">什么时候可以放在右边?</a-menu-item>
</a-menu>
</a-layout-header>
官网样例显示,经过修改
如果是全部移到到右边,只要在a-menu标签中的:style添加一个属性,就可以
<a-layout-header>
<div class="logo" />
<a-menu
v-model:selectedKeys="selectedKeys"
theme="dark"
mode="horizontal"
:style="{ lineHeight: '64px',justifyContent:'flex-end'}"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
<a-menu-item key="12">什么时候可以放在右边?</a-menu-item>
</a-menu>
</a-layout-header>
显示效果如下
如果只放部分,那么可以这样输入代码,只需要改menu和menu-item就可以
<a-layout-header>
<div class="logo" />
<a-menu
v-model:selectedKeys="selectedKeys"
theme="dark"
mode="horizontal"
:style="{ lineHeight: '64px',display:'block'}"
>
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
<a-menu-item key="12" :style="{float:'right'}">什么时候可以放在右边?</a-menu-item>
</a-menu>
</a-layout-header>
显示效果
只在menu-item添加代码,是无法实现效果的。
至此,终于解决问题了!