1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| <a-menu
mode="horizontal"
triggerSubMenuAction="click"
:overflowedIndicator="hideico"
>
<a-menu-item @click="removekind()">
<img class="loginimg" v-bind:src="headimg" alt="" />
<a-menu-item>
<span>
<audio
style="height: 0px; width: 0px"
id="audio"
ref="audio"
controls
muted
:src="musicsrc"
type="audio/mpeg"
></audio>
</span>
<i
class="el-icon-caret-left"
@click="musicplay(2)"
style="color: white; margin-right: 1em"
></i>
<i
class="el-icon-headset"
@click="musicplay(0)"
style="color: white; margin-right: 1em"
></i>
<i
class="el-icon-caret-right"
@click="musicplay(1)"
style="color: white; margin-right: 1em"
></i>
<span v-text="musicname" class="musicname"></span>
</a-menu-item>
<a-menu-item>
<a-switch
checked-children="Light"
un-checked-children="Dark"
default-checked
@click="toggleDark"
/>
</a-menu-item>
<a-menu-item @click="writeblog()">
<i class="el-icon-edit-outline"></i><span> 文章发布</span>
</a-menu-item>
<a-menu-item @click="writemessage()">
<i class="el-icon-position"> </i>
<span class="csdot"> 留言板块</span>
</a-menu-item>
<a-menu-item>
<a-input-search
id="searchtxt"
clearable
placeholder="Search..."
@search="onSearch"
class="border_radius1"
/>
</a-menu-item>
</a-menu>
|
mode:为菜单的呈现方式有3个
vertical：竖直【默认】
horizontal：水平
inline：内联
theme：主题颜色(light/dark)2种，其中默认为： light
multiple：菜单是否可多选，默认为：false
selectedKeys(v-model)：当前选中菜单key集合
style：菜单的样式
defaultOpenKeys：初始展开菜单key集合
defaultSelectedKeys：初始选中菜单key集合
triggerSubMenuAction：导航栏缩放时的图标样式（默认为3个黑色的小圆点）
使用方法：
1
| :overflowedIndicator="hideico"
|
对应的hideico为一个slot样式
1
2
3
4
5
6
7
8
9
10
11
12
13
| data() {
return {
headimg: "/static/img/head1.png",
musicname: "正在播放:无",
palyflag: false,
musicindex: 0,
musicsrc: require("../assets/music/烟花再美也不及你-三暮雨.mp3"),
userinfo: { account: "", password: "" },
SelfSearch: "",
Islogin: false,
dialogFormVisible: false,
hideico:<i class='el-icon-s-fold' style='border:1px solid white;'></i>
};
|
这里用的是elementui的一个图标，如果是Ant Design Vue 的icon就是：
hideico:"<a-icon type='menu' />"