选项卡

dv-tabs-1

总人口

分户籍

分年龄

<template>
  <dv-tabs-1 :activeIndex="activeIndex1" :options="list1"></dv-tabs-1>
</template>
<script>
export default {
  data () {
    return {
      list1: ['总人口', '分户籍', '分年龄'],
      activeIndex1: 0
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
options	选项数组	Array[String]	-	[]
borderRadius	边框圆角	Number | String	-	2
color	字体颜色	String	-	#7E9CBB
activeColor	选中字体颜色	String	-	#fff
activeBorderColor	选中边框颜色	String	-	#52C0FF
activeBackgroundColor	选中背景颜色	String	-	#1c273f
backgroundColor	背景颜色	String	-	#1a2339
itemWidth	选项宽度	Number | String	-	61
itemHeight	选项高度	Number | String	-	32
fontSize	字体大小	Number | String	-	14
activeIndex	选中项索引	Number	-	-1

Events事件

事件名称	说明	回调参数
change	选中值发生变化时触发	目前选中的值和索引

dv-tabs-2

周

月

年

<template>
  <dv-tabs-2 :activeIndex="activeIndex2" :options="list2"></dv-tabs-2>
</template>
<script>
export default {
  data () {
    return {
      list2: ['周', '月', '年'],
      activeIndex2: 0
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
options	选项数组	Array[String]	-	[]
borderRadius	边框圆角	Number | String	-	2
borderColor	边框颜色	String	-	#425272
color	字体颜色	String	-	#7E9CBB
activeColor	选中字体颜色	String	-	#fff
activeBackgroundColor	选中背景颜色	String	-	#00A2FF
backgroundColor	背景颜色	String	-	#0e1e3c
itemWidth	选项宽度	Number | String	-	28
itemHeight	选项高度	Number | String	-	28
fontSize	字体大小	Number | String	-	14
activeIndex	选中项索引	Number	-	-1

Events事件

事件名称	说明	回调参数
change	选中值发生变化时触发	目前选中的值和索引

dv-tabs-3

近一周

本周

<template>
  <dv-tabs-3 :activeIndex="activeIndex3" :options="list3"></dv-tabs-3>
</template>
<script>
export default {
  data () {
    return {
      list3: ['近一周', '本周'],
      activeIndex3: 0
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
options	选项数组	Array[String]	-	[]
color	字体颜色	String	-	#7E9CBB
activeColor	选中字体颜色	String	-	#fff
activeBorderColor	选中边框颜色	String	-	#33CCCC
activeBackgroundColor	选中背景颜色 - 渐变色	Array	-	["#174951", "#061328"]
backgroundColor	背景颜色	String	-	#131f36
itemWidth	选项宽度	Number | String	-	61
itemHeight	选项高度	Number | String	-	32
fontSize	字体大小	Number | String	-	14
activeIndex	选中项索引	Number	-	-1

Events事件

事件名称	说明	回调参数
change	选中值发生变化时触发	目前选中的值和索引

dv-tabs-4

今日接种情况昨日接种情况

<template>
  <dv-tabs-4 :activeIndex="activeIndex4" :options="list4"></dv-tabs-4>
</template>
<script>
export default {
  data () {
    return {
      list4: ['今日接种情况', '昨日接种情况'],
      activeIndex4: 0
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
options	选项数组	Array[String]	-	[]
color	字体颜色	String	-	#2b6590
activeColor	选中字体颜色	String	-	#52C0FF
hasMore	是否显示更多	Boolean	true	false
moreText	更多文字内容	String	-	更多
backgroundColor	背景颜色	String	-	#0d203b
padding	内边距	String	-	10px 16px
fontSize	字体大小	Number | String	-	16
activeIndex	选中项索引	Number	-	-1

Events事件

事件名称	说明	回调参数
change	选中值发生变化时触发	目前选中的值和索引
more	点击更多时出发	(event: Event)

dv-tabs-5

预约挂号数实际开放床位数

<template>
  <dv-tabs-5 :activeIndex="activeIndex5" :options="list5"></dv-tabs-5>
</template>
<script>
export default {
  data () {
    return {
      list5: ['预约挂号数', '实际开放床位数'],
      activeIndex5: 0
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
options	选项数组	Array[String]	-	[]
color	字体颜色	String	-	#7E9CBB
activeColor	选中字体颜色	String	-	#52C0FF
backgroundColor	背景颜色	String	-	transparent
fontSize	字体大小	Number | String	-	16
activeIndex	选中项索引	Number	-	-1

Events事件

事件名称	说明	回调参数
change	选中值发生变化时触发	目前选中的值和索引

dv-tabs-6

常住人口

实有人口

<template>
  <dv-tabs-6 :activeIndex="activeIndex6" :options="list6"></dv-tabs-6>
</template>
<script>
export default {
  data () {
    return {
      list6: ['常住人口', '实有人口'],
      activeIndex6: 0
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
options	选项数组	Array[String]	-	[]
color	字体颜色	String	-	#a3a6ad
activeColor	选中字体颜色	String	-	#FFFFFF
fontSize	字体大小	Number | String	-	18
activeIndex	选中项索引	Number	-	-1

Events事件

事件名称	说明	回调参数
change	选中值发生变化时触发	目前选中的值和索引

dv-tabs-7

全市

青阳街道

梅岭街道

罗山街道

西园街道

新塘街道

灵源街道

<template>
  <dv-tabs-7 :activeIndex="activeIndex7" :options="list7"></dv-tabs-7>
</template>
<script>
export default {
  data () {
    return {
      list7: ['全市', '青阳街道', '梅岭街道', '罗山街道', '西园街道', '新塘街道', '灵源街道'],
      activeIndex7: 0
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
options	选项数组	Array[String]	-	[]
color	字体颜色	String	-	#fff
activeColor	选中字体颜色	String	-	#4EC1FF
backgroundColor	选中字体颜色	String	-	#233254
activeBackgroundColor	选中字体颜色	String	-	#1f2d42
borderRadius	边框圆角	Number | String	-	4
itemWidth	选项宽度	Number | String	-	84
itemHeight	选项高度	Number | String	-	34
direction	排列方向	String	column	row
fontSize	字体大小	Number | String	-	16
activeIndex	选中项索引	Number	-	-1

Events事件

事件名称	说明	回调参数
change	选中值发生变化时触发	目前选中的值和索引