增加tag-input组件
This commit is contained in:
parent
eed9ad54ad
commit
1a33109b9e
89
src/components/TagInput/index.vue
Normal file
89
src/components/TagInput/index.vue
Normal 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>
|
@ -2,6 +2,7 @@ export default {
|
|||||||
route: {
|
route: {
|
||||||
dashboard: 'Dashboard',
|
dashboard: 'Dashboard',
|
||||||
system: 'System',
|
system: 'System',
|
||||||
|
adminuser: 'Admin',
|
||||||
documentation: 'Documentation',
|
documentation: 'Documentation',
|
||||||
guide: 'Guide',
|
guide: 'Guide',
|
||||||
permission: 'Permission',
|
permission: 'Permission',
|
||||||
|
@ -3,6 +3,7 @@ export default {
|
|||||||
dashboard: '首页',
|
dashboard: '首页',
|
||||||
documentation: '文档',
|
documentation: '文档',
|
||||||
system: '系统',
|
system: '系统',
|
||||||
|
adminuser: '管理员',
|
||||||
guide: '引导页',
|
guide: '引导页',
|
||||||
permission: '权限测试页',
|
permission: '权限测试页',
|
||||||
rolePermission: '角色权限',
|
rolePermission: '角色权限',
|
||||||
|
@ -8,18 +8,18 @@
|
|||||||
class="drawer-bg"
|
class="drawer-bg"
|
||||||
@click="handleClickOutside"
|
@click="handleClickOutside"
|
||||||
/>
|
/>
|
||||||
<sidebar class="sidebar-container" />
|
<sidebar class="sidebar-container"/>
|
||||||
<div
|
<div
|
||||||
:class="{hasTagsView: showTagsView}"
|
:class="{hasTagsView: showTagsView}"
|
||||||
class="main-container"
|
class="main-container"
|
||||||
>
|
>
|
||||||
<div :class="{'fixed-header': fixedHeader}">
|
<div :class="{'fixed-header': fixedHeader}">
|
||||||
<navbar />
|
<navbar/>
|
||||||
<tags-view v-if="showTagsView" />
|
<tags-view v-if="showTagsView"/>
|
||||||
</div>
|
</div>
|
||||||
<app-main />
|
<app-main/>
|
||||||
<right-panel v-if="showSettings">
|
<right-panel v-if="showSettings">
|
||||||
<settings />
|
<settings/>
|
||||||
</right-panel>
|
</right-panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -28,7 +28,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component } from 'vue-property-decorator'
|
import { Component } from 'vue-property-decorator'
|
||||||
import { mixins } from 'vue-class-component'
|
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 { SettingsModule } from '@/store/modules/settings'
|
||||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||||
import RightPanel from '@/components/RightPanel/index.vue'
|
import RightPanel from '@/components/RightPanel/index.vue'
|
||||||
|
@ -21,6 +21,16 @@ const systemRoutes: RouteConfig = {
|
|||||||
elicon: 'el-icon-arrow-right'
|
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',
|
path: 'i18n',
|
||||||
component: () => import(/* webpackChunkName: "i18n-demo" */ '@/views/i18n-demo/index.vue'),
|
component: () => import(/* webpackChunkName: "i18n-demo" */ '@/views/i18n-demo/index.vue'),
|
||||||
|
@ -89,10 +89,11 @@
|
|||||||
placeholder="角色名"
|
placeholder="角色名"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</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>
|
||||||
<el-form-item label="备注">
|
<el-form-item label="备注">
|
||||||
@ -126,6 +127,8 @@
|
|||||||
import { cloneDeep } from 'lodash'
|
import { cloneDeep } from 'lodash'
|
||||||
import { Component, Vue } from 'vue-property-decorator'
|
import { Component, Vue } from 'vue-property-decorator'
|
||||||
import { getRoles, saveRole, deleteRole } from '@/api/roles'
|
import { getRoles, saveRole, deleteRole } from '@/api/roles'
|
||||||
|
import TagInput from '@/components/TagInput/index.vue'
|
||||||
|
|
||||||
interface IRole {
|
interface IRole {
|
||||||
key: string
|
key: string
|
||||||
name: string
|
name: string
|
||||||
@ -143,7 +146,10 @@ const defaultRole: IRole = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
name: 'RoleSystem'
|
name: 'RoleSystem',
|
||||||
|
components: {
|
||||||
|
TagInput
|
||||||
|
}
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private role = Object.assign({}, defaultRole)
|
private role = Object.assign({}, defaultRole)
|
||||||
@ -160,6 +166,11 @@ export default class extends Vue {
|
|||||||
this.getRoles()
|
this.getRoles()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private tagChange(val: string) {
|
||||||
|
console.log('tag change: ', val)
|
||||||
|
this.role.pstr = val
|
||||||
|
}
|
||||||
|
|
||||||
private async getRoles() {
|
private async getRoles() {
|
||||||
const { data } = await getRoles({ /* Your params here */ })
|
const { data } = await getRoles({ /* Your params here */ })
|
||||||
this.rolesList = data
|
this.rolesList = data
|
||||||
|
Loading…
x
Reference in New Issue
Block a user