From 8d44ad5f60dc0b10de93ef47c13e4caa4e4f1f23 Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Tue, 20 Apr 2021 20:31:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96tag-input=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TagInput/index.vue | 28 +++++++++++++---------------
 src/views/system/role.vue         |  8 ++++----
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/TagInput/index.vue b/src/components/TagInput/index.vue
index d3d7ece..0060cc8 100644
--- a/src/components/TagInput/index.vue
+++ b/src/components/TagInput/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tag-input">
-    <div v-for="(tag, index) in tags" :key="tag" class="tag-input__tag">
+    <div v-for="(tag, index) in initTags" :key="tag" class="tag-input__tag">
       <span @click="removeTag(index)">x</span>
       {{ tag }}
     </div>
@@ -17,38 +17,36 @@ import { Component, Vue } from 'vue-property-decorator'
 
 declare module 'vue/types/vue' {
   interface Vue {
-    tagStr?: string
+    initTags?: string[]
   }
 }
 
 @Component({
   name: 'TagInput',
-  props: ['initTags', 'placeholder']
+  props: ['initTags', 'placeholder'],
+  model: {
+    prop: 'initTags',
+    event: 'update'
+  }
 })
 
 export default class extends Vue {
-  private tags: string[] = []
-
-  mounted() {
-    console.log(this.tagStr)
-    if (this.tagStr) {
-      this.tags = this.tagStr.split(',')
-    }
-  }
 
   private addTag(event: any) {
     event.preventDefault()
     const val: string = event.target.value.trim()
     if (val.length > 0) {
-      this.tags.push(val)
+      this.initTags.push(val)
       event.target.value = ''
-      this.$emit('tag-change', this.tags.join(','))
+      this.$emit('update', this.initTags)
+      this.$emit('tag-change', this.initTags)
     }
   }
 
   private removeTag(index: number) {
-    this.tags.splice(index, 1)
-    this.$emit('tag-change', this.tags.join(','))
+    this.initTags.splice(index, 1)
+    this.$emit('update', this.initTags)
+    this.$emit('tag-change', this.initTags)
   }
 }
 </script>
diff --git a/src/views/system/role.vue b/src/views/system/role.vue
index 88f6f10..e73d11c 100644
--- a/src/views/system/role.vue
+++ b/src/views/system/role.vue
@@ -92,7 +92,7 @@
         <el-form-item label="权限">
           <tag-input
               placeholder="输入权限"
-              :tag-str="role.pstr"
+              v-model = "role.permissions"
               v-on:tag-change="tagChange"
           />
         </el-form-item>
@@ -166,9 +166,9 @@ export default class extends Vue {
     this.getRoles()
   }
 
-  private tagChange(val: string) {
-    console.log('tag change: ', val)
-    this.role.pstr = val
+  private tagChange(vals: string[]) {
+    console.log('tag change: ', vals)
+    this.role.pstr = this.role.permissions.join(',')
   }
 
   private async getRoles() {