You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<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)">
|
|
{{ index }} : {{ tag }}
|
|
</el-tag>
|
|
<el-input v-if="inputVisible" ref="inputRef" v-model="inputValue" :style="{ width: props.placeholder.length * 2 + 1 + 'em' }"
|
|
size="small" placeholder="key : value" @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 { ElMessage } from 'element-plus';
|
|
import { nextTick, ref } from 'vue'
|
|
const model = defineModel({
|
|
type: Object,
|
|
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) => {
|
|
delete model.value[index];
|
|
};
|
|
|
|
const showInput = () => {
|
|
inputVisible.value = true
|
|
nextTick(() => {
|
|
inputRef.value?.input?.focus();
|
|
})
|
|
}
|
|
|
|
|
|
|
|
const handleInputConfirm = () => {
|
|
if (inputValue.value) {
|
|
if (inputValue.value.indexOf(":")>0) {
|
|
model.value[inputValue.value.split(':')[0].trim()] = inputValue.value.split(':')[1].trim();
|
|
} else {
|
|
ElMessage.error('输入格式错误');
|
|
}
|
|
|
|
}
|
|
inputVisible.value = false
|
|
inputValue.value = ''
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.w-tags-input {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
&>* {
|
|
margin: 0 1em 1em 0;
|
|
}
|
|
}
|
|
</style> |