vue2+vue3 表单功能

最新推荐文章于 2024-01-11 16:00:41 发布

kiki-chou

最新推荐文章于 2024-01-11 16:00:41 发布

阅读量572

点赞数

文章标签： vue javascript 移动开发

本文链接：https://blog.csdn.net/qq_43948564/article/details/121665420

版权

表单

vue + element 框架

 <el-form
      ref="formWrap"
      :model="formData"
      :rules="formFules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="ID" prop="id">
        <el-input
          v-model.trim="formData.id"
          placeholder="请输入ID"
          clearable
        />
      </el-form-item>
  </el-form>

vue2.0 + js

methods: {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           alert('submit!');
         } else {
           console.log('error submit!!');
           return false;
         }
       });
     },
   }
 }

vue3.0 + ts

  setup() {
   const data = reactive({
     // 表单参数
     formData: {
       id: "",
     },
     formWrap: null as any,
     // 确定点击
     confirmModal: async () => {
       const formRef = unref(data.formWrap);
       if (!formRef) {
         return;
       }
       await formRef.validate((valid: boolean) => {
         if (valid) {
           console.log("提交拉");
         }
       });
     },
   });
   const refData = toRefs(data);
   return {
     ...refData,
   };
 },