FcDesigner Pro

Appearance

扩展自定义组件 ​

自定义组件可以被集成到设计器中，用于扩展功能。以下是如何创建和使用自定义组件的详细说明。

导入并挂载自定义组件 ​

首先，您需要导入自定义组件并将其注册到设计器中或者全局挂载

js
//导入自定义组件
import MyButton from './button.Vue';
import FcDesigner from 'path/to/fcDesignerPro';


//挂载自定义组件
FcDesigner.component('MyButton', MyButton);
//或者全局挂载
app.component('MyButton', MyButton);

定义组件的拖拽规则 ​

定义自定义组件的拖拽规则，包括其菜单位置、图标、名称等。以下是如何设置这些规则的示例：

js
const buttonRule = {
    //插入菜单位置
    menu: 'aide',
    //图标
    icon: 'icon-button',
    //名称
    label: '按钮',
    //id,唯一!
    name: 'MyButton',
    //是否可以操作, 除了容器类组件建议为true !
    mask: true,
    //定义组件的事件
    event: ['click'],
    //定义组件的渲染规则
    rule({t}) {
      	//自定义组件的生成规则
        return {
            type: 'MyButton',
            props: {},
            children: ['按钮'],
        };
    },
  	//自定义组件的属性配置
    props(_, {t}) {
        return [{
            //修改rule.children[0]
            type: 'input',
          	title: '内容',
            field: 'formCreateChild',
        }, {
            //修改rule.props.size
            type: 'select',
          	title: '尺寸',
            field: 'size',
            options: [
              {label: 'large', value: 'large'}, 
              {label: 'default', value: 'default'}, 
              {label: 'small',value: 'small'}
            ]
        }];
    }
};

挂载组件的拖拽规则 ​

js
//挂载拖拽规则
this.$refs.designer.addComponent(buttonRule);

示例 ​

以下是一个完整的示例，展示如何创建、导入、挂载自定义组件，并定义其拖拽规则。

1. 创建自定义组件

假设我们要创建一个简单的按钮组件 MyButton.vue：

vue
<template>
  <button :class="`btn ${size}`" @click="handleClick">
    {{ label }}
  </button>
</template>


<script setup>
import { defineProps, defineEmits } from 'vue';


const props = defineProps({
  label: {
    type: String,
    default: '按钮'
  },
  size: {
    type: String,
    default: 'default'
  }
});


const emit = defineEmits(['click']);


function handleClick() {
  emit('click');
}
</script>


<style>
.btn {
  padding: 10px;
  border: none;
  cursor: pointer;
}
.btn.large {
  font-size: 20px;
}
.btn.default {
  font-size: 16px;
}
.btn.small {
  font-size: 12px;
}
</style>

2. 导入并挂载自定义组件

在设计器的 Vue 实例中，您可以如下方式导入并注册自定义组件：

vue
<template>
  <fc-designer ref="designer" />
</template>


<script setup>
import FcDesigner from '/path/to/fcDesignerPro/dist/index.es.js'
import { ref, onMounted } from 'vue';
import MyButton from './MyButton.vue';
import FcDesigner from 'path/to/fcDesignerPro';


const designer = ref(null);
FcDesigner.component('MyButton', MyButton);
</script>

3. 定义组件的拖拽规则

设置自定义组件的拖拽规则以便在设计器中使用：

js
const buttonRule = {
    // 插入菜单位置
    menu: 'aide',
    // 图标
    icon: 'icon-button',
    // 名称
    label: '自定义按钮',
    // id，唯一!
    name: 'MyButton',
    // 是否可以操作
    mask: true,
    // 定义组件的事件
    event: ['click'],
    // 定义组件的渲染规则
    rule({ t }) {
        return {
            type: 'MyButton',
            props: {},
        };
    },
    // 自定义组件的属性配置
    props(_, { t }) {
        return [
            {
                // 修改 rule.props.label
                type: 'input',
                title: '内容',
                field: 'label',
            },
            {
                // 修改 rule.props.size
                type: 'select',
                title: '尺寸',
                field: 'size',
                options: [
                    { label: 'large', value: 'large' },
                    { label: 'default', value: 'default' },
                    { label: 'small', value: 'small' },
                ],
            },
        ];
    },
};

4. 挂载组件的拖拽规则

vue
<template>
  <fc-designer ref="designer" />
</template>


<script setup>
import FcDesigner from '/path/to/fcDesignerPro/dist/index.es.js'
import { ref, onMounted } from 'vue';


const designer = ref(null);


onMounted(() => {
    // 挂载拖拽规则
    designer.value.addComponent(buttonRule);
});
</script>

通过以上步骤，您可以将自定义组件与设计器集成，并为其定义拖拽行为和属性配置，使其在设计器中成为可用的组件。这不仅提高了设计器的灵活性，还可以根据具体需求扩展其功能。