自定义组件

路径：组件/app/dict/diy/components.php

<?php

return [
    'LHHD_XDYXLM_DIV_HOME' => [
        'title' => get_lang('dict_diy.lhhd_xdyxlm_div_home'),
        'list' => [
            'LhhdXdyxlmDivHomeCarouselImage' => [
                'title' => '联盟轮播图',
                'icon' => 'iconfont iconhuiyuanqiandaopc',
                'path' => 'edit_lhhd_xdyxlm_div_home_carousel_image',
                'support_page' => [],
                'uses' => 1,
                'sort' => 10015,
                'value' => [
                    'title' => "推荐", // 标题
                    'data' => [
                        [
                            'image' => '', // 图片
                            'title' => '', // 标题
                            'link' => '', // 链接
                            'sort' => 0, // 排序
                            'type' => 1, // 类型
                        ],
                    ],
                ],
                // 组件属性
                'template' => [
                    "textColor" => "#303133", // 文字颜色
                    'pageStartBgColor' => '', // 底部背景颜色（开始）
                    'pageEndBgColor' => '', // 底部背景颜色（结束）
                    'pageGradientAngle' => 'to bottom', // 渐变角度，从上到下（to bottom）、从左到右（to right）
                    'componentBgUrl' => '', // 组件背景图片
                    'componentBgAlpha' => 2, // 组件背景图片的透明度，0~10
                    "componentStartBgColor" => '', // 组件背景颜色（开始）
                    "componentEndBgColor" => '', // 组件背景颜色（结束）
                    "componentGradientAngle" => 'to bottom', // 渐变角度，上下（to bottom）、左右（to right）
                    "topRounded" => 0, // 组件上圆角
                    "bottomRounded" => 0, // 组件下圆角
                    "elementBgColor" => '', // 元素背景颜色
                    "topElementRounded" => 0, // 元素上圆角
                    "bottomElementRounded" => 0, // 元素下圆角
                    "margin" => [
                        "top" => 0, // 上边距
                        "bottom" => 0, // 下边距
                        "both" => 10, // 左右边距
                    ],
                ],
            ],
            
        ],
    ],

];

小程序路径：uni-app/src/addon/lhhd_xdyxlm/components/diy/lhhdXdyxlmDivHomeCarouselImage

<template>
	<view :style="warpCss">
		新组件
	</view>
</template>

<script lang="ts" setup>
// 图片广告
import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
import useDiyStore from '@/app/stores/diy';
import { img } from '@/utils/common';

const props = defineProps(['component', 'index']);
const diyStore = useDiyStore();

const diyComponent = computed(() => {
    if (diyStore.mode == 'decorate') {
        return diyStore.value[props.index];
    } else {
        return props.component;
    }
})

const warpCss = computed(() => {
    var style = '';
    if (diyComponent.value.componentStartBgColor) {
        if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${ diyComponent.value.componentGradientAngle },${ diyComponent.value.componentStartBgColor },${ diyComponent.value.componentEndBgColor });`;
        else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
    }

    if (diyComponent.value.componentBgUrl) {
        style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
        style += 'background-size: cover;background-repeat: no-repeat;';
    }

    if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    return style;
})


</script>

<style lang="scss" scoped>

</style>

uni-app/src/addon/components/diy/group/index.vue

<template v-if="component.componentName == 'LhhdXdyxlmDivHomeCarouselImage'">
			    <lhhd-xdyxlm-div-home-carousel-image ref="diyTextRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.Text" />
			</template>

    import lhhdXdyxlmDivHomeCarouselImage from '@/addon/lhhd_xdyxlm/components/diy/lhhdXdyxlmDivHomeCarouselImage/index.vue';