TableInfo 表格信息

基础用法

<template>
  <div>
    <plv-table-info
      image="https://liveimages.videocc.net/uploaded/images/2025/03/h5dhe9best.png"
      title="这是一个很长的标题内容，可能会折行显示"
      description="这是一段描述文本，会显示在标题下方"
      :label-list="labelList">
    </plv-table-info>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelList: [
        { text: '直播中', type: 'live' },
        { text: '免费', type: 'info' },
        { text: '推荐', type: 'primary' }
      ]
    };
  }
};
</script> 

显示代码

标签类型

支持 live、info、primary、warning、danger 五种标签类型，live 类型会显示动画图标

<template>
  <div class="demo-container">
    <plv-table-info
      image="https://liveimages.videocc.net/uploaded/images/2025/03/h5dhe9best.png"
      title="不同标签类型示例"
      description="展示各种标签类型的效果"
      :label-list="labelList">
    </plv-table-info>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelList: [
        { text: '直播中', type: 'live' },
        { text: '信息', type: 'info' },
        { text: '主要', type: 'primary' },
        { text: '警告', type: 'warning' },
        { text: '危险', type: 'danger' }
      ]
    };
  }
};
</script>

<style scoped>
.demo-container {
  padding: 20px;
}
</style> 

显示代码

自定义图片

可以自定义图片的宽度、高度和圆角

<template>
  <div class="demo-container">
    <plv-table-info
      image="https://liveimages.videocc.net/uploaded/images/2025/03/h5dhe9best.png"
      image-width="80px"
      image-height="80px"
      image-radius="8px"
      title="自定义图片尺寸"
      description="图片宽高为 80px，圆角为 8px">
    </plv-table-info>

    <br />

    <plv-table-info
      image="https://liveimages.videocc.net/uploaded/images/2025/03/h5dhe9best.png"
      image-width="60px"
      image-height="60px"
      image-radius="50%"
      title="圆形头像"
      description="使用圆形头像效果">
    </plv-table-info>
  </div>
</template>

<style scoped>
.demo-container {
  padding: 20px;
}
</style> 

显示代码

插槽用法

支持图片覆盖层、标题和描述的插槽自定义

<template>
  <div class="demo-container">
    <plv-table-info
      image="https://liveimages.videocc.net/uploaded/images/2025/03/h5dhe9best.png">
      <template slot="image-overlay">
        <div class="play-button">
          <plv-icon icon="play" style="font-size: 20px; color: white;"></plv-icon>
        </div>
      </template>
      <template slot="title">
        <span style="color: #3F76FC; font-weight: bold;">自定义标题内容</span>
      </template>
      <template slot="description">
        <span style="color: #969BA5;">这是通过插槽自定义的描述内容，支持 HTML 格式</span>
      </template>
    </plv-table-info>
  </div>
</template>

<style scoped>
.demo-container {
  padding: 20px;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style> 

显示代码

ID 显示功能

支持显示 ID 信息，鼠标悬停时显示复制图标，点击可复制 ID 到剪贴板

<template>
  <div class="demo-container">
    <plv-table-info
      image="https://liveimages.videocc.net/uploaded/images/2025/03/h5dhe9best.png"
      title="显示 ID 信息的示例"
      description="鼠标悬停时显示复制图标，点击可复制 ID"
      id-value="CH123456789"
      id-label="频道号"
      :label-list="labelList">
    </plv-table-info>

    <br />

    <plv-table-info
      image="https://liveimages.videocc.net/uploaded/images/2025/03/h5dhe9best.png"
      title="自定义 ID 标签名称"
      description="可以自定义 ID 的标签名称"
      id-value="U987654321"
      id-label="用户ID"
      :label-list="labelList2">
    </plv-table-info>

    <br />

    <plv-table-info
      image="https://liveimages.videocc.net/uploaded/images/2025/03/h5dhe9best.png"
      title="不显示 ID 信息"
      description="当 idValue 为 false 或不传时，不显示 ID 信息"
      :id-value="false"
      :label-list="labelList3">
    </plv-table-info>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelList: [
        { text: '直播中', type: 'live' },
        { text: '推荐', type: 'primary' }
      ],
      labelList2: [
        { text: 'VIP', type: 'warning' },
        { text: '活跃', type: 'info' }
      ],
      labelList3: [
        { text: '普通', type: 'info' }
      ]
    };
  }
};
</script>

<style scoped>
.demo-container {
  padding: 20px;
}
</style> 

显示代码

无图片

不传入 image 时只显示文本内容

<template>
  <div class="demo-container">
    <plv-table-info
      title="无图片的表格信息"
      description="当不传入 image 属性时，只显示文本内容"
      :label-list="labelList">
    </plv-table-info>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelList: [
        { text: '文本内容', type: 'info' },
        { text: '无图片', type: 'primary' }
      ]
    };
  }
};
</script>

<style scoped>
.demo-container {
  padding: 20px;
}
</style> 

显示代码

Attributes

参数	说明	类型	可选值	默认值
image	图片地址	String	-	-
image-width	图片宽度	String	-	60px
image-height	图片高度	String	-	60px
image-radius	图片圆角	String	-	4px
id-value	ID 值，为 false 时不显示 ID 信息	String Boolean	-	false
id-label	ID 标签名称	String	-	ID
title	标题文本	String	-	-
description	描述文本	String	-	-
label-list	标签列表	Array	-	[]

LabelList Item

参数	说明	类型	可选值	默认值
text	标签文本	String	-	-
type	标签类型	String	live info primary warning danger	-

Slots

name	说明
image-overlay	图片覆盖层内容
title	自定义标题内容
description	自定义描述内容