121 lines
2.9 KiB
Vue
121 lines
2.9 KiB
Vue
<template>
|
||
<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
|
||
<view>
|
||
<view class="u-index-anchor-wrapper" :id="$u.guid()" :style="wrapperStyle">
|
||
<view
|
||
class="u-index-anchor"
|
||
:class="[active ? 'u-index-anchor--active' : '', customClass]"
|
||
:style="$u.toStyle(anchorStyle, customStyle)"
|
||
>
|
||
<slot v-if="useSlot" />
|
||
<template v-else>
|
||
<text>{{ index }}</text>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'u-index-anchor',
|
||
options: {
|
||
addGlobalClass: true,
|
||
// #ifndef MP-TOUTIAO
|
||
virtualHost: true,
|
||
// #endif
|
||
styleIsolation: 'shared'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { IndexAnchorProps } from './types';
|
||
import { ref, onMounted } from 'vue';
|
||
import { $u, useChildren } from '../..';
|
||
|
||
/**
|
||
* indexAnchor 索引列表锚点
|
||
* @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
|
||
* @tutorial https://uviewpro.cn/zh/components/indexList.html#indexanchor-props
|
||
* @property {Boolean} use-slot 是否使用自定义内容的插槽（默认false）
|
||
* @property {String|Number} index 索引字符，如果定义了use-slot，此参数自动失效
|
||
* @property {Object} customStyle 自定义样式，对象形式，如"{color: 'red'}"
|
||
* @event {Function} default 锚点位置显示内容，默认为索引字符
|
||
* @example <u-index-anchor :index="item" />
|
||
*/
|
||
|
||
const props = defineProps(IndexAnchorProps);
|
||
const { parentExposed } = useChildren('u-index-anchor', 'u-index-list');
|
||
|
||
// 响应式变量
|
||
const active = ref(false);
|
||
const wrapperStyle = ref<Record<string, any>>({});
|
||
const anchorStyle = ref<Record<string, any>>({});
|
||
const top = ref(0);
|
||
const height = ref(0);
|
||
|
||
// 挂载时查找父组件并注册
|
||
onMounted(() => {
|
||
if (parentExposed) {
|
||
parentExposed?.value?.updateData();
|
||
}
|
||
});
|
||
|
||
function setTop(val: any) {
|
||
top.value = val;
|
||
}
|
||
|
||
function setHeight(val: any) {
|
||
height.value = val;
|
||
}
|
||
|
||
function setActive(val: any) {
|
||
active.value = val;
|
||
}
|
||
|
||
function setAnchorStyle(val: any) {
|
||
anchorStyle.value = val;
|
||
}
|
||
|
||
function setWrapperStyle(val: any) {
|
||
wrapperStyle.value = val;
|
||
}
|
||
|
||
defineExpose({
|
||
props,
|
||
top,
|
||
height,
|
||
active,
|
||
wrapperStyle,
|
||
anchorStyle,
|
||
setTop,
|
||
setHeight,
|
||
setActive,
|
||
setAnchorStyle,
|
||
setWrapperStyle
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../../libs/css/style.components.scss';
|
||
|
||
.u-index-anchor {
|
||
box-sizing: border-box;
|
||
padding: 14rpx 24rpx;
|
||
color: var(--u-content-color);
|
||
width: 100%;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
line-height: 1.2;
|
||
background-color: $u-bg-color;
|
||
}
|
||
|
||
.u-index-anchor--active {
|
||
right: 0;
|
||
left: 0;
|
||
color: $u-type-primary;
|
||
background-color: var(--u-bg-white);
|
||
}
|
||
</style>
|