增加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: {
|
||||
dashboard: 'Dashboard',
|
||||
system: 'System',
|
||||
adminuser: 'Admin',
|
||||
documentation: 'Documentation',
|
||||
guide: 'Guide',
|
||||
permission: 'Permission',
|
||||
|
@ -3,6 +3,7 @@ export default {
|
||||
dashboard: '首页',
|
||||
documentation: '文档',
|
||||
system: '系统',
|
||||
adminuser: '管理员',
|
||||
guide: '引导页',
|
||||
permission: '权限测试页',
|
||||
rolePermission: '角色权限',
|
||||
|
@ -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'
|
||||
|
@ -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'),
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user