sulibao-mini/tuniao-ui/components/tn-index-anchor/tn-index-anchor.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>