修复了typescript编写组件时组件名注册错误

isJDongYa · Dec 16, 2020 · b5b2280 · b5b2280
1 parent 9d45778
commit b5b2280
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 226 deletions.
diff --git a/README.md b/README.md
@@ -105,7 +105,7 @@ follow="follow"
   <button class="btn">This is a button in default slot</button>
 </jd-moremsg>
 ```
-![example](https://raw.githubusercontent.com/isJDongYa/jd-moremsg/master/examples/assets/imgs/example.gif)
+![example](https://raw.githubusercontent.com/isJDongYa/jd-moremsg/master/examples/assets/imgs/header.jpg)
 
 
 
diff --git a/examples/main.ts b/examples/main.ts
@@ -1,10 +1,3 @@
-/*
- * @Author: isJDongYa
- * @LastEditors: isJDongYa
- * @Date: 2020-12-07 19:31:18
- * @LastEditTime: 2020-12-08 12:58:26
- * @Description: 
- */
 import Vue from 'vue'
 import App from './App.vue'
 

diff --git a/lib/MoreMsg/MoreMsg.vue b/lib/MoreMsg/MoreMsg.vue
@@ -1,10 +1,3 @@
-<!--
- * @Author: isJDongYa
- * @LastEditors: isJDongYa
- * @Date: 2020-12-07 16:32:14
- * @LastEditTime: 2020-12-08 15:59:36
- * @Description: 显示更多信息
--->
 <template>
   <div 
     class="more-msg"
@@ -33,7 +26,9 @@ import { Vue, Component, Prop } from 'vue-property-decorator'
 
 import { Setup } from '@lib/types'
 
-@Component
+@Component({
+  name: 'MoreMsg'
+})
 export default class MoreMsg extends Vue {
 
   private winWidth:number = document.body.clientWidth;

diff --git a/lib/index.ts b/lib/index.ts
@@ -1,12 +1,5 @@
-/*
- * @Author: isJDongYa
- * @LastEditors: isJDongYa
- * @Date: 2020-12-07 20:09:45
- * @LastEditTime: 2020-12-08 11:51:47
- * @Description: 
- */
-import { ComponentOptions, VueConstructor } from 'vue';
-import MoreMsg from './MoreMsg';
+import { ComponentOptions, VueConstructor } from 'vue'
+import MoreMsg from './MoreMsg'
 
 const components: {
   [index:string]: VueConstructor
@@ -19,7 +12,7 @@ const install = (Vue:VueConstructor, options?:ComponentOptions<Vue>) => {
   for (const key in components) {
     if (components.hasOwnProperty(key)) {
       const component = components[key];
-      Vue.component('jd-' + component.name.toLowerCase(), component)
+      Vue.component('jd-' + component.options.name.toLowerCase(), component)
     }
   }
 

diff --git a/lib/types/index.d.ts b/lib/types/index.d.ts
@@ -3,4 +3,15 @@ export interface Setup {
   width?:string;
   height?:string;
   background?:string;
+}
+
+import Vue from 'vue'
+
+declare module 'vue/types/vue' {
+  //  声明为 Vue 补充的东西
+  interface VueConstructor {
+    options: {
+      name: string
+    }
+  }
 }