mky-vent-base/src/views/vent/performance/comment/fileModal.vue

<template>
  <div class="title">目录类型 : </div>
  <div class="content">
    <template v-for="(tag, index) in state.tags" :key="tag">
      <a-tag :closable="index !== 0" @close="handleClose(tag)">
        {{ tag }}
      </a-tag>
    </template>
    <a-input
      v-if="state.inputVisible"
      ref="inputRef"
      v-model:value="state.inputValue"
      type="text"
      size="small"
      :style="{ width: '78px' }"
      @blur="handleInputConfirm"
      @keyup.enter="handleInputConfirm"
    />
    <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
      <plus-outlined />
      新增目录
    </a-tag>
  </div>
  <div class="footer">
    <a-button style="margin-right: 10px" type="primary" @click="handleSubmit">保存</a-button>
    <a-button type="primary" @click="handleSubmit">取消</a-button>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, toRefs, nextTick } from 'vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  components: {
    PlusOutlined;
  }
  // 声明Emits
  const emit = defineEmits(['saveOrUpdate']);
  const inputRef = ref();
  const state = reactive({
    tags: ['台账类文件', '法律法规', '其他', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17'],
    inputVisible: false,
    inputValue: '',
  });
  const handleClose = (removedTag: string) => {
    const tags = state.tags.filter((tag) => tag !== removedTag);
    console.log(tags);
    state.tags = tags;
  };
  const showInput = () => {
    state.inputVisible = true;
    nextTick(() => {
      inputRef.value.focus();
    });
  };
  const handleInputConfirm = () => {
    const inputValue = state.inputValue;
    let tags = state.tags;
    if (inputValue && tags.indexOf(inputValue) === -1) {
      tags = [...tags, inputValue];
    }
    console.log(tags);
    Object.assign(state, {
      tags,
      inputVisible: false,
      inputValue: '',
    });
  };
  //表单提交事件
  async function handleSubmit(v) {
    try {
      //   emit('saveOrUpdate', values);
      emit('saveOrUpdate', false);
    } finally {
      // setModalProps({ confirmLoading: false });
    }
  }
</script>

<style lang="less" scoped>
  .title {
    margin-bottom: 10px;
  }
  .footer {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
  ::v-deep .zxm-tag {
    margin-bottom: 10px;
    border-color: #3ad8ff77;
    background-color: #ffffff00 !important;
    color: #fff;
  }
  ::v-deep .zxm-tag-close-icon {
    color: #fff;
  }
</style>