如何实现每次点击按钮就打开一个全新的空白panel？

核心实现逻辑 #

• 首先将现有包含3个textarea的panel封装为可复用的DOM模板/组件，每次触发新增操作时克隆/重新实例化一份全新实例，自动清空所有textarea的原有值后弹出
• 为每个生成的面板分配唯一标识（如时间戳、自增ID），后续提交数据到数据库时可区分不同条目的内容，避免数据混淆

原生JS实现示例 #

先在HTML中定义隐藏的复用模板：

<!-- 隐藏的panel复用模板 -->
<template id="entryPanelTemplate">
  <div class="entry-panel">
    <textarea name="field1" placeholder="字段1录入"></textarea>
    <textarea name="field2" placeholder="字段2录入"></textarea>
    <textarea name="field3" placeholder="字段3录入"></textarea>
    <button class="save-entry">保存当前条目</button>
  </div>
</template>

<!-- 新增条目触发按钮 -->
<button id="addEntryBtn">新增条目</button>

JS交互逻辑：

const addBtn = document.getElementById('addEntryBtn')
const panelTemplate = document.getElementById('entryPanelTemplate')

addBtn.addEventListener('click', () => {
  // 深克隆模板内容，避免影响原有模板
  const newPanel = panelTemplate.content.cloneNode(true)
  // 给当前面板添加唯一标识，方便后续收集数据
  const panelUid = `entry_${Date.now()}`
  newPanel.querySelector('.entry-panel').dataset.entryId = panelUid
  // 此处替换为你的弹窗逻辑，比如将新面板插入模态框后唤起弹窗
  document.body.appendChild(newPanel)
})

Vue3实现示例 #

首先封装独立的面板组件EntryPanel.vue：

<template>
  <div class="entry-panel">
    <textarea v-model="formData.field1" placeholder="字段1录入"></textarea>
    <textarea v-model="formData.field2" placeholder="字段2录入"></textarea>
    <textarea v-model="formData.field3" placeholder="字段3录入"></textarea>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const formData = reactive({
  field1: '',
  field2: '',
  field3: ''
})
// 暴露表单数据给父组件调用
defineExpose({ formData })
</script>

父组件调用逻辑：

<template>
  <button @click="openNewPanel">新增条目</button>
  <!-- 弹窗组件，v-if控制显示销毁 -->
  <Modal v-if="showPanel" @close="showPanel = false">
    <EntryPanel ref="activePanelRef" />
    <button @click="submitEntry">保存当前条目</button>
  </Modal>
</template>
<script setup>
import { ref, nextTick } from 'vue'
import EntryPanel from './EntryPanel.vue'
const showPanel = ref(false)
const activePanelRef = ref()

const openNewPanel = () => {
  // 销毁旧组件后重新实例化，自动得到空白表单
  showPanel.value = false
  nextTick(() => {
    showPanel.value = true
  })
}

const submitEntry = () => {
  // 获取当前面板表单数据，调用后端接口存入数据库即可
  const entryData = activePanelRef.value?.formData
  // 此处添加你的接口提交逻辑
}
</script>

注意事项 #

• 每次生成新面板时必须完全清空所有textarea的缓存值，防止复用上一条录入的数据
• 如果需要支持批量提交多条未保存的条目，可以在全局维护一个数组，每条数据保存后推入数组，全部录入完成后一次性提交
• 弹窗关闭时需要销毁对应面板实例，避免内存占用过高

内容的提问来源于stack exchange，提问作者duk3th3c0d3r