Merge pull request #586 from element-plus/fix/menu-update

fix: update menu folder && docs
2026-03-13 07:51:17 +08:00 · 2020-11-12 16:56:20 +08:00
parent da81648df7 ef2aa961a7
commit 0603848b02
15 changed files with 73 additions and 135 deletions
--- a/packages/element-plus/index.ts
+++ b/packages/element-plus/index.ts
@@ -59,9 +59,6 @@ import ElPopover from '@element-plus/popover'
 import ElCascader from '@element-plus/cascader'
 import ElCascaderPanel from '@element-plus/cascader-panel'
 import ElMenu from '@element-plus/menu'
-import ElMenuItem from '@element-plus/menu-item'
-import ElMenuItemGroup from '@element-plus/menu-item-group'
-import ElSubmenu from '@element-plus/submenu'
 import ElCollapseTransition from '@element-plus/transition'
 import { use } from '@element-plus/locale'

@@ -123,9 +120,6 @@ export {
  ElCascader,
  ElCascaderPanel,
  ElMenu,
-  ElSubmenu,
-  ElMenuItem,
-  ElMenuItemGroup,
  ElCollapseTransition,
 }

@@ -198,9 +192,6 @@ const install = (app: App, opt: InstallOptions = defaultInstallOpt): void => {
  ElCascader(app)
  ElCascaderPanel(app)
  ElMenu(app)
-  ElSubmenu(app)
-  ElMenuItem(app)
-  ElMenuItemGroup(app)
  ElCollapseTransition(app)

  app.config.globalProperties.$ELEMENT = opt
--- a/packages/element-plus/package.json
+++ b/packages/element-plus/package.json
@@ -46,9 +46,6 @@
    "@element-plus/form": "^0.0.0",
    "@element-plus/tree": "^0.0.0",
    "@element-plus/select": "^0.0.0",
-    "@element-plus/menu": "^0.0.0",
-    "@element-plus/submenu": "^0.0.0",
-    "@element-plus/menu-item": "^0.0.0",
-    "@element-plus/menu-item-group": "^0.0.0"
+    "@element-plus/menu": "^0.0.0"
  }
 }
--- a/packages/menu-item-group/doc/index.stories.ts
+++ b/packages/menu-item-group/doc/index.stories.ts
@@ -1,5 +0,0 @@
-import ElMenuItemGroup from '../index'
-
-export default {
-  title: 'MenuItem-group',
-}
--- a/packages/menu-item-group/index.ts
+++ b/packages/menu-item-group/index.ts
@@ -1,5 +0,0 @@
-import { App } from 'vue'
-import MenuItemGroup from '../menu/src/menuGroup.vue'
-export default (app: App): void => {
-  app.component(MenuItemGroup.name, MenuItemGroup)
-}
--- a/packages/menu-item-group/package.json
+++ b/packages/menu-item-group/package.json
@@ -1,12 +0,0 @@
-{
-  "name": "@element-plus/menu-item-group",
-  "version": "0.0.0",
-  "main": "dist/index.js",
-  "license": "MIT",
-  "peerDependencies": {
-    "vue": "^3.0.0-rc.9"
-  },
-  "devDependencies": {
-    "@vue/test-utils": "^2.0.0-beta.3"
-  }
-}
--- a/packages/menu-item/index.ts
+++ b/packages/menu-item/index.ts
@@ -1,5 +0,0 @@
-import { App } from 'vue'
-import MenuItem from '../menu/src/menuItem.vue'
-export default (app: App): void => {
-  app.component(MenuItem.name, MenuItem)
-}
--- a/packages/menu-item/package.json
+++ b/packages/menu-item/package.json
@@ -1,12 +0,0 @@
-{
-  "name": "@element-plus/menu-item",
-  "version": "0.0.0",
-  "main": "dist/index.js",
-  "license": "MIT",
-  "peerDependencies": {
-    "vue": "^3.0.0-rc.9"
-  },
-  "devDependencies": {
-    "@vue/test-utils": "^2.0.0-beta.3"
-  }
-}
--- a/packages/menu/index.ts
+++ b/packages/menu/index.ts
@@ -1,5 +1,11 @@
 import { App } from 'vue'
 import Menu from './src/menu.vue'
+import Submenu from './src/submenu.vue'
+import MenuItem from './src/menuItem.vue'
+import MenuItemGroup from './src/menuItemGroup.vue'
 export default (app: App): void => {
  app.component(Menu.name, Menu)
+  app.component(Submenu.name, Submenu)
+  app.component(MenuItem.name, MenuItem)
+  app.component(MenuItemGroup.name, MenuItemGroup)
 }
--- a/packages/menu-item-group/src/index.vue
+++ b/packages/menu-item-group/src/index.vue
--- a/packages/submenu/index.ts
+++ b/packages/submenu/index.ts
@@ -1,5 +0,0 @@
-import { App } from 'vue'
-import Submenu from '../menu/src/submenu.vue'
-export default (app: App): void => {
-  app.component(Submenu.name, Submenu)
-}
--- a/packages/submenu/package.json
+++ b/packages/submenu/package.json
@@ -1,12 +0,0 @@
-{
-  "name": "@element-plus/submenu",
-  "version": "0.0.0",
-  "main": "dist/index.js",
-  "license": "MIT",
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  },
-  "devDependencies": {
-    "@vue/test-utils": "^2.0.0-beta.3"
-  }
-}
--- a/website/docs/en-US/menu.md
+++ b/website/docs/en-US/menu.md
@@ -11,12 +11,12 @@ Top bar NavMenu can be used in a variety of scenarios.
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">Processing Center</el-menu-item>
  <el-submenu index="2">
-    <template slot="title">Workspace</template>
+    <template #title>Workspace</template>
    <el-menu-item index="2-1">item one</el-menu-item>
    <el-menu-item index="2-2">item two</el-menu-item>
    <el-menu-item index="2-3">item three</el-menu-item>
    <el-submenu index="2-4">
-      <template slot="title">item four</template>
+      <template #title>item four</template>
      <el-menu-item index="2-4-1">item one</el-menu-item>
      <el-menu-item index="2-4-2">item two</el-menu-item>
      <el-menu-item index="2-4-3">item three</el-menu-item>
@@ -36,12 +36,12 @@ Top bar NavMenu can be used in a variety of scenarios.
  active-text-color="#ffd04b">
  <el-menu-item index="1">Processing Center</el-menu-item>
  <el-submenu index="2">
-    <template slot="title">Workspace</template>
+    <template #title>Workspace</template>
    <el-menu-item index="2-1">item one</el-menu-item>
    <el-menu-item index="2-2">item two</el-menu-item>
    <el-menu-item index="2-3">item three</el-menu-item>
    <el-submenu index="2-4">
-      <template slot="title">item four</template>
+      <template #title>item four</template>
      <el-menu-item index="2-4-1">item one</el-menu-item>
      <el-menu-item index="2-4-2">item two</el-menu-item>
      <el-menu-item index="2-4-3">item three</el-menu-item>
@@ -84,7 +84,7 @@ Vertical NavMenu with sub-menus.
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
-        <template slot="title">
+        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigator One</span>
        </template>
@@ -96,7 +96,7 @@ Vertical NavMenu with sub-menus.
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
-          <template slot="title">item four</template>
+          <template #title>item four</template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-submenu>
      </el-submenu>
@@ -125,7 +125,7 @@ Vertical NavMenu with sub-menus.
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
-        <template slot="title">
+        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigator One</span>
        </template>
@@ -137,7 +137,7 @@ Vertical NavMenu with sub-menus.
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
-          <template slot="title">item four</template>
+          <template #title>item four</template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-submenu>
      </el-submenu>
@@ -184,12 +184,12 @@ Vertical NavMenu could be collapsed.
 </el-radio-group>
 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
-    <template slot="title">
+    <template #title>
      <i class="el-icon-location"></i>
-      <span slot="title">Navigator One</span>
+      <span>Navigator One</span>
    </template>
    <el-menu-item-group>
-      <span slot="title">Group One</span>
+      <template #title><span>Group One</span></template>
      <el-menu-item index="1-1">item one</el-menu-item>
      <el-menu-item index="1-2">item two</el-menu-item>
    </el-menu-item-group>
@@ -197,21 +197,21 @@ Vertical NavMenu could be collapsed.
      <el-menu-item index="1-3">item three</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
-      <span slot="title">item four</span>
+      <template #title><span>item four</span></template>
      <el-menu-item index="1-4-1">item one</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
-    <span slot="title">Navigator Two</span>
+    <template #title>Navigator Two</template>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
-    <span slot="title">Navigator Three</span>
+    <template #title>Navigator Three</template>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
-    <span slot="title">Navigator Four</span>
+    <template #title>Navigator Four</template>
  </el-menu-item>
 </el-menu>

--- a/website/docs/es/menu.md
+++ b/website/docs/es/menu.md
@@ -12,12 +12,12 @@ Top bar NavMenu puede ser usado en distinto escenarios.
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">Processing Center</el-menu-item>
  <el-submenu index="2">
-    <template slot="title">Workspace</template>
+    <template #title>Workspace</template>
    <el-menu-item index="2-1">item one</el-menu-item>
    <el-menu-item index="2-2">item two</el-menu-item>
    <el-menu-item index="2-3">item three</el-menu-item>
    <el-submenu index="2-4">
-      <template slot="title">item four</template>
+      <template #title>item four</template>
      <el-menu-item index="2-4-1">item one</el-menu-item>
      <el-menu-item index="2-4-2">item two</el-menu-item>
      <el-menu-item index="2-4-3">item three</el-menu-item>
@@ -37,12 +37,12 @@ Top bar NavMenu puede ser usado en distinto escenarios.
  active-text-color="#ffd04b">
  <el-menu-item index="1">Processing Center</el-menu-item>
  <el-submenu index="2">
-    <template slot="title">Workspace</template>
+    <template #title>Workspace</template>
    <el-menu-item index="2-1">item one</el-menu-item>
    <el-menu-item index="2-2">item two</el-menu-item>
    <el-menu-item index="2-3">item three</el-menu-item>
    <el-submenu index="2-4">
-      <template slot="title">item four</template>
+      <template #title>item four</template>
      <el-menu-item index="2-4-1">item one</el-menu-item>
      <el-menu-item index="2-4-2">item two</el-menu-item>
      <el-menu-item index="2-4-3">item three</el-menu-item>
@@ -86,7 +86,7 @@ NavMenu vertical con sub-menús.
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
-        <template slot="title">
+        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigator One</span>
        </template>
@@ -98,7 +98,7 @@ NavMenu vertical con sub-menús.
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
-          <template slot="title">item four</template>
+          <template #title>item four</template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-submenu>
      </el-submenu>
@@ -127,7 +127,7 @@ NavMenu vertical con sub-menús.
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
-        <template slot="title">
+        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigator One</span>
        </template>
@@ -139,7 +139,7 @@ NavMenu vertical con sub-menús.
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
-          <template slot="title">item four</template>
+          <template #title>item four</template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-submenu>
      </el-submenu>
@@ -186,12 +186,12 @@ NavMenu vertical puede ser colapsado.
 </el-radio-group>
 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
-    <template slot="title">
+    <template #title>
      <i class="el-icon-location"></i>
-      <span slot="title">Navigator One</span>
+      <span>Navigator One</span>
    </template>
    <el-menu-item-group>
-      <span slot="title">Group One</span>
+      <template #title><span>Group One</span></template>
      <el-menu-item index="1-1">item one</el-menu-item>
      <el-menu-item index="1-2">item two</el-menu-item>
    </el-menu-item-group>
@@ -199,21 +199,21 @@ NavMenu vertical puede ser colapsado.
      <el-menu-item index="1-3">item three</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
-      <span slot="title">item four</span>
+      <template #title><span>item four</span></template>
      <el-menu-item index="1-4-1">item one</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
-    <span slot="title">Navigator Two</span>
+    <template #title>Navigator Two</template>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
-    <span slot="title">Navigator Three</span>
+    <template #title>Navigator Three</template>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
-    <span slot="title">Navigator Four</span>
+    <template #title>Navigator Four</template>
  </el-menu-item>
 </el-menu>

@@ -259,25 +259,25 @@ NavMenu vertical puede ser colapsado.
 | router            | si el modo `vue-router` está activado. Si es verdadero, el índice será usado como 'path' para activar la ruta | boolean | —                     | false       |
 | collapse-transition  | si se debe permitir collapse transition | boolean   | — | true   |

-### Métodos Menu 
+### Métodos Menu
 | Métodos de evento | Descripción                   | Parámetros                             |
 | ---------------- | ----------------------------- | -------------------------------------- |
 | open             | abre un sub-menu específico   | index: índice del sub-menu para abrir  |
 | close            | cierra un sub-menu específico | index: índice del sub-menu para cerrar |

-### Eventos Menu 
+### Eventos Menu
 | Nombre de evento | Descripción                              | Parámetros                               |
 | ---------------- | ---------------------------------------- | ---------------------------------------- |
 | select           | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado |
 | open             | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido |
 | close            | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado |

-### Eventos Menu-Item 
+### Eventos Menu-Item
 | Nombre de evento | Descripción                              | Parámetros                 |
 | ---------------- | ---------------------------------------- | -------------------------- |
 | click            | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item |

-### Atributos SubMenu 
+### Atributos SubMenu
 | Atributo     | Descripción                              | Tipo   | Valores aceptados | Por defecto |
 | ------------ | ---------------------------------------- | ------ | ----------------- | ----------- |
 | index        | identificador único                      | string/null | —            | null        |
@@ -287,14 +287,14 @@ NavMenu vertical puede ser colapsado.
 | disabled | si esta `disabled` el sub-menu | boolean | — | false |
 | popper-append-to-body | si se debe agregar el menú emergente al cuerpo. Si la posición del menú es incorrecta, puede intentar ajustar este prop | boolean | - | level one Submenu: true / other Submenus: false |

-### Atributos Menu-Item 
+### Atributos Menu-Item
 | Atributo | Descripción         | Tipo   | Valores aceptados | Por defecto |
 | -------- | ------------------- | ------ | ----------------- | ----------- |
 | index    | identificador único | string | —                 | —           |
 | route    | Objeto Vue Router   | object | —                 | —           |
 | disabled | si esta `disabled` | boolean | — | false |

-### Atributos Menu-Group 
+### Atributos Menu-Group
 | Atributo | Descripción      | Tipo   | Valores aceptados | Por defecto |
 | -------- | ---------------- | ------ | ----------------- | ----------- |
 | title    | título del grupo | string | —                 | —           |
--- a/website/docs/fr-FR/menu.md
+++ b/website/docs/fr-FR/menu.md
@@ -11,12 +11,12 @@ La barre du haut peut être utilisée pour différents scénarios.
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">Centre de traitement</el-menu-item>
  <el-submenu index="2">
-    <template slot="title">Lieu de travail</template>
+    <template #title>Lieu de travail</template>
    <el-menu-item index="2-1">item un</el-menu-item>
    <el-menu-item index="2-2">item deux</el-menu-item>
    <el-menu-item index="2-3">item trois</el-menu-item>
    <el-submenu index="2-4">
-      <template slot="title">item quatre</template>
+      <template #title>item quatre</template>
      <el-menu-item index="2-4-1">item un</el-menu-item>
      <el-menu-item index="2-4-2">item deux</el-menu-item>
      <el-menu-item index="2-4-3">item trois</el-menu-item>
@@ -36,12 +36,12 @@ La barre du haut peut être utilisée pour différents scénarios.
  active-text-color="#ffd04b">
  <el-menu-item index="1">Centre de traitement</el-menu-item>
  <el-submenu index="2">
-    <template slot="title">Lieu de travail</template>
+    <template #title>Lieu de travail</template>
    <el-menu-item index="2-1">item un</el-menu-item>
    <el-menu-item index="2-2">item deux</el-menu-item>
    <el-menu-item index="2-3">item trois</el-menu-item>
    <el-submenu index="2-4">
-      <template slot="title">item quatre</template>
+      <template #title>item quatre</template>
      <el-menu-item index="2-4-1">item un</el-menu-item>
      <el-menu-item index="2-4-2">item deux</el-menu-item>
      <el-menu-item index="2-4-3">item trois</el-menu-item>
@@ -84,7 +84,7 @@ Menu vertical avec sous-menus.
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
-        <template slot="title">
+        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigateur Un</span>
        </template>
@@ -96,7 +96,7 @@ Menu vertical avec sous-menus.
          <el-menu-item index="1-3">item trois</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
-          <template slot="title">item quatre</template>
+          <template #title>item quatre</template>
          <el-menu-item index="1-4-1">item un</el-menu-item>
        </el-submenu>
      </el-submenu>
@@ -125,7 +125,7 @@ Menu vertical avec sous-menus.
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
-        <template slot="title">
+        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigateur Un</span>
        </template>
@@ -137,7 +137,7 @@ Menu vertical avec sous-menus.
          <el-menu-item index="1-3">item trois</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
-          <template slot="title">item quatre</template>
+          <template #title>item quatre</template>
          <el-menu-item index="1-4-1">item un</el-menu-item>
        </el-submenu>
      </el-submenu>
@@ -184,12 +184,12 @@ Le menu vertical peut être réduit.
 </el-radio-group>
 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
-    <template slot="title">
+    <template #title>
      <i class="el-icon-location"></i>
-      <span slot="title">Navigateur Un</span>
+      <span>Navigateur Un</span>
    </template>
    <el-menu-item-group>
-      <span slot="title">Group Un</span>
+      <template #title><span>Group Un</span></template>
      <el-menu-item index="1-1">item un</el-menu-item>
      <el-menu-item index="1-2">item deux</el-menu-item>
    </el-menu-item-group>
@@ -197,21 +197,21 @@ Le menu vertical peut être réduit.
      <el-menu-item index="1-3">item trois</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
-      <span slot="title">item quatre</span>
+      <template #title><span>item quatre</span></template>
      <el-menu-item index="1-4-1">item un</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
-    <span slot="title">Navigateur Deux</span>
+    <template #title>Navigator Deux</template>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
-    <span slot="title">Navigateur Trois</span>
+    <template #title>Navigator Trois</template>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
-    <span slot="title">Navigateur Quatre</span>
+    <template #title>Navigator Quatre</template>
  </el-menu-item>
 </el-menu>

--- a/website/docs/jp/menu.md
+++ b/website/docs/jp/menu.md
@@ -11,12 +11,12 @@
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">Processing Center</el-menu-item>
  <el-submenu index="2">
-    <template slot="title">Workspace</template>
+    <template #title>Workspace</template>
    <el-menu-item index="2-1">item one</el-menu-item>
    <el-menu-item index="2-2">item two</el-menu-item>
    <el-menu-item index="2-3">item three</el-menu-item>
    <el-submenu index="2-4">
-      <template slot="title">item four</template>
+      <template #title>item four</template>
      <el-menu-item index="2-4-1">item one</el-menu-item>
      <el-menu-item index="2-4-2">item two</el-menu-item>
      <el-menu-item index="2-4-3">item three</el-menu-item>
@@ -36,12 +36,12 @@
  active-text-color="#ffd04b">
  <el-menu-item index="1">Processing Center</el-menu-item>
  <el-submenu index="2">
-    <template slot="title">Workspace</template>
+    <template #title>Workspace</template>
    <el-menu-item index="2-1">item one</el-menu-item>
    <el-menu-item index="2-2">item two</el-menu-item>
    <el-menu-item index="2-3">item three</el-menu-item>
    <el-submenu index="2-4">
-      <template slot="title">item four</template>
+      <template #title>item four</template>
      <el-menu-item index="2-4-1">item one</el-menu-item>
      <el-menu-item index="2-4-2">item two</el-menu-item>
      <el-menu-item index="2-4-3">item three</el-menu-item>
@@ -84,7 +84,7 @@ Vサブメニューのある縦型ナビメニュー。
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
-        <template slot="title">
+        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigator One</span>
        </template>
@@ -96,7 +96,7 @@ Vサブメニューのある縦型ナビメニュー。
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
-          <template slot="title">item four</template>
+          <template #title>item four</template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-submenu>
      </el-submenu>
@@ -125,7 +125,7 @@ Vサブメニューのある縦型ナビメニュー。
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
-        <template slot="title">
+        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigator One</span>
        </template>
@@ -137,7 +137,7 @@ Vサブメニューのある縦型ナビメニュー。
          <el-menu-item index="1-3">item three</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
-          <template slot="title">item four</template>
+          <template #title>item four</template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-submenu>
      </el-submenu>
@@ -184,12 +184,12 @@ Vサブメニューのある縦型ナビメニュー。
 </el-radio-group>
 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
-    <template slot="title">
+    <template #title>
      <i class="el-icon-location"></i>
-      <span slot="title">Navigator One</span>
+      <span>Navigator One</span>
    </template>
    <el-menu-item-group>
-      <span slot="title">Group One</span>
+      <template #title><span>Group One</span></template>
      <el-menu-item index="1-1">item one</el-menu-item>
      <el-menu-item index="1-2">item two</el-menu-item>
    </el-menu-item-group>
@@ -197,21 +197,21 @@ Vサブメニューのある縦型ナビメニュー。
      <el-menu-item index="1-3">item three</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
-      <span slot="title">item four</span>
+      <template #title><span>item four</span></template>
      <el-menu-item index="1-4-1">item one</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
-    <span slot="title">Navigator Two</span>
+    <template #title>Navigator Two</template>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
-    <span slot="title">Navigator Three</span>
+    <template #title>Navigator Three</template>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
-    <span slot="title">Navigator Four</span>
+    <template #title>Navigator Four</template>
  </el-menu-item>
 </el-menu>