1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <template>
| <!-- 支付宝小程序使用_tGetRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
| <view>
| <view :id="elId" class="tn-index-anchor__wrap" :style="[wrapperStyle]">
| <view class="tn-index-anchor" :class="[active ? 'tn-index-anchor--active' : '']" :style="[customAnchorStyle]">
| <view v-if="useSlot">
| <slot></slot>
| </view>
| <block v-else>
| <text>{{ index }}</text>
| </block>
| </view>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| name: 'tn-index-anchor',
| props: {
| // 使用自定义内容
| useSlot: {
| type: Boolean,
| default: false
| },
| // 索引字符
| index: {
| type: String,
| default: ''
| },
| // 自定义样式
| customStyle: {
| type: Object,
| default() {
| return {}
| }
| }
| },
| computed: {
| customAnchorStyle() {
| return Object.assign(this.anchorStyle, this.customStyle)
| }
| },
| data() {
| return {
| elId: this.$t.uuid(),
| // 内容的高度
| height: 0,
| // 内容的top
| top: 0,
| // 是否被激活
| active: false,
| // 样式（父组件外部提供）
| wrapperStyle: {},
| anchorStyle: {}
| }
| },
| created() {
| this.parent = false
| },
| mounted() {
| this.parent = this.$t.$parent.call(this, 'tn-index-list')
| if (this.parent) {
| this.parent.childrens.push(this)
| this.parent.updateData()
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
|
| .tn-index-anchor {
| width: 100%;
| box-sizing: border-box;
| padding: 8rpx 24rpx;
| color: $tn-font-color;
| font-size: 28rpx;
| font-weight: 500;
| line-height: 1.2;
| background-color: rgb(245, 245, 245);
|
| &--active {
| right: 0;
| left: 0;
| color: $tn-main-color;
| background-color: #FFFFFF;
| }
| }
| </style>
|
|
