yunshangxie/tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue

91 lines
1.9 KiB
Vue
Raw Permalink Normal View History

2023-12-25 17:56:30 +08:00
<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.$tn.uuid(),
// 内容的高度
height: 0,
// 内容的top
top: 0,
// 是否被激活
active: false,
// 样式(父组件外部提供)
wrapperStyle: {},
anchorStyle: {}
}
},
created() {
this.parent = false
},
mounted() {
this.parent = this.$tn.$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>