Vue + Element UI 大型表单终极解决方案：锚点组件进阶优化

前端

2024-01-17 06:11:39

基于 Vue + Element UI 打造高效大型表单的终极解决方案（下篇：锚点组件进阶）

摘要：

大型表单往往是网站交互的重中之重，其设计和实现直接影响用户体验。本文将继续探讨 Vue + Element UI 构建大型表单的解决方案，重点介绍锚点组件的优化与功能升级，助力开发者创建更具实用性和美观性的表单应用。

引言：

在上一篇文章中，我们已基本实现了锚点组件的功能。本篇将进一步优化锚点组件的样式和使用方式，提升其美观性和易用性。

一、样式优化

锚点组件的样式默认较为简洁，我们可以对其进行自定义优化，使其更贴合网站的整体风格。

1. 颜色调整：

调整锚点颜色、边框颜色和激活时的颜色，以符合网站的色调。

.el-anchor-wrapper {
  color: #409EFF;
  border-color: #409EFF;
}

.el-anchor-wrapper a:hover,
.el-anchor-wrapper a.is-active {
  color: #1890FF;
  border-color: #1890FF;
}

2. 样式调整：

优化锚点边框样式，使其更贴近百度百科的样式效果。

.el-anchor-wrapper {
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  padding: 5px;
}

3. 细节优化：

增加锚点之间的间距和图标，提升视觉效果。

.el-anchor-wrapper a {
  margin-right: 10px;
}

.el-anchor-wrapper i {
  margin-right: 5px;
}

二、使用方式升级

在上一篇中，锚点组件需要使用 v-if 判断当前页面是否包含锚点元素，否则不渲染。这种方式存在不便之处，需要开发者手动判断页面中是否包含锚点元素，易产生疏忽。

1. 自动判断

优化锚点组件，使其能够自动判断页面中是否包含锚点元素。

mounted() {
  this.pageBlock = document.querySelector('.el-anchor') !== null;
}

通过修改 mounted 生命周期函数，在组件挂载时自动判断页面中是否存在 .el-anchor 元素，从而无需开发者手动判断。

2. 修复bug

修复了锚点组件在切换路由时不重置滚动位置的bug，提升组件的稳定性。

beforeRouteEnter(to, from, next) {
  setTimeout(() => {
    next();
  }, 200);
}

通过在路由切换前添加延时，确保组件在路由切换后正确重置滚动位置。

3. 提供更多选项

提供更多的选项供开发者配置，提高锚点组件的灵活性。

export default {
  props: {
    // 是否自动判断页面中是否存在锚点元素
    autoDetect: {
      type: Boolean,
      default: true
    },
    // 锚点元素选择器
    anchorSelector: {
      type: String,
      default: '.el-anchor'
    },
    // 滚动到锚点元素时是否平滑滚动
    smooth: {
      type: Boolean,
      default: true
    },
    // 平滑滚动持续时间
    duration: {
      type: Number,
      default: 500
    },
  }
};