Style(methods): remove vue-property-decorator methods for better support with vetur

Author: Armour

src/components/DraggableKanban/index.vue

@@ -31,7 +31,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 })
 export default class extends Vue {
   @Prop({ default: 'header' }) private headerText!: string
-  @Prop({ default: () => [] }) private list!: object[]
+  @Prop({ default: () => [] }) private list!: any[]
   @Prop({ default: () => {} }) private options!: object
 }
 </script>

src/components/DropdownMenu/index.vue

@@ -9,7 +9,7 @@
         @click.self="clickTitle"
       >{{ title }}</span>
       <div
-        v-for="(item,index) of items"
+        v-for="(item, index) of items"
         :key="index"
         class="share-dropdown-menu-item"
       >
@@ -31,7 +31,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
   name: 'DropdownMenu'
 })
 export default class extends Vue {
-  @Prop({ default: () => [] }) private items!: object[]
+  @Prop({ default: () => [] }) private items!: any[]
   @Prop({ default: 'vue' }) private title!: string
 
   private isActive = false

src/components/HeaderSearch/index.vue

@@ -24,7 +24,7 @@
         v-for="item in options"
         :key="item.path"
         :value="item"
-        :label="item.title.join(' > ')"
+        :label="item.meta.title.join(' > ')"
       />
     </el-select>
   </div>
@@ -136,15 +136,17 @@ export default class extends Vue {
         continue
       }
 
-      const data = {
+      const data: RouteConfig = {
         path: path.resolve(basePath, router.path),
-        title: [...prefixTitle]
+        meta: {
+          title: [...prefixTitle]
+        }
       }
 
       if (router.meta && router.meta.title) {
         // generate internationalized title
         const i18ntitle = i18n.t(`route.${router.meta.title}`).toString()
-        data.title = [...data.title, i18ntitle]
+        data.meta.title = [...data.meta.title, i18ntitle]
         if (router.redirect !== 'noRedirect') {
           // only push the routes with title
           // special case: need to exclude parent router without redirect
@@ -154,7 +156,7 @@ export default class extends Vue {
 
       // recursive child routes
       if (router.children) {
-        const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+        const tempRoutes = this.generateRoutes(router.children, data.path, data.meta.title)
         if (tempRoutes.length >= 1) {
           res = [...res, ...tempRoutes]
         }

src/components/PanThumb/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :style="{zIndex: zIndex,height: height,width: width}"
+    :style="{zIndex: zIndex, height: height, width: width}"
     class="pan-item"
   >
     <div class="pan-info">

src/layout/components/Sidebar/SidebarItem.vue

@@ -38,15 +38,17 @@
           slot="title"
         >{{ $t('route.' + item.meta.title) }}</span>
       </template>
-      <sidebar-item
-        v-for="child in item.children"
-        :key="child.path"
-        :item="child"
-        :is-collapse="isCollapse"
-        :is-first-level="false"
-        :base-path="resolvePath(child.path)"
-        class="nest-menu"
-      />
+      <template v-if="item.children">
+        <sidebar-item
+          v-for="child in item.children"
+          :key="child.path"
+          :item="child"
+          :is-collapse="isCollapse"
+          :is-first-level="false"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu"
+        />
+      </template>
     </el-submenu>
   </div>
 </template>

src/layout/components/Sidebar/SidebarItemLink.vue

@@ -20,12 +20,11 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { isExternal } from '@/utils/validate'
 
 @Component({
-  name: 'SidebarItemLink',
-  methods: {
-    isExternal
-  }
+  name: 'SidebarItemLink'
 })
 export default class extends Vue {
   @Prop({ required: true }) private to!: string
+
+  private isExternal = isExternal
 }
 </script>

src/layout/components/TagsView/index.vue

@@ -28,7 +28,7 @@
     </scroll-pane>
     <ul
       v-show="visible"
-      :style="{left: left+'px',top: top+'px'}"
+      :style="{left: left+'px', top: top+'px'}"
       class="contextmenu"
     >
       <li @click="refreshSelectedTag(selectedTag)">

src/views/clipboard/index.vue

@@ -45,14 +45,12 @@ import { Component, Vue } from 'vue-property-decorator'
 import { handleClipboard, clipboardSuccess } from '@/utils/clipboard' // use clipboard directly
 
 @Component({
-  name: 'Clipboard',
-  methods: {
-    handleClipboard,
-    clipboardSuccess
-  }
+  name: 'Clipboard'
 })
 export default class extends Vue {
   private activeName = 'directly'
   private inputData = 'https://github.com/Armour/vue-typescript-admin-template'
+  private clipboardSuccess = clipboardSuccess
+  private handleClipboard = handleClipboard
 }
 </script>

src/views/dashboard/admin/components/BarChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="className"
-    :style="{height: height,width: width}"
+    :style="{height: height, width: width}"
   />
 </template>
 

src/views/dashboard/admin/components/LineChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="className"
-    :style="{height: height,width: width}"
+    :style="{height: height, width: width}"
   />
 </template>
 

src/views/dashboard/admin/components/PieChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="className"
-    :style="{height: height,width: width}"
+    :style="{height: height, width: width}"
   />
 </template>
 

src/views/dashboard/admin/components/RadarChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="className"
-    :style="{height: height,width: width}"
+    :style="{height: height, width: width}"
   />
 </template>
 

src/views/example/components/ArticleDetail.vue

@@ -66,7 +66,7 @@
                       placeholder="Search user"
                     >
                       <el-option
-                        v-for="(item,index) in userListOptions"
+                        v-for="(item, index) in userListOptions"
                         :key="item+index"
                         :label="item"
                         :value="item"

src/views/icons/index.vue

@@ -56,14 +56,12 @@ import elementIcons from './element-icons'
 import svgIcons from './svg-icons'
 
 @Component({
-  name: 'Icons',
-  methods: {
-    handleClipboard
-  }
+  name: 'Icons'
 })
 export default class extends Vue {
   private svgIcons = svgIcons
   private elementIcons = elementIcons
+  private handleClipboard = handleClipboard
 
   private generateElementIconCode(symbol: string) {
     return `<i class="el-icon-${symbol}" />`

src/views/pdf/download.vue

@@ -32,7 +32,7 @@ import content from './content'
   name: 'PDFDownload'
 })
 export default class extends Vue {
-  private article = {}
+  private article: { title?: string, content?: string } = {}
   private fullscreenLoading = true
 
   mounted() {

src/views/permission/directive.vue

@@ -135,13 +135,11 @@ import SwitchRoles from './components/SwitchRoles.vue'
   name: 'DirectivePermission',
   components: {
     SwitchRoles
-  },
-  methods: {
-    checkPermission
   }
 })
 export default class extends Vue {
   private key = 1 // 为了能每次切换权限的时候重新初始化指令
+  private checkPermission = checkPermission
 
   private handleRolesChange() {
     this.key++