自定义组件

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

<?php

return [
    'LHHD_MAP_DIV_HOME' => [
        'title' => get_lang('dict_diy.lhhd_map_home'),
        'list' => [
            'LhhdMapHome' => [
                'title' => '首页',
                'icon' => 'iconfont iconhuiyuanqiandaopc',
                'path' => 'edit-lhhd-map-home',
                'support_page' => [],
                'uses' => 1,
                'sort' => 10001,
                'value' => [],
                // 组件属性
                '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" => 0, // 左右边距
                    ],
                ],
            ],
            
        ],
    ],

];

小程序路径：uni-app/src/addon/lhhd_map/components/diy/lhhd-map-home/index.vue

<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 == 'LhhdMapHome'">
			    <diy-lhhd-map-home ref="diyLhhdMapHomeRef" :component="component" :global="data.global" :index="index" :scrollBool="diyGroup.componentsScrollBool.LhhdMapHome" />
			</template>

   import diyLhhdMapHome from '@/addon/lhhd_map/components/diy/lhhd-map-home/index.vue'

src/addon/lhhd_map/views/diy/components/edit-lhhd-map-home.vue 后台装修

<template>
	<!-- 内容 -->
	<div class="content-wrap" v-show="diyStore.editTab == 'content'">
		固定组件
	</div>

	<!-- 样式 -->
	<div class="style-wrap" v-show="diyStore.editTab == 'style'">
		<!-- 组件样式 -->
			<slot name="style"></slot>
	</div>
</template>

<script lang="ts" setup>
import useDiyStore from '@/stores/modules/diy'

const diyStore = useDiyStore()
diyStore.editComponent.ignore = ['componentBgUrl'] // 忽略公共属性

const addNewItem = () => {
   
}

const deleteItem = (index: number) => {
    if (diyStore.editComponent.data.length > 1) {
        diyStore.editComponent.data.splice(index, 1)
    }
}

defineExpose({})
</script>

<style lang="scss" scoped></style>