Collapse Transition 增加 display-directive 属性，控制使用v-if或v-show

[seepine]

问题的清晰而简明的描述

在使用n-form表单时，使用 n-collapse-transition 隐藏次要输入框，校验时无法校验到 n-form-item 设置的 rule

建议的解决方案

参考 collapse 组件，增加属性配置

display-directive :    'if'  | 'show'

https://www.naiveui.com/zh-CN/os-theme/components/collapse#display-directive.vue

备选方案

No response

附加上下文

No response

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在请求相同功能的问题，以避免创建重复的问题。

[jahnli]

Provide the repetition of [minimum recurring example] (https://stackoverflow.com/help/minimal-reproducible-example)

[seepine]

Example

<template>
  <n-form
    ref="formRef"
    :model="formValue"
  >
    <n-form-item label="姓名" path="name">
      <n-input v-model:value="formValue.name" placeholder="输入姓名" />
    </n-form-item>

    <n-collapse-transition
      :show="showMore"
      :appear="true"
    >
        <n-form-item label="年龄" path="age" :rule="{ required: true, message: '请输入' }">
            <n-input v-model:value="formValue.age" placeholder="输入年龄" />
        </n-form-item>
        <n-form-item label="电话号码" path="phone" :rule="{ required: true, message: '请输入' }">
            <n-input v-model:value="formValue.phone" placeholder="电话号码" />
        </n-form-item>
    </n-collapse-transition>

  </n-form>
</template>

<script setup>
const showMore = ref(false)
const formValue = ref({})
const formRef = ref()
const handleSubmit = async ()=>{
  await formRef.value?.validate()
}
</script>