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