vue实现一个鼠标滑动预览视频封面组件（精灵图版本）-六虎

携手创作，一起生长！这是我参加「日新计划 8 月更文应战」的第7天，点击检查活动详情

说在前面

上上个星期写了一篇文章，记载了怎样经过纯前端完成一个鼠标滑动预览视频封面的vue组件，不少人跟我反应说那样完成的作用不太好，用户体会感较差，也给了我一个新的完成计划，所以现在我在上上星期完成的组件基础上增加了运用精灵图的展现方法。

作用预览

B站作用

组件作用

体会地址

jyeontu.xyz/jvuewheel/#…

组件完成

这儿只对本次新增的精灵图形式进行介绍，其他当地的详细完成能够检查这一篇文章–>《vue完成一个鼠标滑动预览视频封面组件》

精灵图生成

什么是精灵图

css sprite也叫精灵图or雪碧图，是一种网页图片运用处理方法。它允许你将一个页面涉及到的所有的零散图片集合到一张大图中。这样一来，当访问该页面时，就由本来的多次请求变为一次请求。客户端每显现一张图片都会向服务器发送一次请求，图片越多请求越多，推迟的可能性就越大，同时对服务器会形成压力。所以页面中假如有多个icon（小图标）时，引荐运用精灵图。

简略来说，就是将几张较小的图片放在一张大图上。

长处

1、削减网页的http请求，然后提高网页的功能。
2、削减图片的字节。

原理

1、需求一个设置好宽高的容器。
2、经过background-img引进背景图。
3、经过background-position将背景图移动到需求的方位。

精灵图制造

这儿我运用了自己制造的一个node小东西来生成，对改小东西有兴趣的能够看看我的这篇文章–>《node制造一个视频帧长图生成器》，经过这个东西，咱们能够生成下面这么一张图片。

组件形式切换

现在的组件是有两种展现形式，这儿我经过一个参数来操控器展现的形式。

如上图，这儿增加了一个设置封面精灵图的参数，假如该参数有值，则该组件的展现方法为运用精灵图进行展现，否则则为旧形式，即客户端截图展现。

精灵图展现

html

<div
    v-if="coverLongImg"
    :id="uid + '-cover-long-img-box'"
    class="cover-long-img-box"
    @mousemove="imgHover"
    @mouseleave="hoverOut"
    @click="coverClick"
>
    <img
        :id="uid + '-cover-long-img'"
        alt=""
        :src="coverLongImg"
        class="cover-long-img"
    />
</div>

.cover-long-img-box {
    overflow: hidden;
    .cover-long-img {
        position: relative;
    }
}

如上代码，咱们运用一个div作为精灵图的容器，后面咱们能够经过修正精灵图的定位来完成图片的动态切换作用。

封面动态切换

监听鼠标移动事情

监听鼠标的mousemove事情。

<div
    v-if="coverLongImg"
    :id="uid + '-cover-long-img-box'"
    class="cover-long-img-box"
    @mousemove="imgHover"
    @mouseleave="hoverOut"
    @click="coverClick"
>
    <img
        alt=""
        :src="coverLongImg"
        class="cover-long-img"
        :id="uid + '-cover-long-img'"
    />
</div>

修正精灵图定位

经过当时鼠标的坐标，能够计算精灵图应该进行的位移长度，详细代码如下：

coverLongImgChang(e, coverLongImg) {
    const coverLongImgBox = document.getElementById(
        this.uid + "-cover-long-img-box"
    );
    if (coverLongImg.src != this.coverLongImg) {
        coverLongImg.setAttribute("src", this.coverLongImg);
    }
    const w = coverLongImgBox.offsetWidth / this.stepNums;
    const x = e.offsetX - Math.abs(coverLongImg.offsetLeft);
    const index = Math.min(
        Math.max(Math.ceil(x / w), 1),
        this.stepNums
    );
    this.progressValue = index;
    coverLongImg.style.right =
        (index - 1) * (coverLongImg.offsetWidth / this.stepNums) + "px";
}

展现视频时长

如上图，组件右下角增加了视频长度的显现，当然不想显现或许想自己编写样式展现的同学能够经过showDuration这个参数来进行操控。

插槽展现视频信息

如上图，组件下方增加了一个自定义插槽区域，能够增加自己想要展现的内容，如下代码，咱们能够增加播放量和弹幕数的展现。

<j-video-cover
    class="video"
    :videoUrl="videoUrl"
    stepNums="15"
    :coverLongImg="coverLongImg"
    :height="'206px'"
    :width="'384px'"
>
    <template v-slot:video-info-slot>
        <span style="margin-left:1em;font-size:medium;">
            <i class="el-icon-video-play"></i>
            <span style="margin-left:0.1em;">171.4万</span>
        </span>
        <span style="margin-left:1em;font-size:medium;">
            <i class="el-icon-chat-line-square"></i>
            <span style="margin-left:0.1em;">6302</span>
        </span>
    </template>
</j-video-cover>

组件库引用

这儿我将这个组件打包进了自己的一个组件库，并将其发布到了npm上，有需求的同学也能够直接引进该组件进行运用。
引进教程能够看这儿：jyeontu.xyz/jvuewheel/#…
引进后即可直接运用。

源码地址

组件库已开源，想要检查完好源码的能够到 gitee 检查，自己也整理了相关的文档对其进行了简略介绍，详细如下：

组件文档

jvuewheel:jyeontu.xyz/jvuewheel/#…

Gitee源码

Gitee源码：gitee.com/zheng_yongt…

觉得有协助的同学能够协助给我点个star，感激不尽~~~
有什么想法或许改进能够给我提个pr，非常欢迎~~~
有什么问题都能够在谈论告诉我~~~

往期精彩

node封装一个图片拼接插件

基于inquirer封装一个操控台文件选择器

node封装一个操控台进度条插件

vue完成一个鼠标滑动预览视频封面组件

暗码太多不知道怎么记载？不如自己写个暗码箱小程序

微信小程序完成一个手势图画锁组件

vue封装一个弹幕组件

为了学（mo）习（yu），我竟开发了这样一个插件

程序员的浪漫之——情侣日常小程序

vue简略完成词云图组件

说在后面

这儿是JYeontu，喜爱算法，GDCPC打过卡；酷爱羽毛球，大运会打过酱油。毕业一年，两年前端开发经验，现在担任H5前端开发，算法业余爱好者,有空会刷刷算法题，平常喜爱打打羽毛球，也喜爱写些东西，既为自己记载，也期望能够对咱们有那么一丢丢的协助，写的不好望多多体谅，写错的当地望指出，定会认真改进，在此谢谢咱们的支撑，咱们下文再见。

vue实现一个鼠标滑动预览视频封面组件（精灵图版本）