将组件改造成ts

Author: zhongjie

src/components/api-table.vue

@@ -122,24 +122,39 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue';
+import { Component, Prop } from 'vue-property-decorator';
+
 const dataApiThead = ['data属性', '说明', '类型', '固定值'];
 const attrThead = ['属性名', '说明', '类型', '默认值', '可选值', 'data属性'];
 const eventThead = ['事件名', '说明', '回调函数', '回调函数参数说明'];
 const hookThead = ['钩子名', '说明', '回调函数', '回调函数参数说明'];
 
-export default {
-  props: ['code', 'dataApiData', 'attrData', 'eventData', 'hookData'],
-  data() {
-    return {
-      dataApiThead,
-      attrThead,
-      eventThead,
-      hookThead
-    }
-  },
+@Component
+export default class extends Vue {
+  dataApiThead: any[] = dataApiThead;
+  attrThead: any[] = attrThead;
+  eventThead: any[] = eventThead;
+  hookThead: any[] = hookThead;
+
+  @Prop()
+  code: any;
+
+  @Prop()
+  dataApiData: any[];
+
+  @Prop()
+  attrData: any[];
+
+  @Prop()
+  eventData: any[];
+
+  @Prop()
+  hookData: any[];
+  
   created() {
-    cd.tooltip();
+    (<any>window).cd.tooltip();
   }
 }
 </script>

src/components/panel.vue

@@ -20,37 +20,39 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue';
+import { Component, Prop } from 'vue-property-decorator';
 import Clipboard from 'clipboard';
 
-export default {
-  props: ['code'],
-  data() {
-    return {
-      isShowCode: false
-    }
-  },
-  methods: {
-    toggleCode() {
-      this.isShowCode = !this.isShowCode;
-    },
-    copy() {
-      const clipboard = new Clipboard('.js-copy-code');
-      clipboard.on('success', function(e) {
-        cd.message({
-          type: 'success',
-          message: '复制成功'
-        });
+@Component
+export default class extends Vue {
+  isShowCode: boolean = false;
+
+  @Prop()
+  code: any[];
 
-        clipboard.destroy();
-      })
-    }
-  },
   created() {
-    cd.tooltip({
+    (<any>window).cd.tooltip({
       el: '.js-code-tooltip'
     });
   }
+
+  toggleCode() {
+    this.isShowCode = !this.isShowCode;
+  }
+
+  copy() {
+    const clipboard = new Clipboard('.js-copy-code');
+    clipboard.on('success', function(e) {
+      (<any>window).cd.message({
+        type: 'success',
+        message: '复制成功'
+      });
+
+      clipboard.destroy();
+    })
+  }
 }
 </script>
 

src/components/theme-picker.vue

@@ -11,7 +11,10 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
 import { Sketch } from 'vue-color';
 
 const defaultColor = {
@@ -24,35 +27,36 @@ const defaultColor = {
   }
 };
 
-export default {
+@Component({
   components: {
     'sketch-picker': Sketch
-  },
-  data() {
-    return {
-      color: window.color || defaultColor,
-      newColor: {},
-      isShow: false
-    }
-  },
-  methods: {
-    select() {
-      this.isShow = !this.isShow;
-    },
-    cancel() {
-      this.isShow = false;
-    },
-    ok() {
-      this.isShow = false;
+  }
+})
+export default class extends Vue {
+
+  color: any = (<any>window).color || defaultColor;
+  newColor: any = {};
+  isShow: boolean = false;
+ 
+  select() {
+    this.isShow = !this.isShow;
+  }
+
+  cancel() {
+    this.isShow = false;
+  }
+
+  ok() {
+    this.isShow = false;
+
+    this.$emit('ok', this.color, this.newColor);
+    this.color = this.newColor;
+    (<any>window).color = this.newColor;
+  }
 
-      this.$emit('ok', this.color, this.newColor);
-      this.color = this.newColor;
-      window.color = this.newColor;
-    },
-    updateValue(color) {
-      this.newColor = color;
-      console.log(color, 'updateValue');
-    },
+  updateValue(color) {
+    this.newColor = color;
+    console.log(color, 'updateValue');
   }
 }
 </script>