FcDesigner Pro

Appearance

插槽组件 ​

插槽组件允许您通过 Vue 的插槽功能扩展表单内显示区域，提供了更大的灵活性和自定义能力。通过插槽组件，您可以在设计器和表单运行时动态注入自定义内容，实现更灵活的表单布局和交互功能。

slot-component.png

基础使用 ​

在设计器中配置插槽组件 ​

在表单设计器中，您可以通过左侧组件面板拖拽"插槽区域"组件到表单中。插槽组件默认会自动生成一个唯一的插槽名称（格式为 block_ + 唯一ID），您也可以手动修改这个名称。

插槽组件的主要配置项：

  • name：插槽名称，用于匹配对应的插槽内容。默认格式为 block_ + 唯一ID

在设计器中使用插槽 ​

在 fc-designer 设计器中，您可以通过插槽自定义设计器的显示内容。插槽的名称为 #block_[name] 格式，其中 [name] 为插槽组件配置的 name 值。

基础用法：

vue
<template>
  <fc-designer ref="designer">
    <template #block_Fmrym0sz8orudpc="scope">
      这里是自定义内容
    </template>
  </fc-designer>
</template>

添加自定义操作按钮：

vue
<template>
  <fc-designer ref="designer">
    <template #block_Fmrym0sz8orudpc="scope">
      <el-button @click="handleCustomAction(scope)">自定义操作</el-button>
    </template>
  </fc-designer>
</template>
<script setup>
import { ElMessage } from 'element-plus';

const handleCustomAction = (scope) => {
  ElMessage.info('自定义操作触发');
  console.log('当前表单数据:', scope.api.formData());
  console.log('当前组件规则:', scope.rule);
};
</script>

根据预览模式显示不同内容：

vue
<template>
  <fc-designer ref="designer">
    <template #block_Fmrym0sz8orudpc="scope">
      <div v-if="scope.preview" class="preview-mode">
        <p>预览模式下显示：{{ scope.rule.title }}</p>
      </div>
      <div v-else class="edit-mode">
        <el-input v-model="inputValue" placeholder="编辑模式下可输入" />
      </div>
    </template>
  </fc-designer>
</template>
<script setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

在表单中使用插槽 ​

在 form-create 渲染的表单中，您同样可以通过插槽自定义表单显示内容。使用方式与设计器中完全相同。

vue
<template>
  <form-create :rule="rule" :option="option">
    <template #block_Fmrym0sz8orudpc="scope">
      <div class="custom-slot-content">
        <h3>自定义内容区域</h3>
        <p>您可以在这里放置任何自定义内容</p>
        <el-button @click="handleSubmit(scope)">提交表单</el-button>
      </div>
    </template>
  </form-create>
</template>
<script setup>
import { ref } from 'vue';
import formCreate from '@form-create/element-ui';

const rule = ref([
  // 表单规则配置
]);
const option = ref({});

const handleSubmit = (scope) => {
  scope.api.submit();
};
</script>

数据绑定和更新 ​

当插槽组件配置了 field 属性后，您可以通过 scope.model 进行数据的读取和更新：

vue
<template>
  <fc-designer ref="designer">
    <template #block_Fmrym0sz8orudpc="scope">
      <div>
        <p>当前值：{{ scope.model.value }}</p>
        <el-button @click="updateValue(scope)">更新值</el-button>
      </div>
    </template>
  </fc-designer>
</template>
<script setup>
const updateValue = (scope) => {
  const newValue = Date.now();
  scope.model.callback(newValue);
};
</script>

Scope 对象 ​

Scope 对象提供了插槽组件的上下文数据，包括组件的生成规则、渲染规则、表单 API 等。以下是 Scope 的完整数据结构：

ts
type Scope = {
    //插槽组件的生成规则
    rule: Rule,
    //插槽组件的最终渲染规则
    prop: Rule,
    //是否为阅读模式
    preview: Boolean,
    //表单的API
    api: Api,
    //获取组件的值和同步值，仅在规则中定义 field 时可用
    model: {
        //组件的值
        value: any;
        //更新值
        callback: (value: any) => void;
    },
}

字段说明：

  • rule：组件的原始生成规则，包含组件的完整配置信息
  • prop：组件的最终渲染规则，经过所有转换和处理后的实际渲染配置
  • preview：布尔值，标识当前是否为预览模式，您可以根据此值显示不同的内容
  • api：表单 API 对象，提供表单操作的各种方法，如获取表单数据、设置表单值、验证表单等
  • model：当插槽组件定义了 field 属性时，此对象可用，提供对组件值的读取和更新能力

配置项 ​

插槽组件提供了以下配置选项，您可以通过在设计器中配置属性来自定义插槽组件的行为。

属性名类型默认值必需说明
nameStringblock_default否插槽名称，用于匹配对应的插槽内容
fieldString-否字段名，定义后可使用model进行数据绑定

方法 ​

插槽组件内部提供了以下方法供内部使用。

方法名参数说明返回值
getSlot-获取对应的插槽函数（内部使用）Function

使用示例 ​

示例 1：显示动态内容 ​

通过 scope.api 可以获取表单数据并展示动态内容：

vue
<template>
  <fc-designer ref="designer">
    <template #block_userInfo="scope">
      <div class="user-info-card">
        <h4>用户信息</h4>
        <p>表单数据：{{ JSON.stringify(scope.api.formData()) }}</p>
      </div>
    </template>
  </fc-designer>
</template>

示例 2：条件显示内容 ​

根据表单状态或其他条件显示不同的内容：

vue
<template>
  <fc-designer ref="designer">
    <template #block_conditional="scope">
      <div v-if="scope.preview">
        <el-tag type="info">预览模式</el-tag>
      </div>
      <div v-else>
        <el-tag type="success">编辑模式</el-tag>
      </div>
    </template>
  </fc-designer>
</template>

示例 3：表单数据操作 ​

通过 scope.api 执行表单操作：

vue
<template>
  <fc-designer ref="designer">
    <template #block_actions="scope">
      <el-button-group>
        <el-button @click="scope.api.submit()">提交</el-button>
        <el-button @click="scope.api.resetFields()">重置</el-button>
        <el-button @click="handleClear(scope)">清空</el-button>
      </el-button-group>
    </template>
  </fc-designer>
</template>
<script setup>
const handleClear = (scope) => {
  const formData = scope.api.formData();
  Object.keys(formData).forEach(key => {
    scope.api.clearValidateState(key);
  });
};
</script>

示例 4：响应式数据更新 ​

使用 scope.model 实现双向数据绑定：

vue
<template>
  <fc-designer ref="designer">
    <template #block_counter="scope">
      <div class="counter-widget">
        <el-button @click="decrease(scope)">-</el-button>
        <span style="padding: 0 10px">{{ scope.model.value || 0 }}</span>
        <el-button @click="increase(scope)">+</el-button>
      </div>
    </template>
  </fc-designer>
</template>
<script setup>
const increase = (scope) => {
  const value = scope.model.value || 0;
  scope.model.callback(value + 1);
};

const decrease = (scope) => {
  const value = scope.model.value || 0;
  if (value > 0) {
    scope.model.callback(value - 1);
  }
};
</script>

注意事项 ​

  1. 插槽名称必须唯一：在设计器和表单中，插槽名称必须与插槽组件的 name 属性完全匹配才能正确显示内容。

  2. Scope 对象只读：虽然 scope 对象提供了丰富的数据和方法，但建议不要直接修改 scope 对象的属性，而是通过提供的方法进行操作。

  3. 数据绑定使用场景：只有在插槽组件配置了 field 属性后，才可以使用 scope.model 进行数据绑定，否则该对象为空对象。

  4. 插槽查找机制：插槽组件会向上查找父组件的插槽，支持多层嵌套的表单结构，确保在复杂场景下也能正确找到对应的插槽内容。

通过使用插槽组件，您可以轻松地扩展和定制表单和设计器中的显示内容，以满足您的具体需求。