前言

在别人的博客中看见了一个展示自己bilibili账号的组件，看着挺不错的，自己就用vue尝试写了一个。

一、效果展示

其实写这个东西并不难，自己写的也是非常简陋，还有挺多细节没有实现，不过基本的功能还是有的，剩下的以后再说。

二、源代码

代码如下（示例）：

<template><div class="bilibili"><!--头像部分--><div class="head"><!--头像--><div style="left: 19px;top:16px;position: absolute;z-index: 1;"><el-avatar :size="65" :src="infom.face"></el-avatar></div><!--头像框--><div style="left: 0;top:0;position: absolute;z-index: 2;"><img :src="infom.pendant.image" height="100px"></div></div><div class="name"><!--昵称-->{{infom.name}}<!--会员--><div class="vip" v-if="have_vip">{{infom.vip.label.text}}</div><!--关注数量--><div class="num">关注数：{{this.mystate.following}}</div></div><!--等级--><div class="level">LV{{infom.level}}</div><a :href=this.mes+this.mid :underline="false" target="_blank"><div class="mes" @mouseover="change" @mouseout="unchange" id="mes">私信</div></a><a :href="aten+mid" target="_blank"><div class="atten" id="atten">关注{{this.mystate.follower}}</div></a><div></div></div>
</template><script>
export default {name: "bilibili",data(){return{aten:'https://space.bilibili.com/',mes:'https://message.bilibili.com/#/whisper/mid',mid:'',//你的bilibili idinfom:'',mystate:'',have_vip:false}},mounted() {this.$axios.get("/x/space/acc/info?mid="+this.mid).then((res)=>{this.infom = res.data.data;if(this.infom.vip.label.text){this.have_vip =true;}});this.$axios.get("/x/relation/stat?vmid="+this.mid).then((res)=>{this.mystate = res.data.data;})},methods:{change(){document.getElementById('mes').style.backgroundColor='#fb7299';document.getElementById('mes').style.color='#ffffff';},unchange(){document.getElementById('mes').style.backgroundColor='#ffffff';document.getElementById('mes').style.color='#fb7299';}}
}
</script><style scoped>
.bilibili{height: 200px;width: 240px;margin-bottom: 20px;position: relative;/*background-color: #b8b8ba;*/
}
.head{height: 80px;width: 80px;left: 0;top:0;float: left;position: relative;
}
.name{top:20px;margin-left: 15px;position: relative;float: left;color: rgb(251, 114, 153);
}
.vip{position: relative;top:5px;width: 85px;height: 18px;color: #FFFFFF;background-color: #FB7299;border-radius: 4px;
}
.level{float: left;top:20px;font-size: 10px;position: relative;margin-left: 10px;height: 20px;width: 30px;background-color: #ff6c00;color: #ffffff;line-height: 20px;border-radius: 5px;
}
.num{color: #bbbbbb;position: relative;top: 10px;font-size: 5px;
}
.mes{position: absolute;top: 100px;left: 20px;width: 68px;height: 32px;color: rgb(251, 114, 153);background-color: #ffffff;border: 1px solid rgb(251, 114, 153);line-height: 32px;cursor: pointer;border-radius: 5px;
}
.atten{position: absolute;top: 100px;left: 100px;width: 68px;height: 32px;color: #FFFFFF;background-color: #00a1d6;border: 1px solid #00a1d6;line-height: 32px;cursor: pointer;border-radius: 5px;
}
</style>

使用方法

1.设置代理

因为直接用axios请求的话会出现一个跨域问题，所以要先设置一个代理才能正确请求的数据，
找到config目录下的index.js文件

向proxyTable中添加以下内容

proxyTable: {'/api': {target: 'https://api.bilibili.com',changeOrigin: true,  // 是否跨域pathRewrite: {'^/api': ''}}},

再向main.js中添加

axios.defaults.baseURL = '/api'

之后就可以正常请求到数据了。

2.新建vue组件

将代码复制到上面，然后导入该组件就可以使用了。

3.设置自己的bilibili mid

用网页登录bilibili，点击头像进入空间，查看一下mid，再将代码中的mid更改为你的mid就可以了。

后面那一串数字就是mid。

总结

以后再写

使用vue写一个bilibili小组件相关推荐

Vue写一个答题模板组件
组件要求:传入问题id.类型.题目.选项(可不定个数选项) 组件根据传入的数据自动组装成问题,每页展示一个,可选择上一个.下一个.重置或者提交地址:https://github.com/zhangz ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
用JAVA写一个画图小程序（JAVA 大作业）
第一次写博客且是稍微大点的程序看看就行重新写的在这,更加清晰明了:点击进入:用JAVA写一个画图小程序(JAVA 大作业)重排版本设计思路首先我直接去了Windows自带画图程序去实践模拟, ...
用vue写一个计算总价
用vue写一个计算总价点击移除可以删除本项点击加减实现加减总价随着数量增加 <!DOCTYPE html> <html><head><meta char ...
基于 Vue 制作一个猜拳小游戏
目录前言: 项目效果展示: 对应素材: 代码实现思路: 实现代码: 总结: 前言: 在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小游戏吧. 描述: 石头剪子布,是一种 ...
python socket能做什么_用python写一个聊天小程序！和女朋友的专属聊天工具！
原标题:用python写一个聊天小程序!和女朋友的专属聊天工具! 1.UDP简介 Internet协议集支持一个无连接的传输协议,该协议称为用户数据报协议(UDP).UDP为应用程序提供了无需建立就可 ...
[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
[vue] 写出多种定义组件模板的方法
[vue] 写出多种定义组件模板的方法 1.字符串 2.模板字面量 3.<script type="x-template"></script> 4.文件组件 ...

使用vue写一个bilibili小组件

文章目录

前言