Vue组件动态渲染

组件说明

Vue组件用于在表单中嵌入自定义Vue组件，支持远程加载、模板渲染和本地文件加载三种方式，可以实现高度定制化的表单功能。

用法示例

1. addRowRemote - 远程Vue组件

use plugin\xbCode\builder\Builder;
use plugin\xbCode\builder\Renders\Form;

Builder::form(function (Form $builder) {
  // 基础远程组件
  $builder->addRowRemote('custom_field', '自定义组件', '', '/api/component/remote');

  // 带配置的远程组件
  $builder->addRowRemote('chart', '数据图表', '', '/api/component/chart', function($component) {
    $component->url('/api/component/chart', [
      'type' => 'line',
      'data' => '${chartData}'
    ], [
      'height' => 400,
      'theme' => 'dark'
    ]);
  });

  // 使用数组配置
  $builder->addRowRemote('map', '地图选择', '', '/api/component/map', [
    'className' => 'custom-map',
    'required' => true,
    'disabled' => false
  ]);
});

2. addRowRender - 渲染Vue组件

use plugin\xbCode\builder\Builder;
use plugin\xbCode\builder\Renders\Form;

Builder::form(function (Form $builder) {
  // 基础模板渲染
  $template = <<<'VUE'
<template>
  <div class="custom-component">
    <el-input v-model="value" placeholder="请输入内容"></el-input>
  </div>
</template>
<script>
export default {
  props: ['value'],
  methods: {
    handleChange(val) {
      this.$emit('change', val);
    }
  }
}
</script>
VUE;
  $builder->addRowRender('custom_input', '自定义输入', '', $template);

  // 带配置的模板渲染
  $builder->addRowRender('editor', '富文本编辑器', '', $template, function($component) {
    $component->body($template, [
      'config' => ['toolbar' => 'full'],
      'height' => 300
    ], [
      'className' => 'rich-editor'
    ]);
  });

  // 使用数组配置
  $builder->addRowRender('selector', '高级选择器', '', $template, [
    'required' => true,
    'label' => '选择器',
    'className' => 'advanced-selector'
  ]);
});

3. addRowComponent - 本地Vue组件

use plugin\xbCode\builder\Builder;
use plugin\xbCode\builder\Renders\Form;

Builder::form(function (Form $builder) {
  // 加载本地组件文件
  $builder->addRowComponent('custom', '本地组件', '', '/path/to/component.vue');

  // 带配置的本地组件
  $builder->addRowComponent('upload', '自定义上传', '', '/path/to/upload.vue', function($component) {
    // 内部调用addRowRender，所以可以使用body方法配置
    $component->body($template, [
      'maxSize' => 5242880,
      'accept' => '.jpg,.png'
    ]);
  });

  // 使用数组配置
  $builder->addRowComponent('calendar', '日历组件', '', base_path() . '/components/calendar.vue', [
    'className' => 'custom-calendar',
    'required' => false
  ]);
});

组件参数

addRowRemote 参数

url 方法参数（用于addRowRemote）

addRowRender 参数

body 方法参数（用于addRowRender）

addRowComponent 参数

通用配置参数（option数组或回调函数配置）

使用说明

1. addRowRemote 适用于需要从远程服务器动态加载Vue组件的场景，URL需要返回有效的Vue组件内容
2. addRowRender 适用于直接在PHP中定义Vue模板内容的场景，适合简单的自定义组件
3. addRowComponent 适用于将Vue组件保存为独立文件的场景，方便组件复用和维护
4. url必须是有效的远程地址，否则addRowRemote会抛出异常
5. template不能为空，否则addRowRender会抛出异常
6. path必须是存在的文件路径，否则addRowComponent会抛出异常
7. vars参数可以传递动态数据给Vue组件，支持使用${变量名}语法引用表单上下文变量
8. option参数支持两种方式：
9. addRowComponent内部调用addRowRender实现，所以组件实例支持body方法的所有配置
10. 三种方法返回的都是Component实例，可以继续链式调用其他配置方法

组件类型说明

• XbFormRemote: 远程加载Vue组件类型，组件从指定URL加载
• XbFormRender: 模板渲染Vue组件类型，直接渲染提供的模板内容
• XbRender: 基础渲染类型（默认值，一般不直接使用）

注意事项

1. Vue组件模板需要符合Vue.js语法规范
2. 远程组件URL需要设置正确的CORS头，允许跨域访问
3. 本地组件文件路径建议使用绝对路径，可使用base_path()等辅助函数
4. 组件内的数据绑定需要正确处理v-model和事件触发
5. 自定义组件需要正确处理表单值的读取和更新