EmailBill/Web/src/components/AddClassifyDialog.vue

<template>
  <van-dialog
    v-model:show="show"
    title="新增交易分类"
    show-cancel-button
    @confirm="handleConfirm"
  >
    <van-field
      v-model="classifyName"
      placeholder="请输入新的交易分类"
    />
  </van-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const emit = defineEmits(['confirm'])

const show = ref(false)
const classifyName = ref('')

// 打开弹窗
const open = () => {
  classifyName.value = ''
  show.value = true
}

// 确认
const handleConfirm = () => {
  if (!classifyName.value.trim()) {
    showToast('请输入分类名称')
    return
  }

  emit('confirm', classifyName.value.trim())
  show.value = false
  classifyName.value = ''
}

// 暴露方法给父组件
defineExpose({
  open
})
</script>