跳到主要内容

# SlotSetter

## 简介​

通过一个开启一个 slot（插槽），可以在物料特定的一个位置渲染一个或者多个节点。slot 比较适合物料的局部自定义渲染。

## 展示​

## setter 配置​

属性名 | 类型 | 说明
--- | --- | ---
initialValue | Object | 默认值 { "type": "JSSlot", "params": [ "module" ], "value": [] } params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改) value:可以定义一个节点，每次打开插槽的时候默认填充一个节点
hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入 params 的参数，和 params:[]不同
checkedText | string | switch 选中文案，默认显示"启用"
unCheckedText | string | switch 取消文案，默认显示"关闭"

## 配置示例​

### 配置​

    {
        name: 'propName',
        title: 'propTitle',
        setter: {
          componentName: 'SlotSetter',
          isRequired: true,
          title: '组件坑位',
          initialValue: {
            type: 'JSSlot',
            value: [],
          },
        }
      }

### 组件​

    function A(props) {
      return props.propName;
    }

## 带参数的插槽示例​

### 配置​

    {
      name: 'propName',
      title: 'propTitle',
      setter: {
        componentName: 'SlotSetter',
        isRequired: true,
        title: '组件坑位',
        initialValue: {
          type: 'JSSlot',
          params: [ 'module'],
          value: [],
        },
      }
    }

### 组件​

组件需要传参数进行渲染，和普通示例的使用不一样。

    function A(props) {
      const module = [];
      return props.propName(module);
    }

### param 使用示例​

1.开启插槽

2.拖拽组件到插槽中

3.在插槽内组件中使用变量绑定，绑定 this.xxx

xxx 入参的配置