增加tag-input组件

This commit is contained in:
zhl 2021-03-12 15:59:02 +08:00
parent eed9ad54ad
commit 1a33109b9e
6 changed files with 123 additions and 11 deletions

View File

@ -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>

View File

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

View File

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

View File

@ -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 />
<tags-view v-if="showTagsView" />
<navbar/>
<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'

View File

@ -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'),

View File

@ -89,10 +89,11 @@
placeholder="角色名"
/>
</el-form-item>
<el-form-item label="权限">
<el-input
v-model="role.pstr"
placeholder="权限"
<el-form-item label="input">
<tag-input
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