排名轮播表

排名轮播表

基础用法

查看代码

<template>
  <div w50rem h24rem p3 flex="~ col" justify-center items-center bg-dark>
    <div>
      <dv-scroll-ranking-board :config="config" style="width:500px;height:300px" />
    </div>
    <div pt5>
      <button btn @click="addData">
        增加数据
      </button>
    </div>
  </div>
</template>
<script setup>
const config = reactive({
  data: [
    {
      name: '周口',
      value: 55,
    },
    {
      name: '南阳',
      value: 120,
    },
    {
      name: '西峡',
      value: 78,
    },
    {
      name: '驻马店',
      value: 66,
    },
    {
      name: '新乡',
      value: 80,
    },
    {
      name: '信阳',
      value: 45,
    },
    {
      name: '漯河',
      value: 29,
    },
  ],
  unit: '万元',
})

const addData = () => {
  config.data.push({
    name: `新增城市${Math.floor(Math.random() * 100)}`,
    value: Math.floor(Math.random() * 100),
  })
}
</script>

• 更多示例见DataV ScrollRankingBoard

config属性

参数	说明	类型	可选值	默认值
data	表数据	Array<Object>	data属性	[]
rowNum	表行数	Number	---	5
waitTime	轮播时间间隔(ms)	Number	---	2000
carousel	轮播方式	String	'single'/'page'	'single'
unit	数值单位	String	---	''
sort	自动排序	Boolean	---	true
valueFormatter	数值格式化	Function	---	undefined
textColor1.4.2	文字颜色	String	---	#fff
color1.4.2	主要颜色，包括柱颜色和排名颜色	String	---	#1370fb
fontSize1.4.2	字体大小	Number	---	13

data属性

参数	说明	类型	可选值	默认值
name	名称	String	---	---
value	数值	Number	---	---

valueFormatter属性

参数	说明	类型	可选值	默认值
name	名称	String	---	---
value	数值	Number	---	---
percent	百分比	Number	---	---
ranking	排名	Number	---	---

TIP

name属性使用v-html进行渲染，因此你可以使用html标签来定制个性化的name展示效果。