这个功能仅在 Pro 版本的设计器中提供。 详细了解 Pro 版本功能

阅读模式回显

自定义组件的阅读模式允许在组件内部控制如何显示回显内容，使得在阅读模式下可以以不同于编辑模式的方式展示数据。

自定义组件

在自定义组件中，您可以通过 preview 属性来判断当前是否处于阅读模式，并根据此状态来展示不同的内容。

<template>
    <div class="_fc-value">
        <!--阅读模式下-->
        <template v-if="preview">
            {{modelValue}}
        </template>
        <!--表单模式下-->
        <template v-else>
            <el-input :modelValue="modelValue" @update:modelValue="input"></el-input>
        </template>
    </div>
</template>
<script>
    import {defineComponent} from 'vue';
    export default defineComponent({
        name: 'FInput',
        props: {
            modelValue: String,
            //自动注入
            formCreateInject: Object,
        },
        computed: {
            //获取是否在阅读模式中
            preview(){
                return this.formCreateInject.preview;
            }
        }
        methods: {
            input(val){
                this.$emit('update:modelValue', val);
                this.$emit('change', val);
            }
        }
    });
</script>

拖拽规则

在定义拖拽规则时，可以通过设置 readMode: 'custom' 来指定该组件的阅读模式为自定义模式。这将告知设计器使用自定义的回显逻辑来渲染组件。

import uniqueId from '@form-create/utils/lib/unique';
const label = '自定义输入框';
const name = 'FInput';
const FInputRule = {
    menu: 'main',
    icon: 'icon-value',
    label,
    name,
    event: ['change'],
    rule({t}) {
        return {
            type: name,
            field: uniqueId(),
            //在这里定义
            readMode: 'custom',
            title: '自定义输入框',
            info: '',
            props: {},
        };
    },
    props() {
        return [];
    }
};

挂载组件和拖拽规则

在完成组件和拖拽规则的定义后，您需要将它们挂载到 FcDesigner 实例中，以使其能够在设计器中使用。

//挂载组件
FcDesigner.addCompoent(FInput);
//挂载拖拽规则
this.$refs.designer.addComponent(FInputRule);

动态回显内容

在一些复杂的场景中，您可能需要根据用户的输入或其他条件动态调整回显内容。可以通过动态计算 modelValue 来实现这一需求。

<template>
    <div class="_fc-value">
        <!-- 阅读模式下 -->
        <template v-if="preview">
            <span v-if="isSpecialCondition">{{ specialContent }}</span>
            <span v-else>{{ modelValue }}</span>
        </template>
        <!-- 表单模式下 -->
        <template v-else>
            <el-input :modelValue="modelValue" @update:modelValue="input"></el-input>
        </template>
    </div>
</template>


<script>
import { defineComponent } from 'vue';


export default defineComponent({
    name: 'FInput',
    props: {
        modelValue: String,
        formCreateInject: Object,
    },
    computed: {
        preview() {
            return this.formCreateInject.preview;
        },
        isSpecialCondition() {
            // 根据业务逻辑判断是否满足特殊条件
            return this.modelValue === 'special';
        },
        specialContent() {
            // 根据特殊条件生成回显内容
            return '特殊内容';
        }
    },
    methods: {
        input(val) {
            this.$emit('update:modelValue', val);
            this.$emit('change', val);
        }
    }
});
</script>