Vue: 腾讯Tdesign描点组件与scrollIntoView描点对比，及展开收缩功能总结

超出显示展开按钮功能

展开内容的逻辑可以根据具体需求来实现。下面是一个简单的示例，展开按钮点击后会显示完整的内容：

展开前

展开后

html 复制代码

<template>
  <div ref="container" class="container" :style="{ 'max-height': contentHeight + 'px' }">
    <div ref="content" class="content"> {{ text }} </div>
    <button v-if="showExpandButton" class="expand-button" @click="expandContent">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const container = ref(null);
const content = ref(null);
const showExpandButton = ref(false);
const isExpanded = ref(false);
const contentHeight = ref(55); // 初始值
const text = ref('你的内容');

const handleResize = () => {
  const containerHeight = container.value.offsetHeight;
  const contentHeightValue = content.value.offsetHeight;
  showExpandButton.value = contentHeightValue > containerHeight;
  
  if (isExpanded.value) {
    contentHeight.value = contentHeightValue;
  } else {
    contentHeight.value = containerHeight;
  }
};

const expandContent = () => {
  if (isExpanded.value) {
    contentHeight.value = container.value.offsetHeight;
  } else {
    contentHeight.value = content.value.offsetHeight;
  }
  isExpanded.value = !isExpanded.value;
};

onMounted(() => {
  const observer = new ResizeObserver(handleResize);
  observer.observe(content.value);
});

watch(text, () => {
  handleResize();
});

</script>

<style scoped>
.container {
  /* max-height: 300px;  容器的最大高度 , 可以通过script中的contentHeight设置初始值 */
  overflow: hidden;
  position: relative;
}

.content {
  transition: height 0.3s;
  /* 内容样式 */
}

.expand-button {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>

在这个示例代码中，我们添加了isExpanded和contentHeight的响应式引用来控制展开状态和获取内容的高度。在handleResize中，根据展开状态和容器的高度来设置内容的高度。展开按钮的点击事件expandContent会更新展开状态，并根据展开状态设置内容的高度。在展开和收起后，通过过渡效果实现平滑的高度变化。我们可以根据具体需求修改代码中的变量和逻辑，并添加自己的展开内容逻辑。

使用scrollIntoView实现描点定位

scrollIntoView 是一个 DOM API，它可以让元素滚动到可见区域。在 Vue 中，你可以通过 ref 引用来获取到元素的引用，然后调用 scrollIntoView 方法来实现滚动。

使用方法如下：

在需要滚动的元素上添加 ref：

html 复制代码

<template>
  <div>
    <div ref="scrollElement">需要滚动的元素</div>
    <button @click="scrollToElement">滚动到元素</button>
  </div>
</template>

在 Vue 组件中使用 scrollIntoView 方法来滚动元素：

html 复制代码

<script>
export default {
  methods: {
    scrollToElement() {
      this.$refs.scrollElement.scrollIntoView();
    }
  }
}
</script>

当按钮被点击时，scrollToElement 方法会被调用，然后 scrollIntoView 方法会将元素滚动到可见区域。

scrollIntoView 方法还支持传入一个可选的配置对象来更细致地控制滚动行为。例如：

js 复制代码

scrollToElement() {
  this.$refs.scrollElement.scrollIntoView({
    behavior: 'smooth',  // 平滑滚动
    block: 'start',      // 滚动到元素顶部
    inline: 'start'      // 滚动到元素左侧
  });
}

这里设置了 behavior 参数为 'smooth'，使用平滑滚动效果；block 参数为 'start'，将元素的顶部对齐到滚动容器的顶部；inline 参数为 'start'，将元素的左侧对齐到滚动容器的左侧。

我们可以根据需要调整这些参数值来实现你想要的滚动效果。

当出现元素显示不全的情况，可以试试如下方法：设置ref元素样式为：

css 复制代码

.anchor {
	height: 60px;
	margin-top: -70px;
}

来调整位置

使用Tdesign提供的描点组件

在 TDesign 框架中提供了描点组件，但是可能相比原生的 scrollIntoView 方法会存在一定的灵活度差异。这是因为 TDesign 框架是一个 UI 组件库，旨在为开发者提供通用的组件，而不是直接暴露原生的 JavaScript 方法。

虽然 TDesign 提供了描点组件，但其使用可能是基于固定的场景和约定，以简化组件的使用。这些约定可能包括：

定义了特定的标记或类名，用于指定和触发描点的元素。
定义了特定的动画效果和样式，以滚动到描点元素时产生视觉上的变化。
提供了对描点元素的定位和滚动的封装，以确保滚动位置的准确性和几何效果。

如上所述，TDesign 框架的描点组件可能相对较为限制，不如原生的 scrollIntoView 方法那样具有灵活性。如果对于描点和滚动效果有特定的需求，可以考虑直接使用原生的 scrollIntoView 方法来实现自定义的滚动行为。

然而，对于通用的、基于约定的描点需求，使用 TDesign 提供的描点组件可能更方便和符合框架的设计思想。它可以提供更简单的 API 和预定义的样式，以减少开发和维护的工作量。

综上所述，根据具体的需求和场景，可以权衡使用 TDesign 的描点组件还是原生的 scrollIntoView 方法，以达到最佳的开发效果和用户体验