Browse Source

修改组件为ts

haojianlong 4 years ago
parent
commit
2c136acba8

+ 1 - 1
docs/.vuepress/components/engine/gradient/GradRect.ts

@@ -7,7 +7,7 @@ export class GradRect extends SGraphItem{
     maxY = 1000;
     maxX = 1000;
     gradient: SRadialGradient | SLinearGradient |  null = null;
-    constructor(parent: SGraphItem, grad: SRadialGradient) {
+    constructor(parent: SGraphItem | null, grad: SRadialGradient | SLinearGradient) {
         super(parent);
         this.gradient = grad;
         this.gradient.addColorStop(0, new SColor('#ff483b'));

+ 45 - 0
docs/.vuepress/components/engine/gradient/gradient.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <canvas :id="id" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script lang="ts">
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SLinearGradient, SGradient, SRadialGradient } from "@persagy-web/draw/lib";
+    import { GradRect } from "./GradRect";
+    import { v1 as uuid } from "uuid";
+    import { Component, Prop, Vue } from "vue-property-decorator";
+
+    @Component
+    export default class GradientCanvas extends Vue {
+        @Prop() private arg!: string;
+        id: string = uuid();
+        view: SGraphView | undefined;
+        mounted(): void {
+            this.init();
+        };
+        init(): void {
+            const arr = this.arg.split(',');
+            this.view = new SGraphView(this.id);
+            const scene = new SGraphScene();
+            let grad: SGradient;
+            try {
+                if (arr.length > 4) {
+                    // @ts-ignore
+                    grad = new SRadialGradient(...arr);
+                } else{
+                    // @ts-ignore
+                    grad = new SLinearGradient(...arr);
+                }
+            } catch (e) {
+                grad = new SLinearGradient(0,0,0,1000);
+            }
+            const item = new GradRect(null, grad);
+            scene.addItem(item);
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
+        }
+    }
+</script>

+ 0 - 39
docs/.vuepress/components/engine/gradient/lineGradient.vue

@@ -1,39 +0,0 @@
-<template>
-    <div>
-        <canvas id="lineGradient1" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SLinearGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "lineGradient1",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('lineGradient1');
-                const scene = new SGraphScene();
-                const grad = new SLinearGradient(0,0,0,1000);
-                const item = new GradRect(null, grad);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 39
docs/.vuepress/components/engine/gradient/lineGradient2.vue

@@ -1,39 +0,0 @@
-<template>
-    <div>
-        <canvas id="lineGradient2" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SLinearGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "lineGradient1",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('lineGradient2');
-                const scene = new SGraphScene();
-                const grad = new SLinearGradient(0,0,1000,0);
-                const item = new GradRect(null, grad);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 39
docs/.vuepress/components/engine/gradient/radialGradient.vue

@@ -1,39 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient1" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient1",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient1');
-                const scene = new SGraphScene();
-                const grad = new SRadialGradient(500,500,50,500,500,500);
-                const item = new GradRect(null, grad);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 46
docs/.vuepress/components/engine/gradient/radialGradient2.vue

@@ -1,46 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient2" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient1",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient2');
-                const scene = new SGraphScene();
-                const grad = new SRadialGradient(
-                    250,
-                    250,
-                    50, //圆1半径
-                    500,
-                    500,
-                    500 //圆2半径
-                );
-                const item = new GradRect(null, grad);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 59
docs/.vuepress/components/engine/gradient/radialGradient3.vue

@@ -1,59 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient3" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import {SColor, SRadialGradient, SRect} from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient3",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient3');
-                const scene = new SGraphScene();
-                // 渐变1
-                const grad1 = new SRadialGradient(
-                    100,
-                    100,
-                    50, //圆1半径
-                    800,
-                    800,
-                    500 //圆2半径
-                );
-                // 渐变2
-                const grad2 = new SRadialGradient(
-                    200,
-                    200,
-                    300, //圆1半径
-                    800,
-                    800,
-                    50 //圆2半径
-                );
-                const item = new GradRect(null, grad1);
-                scene.addItem(item);
-                const item2 = new GradRect(null,grad2);
-                item2.moveTo(1300,0);
-                scene.addItem(item2);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 47
docs/.vuepress/components/engine/gradient/radialGradient4.vue

@@ -1,47 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient4" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient4",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient4');
-                const scene = new SGraphScene();
-                // 渐变1
-                const grad1 = new SRadialGradient(
-                    200,
-                    200,
-                    200, //圆1半径
-                    800,
-                    800,
-                    200 //圆2半径
-                );
-                const item = new GradRect(null, grad1);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 46
docs/.vuepress/components/engine/gradient/radialGradient5.vue

@@ -1,46 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient5" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-    export default {
-        name: "radialGradient5",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient5');
-                const scene = new SGraphScene();
-                // 渐变1
-                const grad1 = new SRadialGradient(
-                    400,
-                    400,
-                    200, //圆1半径
-                    600,
-                    600,
-                    200 //圆2半径
-                );
-                const item = new GradRect(null, grad1);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 73
docs/.vuepress/components/engine/gradient/radialGradient6.vue

@@ -1,73 +0,0 @@
-<!--
-  - **********************************************************************************************************************
-  -
-  -          !!
-  -        .F88X
-  -        X8888Y
-  -      .}888888N;
-  -        i888888N;        .:!              .I$WI:
-  -          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
-  -          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
-  -            +888888N;  .8888888Y                                  "&&8Y.}8,
-  -            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
-  -              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
-  -              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
-  -            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
-  -            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
-  -          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
-  -        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
-  -      .:R888888I
-  -      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
-  -        ~8888'
-  -        .!88~                                                                     All rights reserved.
-  -
-  - **********************************************************************************************************************
-  -->
-
-<template>
-    <div>
-        <canvas id="radialGradient6" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient6",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient6');
-                const scene = new SGraphScene();
-                // 渐变1
-                const grad1 = new SRadialGradient(
-                    500,
-                    500,
-                    200, //圆1半径
-                    500,
-                    500,
-                    200 //圆2半径
-                );
-                const item = new GradRect(null, grad1);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 3 - 2
docs/.vuepress/components/engine/shape/Circle1.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import {SCanvasView, SColor, SPainter, SRect, SLineCapStyle} from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -60,8 +61,8 @@
         }
     }
 
-    export default {
-        name: "Circle1",
+    @Component
+    export default class Circle1 extends Vue {
         mounted(): void {
             new TestView();
         }

+ 5 - 2
docs/.vuepress/components/engine/shape/DrawLine1.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -53,8 +54,10 @@
         }
     }
 
-    export default {
-        mounted() {
+
+    @Component
+    export default class DrawLine1 extends Vue {
+        mounted(): void {
             new TestView();
         }
     }

+ 4 - 2
docs/.vuepress/components/engine/shape/DrawLine2.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -40,8 +41,9 @@
         }
     }
 
-    export default {
-        mounted() {
+    @Component
+    export default class DrawLine2 extends Vue {
+        mounted(): void {
             new TestView();
         }
     }

+ 5 - 3
docs/.vuepress/components/engine/shape/DrawPolyline1.vue

@@ -4,9 +4,10 @@
 
 <script lang="ts">
     import {SCanvasView, SColor, SPainter, SPoint} from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
-        arr:SPoint[]=[new SPoint(10,10),new SPoint(10,40),new SPoint(30,30)]
+        arr:SPoint[]=[new SPoint(10,10),new SPoint(10,40),new SPoint(30,30)];
         constructor() {
             super("drawPolyline1")
         }
@@ -16,8 +17,9 @@
         }
     }
 
-    export default {
-        mounted() {
+    @Component
+    export default class DrawPolyline1 extends Vue {
+        mounted(): void {
             new TestView();
         }
     }

+ 4 - 2
docs/.vuepress/components/engine/shape/DrawRect1.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -45,8 +46,9 @@
         }
     }
 
-    export default {
-        mounted() {
+    @Component
+    export default class DrawRect1 extends Vue {
+        mounted(): void {
             new TestView();
         }
     }

+ 6 - 11
docs/.vuepress/components/engine/shape/path.vue

@@ -2,8 +2,9 @@
     <canvas id="pathCanvas" width="740" height="250" />
 </template>
 
-<script>
+<script lang="ts">
     import {SCanvasView, SPath} from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView222 extends SCanvasView {
         constructor() {
@@ -16,19 +17,13 @@
         }
 
         onDraw(painter) {
-            console.log(this.path)
             painter.drawPath(this.path)
         }
     }
-    export default {
-        name: 'pathCanvas',
-        data(){
-            return{
-                view: ''
-            }
-        },
-        mounted() {
-            new TestView222()
+    @Component
+    export default class PathCanvas extends Vue {
+        mounted(): void {
+            new TestView222();
         }
     }
 </script>

+ 42 - 47
docs/.vuepress/components/engine/style/shadow.vue

@@ -4,16 +4,22 @@
         x轴偏移量 : <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number> &nbsp;
         y轴偏移量 : <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number> &nbsp;
         阴影颜色 : <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
-        <canvas id="shadow" width="740" height="400" tabindex="0"></canvas>
+        <canvas :id="id" width="740" height="400" tabindex="0"></canvas>
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import {SGraphView} from "@persagy-web/graph/lib";
+    import { v1 as uuid } from "uuid";
 
-    class shadowView extends SCanvasView {
-
-        constructor(id) {
+    class shadowView extends SGraphView {
+        shadowBlur:number;
+        shadowColor:SColor;
+        shadowOffsetX:number;
+        shadowOffsetY:number;
+        constructor(id: string) {
             super(id);
             this.shadowBlur = 10;
             this.shadowColor = new SColor('#00000060');
@@ -21,7 +27,7 @@
             this.shadowOffsetY = 10;
         }
 
-        onDraw(canvas) {
+        onDraw(canvas:SPainter) {
             canvas.clearRect(0,0,740,400);
 
             canvas.pen.lineWidth = 1;
@@ -35,48 +41,37 @@
             canvas.drawRect(270,100,100,100);
         }
     }
-    export default {
-        name: "shadow",
-        data(){
-            return {
-                view: null,
-                blurl: 10,
-                X:10,
-                Y:10,
-                color:"#CCCCCC"
-            }
-        },
+
+    @Component
+    export default class ShadowCanvas extends Vue {
+        id: string = uuid();
+        view: shadowView | undefined;
+        blurl: number = 10;
+        X: number = 10;
+        Y: number = 10;
+        color: string = "#cccccc";
         mounted() {
-            this.view = new shadowView('shadow');
-        },
-        methods:{
-            // 修改扩散距离
-            changeblur(v) {
-                this.view.shadowBlur = v;
-                this.view.update()
-            },
-            // x轴偏移量
-            changeX(v){
-                this.view.shadowOffsetX = v;
-                this.view.update()
-            },
-            // y轴偏移量
-            changeY(v){
-                this.view.shadowOffsetY = v;
-                this.view.update()
-            },
-            // 修改颜色
-            changeColor(v){
-                this.view.shadowColor = new SColor(v);
-                this.view.update()
-            }
+            this.view = new shadowView(this.id);
+        }
+        // 修改扩散距离
+        changeblur(v:number):void {
+            this.view!!.shadowBlur = v;
+            this.view!!.update()
+        };
+        // x轴偏移量
+        changeX(v:number){
+            this.view!!.shadowOffsetX = v;
+            this.view!!.update()
+        };
+        // y轴偏移量
+        changeY(v:number){
+            this.view!!.shadowOffsetY = v;
+            this.view!!.update()
+        };
+        // 修改颜色
+        changeColor(v:string){
+            this.view!!.shadowColor = new SColor(v);
+            this.view!!.update()
         }
     }
 </script>
-
-<style scoped>
-    canvas{
-        border: 1px solid #eeeeee;
-        outline: none;
-    }
-</style>

+ 1 - 1
docs/.vuepress/components/format/style.vue

@@ -10,7 +10,7 @@
 
 <script>
     export default {
-        name: "style",
+        name: "styleJson",
         data() {
             return {
                 tableData:[

+ 1 - 1
docs/.vuepress/components/scene/items/rect.vue

@@ -3,7 +3,6 @@
         <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="id" width="740" height="400" />
-        <div v-if="item.render" v-html="item.render(row[item.prop])"></div>
     </div>
 </template>
 
@@ -74,6 +73,7 @@
             }
         };
         private mounted (): void {
+            console.log(9999999999999)
             this.init();
         }
         init(): void {

+ 28 - 42
docs/guides/engine/gradient.md

@@ -18,75 +18,61 @@
 
 ## 线性渐变
 
-定义从上到下的渐变,作为矩形的填充样式:
+定义从上到下的渐变,作为矩形的填充样式: ``` arg="0,0,0,1000" ```
 
-<engine-gradient-lineGradient /> 
+<engine-gradient-gradient arg="0,0,0,1000" />
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/lineGradient.vue
-:::
-
-定义从左到右的渐变,作为矩形的填充样式:
+定义从左到右的渐变,作为矩形的填充样式:``` arg="0,0,1000,0" ```
 
-<engine-gradient-lineGradient2 /> 
-
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/lineGradient2.vue
-:::
+<engine-gradient-gradient arg="0,0,1000,0" />
 
 ## 放射渐变
 
 绘制一个矩形,并用放射状/圆形渐变进行填充:
 
-情况1:圆心重合,圆1半径小于圆2半径
+情况1:圆心重合,圆1半径小于圆2半径 ``` arg="500,500,50,500,500,500" ```
 
-<engine-gradient-radialGradient /> 
-
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient.vue
-:::
+<engine-gradient-gradient arg="500,500,50,500,500,500" />
 
 还有其他更多情况,实现更多图案,均可以调整参数来实现,一下列举几种情况
 
-情况2:圆1在圆2内部,圆1半径小于圆2半径
+情况2:圆1在圆2内部,圆1半径小于圆2半径  ``` arg="250,250,50,500,500,500" ```
 
-<engine-gradient-radialGradient2 /> 
-
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient2.vue
-:::
+<engine-gradient-gradient arg="250,250,50,500,500,500" />
 
 情况3:圆1和圆2相离时,并且大小不相同
 
-<engine-gradient-radialGradient3 /> 
+圆1半径小于圆2半径 ``` arg="100,100,50,800,800,500" ```
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient3.vue
-:::
+<engine-gradient-gradient arg="100,100,50,800,800,500" />
 
-情况4:当圆1和圆2相离时,并且大小相同
+圆1半径大于圆2半径 ``` arg="200,200,300,800,800,50" ```
 
-<engine-gradient-radialGradient4 /> 
+<engine-gradient-gradient arg="200,200,300,800,800,50" />
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient4.vue
-:::
+情况4:当圆1和圆2相离时,并且大小相同 ``` arg="200,200,200,800,800,200" ```
 
-情况5:当圆1和圆2相交时,并且大小相同
+<engine-gradient-gradient arg="200,200,200,800,800,200" />
 
-<engine-gradient-radialGradient5 /> 
+情况5:当圆1和圆2相交时,并且大小相同 ``` arg="400,400,200,800,800,200" ```
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient5.vue
-:::
+<engine-gradient-gradient arg="400,400,200,800,800,200" />
 
+情况6:当圆1和圆2相交时,圆心相同,并且大小相同 ``` arg="500,500,200,500,500,200" ```
 
-情况6:当圆1和圆2相交时,圆心相同,并且大小相同
+<engine-gradient-gradient arg="500,500,200,500,500,200" />
 
-<engine-gradient-radialGradient6 /> 
+::: tip 以上示例均基于 GradRect.vue 组件绘制
+
+::: details 查看组件使用代码
+<<< @/docs/.vuepress/components/engine/gradient/gradient.vue
+
+组件中需传入``` arg ```, 组件中解析此参数作为传入渐变类的参数
+
+如:传入 ``` arg="0,0,0,1000" ```, 组件中解析为线性渐变, 并将 4 个参数传入 ``` SLinearGradient ```;
+
+如:传入 ``` arg="500,500,50,500,500,500" ```, 组件中解析为放射性渐变, 并将 6 个参数传入 ``` SRadialGradient ```;
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient6.vue
 :::
 
 ## 渐变属性

+ 2 - 1
package.json

@@ -37,6 +37,7 @@
     "vuepress": "^1.2.0",
     "vuepress-plugin-mathjax": "^1.2.8",
     "vuepress-plugin-typescript": "^0.2.0",
-    "vuepress-types": "^0.9.2"
+    "vuepress-types": "^0.9.2",
+    "@types/uuid": "^8.0.0"
   }
 }