<template>
<div @click="focusTypeInput">
<draggable v-model="tempList" tag="div" :animation="200" handle=".typeList-item" class="typeList-outside" :move="onMove" @end="changeIndex">
<div
v-for="(item, typeIndex) in tempList"
:key="item"
class="typeList-item"
>
<div><span>{{ item }}</span></div>
<div style="margin-top:1px;margin-left:8px;line-height:24px;"><a v-if="showDelete(item)" title="删除" @click="deleteItem(typeIndex)"><i class="el-icon-error" style="color: #aaadb5; font-size: 15px;" /></a></div>
</div>
<input
ref="typeInput"
v-model="tempAttr"
class="typeList-input"
placeholder="请按回车键确认添加,可拖拽排序"
@keyup.enter="addAttrinTypeList"
/>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default ({
components: {
draggable
},
// eslint-disable-next-line vue/require-prop-types
props: ['list', 'defaultList', 'limitLength'],
data() {
return {
tempAttr: ''
}
},
computed: {
defaultSet() {
if (this.defaultList !== null) {
return new Set(this.defaultList)
} else {
return new Set()
}
},
tempList: {
get() {
return this.list
},
set(newValue) {
return this.list
}
}
},
mounted() {
console.log(this.list, this.defaultList)
},
methods: {
focusTypeInput() {
this.$refs.typeInput.focus()
},
addAttrinTypeList() {
if (this.tempAttr !== '') {
const temp = this.tempAttr
const index = this.list.findIndex((val, index) => {
return val === temp
})
if (index < 0) {
if (this.limitLength) {
if (this.limitLength <= this.list.length) {
// this.$message({
// message: `输入个数不能超过${this.limitLength}个`,
// type: 'warning'
// })
} else {
this.list.push(this.tempAttr)
}
} else {
this.list.push(this.tempAttr)
}
}
this.tempAttr = ''
}
},
deleteItem(index) {
this.list.splice(index, 1)
},
changeIndex(event) {
const oldIndex = event.oldIndex
const tempItem = this.list[oldIndex]
const newIndex = event.newIndex
if (tempItem) {
this.list.splice(oldIndex, 1)
this.list.splice(newIndex, 0, tempItem)
}
},
onMove(event) {
if (event.relatedContext.element && event.relatedContext.element.isFirstNode === 1) {
return false
} else {
return true
}
},
showDelete(item) {
if (this.defaultSet && !this.defaultSet.has(item)) {
return true
} else {
return false
}
}
}
})
</script>
<style scoped>
input{border:none;outline:medium;}
.typeList-outside {
display:flex;
flex-flow: row wrap;
border: 1px solid #adb0b8;
padding-bottom: 0px;
}
.typeList-item {
cursor: pointer;
margin-left: 5px;
border: 1px solid #adb0b8;
height:24px;
line-height:24px;
margin-top:3px;
padding-left: 4px;
padding-right: 4px;
border-radius: 4px;
background: #f4f4f5;
color: #909399;
font-size: 10px;
display: flex;
}
.typeList-input {
font-size: 10px;
flex-grow:2;
width: 165px;
margin-left:5px;
margin-top:5px;
line-height:25px;
height:25px;
}
</style>
JS组件 回车增加标签(可拖动排序)
最新推荐文章于 2023-10-09 12:56:38 发布