Poster

基础用法

点击查看源码

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <tv-list
        ref="listViewRef"
        class="qt_tv_list_view_root_css"
        horizontal="true"
        :clipChildren="false"
        :clipPadding="false"
        @item-click="onItemClick"
        @item-bind="onItemBind"
      >
        <qt-poster />
      </tv-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import type {
  QTIListView,
  QTListViewItem,
  QTPoster,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '使用初探',
  setup() {
    const listViewRef = ref<QTIListView>()

    const onESCreate = () => {
      const data: Array<QTListViewItem> = []
      const imgURL =
        'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
      for (let i = 0; i < 2; i++) {
        const poster: QTPoster = {
          type: 10001,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          decoration: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          subTitle: {
            text: '副标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          floatTitle: {
            text: '浮动标题',
            enable: true,
            style: {
              width: 260,
            },
            background: { colors: ['#e5000000', '#00000000'], orientation: 4 },
          },
          shimmer: {
            enable: true,
          },
          ripple: {
            enable: true,
            style: {
              right: 0,
              bottom: 0,
              marginRight: -12,
            },
          },
          image: {
            src: imgURL,
            enable: true,
            style: {
              width: 30,
              height: 30,
            },
          },
          corner: {
            text: '角标',
            enable: true,
            style: {
              width: 260,
              height: 30,
            },
            background: {
              colors: ['#FE3824', '#F0051E'],
              cornerRadii4: [0, 8, 0, 8],
              orientation: 2,
            },
          },
          style: {
            width: 260,
            height: 320,
          },
          titleStyle: {
            width: 260,
            height: 120,
            marginTop: 320 - 60,
          },
          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
        }
        data.push(poster)
      }
      listViewRef.value?.setListData(data)
    }

    function onItemClick() {
      //
    }

    function onItemBind() {
      //
    }

    return {
      listViewRef,
      onESCreate,
      onItemClick,
      onItemBind,
    }
  },
})
</script>

<style>
.qt_tv_list_view_root_css {
  width: 1920px;
  height: 1080px;
}
</style>

间距

点击查看源码

主标题

点击查看源码

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <tv-list
        ref="listViewRef"
        class="qt_tv_list_view_root_css"
        horizontal="true"
        :clipChildren="false"
        :clipPadding="false"
        @item-click="onItemClick"
        @item-bind="onItemBind"
      >
        <qt-poster />
      </tv-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import type {
  QTIListView,
  QTListViewItem,
  QTPoster,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '主标题',
  setup() {
    const listViewRef = ref<QTIListView>()

    const onESCreate = () => {
      const data: Array<QTListViewItem> = []
      for (let i = 0; i < 2; i++) {
        const poster: QTPoster = {
          type: 10001,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          decoration: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          score: {
            text: '1.1',
            enable: true,
            style: {
              height: 100,
              width: 260,
              background: {
                colors: ['#e5000000', '#00000000'],
                orientation: 4,
              },
            },
          },
          style: {
            width: 260,
            height: 320,
          },
          titleStyle: {
            width: 260,
            marginTop: 0,
          },
          titleFocusStyle: { width: 260, marginTop: -10 },
        }
        data.push(poster)
      }
      listViewRef.value?.setListData(data)
    }

    function onItemClick() {
      //
    }

    function onItemBind() {
      //
    }

    return {
      listViewRef,
      onESCreate,
      onItemClick,
      onItemBind,
    }
  },
})
</script>

<style>
.qt_tv_list_view_root_css {
  width: 1920px;
  height: 1080px;
}
</style>

次标题

点击查看源码

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <tv-list
        ref="listViewRef"
        class="qt_tv_list_view_root_css"
        horizontal="true"
        :clipChildren="false"
        :clipPadding="false"
        @item-click="onItemClick"
        @item-bind="onItemBind"
      >
        <qt-poster />
      </tv-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import type {
  QTIListView,
  QTListViewItem,
  QTPoster,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '次标题',
  setup() {
    const listViewRef = ref<QTIListView>()

    const onESCreate = () => {
      const data: Array<QTListViewItem> = []
      for (let i = 0; i < 2; i++) {
        const poster: QTPoster = {
          type: 10001,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          decoration: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          subTitle: {
            text: '副标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          floatTitle: {
            text: '浮动标题',
            enable: true,
            style: {
              width: 260,
            },
            background: { colors: ['#e5000000', '#00000000'], orientation: 4 },
          },
          style: {
            width: 260,
            height: 320,
          },
          titleStyle: {
            width: 260,
            height: 120,
            marginTop: 320 - 60,
          },
          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
        }
        data.push(poster)
      }
      listViewRef.value?.setListData(data)
    }

    function onItemClick() {
      //
    }

    function onItemBind() {
      //
    }

    return {
      listViewRef,
      onESCreate,
      onItemClick,
      onItemBind,
    }
  },
})
</script>

<style>
.qt_tv_list_view_root_css {
  width: 1920px;
  height: 1080px;
}
</style>

浮动标题

点击查看源码

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <tv-list
        ref="listViewRef"
        class="qt_tv_list_view_root_css"
        horizontal="true"
        :clipChildren="false"
        :clipPadding="false"
        @item-click="onItemClick"
        @item-bind="onItemBind"
      >
        <qt-poster />
      </tv-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import type {
  QTIListView,
  QTListViewItem,
  QTPoster,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '浮动标题',
  setup() {
    const listViewRef = ref<QTIListView>()

    const onESCreate = () => {
      const data: Array<QTListViewItem> = []
      for (let i = 0; i < 2; i++) {
        const poster: QTPoster = {
          type: 10001,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          decoration: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          floatTitle: {
            text: '浮动标题',
            enable: true,
            style: {
              width: 260,
            },
            background: { colors: ['#e5000000', '#00000000'], orientation: 4 },
          },
          style: {
            width: 260,
            height: 320,
          },
          titleStyle: {
            width: 260,
            height: 120,
            marginTop: 320 - 60,
          },
          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
        }
        data.push(poster)
      }
      listViewRef.value?.setListData(data)
    }

    function onItemClick() {
      //
    }

    function onItemBind() {
      //
    }

    return {
      listViewRef,
      onESCreate,
      onItemClick,
      onItemBind,
    }
  },
})
</script>

<style>
.qt_tv_list_view_root_css {
  width: 1920px;
  height: 1080px;
}
</style>

角标

点击查看源码

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <tv-list
        ref="listViewRef"
        class="qt_tv_list_view_root_css"
        horizontal="true"
        :clipChildren="false"
        :clipPadding="false"
        @item-click="onItemClick"
        @item-bind="onItemBind"
      >
        <qt-poster />
      </tv-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import type {
  QTIListView,
  QTListViewItem,
  QTPoster,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '角标',
  setup() {
    const listViewRef = ref<QTIListView>()

    const onESCreate = () => {
      const data: Array<QTListViewItem> = []
      for (let i = 0; i < 2; i++) {
        const poster: QTPoster = {
          type: 10001,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          decoration: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          subTitle: {
            text: '副标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          floatTitle: {
            text: '浮动标题',
            enable: true,
            style: {
              width: 260,
            },
            background: { colors: ['#e5000000', '#00000000'], orientation: 4 },
          },
          corner: {
            text: '角标',
            enable: true,
            style: {
              width: 260,
              height: 30,
            },
            background: {
              colors: ['#FE3824', '#F0051E'],
              cornerRadii4: [0, 8, 0, 8],
              orientation: 2,
            },
          },
          style: {
            width: 260,
            height: 320,
          },
          titleStyle: {
            width: 260,
            height: 120,
            marginTop: 320 - 60,
          },
          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
        }
        data.push(poster)
      }
      listViewRef.value?.setListData(data)
    }

    function onItemClick() {
      //
    }

    function onItemBind() {
      //
    }

    return {
      listViewRef,
      onESCreate,
      onItemClick,
      onItemBind,
    }
  },
})
</script>

<style>
.qt_tv_list_view_root_css {
  width: 1920px;
  height: 1080px;
}
</style>

评分

点击查看源码

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <tv-list
        ref="listViewRef"
        class="qt_tv_list_view_root_css"
        horizontal="true"
        :clipChildren="false"
        :clipPadding="false"
        @item-click="onItemClick"
        @item-bind="onItemBind"
      >
        <qt-poster />
      </tv-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import type {
  QTIListView,
  QTListViewItem,
  QTPoster,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '评分',
  setup() {
    const listViewRef = ref<QTIListView>()

    const onESCreate = () => {
      const data: Array<QTListViewItem> = []
      for (let i = 0; i < 2; i++) {
        const poster: QTPoster = {
          type: 10001,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          decoration: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          score: {
            text: '1.1',
            enable: true,
            style: {
              width: 100,
              height: 100,
              left: 20,
              fontSize: 24,
              background: {
                colors: ['#e5000000', '#00000000'],
                orientation: 4,
              },
            },
          },
          style: {
            width: 260,
            height: 320,
          },
          titleStyle: {
            width: 260,
            marginTop: 0,
          },
          titleFocusStyle: { width: 260, marginTop: -10 },
        }
        data.push(poster)
      }
      listViewRef.value?.setListData(data)
    }

    function onItemClick() {
      //
    }

    function onItemBind() {
      //
    }

    return {
      listViewRef,
      onESCreate,
      onItemClick,
      onItemBind,
    }
  },
})
</script>

<style>
.qt_tv_list_view_root_css {
  width: 1920px;
  height: 1080px;
}
</style>

阴影

点击查看源码

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <tv-list
        ref="listViewRef"
        class="qt_tv_list_view_root_css"
        horizontal="true"
        :clipChildren="false"
        :clipPadding="false"
        @item-click="onItemClick"
        @item-bind="onItemBind"
      >
        <qt-poster />
      </tv-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import type {
  QTIListView,
  QTListViewItem,
  QTPoster,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '阴影',
  setup() {
    const listViewRef = ref<QTIListView>()

    const onESCreate = () => {
      const data: Array<QTListViewItem> = []
      for (let i = 0; i < 2; i++) {
        const poster: QTPoster = {
          type: 10001,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          shadow: {
            enable: true,
          },
          decoration: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          subTitle: {
            text: '副标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          floatTitle: {
            text: '浮动标题',
            enable: true,
            style: {
              width: 260,
            },
            background: { colors: ['#e5000000', '#00000000'], orientation: 4 },
          },
          style: {
            width: 260,
            height: 320,
          },
          titleStyle: {
            width: 260,
            height: 120,
            marginTop: 320 - 60,
          },
          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
        }
        data.push(poster)
      }
      listViewRef.value?.setListData(data)
    }

    function onItemClick() {
      //
    }

    function onItemBind() {
      //
    }

    return {
      listViewRef,
      onESCreate,
      onItemClick,
      onItemBind,
    }
  },
})
</script>

<style>
.qt_tv_list_view_root_css {
  width: 1920px;
  height: 1080px;
}
</style>

高光

点击查看源码

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <tv-list
        ref="listViewRef"
        class="qt_tv_list_view_root_css"
        horizontal="true"
        :clipChildren="false"
        :clipPadding="false"
        @item-click="onItemClick"
        @item-bind="onItemBind"
      >
        <qt-poster />
      </tv-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import type {
  QTIListView,
  QTListViewItem,
  QTPoster,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '高光',
  setup() {
    const listViewRef = ref<QTIListView>()

    const onESCreate = () => {
      const data: Array<QTListViewItem> = []
      for (let i = 0; i < 2; i++) {
        const poster: QTPoster = {
          type: 10001,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          shimmer: {
            enable: true,
          },
          decoration: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          subTitle: {
            text: '副标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          floatTitle: {
            text: '浮动标题',
            enable: true,
            style: {
              width: 260,
            },
            background: { colors: ['#e5000000', '#00000000'], orientation: 4 },
          },
          style: {
            width: 260,
            height: 320,
          },
          titleStyle: {
            width: 260,
            height: 120,
            marginTop: 320 - 60,
          },
          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
        }
        data.push(poster)
      }
      listViewRef.value?.setListData(data)
    }

    function onItemClick() {
      //
    }

    function onItemBind() {
      //
    }

    return {
      listViewRef,
      onESCreate,
      onItemClick,
      onItemBind,
    }
  },
})
</script>

<style>
.qt_tv_list_view_root_css {
  width: 1920px;
  height: 1080px;
}
</style>

水波

点击查看源码

<template>
  <div class="es-sdk-root-css">
    <div class="es-sdk-content-row-css">
      <tv-list
        ref="listViewRef"
        class="qt_tv_list_view_root_css"
        horizontal="true"
        :clipChildren="false"
        :clipPadding="false"
        @item-click="onItemClick"
        @item-bind="onItemBind"
      >
        <qt-poster />
      </tv-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import type {
  QTIListView,
  QTListViewItem,
  QTPoster,
} from '@quicktvui/quicktvui3'

export default defineComponent({
  name: '水波',
  setup() {
    const listViewRef = ref<QTIListView>()

    const onESCreate = () => {
      const data: Array<QTListViewItem> = []
      for (let i = 0; i < 2; i++) {
        const poster: QTPoster = {
          type: 10001,
          focus: {
            enable: true,
            scale: 1.1,
            border: false,
          },
          ripple: {
            enable: true,
            style: {
              right: 0,
              bottom: 0,
              marginRight: -12,
            },
          },
          decoration: {
            top: 20,
            left: 20,
            right: 20,
            bottom: 20,
          },
          title: {
            text: '主标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          subTitle: {
            text: '副标题',
            enable: true,
            style: {
              width: 260,
            },
          },
          floatTitle: {
            text: '浮动标题',
            enable: true,
            style: {
              width: 260,
            },
            background: { colors: ['#e5000000', '#00000000'], orientation: 4 },
          },
          style: {
            width: 260,
            height: 320,
          },
          titleStyle: {
            width: 260,
            height: 120,
            marginTop: 320 - 60,
          },
          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
        }
        data.push(poster)
      }
      listViewRef.value?.setListData(data)
    }

    function onItemClick() {
      //
    }

    function onItemBind() {
      //
    }

    return {
      listViewRef,
      onESCreate,
      onItemClick,
      onItemBind,
    }
  },
})
</script>

<style>
.qt_tv_list_view_root_css {
  width: 1920px;
  height: 1080px;
}
</style>

API

DataStructure

用来描述海报信息

Name	Description	Type	Default
focus	焦点	`QTFocusable`	否
image	图片	`QTPosterImage`	否
shadow	阴影	`QTPosterShadow`	否
shimmer	流光	`QTPosterShimmer`	否
title	标题	`QTPosterTitle`	否
focusTitle	焦点状态标题	`QTPosterTitle`	否
subTitle	副标题	`QTPosterTitle`	否
floatTitle	浮动标题	`QTPosterTitle`	否
ripple	水波纹	`QTPosterRipple`	否
corner	角标	`QTPosterCorner`	否
score	评分	`QTPosterScore`	否
titleStyle	标题样式	`QTFlexStyleMargin & QTFlexStylePadding & QTFlexStyleSize`	否
titleFocusStyle	焦点状态标题样式	`QTFlexStyleMargin & QTFlexStylePadding & QTFlexStyleSize`	否

Attributes

Name	Description	Type	Default
requestFirstFocus	请求焦点	`boolean`	false
loadDelay	加载延迟事件	`number`	500
type	类型	`number`	10001
borderRadius	圆角	`number`	8
rippleColor	水波纹颜色	`string`	-
focusBgColor	焦点背景色	`QTGradient`	-
focusTitleColor	标题焦点色	`string`	-
focusSubTitleColor	副标题焦点色	`string`	-
floatTitleBgColor	浮动标题背景色	`object`	-

Source

Component • Docs

Contributors

Vue Section

Nav Bar

Poster #

基础用法

间距

主标题

次标题

浮动标题

角标

评分

阴影

高光

水波

API #

DataStructure #

Attributes #

Source #

Contributors #

Poster

API

DataStructure

Attributes

Source

Contributors