vue3 ant-Design-vue提交按钮放在表单外提交，自定义提交按钮

标签：const 自定义 按钮 提交 vue3 console

<template>
     <a-form ref="urlEditRef" :model="urlEditInfo"         
     name="urlEdit_rule" layout="vertical">
     　　<a-form-item label="跳转链接" name="longUrl"
     　　:rules="[{ required: true, message: '请输入跳转链接' }, { pattern: /(https):\/\/([\w.]+\/?)\S*/, message: '请输入正确格式的https地址' }]">
     　　　　<a-input v-model:value="urlEditInfo.longUrl" allow-clear placeholder="跳转链接" />
     　　</a-form-item>
     　　<a-form-item label="链接标题" name="title" :rules="[{ required: true, message: '请输入链接标题' }]">
     　　　　<a-input v-model:value="urlEditInfo.title" allow-clear placeholder="链接标题" :maxlength="32" :showCount="true" />
    　　　</a-form-item>
　　　　</a-form>

　　　　//button在 a-form标签外边

　　　　　　<a-button type="primary" @click="handleSubmit_c" v-onceClick>确定</a-button>

</template>

<script setup>

      const urlEditRef = ref(null)  //用来保存上边a-form中的ref

    const handleSubmit_c = () => {
    console.log('handleSubmit');
    urlEditRef.value.validate().then(() => {
        console.info("-=-=-=-=通过");
    })
        .catch((err) => {
            console.info("不通过", err);
        });

}
</script>

 

标签：const,自定义,按钮,提交,vue3,console
From： https://www.cnblogs.com/bisiyuan/p/17282895.html