ChannelCover 直播间封面图

基础用法

<template>
  <div class="demo-channel-cover">
    <div class="demo-channel-cover__input">
      <plv-input v-model="channelId" placeholder="频道号" />
      <plv-input v-model="title" placeholder="直播间名称" />
    </div>
    <div class="demo-channel-cover__list">
      <div class="demo-channel-cover__large">
        <plv-channel-cover
          :channelId="channelId"
          :title="title"
        />
      </div>
      <div class="demo-channel-cover__medium">
        <plv-channel-cover
          :channelId="channelId"
          :title="title"
        />
      </div>
      <div class="demo-channel-cover__small">
        <plv-channel-cover
          :channelId="channelId"
          :title="title"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      channelId: '1778938',
      title: '互联网科技共赢高峰论坛盛典既创新者安全会议既创新者安全会议',
    };
  }
}
</script>

<style lang="scss" scoped>
.demo-channel-cover__input {
  display: flex;
  margin-bottom: 24px;
  .plv-input {
    width: 400px;
    margin-right: 16px;
  }
}
.demo-channel-cover__list {
  display: flex;
  flex-wrap: wrap;
}
.demo-channel-cover__small {
  width: 274px;
  height: 154px;
  margin-bottom: 24px;
  margin-right: 24px;
}
.demo-channel-cover__medium {
  width: 640px;
  height: 360px;
  margin-bottom: 24px;
  margin-right: 24px;
}
.demo-channel-cover__large {
  width: 720px;
  height: 405px;
  margin-bottom: 24px;
  margin-right: 24px;
}
</style>

显示代码

封面图图片

以下示例分别为：正常、图裂，过滤情况。

<template>
  <div class="demo-channel-cover">
    <div class="demo-channel-cover__list">
      <div class="demo-channel-cover__small">
        <plv-channel-cover
          :channelId="channelId"
          :title="title"
          splash-img="https://liveimages.videocc.net/uploaded/images/2021/05/fy7vj4svur.png"
        />
      </div>
      <div class="demo-channel-cover__small">
        <plv-channel-cover
          :channelId="channelId"
          :title="title"
          splash-img="https://liveimages.videocc.net/uploaded/这是张不存在的图片.png"
        />
      </div>
      <div class="demo-channel-cover__small">
        <plv-channel-cover
          :channelId="channelId"
          :title="title"
          splash-img="https://livestatic.videocc.net/assets/wimages/default_guide.png"
          :check-splash-img="checkSplashImg"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      channelId: '1778938',
      title: '互联网科技共赢高峰论坛盛典既创新者安全会议既创新者安全会议',
      checkSplashImg: (splashImg) => {
        return splashImg.replace(/^([a-z]+:)?\/\//, '') !== 'livestatic.videocc.net/assets/wimages/default_guide.png';
      },
    };
  }
}
</script>

<style lang="scss" scoped>
.demo-channel-cover__list {
  display: flex;
  flex-wrap: wrap;
}
.demo-channel-cover__small {
  width: 274px;
  height: 154px;
  margin-right: 24px;
}
</style>

显示代码

Attributes

参数	说明	类型	可选值	默认值
channel-id	频道号	String Number	-	-
title	标题	String	-	-
splash-img	引导图地址	String	-	-
check-splash-img	检查引导图地址是否可用，返回 false 时显示文字封面，支持全局配置	Function(splashImg)	-	-
text-cover-enabled	文字封面开关，传 N 时则强制使用图片封面，支持全局配置	String	Y N	-
default-splash-img	默认引导图地址，当 splashImg 为空或否值时，使用该参数，支持全局配置	String	-	-