<indicator>
<indicator>
组件通常用于显示轮播图指示器效果,必须充当 <slider>
组件的子组件使用。
子组件
<indicator>
组件没有任何子组件。
样式
<indicator>
组件有一些私有样式,如下:
-
item-color {color}
:indicator指示点未被选中时的颜色,默认值为#CCCCCC
-
item-selected-color {color}
:indicator指示点被选中时的颜色,默认值为#444444
-
item-size {number}
:指示点的半径,默认为5px
-
通用样式
- 盒模型
flexbox
布局position
opacity
background-color
查看 组件通用样式
注意 1:
这里需要注意一点,<indicator>
的 position
不仅依赖 top
、left
、bottom
和 right
样式,同时会参考 width
和 height
样式。<indicator>
默认的宽高继承于 <slider>
,如果<slider>
未设置宽高,需要显式的给 <indicator>
设置宽高值。
注意 2:
background-color
不推荐使用,建议使用 item-color
和 item-selected-color
代替。
事件
支持所有通用事件。
click
longpress
appear
disappear
查看 通用事件
<template>
<div>
<slider class="slider" interval="3000" auto-play="true" >
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src="img.src"></image>
</div>
<indicator class="indicator"></indicator>
</slider>
</div>
</template>
<script>
export default {
data () {
return {
imageList: [
{ src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
{ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}]
}
}
}
</script>
<style scoped>
.image{
width: 700px;
height: 700px;
}
.slider{
margin-top: 25px;
margin-left: 25px;
width: 700px;
height: 700px;
border-width:2px ;
border-style: solid;
border-color: #41B883;
}
.frame{
width: 700px;
height: 700px;
position: relative;
}
.indicator{
width: 700px;
height: 700px;
item-color:#ffffffff;
item-selected-color:red;
size: 25px;
top: 200px;
position: absolute;
}
</style>