91 lines
1.9 KiB
Vue
91 lines
1.9 KiB
Vue
<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>
|