在使用莫佬的uni-halo 2.0时,我注意到友联页面存在一个问题:详细描述页面无法正常弹出,只能复制链接地址。因此,我对此进行了相应的调整。

莫佬在最新版本中已经解决了这个问题。本文档旨在记录这些修改,并为其他用户提供参考。

修改步骤:

确保 @click 事件触发 fnOnLinkEvent 方法,并传入正确的 link 对象。

修改 fnOnLinkEvent 方法,以正确更新 detail.showdetail.data

更新模板中的点击事件,以使用 fnOnLinkEvent 方法。

修改内容:

更新模板中的点击事件:

确保模板中的 @click 事件调用 fnOnLinkEvent 方法。

彩色版:

<view v-if="!globalAppSettings.links.useSimple" class="info flex pt-24 pb-24 pl-12 pr-12"
      :class="{ 'border-b-1': index != dataList.length - 1 }" @click="fnOnLinkEvent(link)">

简洁版:

<view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnOnLinkEvent(link)">

修改 fnOnLinkEvent 方法:

确保 fnOnLinkEvent 方法正确设置 detail.datadetail.show

methods: {
    fnOnLinkEvent(link) {
        this.detail.data = {
            logo: link.spec.logo,
            name: link.spec.displayName,
            id: link.metadata.name,
            team: link.spec.groupName,
            url: link.spec.url,
            description: link.spec.description
        };
        this.detail.show = true;
    },
    // 其他方法...
}

验证数据绑定:

确保 tm-poup 组件正确绑定到 detail.showdetail.data

<!-- 详情弹窗 -->
<tm-poup v-model="detail.show" :width="640" height="auto" position="center" :round="6">
    <view class="poup pa-36">
        <view class="info flex">
            <view class="poup-logo bg-gradient-amber-accent pa-4 shadow-24">
                <image class="poup-logo_img" :src="detail.data.logo" mode="aspectFill"></image>
            </view>
            <view class="pl-24 info-detail">
                <view class="poup-name text-size-lg text-weight-b">{{ detail.data.name }}</view>
                <view class="poup-tag ml--10">
                    <tm-tags color="bg-gradient-amber-accent" size="n" model="fill">
                        ID:{{ detail.data.id }}
                    </tm-tags>
                    <tm-tags color="bg-gradient-light-blue-lighten" size="n" model="fill">
                        {{ detail.data.team || '暂未分组' }}
                    </tm-tags>
                </view>
                <view class="poup-link text-size-m" @click="fnCopyLink(detail.data)">
                    <text class="text-orange">{{ detail.data.url }}</text>
                    <text class="iconfont icon-copy text-size-s ml-6 text-grey"></text>
                </view>
            </view>
        </view>

        <view class="poup-desc mt-20">
            博客简介:{{ detail.data.description || '这个博主很懒,没写简介~' }}
        </view>

        <!-- 博客预览图 -->
        <view class="mt-24">
            <tm-images :width="568" :round="2" :src="calcSiteThumbnail(detail.data.url)"
                       mode="aspectFill"></tm-images>
        </view>
    </view>
</tm-poup>

总结

关键更改内容包括:

更新模板中的 @click 事件,以使用 fnOnLinkEvent(link)。

修改 fnOnLinkEvent 方法,以正确设置 detail.data 和 detail.show。