[发明专利]一种视频播放组件开发方法及装置

说明书

本发明涉及组件开发方法及装置，公开了一种视频播放组件开发方法及装置。通过建立了第一页面组件以及第二页面组件，并将第一页面组件与第二页面组件设置为父子嵌套关系，实现了视频列表展示页面和视频播放页面独立管理，又通过父子组件相互传值实现数据与消息的传递。这个方法的优点是，避免在一个组件中处理大量的逻辑，而且两个页面组件都可以复用。

技术领域

本发明涉及组件开发方法及装置，具体涉及一种视频播放组件开发方法及装置。

背景技术

Element-UI组件库是饿了么前端团队推出的一款基于Vue.js2.0的桌面端UI组件库，提供了很多可复用的组件，并提供了配套设计资源，能够帮助开发者的页面快速成型。对于每一个组件，其文档上都有效果示例与代码，通过这样的方式，来解决大量页面采用同样风格和结构时，通过简单的配置即可生成这个页面。

目前Element-UI组件库中，还没有涉及到视频播放相关的组件，当在项目中需要实现播放视频的需求时，一般都是引入外部播放器插件，比如Vue-video-player。Vue-video-player组件能够实现视频播放的功能，但是引入项目中后，需要对样式进行单独的修改，封装成与Element-UI组件风格效果一致的组件。如果还需要根据视频封面图片，点击之后播放视频，页面单独处理将会更复杂。

因此现有的Element-UI组件库没有视频播放组件。

发明内容

本发明的目的在于提供一种视频播放组件开发方法及装置，用以解决现有技术中的Element-UI组件库没有视频播放组件的问题。

为了实现上述任务，本发明采用以下技术方案：

一种视频播放组件开发方法，用于在项目工程文件中加载Element-UI视频播放组件，包括如下步骤：

步骤1、在待安装视频播放组件的项目工程文件中全局安装vue-video-player插件，获得插件安装后的项目工程文件；

所述的插件安装后的项目工程文件包括页面入口子文件、webpack生产环境核心配置子文件以及components公共组子文件夹；

步骤2、在所述页面入口子文件中引入vue-video-player插件以及插件样式后，在所述的webpack生产环境核心配置子文件中配置ProvidePlugin参数，获得配置后的项目工程文件；

步骤3、在配置后的项目工程文件的components公共组子文件夹中将vue-video-player插件封装成Element-UI视频播放组件并加载至配置后的项目工程文件中。

所述的在配置后的项目工程文件的components公共组子文件夹中将vue-video-player插件封装成Element-UI视频播放组件，具体包括：

步骤31、在所述的components公共组子文件夹中新建两个vue格式文件，获得第一页面组件以及第二页面组件，所述的第一页面组件为第二页面组件的父组件；

所述的第一页面组件以及第二页面组件均包括template标签、script标签以及style标签；

步骤32、在所述的第一页面组件的template标签中设置图片展示容器；在所述的第一页面组件的script标签中获取所需展示视频的数据列表，并将数据列表传递给第二页面组件；在所述的第一页面组件的style标签中设置所述图片展示容器的样式，获得设置后的第一页面组件；

步骤33、在所述的第二页面组件的template标签中设置视频展示容器；在所述的第二页面组件的script标签中将第一页面组件传递过来的数据与视频展示容器绑定；在所述的第二页面组件的style标签中设置所述视频展示容器的样式，获得设置后的第二页面组件；