如何使用Vue与Flex实现页面组件顺序自由配置

文
章
目
录

• 一、需求分析
• 二、实现方案核心思路
• 三、具体实现步骤
• （一）配置映射函数
• （二）创建Flex布局包裹组件
• （三）使用OrderWrapper组件

前端开发经常会遇到一些需求变更，就像这次，原本页面上A、B、C三个组件是固定按照ABC顺序展示的，但现在要求支持后台配置组件顺序。比如说，后台配置为B,C,A，页面就得按照B、C、A的顺序展示。这个需求该怎么实现呢？下面就来详细讲讲。

一、需求分析

最初，页面上的组件顺序是固定的，这在功能上可能满足了前期的要求。但随着业务的发展，需要增加灵活性，让运营人员或产品经理能够通过后台配置来改变组件的展示顺序。在实现这个新需求时，有两个关键要点需要考虑：一是不能影响组件原来的逻辑，每个组件都有自己独立的功能，改变顺序不能破坏这些功能；二是要具备良好的可扩展性，因为后续可能还会新增组件，比如添加组件D，新的方案要能方便地将其接入。

二、实现方案核心思路

实现这个功能的核心是借助flex布局的order属性来设置组件的顺序。简单来说，order属性可以改变弹性盒子中项目的排列顺序。我们可以根据后台配置的组件顺序，给每个组件设置对应的order值，从而实现组件顺序的自由调整。

三、具体实现步骤

（一）配置映射函数

首先，我们需要一个函数，将后台配置的字符串（比如B,C,A）转换为配置映射对象。这个对象的键是组件名称，值是对应的顺序值。代码如下：

const getOrderConfig = (order) => {
  const orderConfig = {}
  order.split(\',\').forEach((orderKey, index) => {
    orderConfig[orderKey] = index + 1
  })
  return orderConfig
}

在这段代码中，getOrderConfig函数接收一个表示组件顺序的字符串order。它先创建一个空对象orderConfig，然后通过split(\',\')方法将字符串按逗号分割成数组。接着，使用forEach方法遍历这个数组，index表示当前元素在数组中的索引，从0开始。我们将每个组件名称作为键，索引值加1作为值，存入orderConfig对象中。最后返回这个配置映射对象。

（二）创建Flex布局包裹组件

接下来，创建一个名为OrderWrapper的Vue组件，它用于包裹需要调整顺序的组件。这个组件结合Vue的具名插槽来实现功能。具名插槽可以让我们在不同的位置插入不同的组件。代码如下：

<script setup name=\"OrderWrapper\">
import { defineProps, computed } from \'vue\'

const props = defineProps({
  orderConfig: {
    type: Object,
    default: () => ({}),
  }
})

const orderKeys = computed(() => Object.keys(props.orderConfig))
</script>

<template>
  <div style=\"display:flex;flex-direction:column;\">
    <div
      v-for=\"orderKey in orderKeys\"
      :key=\"orderKey\"
      :style=\"{ order: orderConfig[orderKey] }\"
    >
      <slot :name=\"orderKey\" />
    </div>
  </div>
</template>

在<script setup>部分：

• 首先通过defineProps定义了一个名为orderConfig的属性，它的类型是对象，默认值是一个空对象。这个属性用于接收配置映射对象。
• 然后使用computed计算属性创建了orderKeys，它通过Object.keys(props.orderConfig)获取配置映射对象的所有键，也就是组件名称，这样我们就能遍历这些组件名称来动态渲染组件。

在<template>部分：

• 外层<div>设置了display:flex和flex-direction:column，表示使用垂直方向的弹性布局。
• 内部通过v-for指令遍历orderKeys，为每个组件创建一个<div>。key属性设置为当前的orderKey，用于提高Vue渲染的效率。
• 通过:style=\"{ order: orderConfig[orderKey] }\"为每个<div>设置order样式，其值就是配置映射对象中对应组件的顺序值。
• <slot :name=\"orderKey\" />表示具名插槽，会根据name的值插入对应的组件。

（三）使用OrderWrapper组件

最后，在使用OrderWrapper组件时，按照以下方式编写代码：

<Comp :order-config=\"orderConfig\">
  <template v-slot:A>
    <A />
  </template>
  <template v-slot:B>
    <B />
  </template>
  <template v-slot:C>
    <C />
  </template>
</Comp>

这里的<Comp>就是OrderWrapper组件，order-config属性绑定了配置映射对象orderConfig。在组件内部，通过<template v-slot:A>、<template v-slot:B>和<template v-slot:C>分别定义了名为A、B、C的具名插槽，并在其中插入对应的组件A、B、C。这样，组件就会按照配置映射对象中的顺序进行展示。

如果大家想要亲自修改代码，体验一下效果，通过以上方法，我们就利用Vue和Flex成功实现了页面组件顺序的可配置功能，既满足了当前需求，又具备良好的扩展性，方便后续新增组件的接入，你学会了吗。