在 Vue 3 中，Element Plus 也提供了 ElRow 和 ElCol 组件，用于实现栅格布局。
ElRow 组件的常用属性：
gutter：栅格间距，默认为 0。type：布局模式，可选值为flex、justify和align。默认值为flex。tag：组件标签，默认为div。
ElCol 组件的常用属性：
span：栅格占据的列数，默认为 24。offset：栅格左侧的间隔格数，默认为 0。push：栅格向右移动的格数，默认为 0。pull：栅格向左移动的格数，默认为 0。xs：<768px 响应式栅格数或者属性对象。sm：≥768px 响应式栅格数或者属性对象。md：≥992px 响应式栅格数或者属性对象。lg：≥1200px 响应式栅格数或者属性对象。xl：≥1920px 响应式栅格数或者属性对象。tag：组件标签，默认为div。
示例代码：
<template>
<el-row :gutter="20">
<el-col :span="12">Column 1</el-col>
<el-col :span="12">Column 2</el-col>
</el-row>
</template>
上面的代码中，我们使用 ElRow 和 ElCol 组件实现了一个简单的栅格布局。其中，ElRow 组件设置了 gutter 属性为 20，表示栅格之间的间距为 20 像素。ElCol 组件设置了 span 属性为 12，表示当前栅格占据了 12 格，即占据了一半的宽度。
下面是一个基于 Element Plus 的 Vue 3 示例代码，包含用户名、密码、验证码和登录按钮：
<template>
<el-row :gutter="20">
<el-col :span="24" :md="{ span: 12, offset: 6 }">
<el-form :model="form" :rules="rules" ref="loginForm" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="captcha">
<el-input v-model="form.captcha" placeholder="请输入验证码"></el-input>
</el-form-item>
<el-form-item>
<img :src="captchaSrc" alt="验证码" @click="refreshCaptcha">
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</template>
<script>
import { ref } from 'vue';
import { ElRow, ElCol, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
export default {
components: {
ElRow,
ElCol,
ElForm,
ElFormItem,
ElInput,
ElButton,
},
setup() {
// 表单数据
const form = ref({
username: '',
password: '',
captcha: '',
});
// 表单验证规则
const rules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
],
captcha: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
],
});
// 验证码图片链接
const captchaSrc = ref('');
// 刷新验证码
const refreshCaptcha = () => {
captchaSrc.value = `/api/captcha?t=${new Date().getTime()}`;
};
// 提交表单
const submitForm = () => {
const formRef = ref(null);
formRef.value.validate((valid) => {
if (valid) {
// TODO: 处理登录逻辑
} else {
return false;
}
});
};
return {
form,
rules,
captchaSrc,
refreshCaptcha,
submitForm,
};
},
};
</script>
上面的代码中，我们使用了 Element Plus 的表单组件 ElForm 和表单项组件 ElFormItem，以及输入框组件 ElInput 和按钮组件 ElButton。其中，表单数据使用了 Vue 3 的 ref 创建，验证规则也使用了 ref 创建。验证码图片链接也使用了 ref 创建，当用户点击图片时，会调用 refreshCaptcha 方法重新获取验证码图片。最后，当用户点击登录按钮时，会调用 submitForm 方法，其中使用了 formRef 引用表单组件，并调用