Hello Amazing UI

效果预览

使用方式




 



















































<template>
  <div class="example-box">
    <p><strong>垂直菜单，可内嵌子菜单</strong></p>
    <am-nav :selected.sync="selected" @update:selected="clickFn" vertical style="width:200px; margin-bottom:50px">
      <am-nav-item name="music">
        <div>nav 1</div>
      </am-nav-item>
      <am-sub-nav name="book">
        <template slot="title">nav 2</template>
        <am-nav-item name="faction">小说</am-nav-item>
        <am-nav-item name="comic">动漫</am-nav-item>
        <am-sub-nav name="classis">
          <template slot="title">杂志期刊</template>
          <am-nav-item name="technology">科技</am-nav-item>
          <am-nav-item name="fashion">时尚</am-nav-item>
          <am-sub-nav name="social">
            <template slot="title">社会</template>
            <am-nav-item name="11">社会 1</am-nav-item>
            <am-nav-item name="22">社会 2</am-nav-item>
            <am-nav-item name="33">社会 3</am-nav-item>
          </am-sub-nav>
        </am-sub-nav>
      </am-sub-nav>
      <am-nav-item name="sport">
        <div>nav 3</div>
      </am-nav-item>
    </am-nav>
    <p><strong>水平的顶部导航菜单</strong></p>
    <am-nav :selected.sync="selected" style="width:260px;">
      <am-nav-item name="music">
        <div>nav 1</div>
      </am-nav-item>
      <am-sub-nav name="book">
        <template slot="title">nav 2</template>
        <am-nav-item name="faction">小说</am-nav-item>
        <am-nav-item name="comic">动漫</am-nav-item>
        <am-sub-nav name="classis">
          <template slot="title">杂志期刊</template>
          <am-nav-item name="technology">科技</am-nav-item>
          <am-nav-item name="fashion">时尚</am-nav-item>
          <am-sub-nav name="social">
            <template slot="title">社会</template>
            <am-nav-item name="11">社会 1</am-nav-item>
            <am-nav-item name="22">社会 2</am-nav-item>
            <am-nav-item name="33">社会 3</am-nav-item>
          </am-sub-nav>
        </am-sub-nav>
      </am-sub-nav>
      <am-nav-item name="sport">
        <div>nav 3</div>
      </am-nav-item>
    </am-nav>
  </div>
</template>
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



 


















export default {
  data() {
    return {
      selected: 'sport'
    }
  },
  watch: {
    selected(newValue) {
      if (newValue === 'sport') {
        alert(newValue)
      }
    }
  },
  methods: {
    clickFn(name) {
      if (name === 'music') {
        alert(name)
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

API

参数 说明 类型 默认值 可选值
selected 选中的菜单项的 name 值，必需字段 String - -
vertical 菜单类型，是否支持垂直 Boolean false true
@update:selected="clickFn" 点击菜单时的回调 Function - -
参数 说明 类型 默认值 可选值
name 嵌套子菜单名字，必需字段 String - -
参数 说明 类型 默认值 可选值
name 子菜单名字，必需字段 String - -

TIP

点击菜单时，会触发 selected 字段值的更新，可在此时做相应的逻辑处理

← Pager 分页 →