自定义组件

概述

自定义组件是 NIUCLOUD 框架提供的页面装修功能模块，分为两类：

框架开发的自定义组件：系统内置的组件，如标题、图片广告、图文导航、魔方、文章、热区、公告等基础组件

插件开发的自定义组件：第三方开发者通过插件机制开发的组件，如商城组件等业务组件

所有组件均支持拖拽操作和属性配置，实现可视化页面装修

框架定义的组件

框架开发的自定义组件配置

框架开发的自定义组件配置在 niucloud-core/src/main/resources/core/loader/diy/components.json，如图所示

配置文件是一个 json，其中第一级对应组件分组（如 BASIC），然后对应分组名称(title)，然后 list 列表，其中每一项就是一个组件

图文导航组件

针对图文导航组件进行说明，具体一个组件的字段如下

前端定义组件的编辑属性组件

path 是 edit-graphic-nav，这里指后台 diy 管理端配置的前端代码位置这里的图文导航有很多配置选项，比如横排，竖排，每行显示几个等等都有一个配置，这些配置成功之后会组装成 json 传到后台，同时系统配置也有初始化，这些都在后台的配置文件，具体配置字段多少与开发的组件有关

uni-app 手机端渲染自定义组件

uniapp 作用有两方面，一方面后台配置实时展示，另一方面针对配置后的结果展示在用户端

比如上面图文导航组件名称 GraphicNav，对应 uniapp 的自定义组件名称就是 graphinc-nav，下面就是针对图文导航的文件定义以及页面，文件位置：uni-app/src/app/components/diy/graphic-nav

开发自定义组件步骤

新建 components.json 文件

在 niucloud-addon/mall/src/main/resources/mall/loader/diy/ 目录下，新建 components.json 文件

文件名称必须对应，框架会寻找所有插件下的这个文件，进行加载

前端定义编辑属性组件

代码位置：admin/src/addon/mall/views/site/diy/components

根据 components.json 定义的 path 路径，需要在前端定义编辑属性组件

例如：path 为 edit-mall-goods-list，编辑属性组件文件名称就是：edit-mall-goods-list.vue

edit 编辑属性组件

增加这段代码，即可调用框架封装好的组件公共样式

<!-- 组件样式 -->
<slot name="style"></slot>

组件验证

每个组件可以自定义验证规则，点击保存时会触发

关键代码截图

{
    code: true, // 验证状态，true：通过，false：未通过
    message: '' // 提示信息
}

// 组件验证
diyStore.editComponent.verify = (index: number) => {
    const res = { code: true, message: '' }

    if (diyStore.value[index].source == 'category') {
        if (diyStore.value[index].goods_category == '') {
            res.code = false
            res.message = t('goodsCategoryPlaceholder')
        }
    } else if (diyStore.value[index].source == 'custom') {
        if (diyStore.value[index].goods_ids.length == 0) {
            res.code = false
            res.message = t('goodsPlaceholder')
        }
    }
    return res
}

uni-app 手机端定义渲染组件

目录位置：uni-app/src/addon/mall/components/diy

根据 components.json 定义的组件关键字 key，需要在 uni-app 手机端定义渲染组件

例如：组件关键字 key 为 MallGoodsList 。渲染组件名称就是：mall-goods-list，将驼峰命名改成横杠 - 分割即可。注意：组件文件名称是小写

开发环境下，建议手动修改 diy-group 组件代码，引入自己开发的自定义组件

文件位置：uni-app/src/addon/components/diy/group/index.vue 关键代码

<template v-if="component.componentName == 'MallGoodsList'">
   <diy-mall-goods-list :component="component" :global="data.global" :index="index" />
</template>

import diyMallGoodsList from '@/addon/mall/components/diy/goods-list/index.vue';

完成上面的操作后，点击添加组件，即可看到渲染后的组件效果