前言

首先，让我们直接看一个需求场景

在 UI 评审的时候，UI 同学希望我们实现一个这样的TabsA

然而我们平时用的 Tabs 长这样

这时你想怎么做

1.!important 直接覆盖 Ant Design 样式。

如果 UI 改造较简单，我们第一反应是直接覆盖 Ant Design 样式，可是当某些时候 Ant Design 组件的dom节点的组成已经无法满足我们覆盖 css 样式的改造，这时怎么做

2.重写一个 Tabs 组件

这个可以暂时解决该问题

可是如果后续 UI 又出了一个这样的 TabsB 需求

这时我们该怎么办，第一反应可能是在我们重写的 Tabs 组件里做两套 css 样式，根据不同情况展示出不同样式，可是如果后续又出了一款新的 UI 我们的代码会变得越来越冗长、复杂、难以理解，而且自己维护的组件可能会遇到一些浏览器兼容问题，数据上的边界条件处理考虑不周导致的未知 bug 等等，这些问题可能都会让自己决定放弃，还是使用成熟的组件库框架 Ant Design 比较好，只能继续去和 UI 沟通使用通用的组件，然而这会在某些程度上限制我们系统 UI 界面的设计灵活性。

Headless UI 可以帮助我们解决以上问题

什么是 Headless UI？

Headless UI 是 Tailwind Labs 提供的一套开源组件库，github stars 22.9K

Headless UI 让我们第一时间联想到无头 UI，这不是很好理解，那么在此之前我们先了解一下 Headless Browser

A headless browser is a web browser without a graphical user interface.

可以看出 Headless Browser 是没有用户交互界面的浏览器，那么 Headless UI 也是类似的意思，指的是不提供样式的 UI 组件，相对于传统组件，如 Ant Design，element-ui 等，Headless UI 组件只处理状态变更、事件绑定、浏览器兼容性和无障碍访问等功能，唯独就是缺少了样式，这是 Headless UI 的核心特点。

Headless UI 的设计思想

对于传统组件，我们在 A 页面和 B 页面都是使用的一套样式，难以去自定义一些 UI 样式，在 Headless UI 中我们可以在 A 页面和 B 页面结合不同的 css 去实现不同的 Tabs, 即组件的核心逻辑和样式解耦，可以灵活实现TabsA 和 TabsB 两套不同的 UI 样式

实现代码

codesandbox.io/p/devbox/he…

基于 Headless UI 思想的进一步思考

可以看到 demo 里有两种不同的 dialog，dialog 里有不同的 tab, 但是他们只是 UI 不同, 逻辑层相同，所以我们可以将逻辑抽离出来，封装成 vue3 的一个 hook, 这样两个 dialog 可以使用同一个 hook, 去实现两个不同的 dialog。

import { ref } from "vue";
import {
  StarOutlined,
  GlobalOutlined,
  PictureOutlined,
  ShopOutlined,
} from "@ant-design/icons-vue";
export const useModal = () => {
  const visible = ref(false);
  const title = "弹窗的标题";
  const contentText = "这有一个tabs";
  const tabList = [
    {
      tab: "推荐",
      icon: StarOutlined,
      content: "这是推荐content",
    },
    {
      tab: "美食",
      content: "这是美食content",
      icon: ShopOutlined,
    },
    {
      tab: "影视",
      content: "这是影视content",
      icon: PictureOutlined,
    },
    {
      tab: "旅行",
      content: "这是旅行content",
      icon: GlobalOutlined,
    },
  ];

  const onOk = () => {
    visible.value = false;
  };

  const onShow = () => {
    visible.value = true;
  };

  return {
    onOk,
    visible,
    title,
    contentText,
    tabList,
    onShow,
  };
};