自定义链接

功能介绍

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

框架开发的自定义链接

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

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

文件位置：niucloud\app\dict\diy\LinkDict.php

插件开发自定义链接

文件位置：niucloud/addon/shop/app/dict/diy/links.php 关键代码

<?php

return [
    'SHOP_BASE_LINK' => [ // 自定义链接分组关键字key
        'title' => get_lang('dict_diy.shop_link'), // 自定义链接分组名称
        'type' => 'folder', // 类型，folder 表示文件夹，link 表示链接
        'child_list' => [
            [
                'name' => 'SHOP_LINK', // 二级自定义链接分组关键字key
                'title' => get_lang('dict_diy.shop_link_basic'), // 分组名称
                'child_list' => [
                    [
                        'name' => 'SHOP_INDEX', // 链接关键字key
                        'title' => get_lang('dict_diy.shop_link_index'), // 链接名称
                        'url' => '/addon/shop/pages/index', // uni-app 手机端路由地址
                        'is_share' => 1, // 是否支持分享  1：支持，0：不支持
                        'action' => 'decorate' // 是否支持装修，空为不支持，decorate：表示支持装修
                    ]
                ]
            ],
            [
                'name' => 'SHOP_GOODS_SELECT', // 链接关键字key
                'title' => get_lang('dict_diy.shop_link_goods_select'), // 链接名称
                'component' => '/src/addon/shop/views/goods/components/goods-select-content.vue' // 组件路径，自行开发，定义数据源，链接地址
            ]
        ],
    ],
];

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

扩展链接，自定义数据选择组件

如果固定的自定义链接无法满足业务需求，开发者可以根据自身业务需求，自行开发扩展链接，定义数据结构，链接地址等

效果图如下：

商城插件自行开发的选择商品的组件 关键代码

<?php

return [
    'SHOP_BASE_LINK' => [
        'title' => get_lang('dict_diy.shop_link'),
        'type' => 'folder', // 类型，folder 表示文件夹，link 表示链接
        'child_list' => [
            [
                'name' => 'SHOP_GOODS_SELECT',
                'title' => get_lang('dict_diy.shop_link_goods_select'),
                'component' => '/src/addon/shop/views/goods/components/goods-select-content.vue'
            ]
        ]
    ]
];

goods-select-content.vue组件代码参考

组件必须要定义getData方法，暴露到外层，数据结构要保持一致

关键代码

const getData = () => {
    // todo 编写业务代码
    return {
        name: 'SHOP_GOODS_DETAIL', // 自定义链接关键字key
        title: '', // 链接名称
        url: `/addon/shop/pages/goods/detail?goods_id=${goods_id}`, // 链接地址
        action: '', // 是否支持装修，空为不支持，decorate：表示支持装修
        goodsIds: goodsIds.value
    }
}

defineExpose({
    getData
})

效果图

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

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

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

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

定义存储自定义链接的字段

组件需要定义存储自定义链接的字段。例如，link（名称可以修改）。注意：一定要加上 name = ""，否则php空数组将会转换成JavaScript空对象，导致数据绑定出现问题

"link" => [
    "name" => ""
]

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

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

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

效果图

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

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