Blame view

examples/routers/menu.vue 2.9 KB
e05d7289   梁灏   update Menu
1
  <template>
fd1582c5   梁灏   support Menu & La...
2
      <div>
4bce7645   zhigang.li   make menu support...
3
          <Menu :theme="theme1" active-name="1" @on-select="handleSelect" @on-open-change="handleOpen" :open-names="openArr">
c708835c   梁灏   update Menu to su...
4
5
              <Menu-item name="1">
                  <Icon type="ios-paper"></Icon>
4bce7645   zhigang.li   make menu support...
6
                  一级1
c708835c   梁灏   update Menu to su...
7
8
9
              </Menu-item>
              <Menu-item name="2">
                  <Icon type="ios-people"></Icon>
4bce7645   zhigang.li   make menu support...
10
                  一级2
c708835c   梁灏   update Menu to su...
11
12
13
              </Menu-item>
              <Submenu name="3">
                  <template slot="title">
4bce7645   zhigang.li   make menu support...
14
15
                      <Icon type="ios-people"></Icon>
                      一级3
c708835c   梁灏   update Menu to su...
16
                  </template>
4bce7645   zhigang.li   make menu support...
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
                  <Menu-item name="3-1">二级1</Menu-item>
                  <Menu-item name="3-2">二级2</Menu-item>
                  <Submenu name="3-3">
                      <template slot="title">
                          <Icon type="stats-bars"></Icon>
                          二级3
                      </template>
                      <Menu-item name="3-3-1">三级1</Menu-item>
                      <Menu-item name="3-3-2">三级2</Menu-item>
                      <Submenu name="3-3-3">
                          <template slot="title">
                              <Icon type="stats-bars"></Icon>
                              三级3
                          </template>
                          <Menu-item name="3-3-3-1">四级1</Menu-item>
                          <Menu-item name="3-3-3-2">四级2</Menu-item>
3e3fba0e   zhigang.li   add style for men...
33
34
35
36
37
38
39
40
41
42
                          <MenuGroup title="Menu-Group">
                              <MenuItem name="3-3-3-3-1">
                                  <Icon type="document-text"></Icon>
                                  Group-item1
                              </MenuItem>
                              <MenuItem name="3-3-3-3-2">
                                  <Icon type="chatbubbles"></Icon>
                                  Group-item2
                              </MenuItem>
                          </MenuGroup>
4bce7645   zhigang.li   make menu support...
43
44
                      </Submenu>
                  </Submenu>
c708835c   梁灏   update Menu to su...
45
46
47
              </Submenu>
              <Menu-item name="4">
                  <Icon type="settings"></Icon>
4bce7645   zhigang.li   make menu support...
48
                  一级4
c708835c   梁灏   update Menu to su...
49
              </Menu-item>
a8a03995   Aresn   update #1102
50
          </Menu>
c0478e27   Aresn   update Menu style
51
52
          <br>
          <p>切换主题</p>
c708835c   梁灏   update Menu to su...
53
          <Radio-group v-model="theme1">
c0478e27   Aresn   update Menu style
54
55
              <Radio label="light"></Radio>
              <Radio label="dark"></Radio>
c708835c   梁灏   update Menu to su...
56
              <Radio label="primary"></Radio>
c0478e27   Aresn   update Menu style
57
          </Radio-group>
75873f90   梁灏   fixed #823
58
          <Input v-model="value4" icon="ios-clock-outline" placeholder="请输入..." style="width: 200px"></Input>
fd1582c5   梁灏   support Menu & La...
59
      </div>
e05d7289   梁灏   update Menu
60
61
62
  </template>
  <script>
      export default {
e05d7289   梁灏   update Menu
63
64
          data () {
              return {
4bce7645   zhigang.li   make menu support...
65
66
67
68
69
70
71
72
73
74
75
76
77
                  theme1: 'dark',
                  value4: '',
                  openArr: ['3', '3-3', '3-3-3']
              };
          },
          methods: {
              handleSelect (name) {
                  // console.log(name);
                  return name;
              },
              handleOpen (openArr) {
                  // console.log(openArr);
                  return openArr;
a8a03995   Aresn   update #1102
78
              }
e05d7289   梁灏   update Menu
79
          }
4bce7645   zhigang.li   make menu support...
80
      };
fc3ffbe0   梁灏   publish 0.9.10-rc-2
81
  </script>