diff --git a/components-diy/diy-channel-list.vue b/components-diy/diy-channel-list.vue index beb41b5..bb736b3 100644 --- a/components-diy/diy-channel-list.vue +++ b/components-diy/diy-channel-list.vue @@ -22,6 +22,7 @@ :show-play-btn="value.showPlayBtn" :cover-style="value.coverStyle" :play-btn-style="value.playBtnStyle" + :aspect-ratio="value.aspectRatio" /> @@ -41,6 +42,7 @@ :show-play-btn="value.showPlayBtn" :cover-style="value.coverStyle" :play-btn-style="value.playBtnStyle" + :aspect-ratio="value.aspectRatio" /> @@ -60,6 +62,7 @@ :show-play-btn="value.showPlayBtn" :cover-style="value.coverStyle" :play-btn-style="value.playBtnStyle" + :aspect-ratio="value.aspectRatio" /> @@ -93,6 +96,7 @@ export default { * @property {number} bottomAroundRadius - 底部圆角半径 * @property {Object} ornament - 装饰效果配置 * @property {number} titleLineClamp - 标题显示行数 + * @property {string} aspectRatio - 视频比例,可选值:16:9, 3:4 * @property {boolean} showPlayBtn - 是否显示播放按钮 * @property {Object} coverStyle - 视频封面图样式 * @property {Object} playBtnStyle - 播放按钮样式 diff --git a/components-diy/diy-channel-video.vue b/components-diy/diy-channel-video.vue index 39dcd98..f9c8d91 100644 --- a/components-diy/diy-channel-video.vue +++ b/components-diy/diy-channel-video.vue @@ -2,7 +2,7 @@ - + @@ -12,7 +12,7 @@ :feed-token="value.feedToken" :auto-play="autoPlay" > - + @@ -26,7 +26,7 @@ - + @@ -106,6 +106,17 @@ export default { type: Boolean, default: true }, + /** + * 视频比例 + * @type {string} + * @default '16:9' + * @options '16:9', '3:4' + */ + aspectRatio: { + type: String, + default: '16:9', + validator: (value) => ['16:9', '3:4'].includes(value) + }, /** * 视频封面图样式 * 采用 16:9 比例的响应式高度 @@ -143,7 +154,7 @@ export default { */ canUseEmbedMode() { // #ifdef MP-WEIXIN - const enableEmbedMode = Boolean(this.value?.embedMode) + const enableEmbedMode = Boolean(this.value?.embedMode) && Boolean(this.value?.feedToken) && wechatChannelUtil.isEmbedModeSupported(); console.log('enableEmbedMode', enableEmbedMode); @@ -160,6 +171,22 @@ export default { return wechatChannelConfig.icon.playIcon // #endif return '' + }, + /** + * 计算视频封面类名 + * 根据环境和宽高比生成适当的 CSS 类 + * @returns {Array} + */ + videoCoverClass() { + const classes = []; + // #ifdef MP-WEIXIN + classes.push('mp-weixin'); + // #endif + // #ifndef MP-WEIXIN + classes.push('h5'); + // #endif + classes.push(`ratio-${this.aspectRatio.replace(':', '-')}`); + return classes; } }, methods: { @@ -177,6 +204,35 @@ export default {