Emui

# 使用

我们还可以通过emui-nav-item填充 nav

首页 企业文化 开发团队 微信 QQ 移动 联通 电信 测试
<template>
  <div id="app">
    <emui-nav
      :selected.sync="selected"
      style="margin: 20px 0 0 20px;margin-bottom:300px"
    >
      <emui-nav-item name="home">首页</emui-nav-item>
      <emui-sub-nav name="about">
        <template slot="title">关于</template>
        <emui-nav-item name="culture">企业文化</emui-nav-item>
        <emui-nav-item name="developers">开发团队</emui-nav-item>
        <emui-sub-nav name="contacts">
          <template slot="title">联系电话</template>
          <emui-nav-item name="wechat">微信</emui-nav-item>
          <emui-nav-item name="qq">QQ</emui-nav-item>
          <emui-sub-nav name="phone">
            <template slot="title">通信</template>
            <emui-nav-item name="cm">移动</emui-nav-item>
            <emui-nav-item name="cu">联通</emui-nav-item>
            <emui-nav-item name="cn">电信</emui-nav-item>
          </emui-sub-nav>
        </emui-sub-nav>
      </emui-sub-nav>
      <emui-nav-item name="hire">测试</emui-nav-item>
    </emui-nav>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      selected: ["culture"],
    };
  },
};
</script>
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
Expand Copy

我们还可以通过vertical支持竖行排列

首页 企业文化 开发团队 微信 QQ 移动 联通 电信 测试

我们还可以通过vertical支持竖行排列

<div id="app">
  <emui-nav
    :selected.sync="selected"
    vertical
    style="width: 200px; margin: 20px 0 0 20px;"
  >
    <emui-nav-item name="home">首页</emui-nav-item>
    <emui-sub-nav name="about">
      <template slot="title">关于</template>
      <emui-nav-item name="culture">企业文化</emui-nav-item>
      <emui-nav-item name="developers">开发团队</emui-nav-item>
      <emui-sub-nav name="contacts">
        <template slot="title">联系电话</template>
        <emui-nav-item name="wechat">微信</emui-nav-item>
        <emui-nav-item name="qq">QQ</emui-nav-item>
        <emui-sub-nav name="phone">
          <template slot="title">通信</template>
          <emui-nav-item name="cm">移动</emui-nav-item>
          <emui-nav-item name="cu">联通</emui-nav-item>
          <emui-nav-item name="cn">电信</emui-nav-item>
        </emui-sub-nav>
      </emui-sub-nav>
    </emui-sub-nav>
    <emui-nav-item name="hire">测试</emui-nav-item>
  </emui-nav>
</div>

<script>
  export default {
    name: "App",

    data() {
      return {
        selected: ["culture"],
      };
    },
  };
</script>
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
Expand Copy

# Attributes

# 1、nav

属性 属性值 说明
selectd Array 数组

# 2、sub-nav

属性 属性值 说明
title string 子导航的标题

# 2、nav-item

属性 属性值 说明
name string 标题的 name 以设置激活 item

← nav-item →