创建自定义页面


发布于 2025-02-24 / 10 阅读 / 0 评论 /
路径:组件/app/dict/div/links.php <?php return [ 'LHHD_XDYXLM_TITLE' => [ 'title' => get_lang('dict_diy.lhhd_xdyxlm_title'), 'child_li

路径:组件/app/dict/div/links.php

<?php

return [
    'LHHD_XDYXLM_TITLE' => [
        'title' => get_lang('dict_diy.lhhd_xdyxlm_title'),
        'child_list' => [
            [
                'name' => 'LHHD_XDYXLM_HOME_PAGE',
                'title' => get_lang('dict_diy.lhhd_xdyxlm_home_page'),
                'url' => '/addon/lhhd_xdyxlm/pages/home/index',
                'is_share' => 1,
                'action' => ''//decorate支持装修 空不装修
            ]
            
        ]
    ],
];

后台路径:组件/views/diy/components/edit_lhhd_xdyxlm_div_home_carousel_image.vue

<template>
	<!-- 内容 -->
	<div class="content-wrap" v-show="diyStore.editTab == 'content'">
		<div v-for="(item, index) in diyStore.editComponent.data" :key="index">
			<el-form label-width="80px">
				<el-form-item label="图片">
					<upload-image v-model="item.image" :limit="1" />
				</el-form-item>
				<el-form-item label="标题">
					<el-input v-model.trim="item.title" placeholder="请输入标题" clearable />
				</el-form-item>
				<el-form-item label="排序">
					<el-input-number v-model="item.sort" :min="0" placeholder="请输入排序" />
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="item.type" placeholder="请选择类型">
						<el-option label="商品" :value="1"></el-option>
						<el-option label="图文" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="参数">
					<el-input v-model.trim="item.link" placeholder="请输入参数" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="danger" @click="deleteItem(index)" :disabled="diyStore.editComponent.data.length <= 1">删除</el-button>
				</el-form-item>
			</el-form>
			<el-divider border-t-2 border-dashed border-gray-300></el-divider>
		</div>
		<!-- 确保至少有一个 -->
		<el-button type="primary" @click="addNewItem" style="width: 100%;">添加轮播图</el-button>
		<!-- {{ diyStore.editComponent.data }} -->
	</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 = () => {
    diyStore.editComponent.data.push({
        image: '',
        title: '',
        link: '',
        sort: 0,
        type: ''
    })
}

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

defineExpose({})
</script>

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

uni-app/src/pages.json

{
					"path": "lhhd_xdyxlm/pages/circle/index",
					"style": {
						"navigationBarTitleText": "发圈",	
						"navigationBarBackgroundColor": "#E1E3FF"
					}
				},



是否对你有帮助?

评论