🐛 [Bug]: 抽屉关闭时，弹出的表单必填提示不会自动关闭。

[sunny-Fung]

Version

3.19.0

Vue Version

3.4.27

Link to minimal reproduction

1. 打开演练场
2. 把以下代码复制到App.vue。
3. 点击按钮，打开抽屉。
4. 将光标集中到“用户名”的输入框，无需输入，然后点击抽屉内容区空白处，此时会出现必填提示。
5. 点击关闭按钮，关闭抽屉。此时表单的必填提示还在原处无法消失。
6. 点击页面空白处，提示还是无法消失。

   
   <template>
   <div>
   <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
   <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" @confirm="confirm">
       <div class="demo-form">
         <div class="title">标签文字对齐： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
         <tiny-form
           ref="ruleFormRef"
           :model="createData"
           label-position="left"
           :label-align="isLabelAlign"
           :hide-required-asterisk="false"
         >
           <tiny-form-item label="用户名" prop="username" required>
             <tiny-input v-model="createData.username"></tiny-input>
           </tiny-form-item>
           <tiny-form-item label="密码" prop="password" required>
             <tiny-input v-model="createData.password" type="password" show-password></tiny-input>
           </tiny-form-item>
           <tiny-form-item label="密钥" prop="password2">
             <tiny-input v-model="createData.password2" type="password" show-password></tiny-input>
           </tiny-form-item>
         </tiny-form>
       </div>
   </tiny-drawer>
   </div>
   </template>

### Step to reproduce

1

### What is expected

希望关闭抽屉时，提示可以自己消失，不然用户体验很不好。

### What is actually happening

目前是提示不会在抽屉关闭时自己消失

### What is your project name

111

### Any additional comments (optional)

_No response_

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: When the drawer is closed, the pop-up form required prompt will not automatically close.

[gimmyhehe]

@sunny-Fung 表单的校验除了将 1、字段填对，2、主动关闭 这两种场景外，其他情况是不会主动关闭的。 如果需要在关闭抽屉时，消除表单校验提示，可以主动调用一下清除校验。

<template>
  <div>
    <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
    <tiny-drawer title="标题" :visible="visible" @update:visible="visibleChange" @confirm="confirm">
        <div class="demo-form">
          <div class="title">标签文字对齐： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
          <tiny-form
            ref="ruleFormRef"
            :model="createData"
            label-position="left"
            :label-align="isLabelAlign"
            :hide-required-asterisk="false"
          >
            <tiny-form-item label="用户名" prop="username" required>
              <tiny-input v-model="createData.username"></tiny-input>
            </tiny-form-item>
            <tiny-form-item label="密码" prop="password" required>
              <tiny-input v-model="createData.password" type="password" show-password></tiny-input>
            </tiny-form-item>
            <tiny-form-item label="密钥" prop="password2">
              <tiny-input v-model="createData.password2" type="password" show-password></tiny-input>
            </tiny-form-item>
          </tiny-form>
        </div>
    </tiny-drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {TinyDrawer, TinyButton, TinyForm, TinyFormItem, TinyInput, TinySwitch } from '@opentiny/vue'

const ruleFormRef = ref()

const isLabelAlign = ref(true)

const createData = reactive({
  username: '',
  password: '',
  password2: ''
})

const visible = ref(false)

const visibleChange = (val) => {
  visible.value  = val
  if(!visible.value) {
    ruleFormRef.value.clearValidate()
  }
}

function openDrawer() {
  visible.value = true
}

function confirm() {
  visible.value = false
}
</script>

<style scoped>
.demo-form {
  width: 380px;
}
.title {
  margin-bottom: 20px;
  font-size: 14px;
}
</style>