gree_leran/node_modules/uview-plus/components/u-index-anchor/u-index-anchor.vue

96 lines
2.5 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>
<!-- #ifdef APP-NVUE -->
<header>
<!-- #endif -->
<view
class="u-index-anchor u-border-bottom"
:ref="`u-index-anchor-${text}`"
:style="{
height: addUnit(height),
backgroundColor: bgColor
}"
>
<text
class="u-index-anchor__text"
:style="{
fontSize: addUnit(size),
color: color
}"
>{{ text }}</text>
</view>
<!-- #ifdef APP-NVUE -->
</header>
<!-- #endif -->
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addUnit, $parent, error } from '../../libs/function/index';
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* IndexAnchor 列表锚点
* @description
* @tutorial https://uview-plus.jiangruyi.com/components/indexList.html
* @property {String | Number} text 列表锚点文本内容
* @property {String} color 列表锚点文字颜色 ( 默认 '#606266' )
* @property {String | Number} size 列表锚点文字大小单位默认px ( 默认 14 )
* @property {String} bgColor 列表锚点背景颜色 ( 默认 '#dedede' )
* @property {String | Number} height 列表锚点高度单位默认px ( 默认 32 )
* @example <u-index-anchor :text="indexList[index]"></u-index-anchor>
*/
export default {
name: 'u-index-anchor',
mixins: [mpMixin, mixin, props],
data() {
return {
}
},
mounted() {
this.init()
},
methods: {
addUnit,
init() {
// 此处会活动父组件实例并赋值给实例的parent属性
const indexList = $parent.call(this, 'u-index-list')
if (!indexList) {
return error('u-index-anchor必须要搭配u-index-list组件使用')
}
// 将当前实例放入到u-index-list中
indexList.anchors.push(this)
const indexListItem = $parent.call(this, 'u-index-item')
// #ifndef APP-NVUE
// 只有在非nvue下u-index-anchor才是嵌套在u-index-item中的
if (!indexListItem) {
return error('u-index-anchor必须要搭配u-index-item组件使用')
}
// 设置u-index-item的id为anchor的text标识符因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性
indexListItem.id = this.text.charCodeAt(0)
// #endif
}
},
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-index-anchor {
position: sticky;
top: 0;
@include flex;
align-items: center;
padding-left: 15px;
z-index: 1;
&__text {
@include flex;
align-items: center;
}
}
</style>