|
| 1 | +<template> |
| 2 | + <div> |
| 3 | + <el-space wrap> |
| 4 | + <div v-for="(env, index) in tmpLabels" :key="index"> |
| 5 | + <fu-read-write-switch write-trigger="onDblclick"> |
| 6 | + <template #read> |
| 7 | + <el-button plain> |
| 8 | + {{ env }} |
| 9 | + <el-button |
| 10 | + circle |
| 11 | + plain |
| 12 | + size="small" |
| 13 | + type="danger" |
| 14 | + class="float-right -mr-6 -mt-8" |
| 15 | + icon="Close" |
| 16 | + @click="remove(index)" |
| 17 | + /> |
| 18 | + </el-button> |
| 19 | + </template> |
| 20 | + <template #default="{ read }"> |
| 21 | + <el-input class="p-w-300" v-model="tmpLabels[index]" @blur="read" /> |
| 22 | + </template> |
| 23 | + </fu-read-write-switch> |
| 24 | + </div> |
| 25 | + <el-input v-if="showAdd" v-model="labelItem"> |
| 26 | + <template #append> |
| 27 | + <el-button icon="Check" @click="save()" /> |
| 28 | + <el-button icon="Close" @click="cancel()" /> |
| 29 | + </template> |
| 30 | + </el-input> |
| 31 | + <el-button plain icon="Plus" @click="add()" /> |
| 32 | + </el-space> |
| 33 | + </div> |
| 34 | +</template> |
| 35 | + |
| 36 | +<script lang="ts" setup> |
| 37 | +import { ref, onMounted } from 'vue'; |
| 38 | +const em = defineEmits(['update:labels']); |
| 39 | +
|
| 40 | +const tmpLabels = ref([]); |
| 41 | +const labelItem = ref(''); |
| 42 | +const showAdd = ref(false); |
| 43 | +
|
| 44 | +const props = defineProps({ |
| 45 | + labels: { type: Array<string>, default: [] }, |
| 46 | +}); |
| 47 | +watch( |
| 48 | + () => props.labels, |
| 49 | + (newVal) => { |
| 50 | + tmpLabels.value = newVal || []; |
| 51 | + }, |
| 52 | +); |
| 53 | +const add = () => { |
| 54 | + showAdd.value = true; |
| 55 | + labelItem.value = ''; |
| 56 | +}; |
| 57 | +const cancel = () => { |
| 58 | + showAdd.value = false; |
| 59 | + labelItem.value = ''; |
| 60 | +}; |
| 61 | +const save = () => { |
| 62 | + if (labelItem.value && tmpLabels.value.indexOf(labelItem.value) === -1) { |
| 63 | + tmpLabels.value.push(labelItem.value); |
| 64 | + } |
| 65 | + showAdd.value = false; |
| 66 | + labelItem.value = ''; |
| 67 | + handleUpdate(); |
| 68 | +}; |
| 69 | +const remove = (index: number) => { |
| 70 | + tmpLabels.value.splice(index, 1); |
| 71 | + handleUpdate(); |
| 72 | +}; |
| 73 | +const handleUpdate = () => { |
| 74 | + em('update:labels', tmpLabels.value); |
| 75 | +}; |
| 76 | +onMounted(() => { |
| 77 | + tmpLabels.value = props.labels || []; |
| 78 | +}); |
| 79 | +</script> |
0 commit comments