我做了一个网易云音乐外链播放器的Vue组件 很nice

话不多说，上视频：

/video/BV1p44y1M7KC/

介绍

起因是我的一个小项目用到了网易云音乐的外链播放器；于是将它从项目里剥离出来做成一个Vue组件；并开源献给网友们。

它能使外链播放器很优雅的浮动在页面上，支持鼠标和触摸屏拖动、自动贴边；不占空间支持收缩/展开。

对细节方面做的很漂亮，配合Vue可以实现全站无刷新音乐播放功能。

需要的朋友拿走，有能力的小伙伴可以尝试将它与VuePress配合服用；一个更优雅的博客就诞生了。

具体长什么样子这里就来张图吧，其他的看视频

使用

依赖：它需要使用npm安装jquery和ElementUI；这两个可以单独引入这个组件文件（jquery我已经引入好了；只需要再引入ElementUI）

使用方面：上代码

这是demo，在App.vue引入时的代码，当然也可以在其他任何Vue页面引入该组件。

<template><div id="app"><!--url是外链播放器的音乐地址--><NeteaseCloudPlayForVue url="///outchain/player?type=2&id=1817694137&auto=1&height=66"/></div></template><script>//引入组件文件import NeteaseCloudPlayForVue from './components/NeteaseCloudPlayForvue.vue'export default {name: 'App',//禁用 Attribute 继承inheritAttrs: false,//组件注册components: {NeteaseCloudPlayForVue},}</script>

组件代码：

<template><div><divv-bind:class="NeteaseCloudPlayIframeClass"v-bind:style="NeteaseCloudPlayIframeStyle"@mousedown="NeteaseCloudPlayIframeMouseDownOrUp = true"@mouseup="NeteaseCloudPlayIframeMouseDownOrUp = false"@touchend="NeteaseCloudPlayIframeMouseDownOrUp = false"@touchstart="NeteaseCloudPlayIframeMouseDownOrUp = true"@touchmove.prevent.stop="NeteaseCloudPlayIframeForTouchClick($event)"><el-row><el-col :span="NeteaseIconSpan"><divv-bind:class="NeteaseCloudPlayIframeClassIcon"@mousedown="NeteaseShowClick"@mouseup="NeteaseIconUp = true"><el-row><el-col :pull="4" :span="1"><i v-bind:class="NeteaseIconClass"></i></el-col></el-row></div></el-col><el-col :span="23"><divv-bind:class="NeteaseCloudPlayIframeDivClass"v-bind:style="NeteaseCloudPlayIframeDivStyle"><iframeborder="0"frameborder="no"height="86"marginheight="0"marginwidth="0"v-bind:src="url"v-bind:style="NeteaseCloudPlayIframeIframeStyle"width="280"></iframe></div></el-col></el-row></div></div></template><script>import $ from "jquery";//此处可以单独引入ElementUI，如果你的项目不需要全局引入的话export default {name: 'NeteaseCloudPlayForVue',props: {url: String},data() {return {NeteaseCloudPlayIframeClass: "NeteaseCloudPlayIframe",NeteaseCloudPlayIframeStyle: "left:60px;top:40%;",NeteaseCloudPlayIframeMouseDownOrUp: false,NeteaseCloudPlayIframeClassIcon: "NeteaseCloudPlayIframeIcon",NeteaseCloudPlayIframeDivStyle: "left:-270px;",NeteaseCloudPlayIframeWindowWidth: 0,NeteaseIconSpan: 1,NeteaseIconClass: "el-icon-arrow-left",NeteaseCloudPlayIframeDivClass: "NeteaseCloudPlayIframeDiv",NeteaseGPSLeftOrRight: true,NeteaseGPSTop: 0,NeteaseGPSLeft: 0,NeteaseIfMove: false,NeteaseIconUp: false,NeteaseLockIframeIframeStyle: true,NeteaseCloudPlayIframeIframeStyle:"mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 1) 0%);",};},methods: {NeteaseCloudPlayIframeClick(event) {var e = event || window.event;var ValueX = e.pageX || e.clientX + document.body.scroolLeft;var ValueY = e.pageY || e.clientY + document.body.scrollTop;var x = ValueX - 10;var y = ValueY - 45;if (easeCloudPlayIframeMouseDownOrUp == true) {if (easeCloudPlayIframeClass != "NeteaseCloudPlayIframe") {easeCloudPlayIframeClass = "NeteaseCloudPlayIframe";}var HalfWindowWidth = easeCloudPlayIframeWindowWidth / 2;var ToCenterLong = ValueX - HalfWindowWidth;if (ToCenterLong > 0) {easeCloudPlayIframeStyle ="left:" + x + "px;" + "top:" + y + "px;";easeGPSLeft = x;easeGPSTop = y;if (ToCenterLong < 270) {if (easeGPSLeftOrRight != false) {easeIconFlipClick();easeGPSLeftOrRight = false;if (easeLockIframeIframeStyle == false) {easeCloudPlayIframeDivClass ="NeteaseCloudPlayIframeDiv NeteaseCloudPlayIframeTransition";easeCloudPlayIframeDivStyle = "left:-270px;";} else {easeCloudPlayIframeDivClass ="NeteaseCloudPlayIframeDiv";easeCloudPlayIframeDivStyle = "left:0px;";}}}} else {easeCloudPlayIframeStyle ="left:" + x + "px;" + "top:" + y + "px;";easeGPSLeft = x;easeGPSTop = y;if (HalfWindowWidth - ValueX < 270) {if (easeGPSLeftOrRight != true) {easeIconFlipClick();easeGPSLeftOrRight = true;if (easeLockIframeIframeStyle == false) {easeCloudPlayIframeDivClass ="NeteaseCloudPlayIframeDiv NeteaseCloudPlayIframeTransition";easeCloudPlayIframeDivStyle = "left:0px;";} else {easeCloudPlayIframeDivClass ="NeteaseCloudPlayIframeDiv";easeCloudPlayIframeDivStyle = "left:-270px;";}}}}easeIfMove = true;}},NeteaseCloudPlayIframeForTouchClick(event) {var ValueX = event.targetTouches[0].clientX;var ValueY = event.targetTouches[0].clientY;var x = ValueX - 10;var y = ValueY - 45;if (easeCloudPlayIframeMouseDownOrUp == true) {if (easeCloudPlayIframeClass != "NeteaseCloudPlayIframe") {easeCloudPlayIframeClass = "NeteaseCloudPlayIframe";}var HalfWindowWidth = easeCloudPlayIframeWindowWidth / 2;var ToCenterLong = ValueX - HalfWindowWidth;if (ToCenterLong > 0) {easeCloudPlayIframeStyle ="left:" + x + "px;" + "top:" + y + "px;";easeGPSLeft = x;easeGPSTop = y;if (ToCenterLong < 270) {if (easeGPSLeftOrRight != false) {easeIconFlipClick();easeGPSLeftOrRight = false;if (easeLockIframeIframeStyle == false) {easeCloudPlayIframeDivClass ="NeteaseCloudPlayIframeDiv NeteaseCloudPlayIframeTransition";easeCloudPlayIframeDivStyle = "left:-270px;";} else {easeCloudPlayIframeDivClass ="NeteaseCloudPlayIframeDiv";easeCloudPlayIframeDivStyle = "left:0px;";}}}} else {easeCloudPlayIframeStyle ="left:" + x + "px;" + "top:" + y + "px;";easeGPSLeft = x;easeGPSTop = y;if (HalfWindowWidth - ValueX < 270) {if (easeGPSLeftOrRight != true) {easeIconFlipClick();easeGPSLeftOrRight = true;if (easeLockIframeIframeStyle == false) {easeCloudPlayIframeDivClass ="NeteaseCloudPlayIframeDiv NeteaseCloudPlayIframeTransition";easeCloudPlayIframeDivStyle = "left:0px;";} else {easeCloudPlayIframeDivClass ="NeteaseCloudPlayIframeDiv";easeCloudPlayIframeDivStyle = "left:-270px;";}}}}easeIfMove = true;}},NeteaseCloudPlayIframeWindowWidthClick() {easeCloudPlayIframeWindowWidth = $(window).width();},NeteaseIconFlipClick() {if (easeIconClass == "el-icon-arrow-left") {easeIconClass = "el-icon-arrow-right";} else {easeIconClass = "el-icon-arrow-left";}},NeteaseHelpToEdge() {if (easeCloudPlayIframeMouseDownOrUp == false) {if (easeIfMove == true) {if (easeCloudPlayIframeClass !="NeteaseCloudPlayIframe NeteaseCloudPlayIframeTransition") {easeCloudPlayIframeClass ="NeteaseCloudPlayIframe NeteaseCloudPlayIframeTransition";}if (easeGPSLeftOrRight == true) {easeCloudPlayIframeStyle ="left:" + 60 + "px;" + "top:" + easeGPSTop + "px;";} else {easeCloudPlayIframeStyle ="left:" +(easeCloudPlayIframeWindowWidth - 80) +"px;" +"top:" +easeGPSTop +"px;";}}}},NeteaseShowClick() {easeIconUp = false;setTimeout(() => {if (easeIconUp == true) {easeCloudPlayIframeDivClass ="NeteaseCloudPlayIframeDiv NeteaseCloudPlayIframeDivTransition";let i;let x;let Show;let NotShow;if (easeGPSLeftOrRight == true) {if (easeCloudPlayIframeDivStyle != "left:-270px;") {easeIconFlipClick();easeLockIframeIframeStyle = true;easeCloudPlayIframeDivStyle = "left:-270px;";i = 0;NotShow = setInterval(() => {i++;x = i + 20;if (i == 100) {x = 100;}easeCloudPlayIframeIframeStyle ="mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) " +i +"%, rgba(0, 0, 0, 1) " +x +"%);";if (i == 100) {clearInterval(NotShow);}}, 10);} else {easeIconFlipClick();easeLockIframeIframeStyle = false;easeCloudPlayIframeDivStyle = "left:0px;";i = 100;Show = setInterval(() => {i--;x = i + 20;if (i == 0) {x = 0;}easeCloudPlayIframeIframeStyle ="mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) " +i +"%, rgba(0, 0, 0, 1) " +x +"%);";if (i == 0) {clearInterval(Show);}}, 10);}} else {if (easeCloudPlayIframeDivStyle != "left:0px;") {easeIconFlipClick();easeLockIframeIframeStyle = true;easeCloudPlayIframeDivStyle = "left:0px;";i = 0;NotShow = setInterval(() => {i++;x = i + 20;if (i == 100) {x = 100;}easeCloudPlayIframeIframeStyle ="mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) " +i +"%, rgba(0, 0, 0, 1) " +x +"%);";if (i == 100) {clearInterval(NotShow);}}, 10);} else {easeIconFlipClick();easeLockIframeIframeStyle = false;easeCloudPlayIframeDivStyle = "left:-270px;";i = 100;Show = setInterval(() => {i--;x = i + 20;if (i == 0) {x = 0;}easeCloudPlayIframeIframeStyle ="mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) " +i +"%, rgba(0, 0, 0, 1) " +x +"%);";if (i == 0) {clearInterval(Show);}}, 10);}}}}, 200);},},mounted() {$(() => {$(window).mousemove(easeCloudPlayIframeClick);easeCloudPlayIframeWindowWidthClick();$(window).resize(easeCloudPlayIframeWindowWidthClick);$(window).mouseup(easeHelpToEdge);$(window).on("touchend", easeHelpToEdge);});}}</script><style scoped>.NeteaseCloudPlayIframe {position: fixed;width: 0;}.NeteaseCloudPlayIframeIcon {user-select: none;top: 10px;position: absolute;height: 66px;width: 18px;background-color: #dcdfe6;z-index: 1;}.NeteaseCloudPlayIframeDiv {position: relative;}.NeteaseCloudPlayIframeIcon i {position: absolute;top: 22px;font-size: 25px;color: #606266;}.NeteaseCloudPlayIframeTransition {transition: all 1s ease;}.NeteaseCloudPlayIframeDivTransition {transition: all 1s linear;}</style>

代码没加多少注释哈，我认为命名已经很明确了。

感谢🙏你看到我的文章，希望能帮到你。