vue3 通过ref 找到 dom实例

页面

 <el-tab-pane label="用户名登录">
        <el-form
            :model="form"
            label-position="right"
            label-width="70px"
            style="max-width: 460px"
            class="loginForm"
            :rules="form_rules"
            ref="formRef"
        >
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="form.username"/>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input type="password" v-model="form.password"/>
          </el-form-item>

          <el-row>
            <el-checkbox
                class="checkBox"
                v-model="phoneForm.isAgree"
                label="同意用户使用准则"
                name="type"
            />
          </el-row>
          <el-button
              v-if="phoneForm.isAgree"
              type="primary"
              class="loginBtn"
              @click="login"
          >
            登录
          </el-button>
        </el-form>
      </el-tab-pane>

操作

import {getCurrentInstance} from "vue";
const {proxy} = getCurrentInstance()
// 登录
function login() {
  proxy.$refs.formRef.validate((valid, fields) => {
    if (valid) {
      console.log(form);
    } else {
      console.log('error submit!', fields)
    }
  })
}
posted @ 2022-11-30 16:53  Sherwin_szw  阅读(143)  评论(0编辑  收藏  举报