1.首先去官网查看使用流程,得到组件后放入项目代码
2.注意事项:checkFollow 设置为true后,组件不会渲染。如要渲染组件,需把 checkFollow 设置为false并且重新挂载组件(通过 a:if ,先设置为false再设置为true)。
3.因为样式不能调整,我采用把它覆盖在自定义按钮上并将life-follow样式设为透明,实际操作的是life-follow,展示的是自定义的按钮
<life-follow v-if="show":checkFollow="checkFollow" @checkFollow="checkFollowCb($event)" @close="closeCb"class="life-button-follow" sceneId="xxxx"/>
data(){return{
show:true,//这个变量用来重新挂载组件(因为组件在关注一次之后不会再触发回调)
isFollowed:false,//这个变量我用来展示自定义按钮样式中的是否关注
checkFollow:true,// 通过组件获取关注状态。}},
checkFollowCb(e){// e.detail对象里会有followed字段,可以用来判断关注状态
console.log('call back data: ', e);const{ followed, closeCount}= e.detail// 把checkFollow、show都置为falsethis.show=falsethis.checkFollow=false;this.isFollowed=followed;//重新展示组件setTimeout(()=>{this.show=true;});},closeCb(e){
console.log('关闭关注浮层时 触发回调: ', e);const{ followed, closeCount}= e&& e.detailthis.isFollowed= followed;this.show=true;if(!followed){this.show=false;this.checkFollow=false;setTimeout(()=>{this.show=true;});}}