自定义组件

路径：组件/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 class="diy-image-ads" :style="imageAdsTempStyle()">
			www
		</view>
	</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 systemInfo = uni.getSystemInfoSync();

	const diyStore = useDiyStore();

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

	// 兼容通屏样式
	const imageAdsTempStyle = ()=> {
		let style = "";
		if(diyComponent.value.isSameScreen && props.index == 0){
			// #ifdef H5
			// h5,上移的像素，采取的是平均值
			if (systemInfo.platform === 'ios') {
			    style = 'margin-top: -55px;';
			}else{
			    style = 'margin-top: -44.5px;';
			}
			// #endif

			// #ifdef MP
			// 图文导航开启沉浸式且导航栏开启时，导航栏不占位
			uni.setStorageSync('imageAdsSameScreen', true);
			// #endif
		}
	    return style;
	}

	const warpCss = computed(() => {
		var style = '';
        style += 'position:relative;';
        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;';
        }
		return style;
	})

	const swiperWarpCss = computed(() => {
		var style = '';
		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;
	})

	const imgHeight = computed(() => {
		return (diyComponent.value.imageHeight * 2) + 'rpx';
	})

	const swiperIndex = ref(0);

	const swiperChange = e => {
		swiperIndex.value = e.detail.current;
	};

	onMounted(() => {
		refresh();
		// 装修模式下刷新
		if (diyStore.mode == 'decorate') {
			watch(
				() => diyComponent.value,
				(newValue, oldValue) => {
					if (newValue && newValue.componentName == 'ImageAds') {
						refresh();
					}
				}
			)
		}
	});

	const refresh = () => {
		// 装修模式下设置默认图
		if (diyStore.mode == 'decorate') {
			diyComponent.value.list.forEach((item : any) => {
				if (item.imageUrl == '') {
					item.imgWidth = 690;
					item.imgHeight = 330;
				}
			});
		}else{
			uni.removeStorageSync('imageAdsSameScreen');
		}
	}
</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';