vue全家桶进阶之路44：Vue3 Element Plus el_row和el_col组件

在 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 引用表单组件，并调用