From ce4cf0d342d5050f37ed1d449d5cc4328e9b692f Mon Sep 17 00:00:00 2001
From: jiaming743 <743192023@qq.com>
Date: Wed, 6 May 2020 13:20:15 +0800
Subject: [PATCH] add reverse configuration

---
 src/components/borderBox8/src/main.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/borderBox8/src/main.vue b/src/components/borderBox8/src/main.vue
index 479278f..968ae0d 100644
--- a/src/components/borderBox8/src/main.vue
+++ b/src/components/borderBox8/src/main.vue
@@ -4,7 +4,7 @@
       <defs>
         <path
           :id="path"
-          :d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+          :d="pathD"
           fill="transparent"
         />
         <radialGradient
@@ -25,7 +25,7 @@
           <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
             <animateMotion
               :dur="`${dur}s`"
-              :path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+              :path="pathD"
               rotate="auto"
               repeatCount="indefinite"
             />
@@ -85,6 +85,10 @@ export default {
     backgroundColor: {
       type: String,
       default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -105,6 +109,13 @@ export default {
       const { width, height } = this
 
       return (width + height - 5) * 2
+    },
+    pathD () {
+      const { reverse, width, height } = this
+
+      if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
+
+      return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
     }
   },
   watch: {