Element UI 进阶教程：结合 Vue2 与 Three.js 的交互实践

Element UI 作为 Vue2 生态中最受欢迎的 UI 组件库之一，在实际开发中不仅能实现基础界面，还能与其他库（如 Three.js）无缝集成，构建复杂交互场景。

一、表单验证

Element UI 的表单验证机制在复杂业务场景中非常实用，本示例通过物体添加功能展示其进阶用法：

1. 验证规则的精细化配置

rules: {
    type: [
        { required: true, message: '请选择物体类型', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入物体名称', trigger: 'blur' },
        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
    ]
}

• 多规则组合：对 name 字段同时设置了必填和长度限制
• 触发时机：使用 trigger: 'blur' 在输入框失焦时验证，提升用户体验
• 动态验证：通过 this.$refs.form.validate() 方法在提交时手动触发

2. 表单验证的手动触发与处理

addObjectToScene() {
    this.$refs.form.validate((valid) => {
        if (valid) {
            // 验证通过，执行添加物体逻辑
            // ...
        }
    });
}

• 回调式验证：通过回调函数处理验证结果，避免嵌套判断
• 结合业务逻辑：验证通过后才执行 Three.js 物体创建操作，保证数据合法性

二、对话框组件（el-dialog）进阶用法

el-dialog 组件在本示例中用于物体属性配置，其进阶用法包括：

1. 双向绑定与状态管理

<el-dialog
    title="添加3D物体"
    :visible.sync="dialogVisible"
    width="500px"
    @closed="resetForm">

• .sync 修饰符：实现对话框显示状态的双向绑定，简化父组件与对话框的通信
• 关闭事件：@closed 事件在对话框完全关闭后触发，适合执行清理操作（如表单重置）

2. 对话框与表单的联动

// 重置表单方法
resetForm() {
    this.form = {
        type: '',
        name: '',
        color: '',
        position: { x: 0, y: 0, z: 0 }
    };
}

• 关闭时重置：利用 @closed 事件触发表单重置，避免下次打开时保留旧数据
• 初始状态管理：在 mounted 钩子中初始化表单数据，保证初始状态一致性

三、复合组件的协同使用

1. 表单组件的组合策略

<el-form-item label="物体类型" prop="type">
    <el-select v-model="form.type" placeholder="请选择物体类型">
    </el-select>
</el-form-item>

<el-form-item label="颜色">
    <el-color-picker v-model="form.color" show-alpha></el-color-picker>
</el-form-item>

<el-form-item label="X坐标">
    <el-slider v-model="form.position.x" :min="-10" :max="10" :step="0.5"></el-slider>
</el-form-item>

• 组件联动：el-select、el-color-picker、el-slider 分别对应不同类型的输入需求
• 数据结构：表单数据采用嵌套对象（position.x），展示复杂数据的绑定方式
• 视觉一致性：通过 label-width 统一标签宽度，保持表单美观