1.0.3 • Published 2 years ago
video-card v1.0.3
video-card 视频卡片组件
1 快速开始
npm install video-card --save-dev 或是 npm install video-card -D // 在main.js文件中引入使用后，即可全局调用，模块导入的名称可自定义
import VideoCard from 'video-card'; Vue.use(VideoCard);2 参数说明
| 名称 | 含义 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| cardWidth | 整体卡片宽度 (携单位) | String | '260px' | 支持百分比宽度值 |
| coverHeight | 视频封面高度 (携单位) | String | '120px' | layout若传值'row'，则默认值'150px' |
| clickUrl | 卡片跳转链接 (详情/播放) | String | '' | 若不传，则点击卡片无响应 |
| videoUrl | 视频资源链接 (播放) | String | '' | 若不传，则点击播放图标无响应 |
| coverSrc | 视频封面图地址 | String | '' | 请必须传值，否则影响使用和体验 |
| layout | 内容布局结构 (横/纵) | String | 'column' | 其它允许有效值'row' |
| summary | 自定义概述 | String / Slot | / | 添加如视频名称和简介等信息 |
| footers | 自定义底部 | Slot | / | 添加如上传用户和时间等信息 |
3 使用演示
<VideoCard
:click-url="'https://www.bilibili.com/bangumi/media/md12044/'"
:video-url="'https://www.bilibili.com/bangumi/play/ep386583/'"
:layout="'column'" :card-width="'260px'" :cover-height="'160px'"
:cover-src="'https://img2.baidu.com/it/u=2331037486,790936068&fm=253&fmt=auto&app=138&f=JPG?w=363&h=240'"
:summary="'君之名·你的名字 (中文配音版)'"/>