瀏覽代碼

ts改版组件

haojianlong 4 年之前
父節點
當前提交
c5135b1872

+ 27 - 53
docs/.vuepress/components/GitCode.vue

@@ -7,63 +7,37 @@
     </details>
 </template>
 
-<script>
+<script lang="ts">
     import axios from "axios"
-    export default {
-        name: "GitCode",
-        props:{
-            project: {
-                type: String,
-                default: '/web/persagy-web'
-            },
-            raw: {
-                type: String,
-                default: '/raw/master'
-            },
-            fileUrl: {
-                type: String,
-                default: '/persagy-web-big/src/items/SIconTextItem.ts'
-            },
-            type: {
-                type: String,
-                default: 'typescript'
-            }
-        },
-        data(){
-            return{
-                baseUrl: '/git',
-                username: 'lbsl',
-                password: '20200829',
-                code:''
-            }
-        },
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    @Component
+    export default class GitCode extends Vue {
+        @Prop() private project: string = '/web/persagy-web';
+        @Prop() private raw: string = '/raw/master';
+        @Prop() private fileUrl: string = '/persagy-web-big/src/items/SIconTextItem.ts';
+        @Prop() private type: string = 'typescript';
+        baseUrl: string = '/git';
+        code: string = '';
         created() {
             this.init()
-        },
-        computed:{
-          requestUrl(){
-              return this.baseUrl + this.project + this.raw + this.fileUrl;
-          }
-        },
-        methods: {
-            init(){
-                axios({
-                    method: "get",
-                    url: this.requestUrl
-                }).then(res => {
-                    this.code = res.data;
-                    this.$nextTick(()=>{
-                        // 此处选择器 只选择当前组件的pre code,否则影响组件外 代码区域 格式
-                        document.querySelectorAll(".custom-code pre code").forEach(block => {
-                            Prism.highlightElement(block)
-                        });
+        };
+        get requestUrl(){
+            return this.baseUrl + this.project + this.raw + this.fileUrl;
+        };
+        init(){
+            axios({
+                method: "get",
+                url: this.requestUrl
+            }).then(res => {
+                this.code = res.data;
+                this.$nextTick(()=>{
+                    // 此处选择器 只选择当前组件的pre code,否则影响组件外 代码区域 格式
+                    document.querySelectorAll(".custom-code pre code").forEach(block => {
+                        // @ts-ignore
+                        Prism.highlightElement(block)
                     });
-                })
-            }
+                });
+            })
         }
     }
 </script>
-
-<style scoped>
-
-</style>

+ 106 - 112
docs/.vuepress/components/engine/composite.vue

@@ -10,33 +10,35 @@
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
             </el-select>
         </div>
-        <canvas id="sourceOver" width="740" height="400" tabindex="0"/>
+        <canvas :id="id" width="740" height="400" tabindex="0"/>
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import {SColor, SRect, SCompositeType} from "@persagy-web/draw/lib"
+    import {SColor, SRect, SCompositeType, SPainter} from "@persagy-web/draw/lib"
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
 
     class Circle extends SGraphItem{
         _composite = SCompositeType.SourceOver;
-        get composite(){
+        get composite():SCompositeType{
             return this._composite;
         }
-        set composite(v){
+        set composite(v:SCompositeType){
             this._composite = v;
             this.update();
         }
-        constructor(parent, com){
+        constructor(parent: SGraphItem | null, com:SCompositeType){
             super(parent);
             this.composite = com ? SCompositeType.SourceOver : com;
         }
 
 
-        boundingRect() {
+        boundingRect(): SRect {
             return new SRect(-500,-500,1500,1500);
         }
-        onDraw(painter) {
+        onDraw(painter: SPainter): void {
             painter.brush.color = SColor.Blue;
             painter.pen.color = SColor.Transparent;
             painter.drawRect(0,0,1000,1000);
@@ -47,113 +49,105 @@
             painter.drawCircle(0,0,500);
         }
     }
-
-    export default {
-        name: "sourceOver",
-        data(){
-            return {
-                view:'',
+    @Component
+    export default class CompositeCanvas extends Vue {
+        view: SGraphView | undefined;
+        id: string = uuid();
+        value: SCompositeType = SCompositeType.SourceOver;
+        options = [{
+                value: SCompositeType.DestinationAtop,
+                label: 'DestinationAtop'
+            },{
+                value: SCompositeType.DestinationIn,
+                label: 'DestinationIn'
+            },{
+                value: SCompositeType.DestinationOut,
+                label: 'DestinationOut'
+            },{
+                value: SCompositeType.DestinationOver,
+                label: 'DestinationOver'
+            },{
+                value: SCompositeType.SourceAtop,
+                label: 'SourceAtop'
+            },{
+                value: SCompositeType.SourceIn,
+                label: 'SourceIn'
+            },{
                 value: SCompositeType.SourceOver,
-                options: [{
-                        value: SCompositeType.DestinationAtop,
-                        label: 'DestinationAtop'
-                    },{
-                        value: SCompositeType.DestinationIn,
-                        label: 'DestinationIn'
-                    },{
-                        value: SCompositeType.DestinationOut,
-                        label: 'DestinationOut'
-                    },{
-                        value: SCompositeType.DestinationOver,
-                        label: 'DestinationOver'
-                    },{
-                        value: SCompositeType.SourceAtop,
-                        label: 'SourceAtop'
-                    },{
-                        value: SCompositeType.SourceIn,
-                        label: 'SourceIn'
-                    },{
-                        value: SCompositeType.SourceOver,
-                        label: 'SourceOver'
-                    },{
-                        value: SCompositeType.SourceOut,
-                        label: 'SourceOut'
-                    },{
-                        value: SCompositeType.Xor,
-                        label: 'Xor'
-                    },{
-                        value: SCompositeType.Lighter,
-                        label: 'Lighter'
-                    },{
-                        value: SCompositeType.Copy,
-                        label: 'Copy'
-                    },
-                ],
-                circle: null,
-                tableData: [
-                    {
-                        val: 'source-over',
-                        desc: '默认。在目标图像上显示源图像。'
-                    },{
-                        val: 'source-atop',
-                        desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
-                    },
-                    {
-                        val: 'source-in',
-                        desc: '在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。'
-                    },
-                    {
-                        val: 'source-out',
-                        desc: '在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的。'
-                    },
-                    {
-                        val: 'destination-over',
-                        desc: '在源图像上显示目标图像。'
-                    },
-                    {
-                        val: 'destination-atop',
-                        desc: '在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。'
-                    },
-                    {
-                        val: 'destination-in',
-                        desc: '在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。'
-                    },
-                    {
-                        val: 'destination-out',
-                        desc: '在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。'
-                    },
-                    {
-                        val: 'lighter',
-                        desc: '显示源图像 + 目标图像。'
-                    },
-                    {
-                        val: 'copy',
-                        desc: '显示源图像。忽略目标图像。'
-                    },
-                    {
-                        val: 'xor',
-                        desc: '使用异或操作对源图像与目标图像进行组合。'
-                    }
-                ]
+                label: 'SourceOver'
+            },{
+                value: SCompositeType.SourceOut,
+                label: 'SourceOut'
+            },{
+                value: SCompositeType.Xor,
+                label: 'Xor'
+            },{
+                value: SCompositeType.Lighter,
+                label: 'Lighter'
+            },{
+                value: SCompositeType.Copy,
+                label: 'Copy'
+            }];
+        circle: Circle | undefined;
+        tableData = [{
+                val: 'source-over',
+                desc: '默认。在目标图像上显示源图像。'
+            },{
+                val: 'source-atop',
+                desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
+            },
+            {
+                val: 'source-in',
+                desc: '在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。'
+            },
+            {
+                val: 'source-out',
+                desc: '在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的。'
+            },
+            {
+                val: 'destination-over',
+                desc: '在源图像上显示目标图像。'
+            },
+            {
+                val: 'destination-atop',
+                desc: '在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。'
+            },
+            {
+                val: 'destination-in',
+                desc: '在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。'
+            },
+            {
+                val: 'destination-out',
+                desc: '在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。'
+            },
+            {
+                val: 'lighter',
+                desc: '显示源图像 + 目标图像。'
+            },
+            {
+                val: 'copy',
+                desc: '显示源图像。忽略目标图像。'
+            },
+            {
+                val: 'xor',
+                desc: '使用异或操作对源图像与目标图像进行组合。'
             }
-        },
-        mounted() {
+        ];
+        mounted():void {
             this.init()
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('sourceOver');
-                const scene = new SGraphScene();
-                this.circle = new Circle(null, SCompositeType.SourceOut);
-                scene.addItem(this.circle);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            },
-            changeCom(val){
-                if (this.circle) {
-                    this.circle.composite = val;
-                }
+        };
+        init():void{
+            this.view = new SGraphView(this.id);
+            const scene = new SGraphScene();
+            this.circle = new Circle(null, SCompositeType.SourceOut);
+            scene.addItem(this.circle);
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
+        };
+        changeCom(val:SCompositeType):void{
+            if (this.circle) {
+                this.circle.composite = val;
             }
         }
     }

+ 23 - 26
docs/.vuepress/components/format/style.vue

@@ -8,32 +8,29 @@
     </div>
 </template>
 
-<script>
-    export default {
-        name: "styleJson",
-        data() {
-            return {
-                tableData:[
-                    {
-                        date: 'false',
-                        name: 'false',
-                        address: 'Disabled'
-                    },{
-                        date: 'false',
-                        name: 'true',
-                        address: 'Disabled'
-                    },{
-                        date: 'true',
-                        name: 'false',
-                        address: 'Default'
-                    },{
-                        date: 'true',
-                        name: 'true',
-                        address: 'Selected'
-                    },
-                ]
-            }
-        }
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    @Component
+    export default class StyleCanvas extends Vue {
+        tableData = [
+            {
+                date: 'false',
+                name: 'false',
+                address: 'Disabled'
+            },{
+                date: 'false',
+                name: 'true',
+                address: 'Disabled'
+            },{
+                date: 'true',
+                name: 'false',
+                address: 'Default'
+            },{
+                date: 'true',
+                name: 'true',
+                address: 'Selected'
+            },
+        ];
     }
 </script>
 

+ 3 - 1
docs/.vuepress/components/scene/items/ClockItem.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     import {
         SColor,
@@ -218,7 +219,8 @@
         }
     }
 
-    export default {
+    @Component
+    export default class ClockCanvas extends Vue {
         mounted(): void {
             new TestView();
         }