vue3+ant弹窗表单关闭后清空表单数据

1、:footer="false"   去除对话框底部footer部分

2、使用a-form表单点击取消按钮将表单数据清空,使用ref先定义表单名

3、表单点击确定按钮验证必填是否填写

​
<a-modal width="50%" :footer="false" v-model:visible="state.visible" title-align="start" :title="state.id ? '编辑轴承' : '新建轴承'" @cancel="handleCancel">
	<a-form ref="formRef" :model="addFrom" @submit="handleSubmit">
		<div class="title">基本信息</div>
		<a-form-item field="name" label="名称:" :rules="[{required:true,message:'请输入名称'}]" label-col-flex="80px">
			<a-input v-model="addFrom.name" placeholder="请输入" />
		</a-form-item>
		<a-form-item field="age" label="年龄:" :rules="[{required:true,message:'请输入年龄'}]" label-col-flex="80px">
			<a-input v-model="addFrom.age" placeholder="请输入" />
		</a-form-item>
		<div style="text-align: center;">
			<a-space>
				<a-button @click="handleCancel()">取消</a-button>
				<a-button type="primary" html-type="submit">确定</a-button>
			</a-space>
		</div>
	</a-form>
</a-modal>

​
import {reactive, ref} from 'vue';

const formRef = ref(); // 定义a-form表单的ref名
const addFrom = reactive({
    name: '',
    age: ''
})


// 弹窗表单关闭后的回调事件,清空表单数据
const handleCancel = () => {
	state.visible = false;
	formRef.value.resetFields();
}


// 确认提交的回调时间,验证表单必填项
const handleSubmit = ({values, errors}: any) => {
	console.log('values:', values, '\nerrors:', errors)
	if(!errors) {
			
	}
}

效果如下:

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 中使用 TypeScript 关闭弹窗,可以采用以下步骤: 1. 创建弹窗的组件,例如: ```vue <template> <div v-if="visible"> <h2>{{title}}</h2> <p>{{content}}</p> <button @click="close">关闭</button> </div> </template> <script lang="ts"> import { defineComponent, PropType } from "vue"; export default defineComponent({ props: { title: String, content: String, visible: Boolean, onClose: Function as PropType<() => void>, }, methods: { close() { this.onClose?.(); }, }, }); </script> ``` 2. 在父组件中引入弹窗组件并使用它,例如: ```vue <template> <div> <button @click="showModal">打开弹窗</button> <my-modal title="这是弹窗标题" content="这是弹窗内容" :visible="visible" @onClose="closeModal" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; import MyModal from "./MyModal.vue"; export default defineComponent({ components: { MyModal, }, setup() { const visible = ref(false); function showModal() { visible.value = true; } function closeModal() { visible.value = false; } return { visible, showModal, closeModal, }; }, }); </script> ``` 在上述代码中,我们使用了 `ref` 创建一个响应式变量 `visible`,用于控制弹窗的显示和隐藏。当点击“打开弹窗”按钮时,调用 `showModal` 函数将 `visible` 设置为 `true`,从而显示弹窗。当弹窗中的“关闭”按钮被点击时,调用 `closeModal` 函数将 `visible` 设置为 `false`,从而关闭弹窗。 注意,在弹窗组件中,我们使用了可选链操作符 `?.` 来调用 `onClose` 函数,这是为了避免在未传递 `onClose` 属性时出现的类型错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值