fix: add watch to text property (#7)

Author: ming-tsai

README.md

@@ -58,8 +58,7 @@ export default Vue.extend({
 ### Alternatively
 ```html
 <!-- VueTypeText JavaScript -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-type-text.min.js"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/vue-type-text/dist/vue-type-text.min.js"></script>
 ```
 ## License
 Code released under [MIT](https://github.com/ming-tsai/vue-type-text/blob/master/LICENSE) license.

dev/serve.vue

@@ -6,6 +6,11 @@ export default Vue.extend({
   name: 'ServeDev',
   components: {
     VueTypeText
+  },
+  data() {
+    return {
+      bindingText: "Welcome to VueTypeText",
+    };
   }
 });
 </script>
@@ -14,7 +19,8 @@ export default Vue.extend({
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png" />
     <vue-type-text tag="h1" :text="['VueTypeText', 'vue-type-text', 'vue type text']"/>
-    <vue-type-text tag="p" text="Welcome to Your VueTypeText" />
+    <vue-type-text tag="p" :text="bindingText" />
+    <button @click="bindingText = 'Welcome to Your typed demo'">Change text</button>
   </div>
 </template>
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-type-text",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Typed components for VueJs",
   "repository": {
     "type": "git",

package.json

@@ -4,6 +4,9 @@ interface VueTypeText {
   isDone: boolean;
   arrayIndex: number;
   bindingText: string;
+  writeTimer: any;
+  eraseTimer: any;
+  arrayTimer: any;
 }
 
 export default Vue.extend({
@@ -40,7 +43,10 @@ export default Vue.extend({
     return {
       isDone: false,
       arrayIndex: 0,
-      bindingText: ''
+      bindingText: '',
+      writeTimer: null,
+      eraseTimer: null,
+      arrayTimer: null,
     };
   },
   methods: {
@@ -51,7 +57,7 @@ export default Vue.extend({
         this.isDone = true;
       } else {
         if (Array.isArray(this.text)) {
-          this.setIntervalImmediately(
+          this.arrayTimer = this.setIntervalImmediately(
             async () => await this.managerArray(),
             this.timeTakes * 1.4 * 2
           );
@@ -62,9 +68,9 @@ export default Vue.extend({
       let index = 0;
       this.bindingText = '';
       const period = this.timeTakes / text.length;
-      const timer = setInterval(() => {
+      this.writeTimer = setInterval(() => {
         if (index >= text.length - 1) {
-          clearInterval(timer);
+          clearInterval(this.writeTimer);
         }
         index = this.appendText(text[index], index);
       }, period);
@@ -78,9 +84,9 @@ export default Vue.extend({
       let index = text.length;
       this.bindingText = text;
       const period = this.timeTakes / text.length;
-      const timer = setInterval(() => {
+      this.eraseTimer = setInterval(() => {
         if (index <= 0) {
-          clearInterval(timer);
+          clearInterval(this.eraseTimer);
         }
         index = this.removeText(index);
       }, period);
@@ -113,4 +119,22 @@ export default Vue.extend({
   async mounted() {
     await this.writeInit();
   },
+  watch: {
+    text() {
+      if(this.writeTimer != null) {
+        clearInterval(this.writeTimer);
+      }
+
+      if(this.eraseTimer != null) {
+        clearInterval(this.eraseTimer);
+      }
+
+      if(this.arrayTimer != null) {
+        this.arrayIndex = 0;
+        clearInterval(this.arrayTimer);
+      }
+
+      this.writeInit();
+    }
+  },
 });