uni-halo 2.0 插件版修复友链弹窗
AI-摘要
WenWen GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
在使用莫佬的uni-halo 2.0时,我注意到友联页面存在一个问题:详细描述页面无法正常弹出,只能复制链接地址。因此,我对此进行了相应的调整。
莫佬在最新版本中已经解决了这个问题。本文档旨在记录这些修改,并为其他用户提供参考。
修改步骤:
确保 @click 事件触发 fnOnLinkEvent 方法,并传入正确的 link 对象。
修改 fnOnLinkEvent 方法,以正确更新 detail.show 和 detail.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.data 和 detail.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.show 和 detail.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。
- 感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文内容可能来自互联网,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 404N
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果