vxe-design/es/form-design/widget-text/text-view.js

A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms

import { h } from 'vue';
import { defineVxeComponent } from '../../ui/src/comp';
import { VxeUI } from '@vxe-ui/core';
import { useWidgetName } from '../../form-design/src/use';
export const WidgetTextViewComponent = defineVxeComponent({
    props: {
        renderOpts: {
            type: Object,
            default: () => ({})
        },
        renderParams: {
            type: Object,
            default: () => ({})
        }
    },
    emits: [],
    setup(props) {
        const VxeUIFormItemComponent = VxeUI.getComponent('vxe-form-item');
        const { computeKebabCaseName } = useWidgetName(props);
        return () => {
            const { renderParams } = props;
            const { widget } = renderParams;
            const { options } = widget;
            const kebabCaseName = computeKebabCaseName.value;
            return h(VxeUIFormItemComponent, {
                class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
                align: options.align
            }, {
                default() {
                    return h('div', {
                        style: {
                            fontSize: options.fontSize,
                            fontWeight: options.bold ? 'bold' : ''
                        }
                    }, widget.title);
                }
            });
        };
    }
});