自定义链接

自定义链接

功能介绍

自定义链接功能支持用户在 DIY 页面装修中为按钮、图片、文字等组件配置点击跳转行为，支持内部页面、外部 URL 和特殊场景的跳转类型，精准且符合业务场景需求  自定义链接会在页面路径功能中显示 

框架开发的自定义链接

系统框架定义了一些自定义链接，同时还会加载插件的自定义链接

如需了解自定义链接的核心原理，开发者可以自行阅读

文件位置：niucloud-core/src/main/resources/core/loader/diy/links.json 

插件开发自定义链接

文件位置：niucloud-addon/shop/src/main/resources/shop/loader/diy/links.json  关键代码：

{
    "SHOP_BASE_LINK": {     // 自定义链接分组关键字key
        "title": "商城系统",    // 自定义链接分组名称
        "type": "folder",   // 类型，folder 表示文件夹，link 表示链接
        "addon_info": {
            "title": "商城",
            "key": "shop"
        },
        "child_list": [
            {
                "name": "SHOP_LINK",    // 二级自定义链接分组关键字key
                "title": "商城链接",    // 分组名称
                "child_list": [
                    {
                        "name": "SHOP_INDEX", // 链接关键字key
                        "title": "商城首页",    // 链接名称
                        "url": "/addon/shop/pages/index",   // uni-app 手机端路由地址
                        "is_share": 1,  // 是否支持分享  1：支持，0：不支持
                        "action": "decorate"    // 是否支持装修，空为不支持，decorate：表示支持装修
                    },
                    {
                        "name": "SHOP_GOODS_CATEGORY",
                        "title": "商品分类",
                        "url": "/addon/shop/pages/goods/category",
                        "is_share": 1,
                        "action": ""
                    }

                ]
            }

        ]
    }
}

开发完成后，添加一个标题组件，点击链接地址，打开链接选择弹框即可看到  

diy-link 框架封装的自定义链接组件

开发者在开发自定义组件的右侧编辑属性组件时，可能需要设置自定义链接的业务场景。此时可以引入系统框架封装的 diy-link 自定义链接选择弹框组件

效果图  如需了解自定义链接的核心原理，开发者可以自行阅读

文件位置：admin/src/components/diy-link/index.vue 

前端调用自定义链接组件的关键代码

diyStore.editComponent 为当前选中装修组件的数据结构

<el-form-item :label="t('link')">
    <diy-link v-model="diyStore.editComponent.link" />
</el-form-item>

效果图 

uni-app 调用自定义链接跳转

框架定义了 diyRedirect 自定义跳转链接方法  diyStore 定义了 toRedirect 自定义链接跳转方法，开发者可以调用  自定义组件中调用自定义链接跳转，代码参考