增加tag-input组件

src/components/TagInput/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="tag-input">
+    <div v-for="(tag, index) in tags" :key="tag" class="tag-input__tag">
+      <span @click="removeTag(index)">x</span>
+      {{ tag }}
+    </div>
+    <input type="text"
+           :placeholder="placeholder"
+           class="tag-input__text"
+           @keydown.enter="addTag"
+           @keydown.188="addTag"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    tagStr?: string
+  }
+}
+
+@Component({
+  name: 'TagInput',
+  props: ['initTags', 'placeholder']
+})
+
+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)
+      event.target.value = ''
+      this.$emit('tag-change', this.tags.join(','))
+    }
+  }
+
+  private removeTag(index: number) {
+    this.tags.splice(index, 1)
+    this.$emit('tag-change', this.tags.join(','))
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tag-input {
+  width: 100%;
+  border: 1px solid #eee;
+  font-size: 0.9em;
+  height: 50px;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+
+.tag-input__tag {
+  height: 30px;
+  float: left;
+  margin-right: 10px;
+  background-color: #2d75ee;
+  margin-top: 10px;
+  line-height: 30px;
+  color: #fff;
+  padding: 0 5px;
+  border-radius: 5px;
+}
+
+.tag-input__tag > span {
+  cursor: pointer;
+  opacity: 0.75;
+}
+
+.tag-input__text {
+  border: none;
+  outline: none;
+  font-size: 0.9em;
+  line-height: 50px;
+  background: none;
+}
+</style>

src/lang/en.ts

@@ -2,6 +2,7 @@ export default {
   route: {
     dashboard: 'Dashboard',
     system: 'System',
+    adminuser: 'Admin',
     documentation: 'Documentation',
     guide: 'Guide',
     permission: 'Permission',

src/lang/zh.ts

@@ -3,6 +3,7 @@ export default {
     dashboard: '首页',
     documentation: '文档',
     system: '系统',
+    adminuser: '管理员',
     guide: '引导页',
     permission: '权限测试页',
     rolePermission: '角色权限',

src/layout/index.vue

@@ -8,18 +8,18 @@
         class="drawer-bg"
         @click="handleClickOutside"
     />
-    <sidebar class="sidebar-container" />
+    <sidebar class="sidebar-container"/>
     <div
         :class="{hasTagsView: showTagsView}"
         class="main-container"
     >
       <div :class="{'fixed-header': fixedHeader}">
-        <navbar />
+        <navbar/>
-        <tags-view v-if="showTagsView" />
+        <tags-view v-if="showTagsView"/>
       </div>
-      <app-main />
+      <app-main/>
       <right-panel v-if="showSettings">
-        <settings />
+        <settings/>
       </right-panel>
     </div>
   </div>
@@ -28,7 +28,7 @@
 <script lang="ts">
 import { Component } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
-import { DeviceType, AppModule } from '@/store/modules/app'
+import { AppModule, DeviceType } from '@/store/modules/app'
 import { SettingsModule } from '@/store/modules/settings'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import RightPanel from '@/components/RightPanel/index.vue'

src/router/modules/system.ts

@@ -21,6 +21,16 @@ const systemRoutes: RouteConfig = {
         elicon: 'el-icon-arrow-right'
       }
     },
+    {
+      path: 'admin',
+      component: () => import('@/views/system/role.vue'),
+      name: 'AdminPermission',
+      meta: {
+        title: 'adminuser',
+        permissions: ['adminuser:read'],
+        elicon: 'el-icon-arrow-right'
+      }
+    },
     {
       path: 'i18n',
       component: () => import(/* webpackChunkName: "i18n-demo" */ '@/views/i18n-demo/index.vue'),

src/views/system/role.vue

@@ -89,10 +89,11 @@
             placeholder="角色名"
           />
         </el-form-item>
-        <el-form-item label="权限">
+        <el-form-item label="input">
-          <el-input
+          <tag-input
-              v-model="role.pstr"
+              placeholder="备注"
-              placeholder="权限"
+              :tag-str="role.pstr"
+              v-on:tag-change="tagChange"
           />
         </el-form-item>
         <el-form-item label="备注">
@@ -126,6 +127,8 @@
 import { cloneDeep } from 'lodash'
 import { Component, Vue } from 'vue-property-decorator'
 import { getRoles, saveRole, deleteRole } from '@/api/roles'
+import TagInput from '@/components/TagInput/index.vue'
+
 interface IRole {
   key: string
   name: string
@@ -143,7 +146,10 @@ const defaultRole: IRole = {
 }
 
 @Component({
-  name: 'RoleSystem'
+  name: 'RoleSystem',
+  components: {
+    TagInput
+  }
 })
 export default class extends Vue {
   private role = Object.assign({}, defaultRole)
@@ -160,6 +166,11 @@ export default class extends Vue {
     this.getRoles()
   }
 
+  private tagChange(val: string) {
+    console.log('tag change: ', val)
+    this.role.pstr = val
+  }
+
   private async getRoles() {
     const { data } = await getRoles({ /* Your params here */ })
     this.rolesList = data