update .
parent
38be2a9427
commit
e97bf21780
@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<div class="w-tags-input">
|
||||||
|
<el-tag
|
||||||
|
v-for="(tag, index) in model"
|
||||||
|
:key="index"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
:type="props.type"
|
||||||
|
@close="handleClose(index)"
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
<el-input
|
||||||
|
v-if="inputVisible"
|
||||||
|
ref="inputRef"
|
||||||
|
v-model="inputValue"
|
||||||
|
:style="{width:props.placeholder.length+1+'em'}"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter="handleInputConfirm"
|
||||||
|
@blur="handleInputConfirm"
|
||||||
|
/>
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showInput">
|
||||||
|
{{ props.placeholder }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { nextTick, ref } from 'vue'
|
||||||
|
const model = defineModel({
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
/**
|
||||||
|
* 输入提示
|
||||||
|
*/
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: "新增分组",
|
||||||
|
},
|
||||||
|
type:{
|
||||||
|
type:String,
|
||||||
|
default:'primary'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputValue = ref('')
|
||||||
|
const inputVisible = ref(false);
|
||||||
|
const inputRef = ref(undefined);
|
||||||
|
const handleClose = (index) => {
|
||||||
|
model.value.splice(index, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const showInput = () => {
|
||||||
|
inputVisible.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
inputRef.value?.input?.focus();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleInputConfirm = () => {
|
||||||
|
if (inputValue.value) {
|
||||||
|
model.value.push(inputValue.value)
|
||||||
|
}
|
||||||
|
inputVisible.value = false
|
||||||
|
inputValue.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.w-tags-input {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
& > * {
|
||||||
|
margin: 0 1em 1em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue