Browse Source

组件改为ts语法组件

haojianlong 4 years ago
parent
commit
6caedd2ec8
3 changed files with 98 additions and 92 deletions
  1. 90 88
      docs/.vuepress/components/scene/items/rect.vue
  2. 2 3
      docs/.vuepress/shims-vue.d.ts
  3. 6 1
      package.json

+ 90 - 88
docs/.vuepress/components/scene/items/rect.vue

@@ -2,106 +2,108 @@
     <div style="margin-top: 10px;">
         <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
         圆角半径 : <el-input-number @change="changeY" v-model="R" size="mini" style="width: 100px"></el-input-number>
-        <canvas id="rect" width="740" height="400" />
+        <canvas :id="id" width="740" height="400" />
     </div>
 </template>
 
-<script>
+<script lang="ts">
 
     import {SGraphRectItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
-    export default {
-        name: "rect1",
-        data(){
-            return {
-                view: '',
-                item: '',
-                item2: '',
-                R: 0,
-                rectData: {
-                    X: 0,
-                    Y: 0,
-                    Width: 500,
-                    Height: 500,
-                    Radius: 0,
-                    Style: {
-                        "Default":{
-                            "Stroke": "#cccccc",
-                            "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                            "LineWidth": 2,
-                            "Effect": {}
-                        },
-                        "Selected": {
-                            "Stroke": "#66ff66",
-                            "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                            "LineWidth": 3,
-                            "Effect": {}
-                        },
-                        "Disabled": {
-                            "Stroke": "#333333",
-                            "Fill": "#afafaf",
-                            "LineWidth": 1,
-                            "Effect": {}
-                        },
-                    }
+    @Component
+    export default class HelloWorld extends Vue {
+        id: string = 'rect' + Date.now();
+        view: SGraphView | undefined;
+        item: SGraphRectItem | undefined;
+        item2: SGraphRectItem | undefined;
+        R: number = 0;
+        rectData = {
+            X: 0,
+            Y: 0,
+            Width: 500,
+            Height: 500,
+            Radius: 0,
+            Style: {
+                "Default":{
+                    "Stroke": "#cccccc",
+                    "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "LineWidth": 2,
+                    "Effect": {}
+                },
+                "Selected": {
+                    "Stroke": "#66ff66",
+                    "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "LineWidth": 3,
+                    "Effect": {}
+                },
+                "Disabled": {
+                    "Stroke": "#333333",
+                    "Fill": "#afafaf",
+                    "LineWidth": 1,
+                    "Effect": {}
+                },
+            }
+        };
+        rectData2 = {
+            X: 1000,
+            Y: 0,
+            Width: 500,
+            Height: 500,
+            Radius: 0,
+            Style: {
+                "Default":{
+                    "Stroke": "#cccccc",
+                    "Fill": "#ffccee",
+                    "LineWidth": 2,
+                    "Effect": {}
+                },
+                "Selected": {
+                    "Stroke": "#66ff66",
+                    "Fill": "#ff33ee",
+                    "LineWidth": 3,
+                    "Effect": {}
+                },
+                "Disabled": {
+                    "Stroke": "#333333",
+                    "Fill": "#afafaf",
+                    "LineWidth": 1,
+                    "Effect": {}
                 },
-                rectData2: {
-                    X: 1000,
-                    Y: 0,
-                    Width: 500,
-                    Height: 500,
-                    Radius: 0,
-                    Style: {
-                        "Default":{
-                            "Stroke": "#cccccc",
-                            "Fill": "#ffccee",
-                            "LineWidth": 2,
-                            "Effect": {}
-                        },
-                        "Selected": {
-                            "Stroke": "#66ff66",
-                            "Fill": "#ff33ee",
-                            "LineWidth": 3,
-                            "Effect": {}
-                        },
-                        "Disabled": {
-                            "Stroke": "#333333",
-                            "Fill": "#afafaf",
-                            "LineWidth": 1,
-                            "Effect": {}
-                        },
-                    }
-                }
             }
-        },
-        mounted() {
+        };
+        private mounted (): void {
+            console.log(this)
+            console.log(this.rectData)
             this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('rect');
-                const scene = new SGraphScene();
-
-                this.item = new SGraphRectItem(null, this.rectData);
-                this.item.selectable = true;
-                scene.addItem(this.item);
+        }
+        init(): void {
+            this.view = new SGraphView(this.id);
+            const scene = new SGraphScene();
+            console.log(this.rectData)
+            this.item = new SGraphRectItem(null, this.rectData);
+            this.item.selectable = true;
+            scene.addItem(this.item);
 
-                this.item2 = new SGraphRectItem(null, this.rectData2);
-                this.item2.selectable = true;
-                scene.addItem(this.item2);
+            this.item2 = new SGraphRectItem(null, this.rectData2);
+            this.item2.selectable = true;
+            scene.addItem(this.item2);
 
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            },
-            changeEnable(){
-                if (this.item) {
-                    this.item.enabled = !this.item.enabled;
-                }
-            },
-            // 修改圆角半径
-            changeY(val) {
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
+        }
+        changeEnable(): void{
+            if (this.item) {
+                this.item.enabled = !this.item.enabled;
+            }
+        }
+        // 修改圆角半径
+        changeY(val:number): void {
+            if (this.item){
                 this.item.radius = val;
+            }
+            if(this.item2) {
                 this.item2.radius = val;
             }
         }

+ 2 - 3
docs/.vuepress/shims-vue.d.ts

@@ -1,5 +1,4 @@
-// .vuepress/shims-vue.d.ts
 declare module '*.vue' {
-    import Vue from 'vue'
-    export default Vue
+    import Vue from 'vue';
+    export default Vue;
 }

+ 6 - 1
package.json

@@ -19,9 +19,14 @@
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",
-    "vue-property-decorator": "^8.4.2"
+    "vue-property-decorator": "^8.4.2",
+    "vue-class-component": "^7.0.2"
   },
   "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.9.0",
+    "@vue/cli-plugin-typescript": "^3.9.0",
+    "@vue/cli-service": "^3.9.0",
+    "vue-template-compiler": "^2.6.10",
     "@vuepress/plugin-back-to-top": "^1.2.0",
     "less": "^3.12.2",
     "less-loader": "^6.2.0",