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

91 lines
1.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>