mod vue2 to vue3

exam-vue/src/layout/components/Navbar.vue

@@ -21,9 +21,9 @@
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           {{ realName }}
-          <i class="el-icon-caret-bottom" />
+          <el-icon class="el-icon-caret-bottom"><ArrowDown /></el-icon>
         </div>
-        <el-dropdown-menu slot="dropdown">
+        <el-dropdown-menu #dropdown>
           <router-link to="/profile/index">
             <el-dropdown-item>个人资料</el-dropdown-item>
           </router-link>
@@ -38,12 +38,13 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import ErrorLog from '@/components/ErrorLog'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+import { ArrowDown } from '@element-plus/icons-vue'
+import Breadcrumb from '@/components/Breadcrumb/index.vue'
+import Hamburger from '@/components/Hamburger/index.vue'
+import ErrorLog from '@/components/ErrorLog/index.vue'
+import Screenfull from '@/components/Screenfull/index.vue'
+import SizeSelect from '@/components/SizeSelect/index.vue'
+import Search from '@/components/HeaderSearch/index.vue'
 
 export default {
   components: {
@@ -52,7 +53,8 @@ export default {
     ErrorLog,
     Screenfull,
     SizeSelect,
-    Search
+    Search,
+    ArrowDown
   },
   computed: {
     ...mapGetters([

exam-vue/src/layout/components/Settings/index.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import ThemePicker from '@/components/ThemePicker'
+import ThemePicker from '@/components/ThemePicker/index.vue'
 
 export default {
   components: { ThemePicker },

exam-vue/src/layout/components/Sidebar/Item.vue

@@ -1,7 +1,11 @@
+<template>
+  <svg-icon v-if="icon" :icon-class="icon" />
+  <span v-if="title">{{ title }}</span>
+</template>
+
 <script>
 export default {
   name: 'MenuItem',
-  functional: true,
   props: {
     icon: {
       type: String,
@@ -11,19 +15,6 @@ export default {
       type: String,
       default: ''
     }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
   }
 }
 </script>

exam-vue/src/layout/components/Sidebar/Link.vue

@@ -1,9 +1,11 @@
 
 <template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
+  <a v-if="isExternal" :href="to" target="_blank" rel="noopener">
     <slot />
-  </component>
+  </a>
+  <router-link v-else :to="to">
+    <slot />
+  </router-link>
 </template>
 
 <script>
@@ -16,20 +18,9 @@ export default {
       required: true
     }
   },
-  methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
+  computed: {
+    isExternal() {
+      return isExternal(this.to)
     }
   }
 }

exam-vue/src/layout/components/Sidebar/Logo.vue

@@ -36,7 +36,7 @@ export default {
   transition: opacity 1.5s;
 }
 
-.sidebarLogoFade-enter,
+.sidebarLogoFade-enter-from,
 .sidebarLogoFade-leave-to {
   opacity: 0;
 }

exam-vue/src/layout/components/Sidebar/SidebarItem.vue

@@ -8,8 +8,8 @@
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
-      <template slot="title">
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
+      <template #title>
         <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
       <sidebar-item
@@ -25,11 +25,11 @@
 </template>
 
 <script>
-import path from 'path'
+import { resolve } from '@/utils/path'
 import { isExternal } from '@/utils/validate'
-import Item from './Item'
-import AppLink from './Link'
-import FixiOSBug from './FixiOSBug'
+import Item from './Item.vue'
+import AppLink from './Link.vue'
+import FixiOSBug from './FixiOSBug.js'
 
 export default {
   name: 'SidebarItem',
@@ -88,7 +88,7 @@ export default {
       if (isExternal(this.basePath)) {
         return this.basePath
       }
-      return path.resolve(this.basePath, routePath)
+      return resolve(this.basePath, routePath)
     }
   }
 }

exam-vue/src/layout/components/Sidebar/index.vue

@@ -20,9 +20,9 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Logo from './Logo'
-import SidebarItem from './SidebarItem'
-import variables from '@/styles/variables.scss'
+import Logo from './Logo.vue'
+import SidebarItem from './SidebarItem.vue'
+import variables from '@/styles/variables-js.js'
 
 export default {
   components: { SidebarItem, Logo },

exam-vue/src/layout/components/TagsView/ScrollPane.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
     <slot />
   </el-scrollbar>
 </template>
@@ -73,13 +73,11 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-  ::v-deep {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 49px;
-    }
+  :deep(.el-scrollbar__bar) {
+    bottom: 0px;
+  }
+  :deep(.el-scrollbar__wrap) {
+    height: 49px;
   }
 }
 </style>

exam-vue/src/layout/components/TagsView/index.vue

@@ -1,20 +1,19 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper">
-      <router-link
+      <span
         v-for="tag in visitedViews"
         ref="tag"
         :key="tag.path"
         :class="isActive(tag)?'active':''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
         class="tags-view-item"
-        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
+        @click="navigateTo(tag)"
+        @click.middle="!isAffix(tag)?closeSelectedTag(tag):''"
+        @contextmenu.prevent="openMenu(tag,$event)"
       >
         {{ tag.title }}
         <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-      </router-link>
+      </span>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
@@ -26,8 +25,8 @@
 </template>
 
 <script>
-import ScrollPane from './ScrollPane'
-import path from 'path'
+import ScrollPane from './ScrollPane.vue'
+import { resolve } from '@/utils/path'
 
 export default {
   components: { ScrollPane },
@@ -76,7 +75,7 @@ export default {
       let tags = []
       routes.forEach(route => {
         if (route.meta && route.meta.affix) {
-          const tagPath = path.resolve(basePath, route.path)
+          const tagPath = resolve(basePath, route.path)
           tags.push({
             fullPath: tagPath,
             path: tagPath,
@@ -110,20 +109,19 @@ export default {
       return false
     },
     moveToCurrentTag() {
-      const tags = this.$refs.tag
       this.$nextTick(() => {
-        for (const tag of tags) {
-          if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
-            // when query is different then update
-            if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
-            }
-            break
-          }
+        const tags = this.$refs.tag
+        if (!tags) return
+        // In Vue 3, $refs with v-for gives DOM elements in same order
+        const index = this.visitedViews.findIndex(v => v.path === this.$route.path)
+        if (index >= 0 && tags[index]) {
+          this.$refs.scrollPane.moveToTarget(tags[index])
         }
       })
     },
+    navigateTo(tag) {
+      this.$router.push({ path: tag.path, query: tag.query })
+    },
     refreshSelectedTag(view) {
       this.$store.dispatch('tagsView/delCachedView', view).then(() => {
         const { fullPath } = view

exam-vue/src/layout/components/index.js

@@ -1,5 +1,5 @@
-export { default as AppMain } from './AppMain'
-export { default as Navbar } from './Navbar'
-export { default as Settings } from './Settings'
+export { default as AppMain } from './AppMain.vue'
+export { default as Navbar } from './Navbar.vue'
+export { default as Settings } from './Settings/index.vue'
 export { default as Sidebar } from './Sidebar/index.vue'
 export { default as TagsView } from './TagsView/index.vue'

exam-vue/src/layout/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
+import RightPanel from '@/components/RightPanel/index.vue'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
@@ -58,8 +58,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/variables.scss";
+  @import "@/styles/mixin.scss";
+  @import "@/styles/variables.scss";
 
   .app-wrapper {
     @include clearfix;

exam-vue/src/layout/mixin/ResizeHandler.js

@@ -14,7 +14,7 @@ export default {
   beforeMount() {
     window.addEventListener('resize', this.$_resizeHandler)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.$_resizeHandler)
   },
   mounted() {