# Ract19版本更新指南

React在2024年12月正式发布react 19的稳定版，那么19版本react都更新了什么内容呢，接下来小编会以案例的形式带大家了解下这些更新点。



## Actions

Actions并不是一个api,而是一个概念词汇。
按照惯例，`使用异步过渡的函数被称为 “Actions”`
Actions 自动为你管理数据提交：

- 待定状态: Actions 提供一个待定状态，该状态在请求开始时启动，并在最终状态更新提交时自动重置。
- 乐观更新: Actions 支持新的 useOptimistic Hook，因此你可以在请求提交时向用户显示即时反馈。
- 错误处理: Actions 提供错误处理，因此当请求失败时，你可以显示错误边界，并自动将乐观更新恢复到其原始值。
- 表单: <form> 元素现在支持将函数传递给 action 和 formAction 属性。将函数传递给 action 属性默认使用 Actions，并在提交后自动重置表单。
    
Action必须在startTransition内部使用。

先让我们复习一下startTransition的用法吧。
    
场景：tab页面切换，Home/Article/About，其中Article渲染页面非常卡顿，当切换到Article时，由页面卡顿，当再切换到其他页面时，会出现切换无效的问题。
 ```tsx
 import { memo, useState,useTransition } from "react"

interface TabButtonProp {
  isActive: boolean
  children: React.ReactNode
  onClick: () => void
}

const TabContainer = () => { 
  const [tab, setTab] = useState<"home" | "article" | "about">("home");
  const [isPending,startTransition] = useTransition()
  const selectTab = (newTab: "home" | "article" | "about") => {
    startTransition(() => {
      setTab(newTab);
    })
  };
  return (
    <div>
      <div>
        <TabButton isActive={tab === "home"} onClick={() => selectTab("home")}>
          Home
        </TabButton>
        <TabButton
          isActive={tab === "article"}
          onClick={() => selectTab("article")}
        >
          { isPending ? 'loading...' : 'Article'}
        </TabButton>
        <TabButton
          isActive={tab === "about"}
          onClick={() => selectTab("about")}
        >
          About
        </TabButton>
      </div>
      {tab === "home" && <HomeTab />}
      {tab === "article" && <ArticleTab />}
      {tab === "about" && <AboutTab />}
    </div>
  );
}

const TabButton = ({ children, isActive, onClick }: TabButtonProp) => {
  const btnStyle = {
    backgroundColor: isActive ? "#4096ff" : "#fff",
    border: "1px solid #999",
    padding: "8px 16px",
    margin: "0 4px",
    cursor: "pointer",
    display: "inline-block",
    fontSize: "16px",
    fontWeight: isActive ? "bold" : "normal",
    color: isActive ? "#fff" : "#000",
  };
  return (
    <button style={btnStyle} onClick={onClick}>
      {children}
    </button>
  );
};

const HomeTab = () => { 
  return <h2>Welcome to Home</h2>;

}
const AboutTab = () => { 
  return <h2>About Us</h2>;
}
const ArticleTab = () => {
  return (
    <ul>
      {new Array(100).fill(0).map((item, index) => {
        return <SlowArticle key={index} index={index} />;
      })}
    </ul>
  );
}

// 模拟一个渲染耗时的组件
const SlowArticle = memo(({ index }: {index:number}) => {
  const startTime = performance.now();
  while (performance.now() - startTime < 10) {} // 模拟慢操作

  return <li>文章：{index + 1}</li>;
});

export default TabContainer;
```
    
Actions Demo
```tsc
 import { useState, useTransition } from "react";

const ActionsDemo = () => { 
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      // react 19 支持异步函数，而在react8中必须是同步函数
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
    });
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}
```
    
## useActionState
    
    useActionState 是一个可以根据某个表单动作的结果更新 state 的 Hook。
```const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);```
    
```tsx
import { startTransition, useActionState, useState } from "react";

const UseActionStateDemo = () => { 
  const [name, setName] = useState("");
  // formData就是调用submitHandle时传递的参数
  const action = async (previousState, formData) => {
    // ajax请求接口更新数据
    const resp = await updateName(formData);
    if (resp.code == 0) {
      return {
        success: true,
        data: resp.data,
      }; // 无论成功还是失败都必须有返回值，这个返回值会自动更新到state，也作为下一次的previousState
    } else {
      return {
        success: false,
        message: resp.message,
      };
    }
  };
  const [state, submitHandle, isPending] = useActionState(action, null);

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button
        disabled={isPending}
        onClick={() => {
          startTransition(() => {
            // 注意外面必须使用startTransition包裹
            submitHandle(name);
          });
        }}
      >
        提交
      </button>

      <h1>{state}</h1>
    </div>
  );
}
```
## form action属性加强
 ```tsx
import {useState,useActionState,startTransition} from 'react'
function App(){
  // formData:FormData
  const action = async (previousState, formData) => {
    const resp = await updateName(formData)
    if(resp.code == 0){
      return {
        success: true,
        data: resp.data
      } // 无论成功还是失败都必须有返回值，这个返回值会自动更新到state，也作为下一次的previousState
    }else{
      return {
        success: false,
        message: resp.message
      }
    }
  }
  const [state, submitHandle,isPending] = useActionState(action, null);

  return (
    <div>
      <form action={submitHandle}>
        <input name="name1"/>
        <button disabled={isPending} type="submit">提交</button>
      </form>
        <h1>{state}</h1>
    </div>
  )
}
```
    
    
## useOptimistic 乐观更新

todoList案例
```tsx
import {useState,useOptimistic，startTransition} from 'react'

const fakeApi = (task) => {
  return new promise((resolve,reect) => {
    settimeout(() => {
      if(Math.random() > 0.5){
        resolve(`任务【${task}】添加成功`)
      }else{
        reject('任务添加失败')
      }
    },1000)
  })
}

function TaskList(){
  const [tasks,setTasks] = useState([]) //待办事项列表
  const [optimisticState, addOptimistic] = useOptimistic(state, (currentTasks,newTask) => {
    return [...currentTasks,newTask] //返回一个新的乐观状态
  });

  const addTask = (task) => {
    startTransition(async() => {
      // 在发起异步任务之前，先更新乐观值，如果请求失败了，会自动回滚乐观状态
      addOptimistic(task)
      // 掉接口,
      await fakeApi(task)
      //  更新真实状态
      setTasks((currentTask) => {
        return [...currentTask,task]
      })
    })
    
  }

  return (
    <div>
      <h1>待办事项列表</h1>
      <ul>
        {
          optimisticState.map((task,index) => (<li key={index}>{task}</li>))
        }
      </ul>
    </div>
  )
}
```

## useFormStatus

useFormStatus 读取离它最近的那个 <form> 的状态，就像表单是一个 Context 提供者一样

```tsx
import {useFormStatus} from 'react-dom';
async function submitForm(){
  return new Promise((res) => setTimeout(res,1000))
}
function Submit(){
  // 获取父组件Form的状态
  const { pending, data, method, action } = useFormStatus();
  return (
    <button type="submit">
      {pending ? '提交中...' : '提交'}
    </button>
  )
}
function Form({action}){
  return (
    <form action={action}>
      <input name="message" />
      <Submit />
    </form>
  )
}

function App(){
  return <Form action={submitForm} />
}

```
    
## use
  
use 是一个 React API，它可以让你读取类似于 Promise 或 context 的资源的值。
    
 ```tsx
 import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
    // ... 
 }
```
    
与 React Hook 不同的是，可以在循环和条件语句（如 if）中调用 use。但需要注意的是，调用 use 的函数仍然必须是一个组件或 Hook。

当使用 Promise 调用 use API 时，它会与 Suspense 和 错误边界 集成。当传递给 use 的 Promise 处于 pending 时，调用 use 的组件也会 挂起。如果调用 use 的组件被包装在 Suspense 边界内，将显示后备 UI。一旦 Promise 被解决，Suspense 后备方案将被使用 use API 返回的数据替换。如果传递给 use 的 Promise 被拒绝，将显示最近错误边界的后备 UI。
    
当 context 被传递给 use 时，它的工作方式类似于useContext。而 useContext 必须在组件的顶层调用，use 可以在条件语句如 if 和循环如 for 内调用。相比之下，use 比 useContext更加灵活。
use 返回传递的 context 的 context 值。React 会搜索组件树并找到 最接近的 context provider 以确定需要返回的 context 值。
    
    
## ref
在react18中，如果想在父组件中获取子组件的ref,一般通过forwardRef实现。
    
案例点击按钮让子组件获取焦点
```tsx
import { forwardRef, useRef } from "react"

function RefDemo() { 
  const inputref = useRef<HTMLInputElement>(null)
  const focusInput = () => { 
    inputref.current?.focus()
  }
  return (
    <div>
      <h1>我是父组件</h1>
      <MyInput ref={ inputref} />
      <button onClick={focusInput}>提交</button>
    </div>
  );
}


const MyInput = forwardRef<HTMLInputElement,any>((props,ref) => { 
  return <div>
    <h1>我是子组件</h1>
    <input ref={ref} type="text"/>
  </div>
})

export default RefDemo  
```

在react19中，ref可以作为props的属性
```tsx
import {useRef } from "react"

function RefDemo() { 
  const inputref = useRef<HTMLInputElement>(null)
  const focusInput = () => { 
    console.log(inputref)
    inputref.current?.focus()
  }
  return (
    <div>
      <h1>react19</h1>
      <MyInput ref={ inputref} />
      <button onClick={focusInput}>提交</button>
    </div>
  );
}


const MyInput = (props) => { 
  return <div>
    <h1>我是子组件</h1>
    <input ref={props.ref} type="text"/>
  </div>
}

export default RefDemo 
```
## Context 简写
    
React 19 引入了更简洁的 Context 写法，现在可以直接使用 `<Context>` 代替 `<Context.Provider>`
```tsx
const ThemeContext = createContext('');
function App({children}) {
  return <ThemeContext value="dark">{children}</ThemeContext>;
} 
```
    
## refs 支持清理函数
这将使得在 ref 改变时执行清理操作变得更加容易(允许在组件卸载时自动执行清理逻辑)
    
    
场景：
一个按钮可以被另外一个按钮控制显示和隐藏，如果显示动态的添加click事件，隐藏时移除事件
    
在react8中的做法如下
```tsx
import { useEffect, useRef, useState } from "react"


function RefsDemo() { 
  const [showBtn, setShowBtn] = useState(true)
  const btnRef = useRef<HTMLButtonElement>(null)

  useEffect(() => { 
    if (btnRef.current) {
      console.log("Button 2 addEventListener");
      const handler = () => alert("Button 2 clicked");
      btnRef.current.addEventListener("click", handler);
      return () => {
        console.log("Button 2 removeEventListener");
        btnRef.current?.removeEventListener("click", handler); 
      };
    }  
  },[showBtn])
  return (
    <div>
      <h1>raect 18</h1>
      <button onClick={() => setShowBtn(!showBtn)}>点击切换按钮2状态</button>
      <br></br>
      {
        showBtn && <button ref={ btnRef}>按钮2</button>
      }
    </div>
  );
}

export default RefsDemo  
```
    
在react 19版本中的做法如下
```tsx
function RefsDemo19() {
  const [showBtn, setShowBtn] = useState(true);

  const setRef = (ref) => { 
    if (ref) {
      console.log("Button 2 addEventListener");
      const handler = () => alert("Button 2 clicked");
      ref.addEventListener("click", handler);
      return () => {
        console.log("Button 2 removeEventListener");
        ref?.removeEventListener("click", handler);
      };
    }
  }
  return (
    <div>
      <h1>raect 19</h1>
      <button onClick={() => setShowBtn(!showBtn)}>点击切换按钮2状态</button>
      <br></br>
      {showBtn && <button ref={setRef}>按钮2</button>}
    </div>
  );
} 
    
```
## 支持Document Metadata
```tsx
function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}  
```
    
## 支持样式表
    
样式表，无论是外部链接的 (<link rel="stylesheet" href="...">) 还是内联的 (<style>...</style>)，都需要在 DOM 中进行精确的定位，因为样式优先级规则。构建一个允许在组件内部进行组合的样式表功能是困难的，所以用户通常要么将所有的样式远离可能依赖它们的组件加载，要么使用一个封装了这种复杂性的样式库。

在 React 19 中，我们正在解决这个复杂性，并提供更深入的集成到客户端的并发渲染和服务器的流式渲染，内置支持样式表。如果你告诉 React 你的样式表的 precedence，它将管理样式表在 DOM 中的插入顺序，并确保在显示依赖于这些样式规则的内容之前加载样式表（如果是外部的）。
    
```tsx
function ComponentOne() {
  return (
    <Suspense fallback="loading...">
      <link rel="stylesheet" href="foo" precedence="default" />
      <link rel="stylesheet" href="bar" precedence="high" />
      <article class="foo-class bar-class">
        {...}
      </article>
    </Suspense>
  )
}

function ComponentTwo() {
  return (
    <div>
      <p>{...}</p>
      <link rel="stylesheet" href="baz" precedence="default" />  <-- will be inserted between foo & bar
    </div>
  )
} 
```
        
## 支持异步脚本
        
在 HTML 中，普通脚本 (<script src="...">) 和延迟脚本 (<script defer="" src="...">) 按照文档顺序加载，这使得在组件树深处渲染这些类型的脚本变得具有挑战性。然而，异步脚本 (<script async="" src="...">) 将以任意顺序加载。

在 React 19 中，我们通过允许你在组件树的任何位置，即实际依赖脚本的组件内部，渲染它们，从而为异步脚本提供了更好的支持，无需管理脚本实例的重新定位和去重。
        
```tsx
function MyComponent() {
  return (
    <div>
      <script async={true} src="..." />
      Hello World
    </div>
  )
}

function App() {
  <html>
    <body>
      <MyComponent>
      ...
      <MyComponent> // won't lead to duplicate script in the DOM
    </body>
  </html>
}    
```
        
## 支持预加载资源
在初始文档加载和客户端更新时，尽早告诉浏览器它可能需要加载的资源，可以显著提高页面性能。

React 19 包含了一些新的 API，用于加载和预加载浏览器资源，使得构建不受资源加载效率影响的优秀体验变得尽可能容易。
        
```tsx
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'
function MyComponent() {
  preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly
  preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font
  preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet
  prefetchDNS('https://...') // when you may not actually request anything from this host
  preconnect('https://...') // when you will request something but aren't sure what
}
```
上面的代码渲染的结果如下
```html

<html>
  <head>
    
    <link rel="prefetch-dns" href="https://...">
    <link rel="preconnect" href="https://...">
    <link rel="preload" as="font" href="https://.../path/to/font.woff">
    <link rel="preload" as="style" href="https://.../path/to/stylesheet.css">
    <script async="" src="https://.../path/to/some/script.js"></script>
  </head>
  <body>
    ...
  </body>
</html>
```
这些 API 可以通过将像字体这样的额外资源的发现从样式表加载中移出来，优化初始页面加载。它们还可以通过预取预期导航使用的资源列表，然后在点击或甚至悬停时积极预加载这些资源，使客户端更新更快。

React19更新须知

ng-zorro-antd之less编译过程



![image.png](/static/img/a7cfabf7707c149e4a4ece3168937ae4.image.webp)


![image.png](/static/img/46a5c56ac66fbaa7b6ea50f948320c3f.image.webp)

源码分析如下
 
```ts
/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

import * as fs from 'fs-extra';
import * as less from 'less';

import * as path from 'path';

import { buildConfig } from '../build-config';

const lessPluginCleanCSS = require('less-plugin-clean-css');
const npmImportPlugin = require('less-plugin-npm-import');

async function compileLess(
  content: string, // @root-entry-name: default;\n 再加上entry.less里的内容 @import './index.less';@import './patch.less';
  savePath: string, //编译后的css保存路径 publish/组件名称/style/index.css
  min: boolean, //是否对css压缩
  sub?: boolean,
  rootPath?: string //less路径  components/组件/style/entry.less
): Promise<void> {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const plugins: any[] = [];
  const lessOptions: Less.Options = { plugins, javascriptEnabled: true };

  if (min) {
    plugins.push(new lessPluginCleanCSS({ advanced: true }));
  }

  if (sub) {
    // 待编译less路径 [components/affix/style]
    lessOptions.paths = [path.dirname(rootPath as string)];
    // 待编译less 文件名称 components/affix/style/entry.less
    lessOptions.filename = rootPath;
    plugins.push(
      new npmImportPlugin({
        prefix: '~'
      })
    );
  }

  // 编译less
  return less
    .render(content, lessOptions)
    .then(({ css }) => {
      return fs.writeFile(savePath, css); //将编译后的css写入到指定文件  publish/组件名称/style/index.css
    })
    .catch(err => Promise.reject(err));
}

const sourcePath = buildConfig.componentsDir;
const targetPath = buildConfig.publishDir;

export async function compile(): Promise<void | void[]> {
  const componentFolders = fs.readdirSync(targetPath);
  const promiseList = [];
  console.log('componentFolders: ', componentFolders); // componsnts路径下所以的文件夹 组件
  console.log('sourcePath: ', sourcePath); // /components
  console.log('targetPath: ', targetPath); // /publish
  for (const dir of componentFolders) {
    // 每一个组件包下面有样式的才编译less
    if (await fs.pathExists(`${sourcePath}/${dir}/style/index.less`)) {
      // 将/components/组件/style样式文件 拷贝到/publish/组件/style
      await fs.copy(`${sourcePath}/${dir}/style`, `${targetPath}/${dir}/style`);
      // Compile less files to CSS and delete the `entry.less` file.
      const buildFilePath = `${sourcePath}/${dir}/style/entry.less`;
      const componentLess = await fs.readFile(buildFilePath, { encoding: 'utf8' });
      if (await fs.pathExists(buildFilePath)) {
        // Rewrite `entry.less` file with `root-entry-name`
        const entryLessFileContent = needTransformStyle(componentLess)
          ? `@root-entry-name: default;\n${componentLess}`
          : componentLess;
        // entry.less里的内容
        // @root-entry-name: default;
        // @import './index.less';
        // @import "./patch";
        console.log('entryLessFileContent: ', entryLessFileContent);
        // 编译未压缩版index.css
        promiseList.push(
          compileLess(
            entryLessFileContent,
            path.join(targetPath, dir, 'style', `index.css`),
            false,
            true,
            buildFilePath
          )
        );
        // 编译压缩版index.min.css
        promiseList.push(
          compileLess(
            entryLessFileContent,
            path.join(targetPath, dir, 'style', `index.min.css`),
            true,
            true,
            buildFilePath
          )
        );
      }
    }
  }

  console.log('拷贝样式');
  // 拷贝全局样式   把/components/style下的全局样式 拷贝到 /publish/style下面
  await fs.copy(path.resolve(sourcePath, 'style'), path.resolve(targetPath, 'style'));
  await fs.writeFile(`${targetPath}/components.less`, await fs.readFile(`${sourcePath}/components.less`));
  await fs.writeFile(`${targetPath}/ng-zorro-antd.less`, await fs.readFile(`${sourcePath}/ng-zorro-antd.less`));
  await fs.writeFile(
    `${targetPath}/ng-zorro-antd.dark.less`,
    await fs.readFile(`${sourcePath}/ng-zorro-antd.dark.less`)
  );
  await fs.writeFile(
    `${targetPath}/ng-zorro-antd.aliyun.less`,
    await fs.readFile(`${sourcePath}/ng-zorro-antd.aliyun.less`)
  );
  await fs.writeFile(
    `${targetPath}/ng-zorro-antd.compact.less`,
    await fs.readFile(`${sourcePath}/ng-zorro-antd.compact.less`)
  );

  await fs.writeFile(
    `${targetPath}/ng-zorro-antd.variable.less`,
    await fs.readFile(`${sourcePath}/ng-zorro-antd.variable.less`)
  );

  // 编译ng-zorro-antd.less
  const lessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.less')}";`;
  console.log(lessContent); //@import "磁盘路径/publish/ng-zorro-antd.less";
  promiseList.push(compileLess(lessContent, path.join(targetPath, 'ng-zorro-antd.css'), false));
  promiseList.push(compileLess(lessContent, path.join(targetPath, 'ng-zorro-antd.min.css'), true));

  // 编译 ng-zorro-antd.dark.less
  const darkLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.dark.less')}";`;
  promiseList.push(compileLess(darkLessContent, path.join(targetPath, 'ng-zorro-antd.dark.css'), false));
  promiseList.push(compileLess(darkLessContent, path.join(targetPath, 'ng-zorro-antd.dark.min.css'), true));

  // 编译  ng-zorro-antd.compact.less
  const compactLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.compact.less')}";`;
  promiseList.push(compileLess(compactLessContent, path.join(targetPath, 'ng-zorro-antd.compact.css'), false));
  promiseList.push(compileLess(compactLessContent, path.join(targetPath, 'ng-zorro-antd.compact.min.css'), true));

  // 编译 ng-zorro-antd.aliyun.less
  const aliyunLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.aliyun.less')}";`;
  promiseList.push(compileLess(aliyunLessContent, path.join(targetPath, 'ng-zorro-antd.aliyun.css'), false));
  promiseList.push(compileLess(aliyunLessContent, path.join(targetPath, 'ng-zorro-antd.aliyun.min.css'), true));

  // 编译 ng-zorro-antd.variable.less
  const variableLessContent = `@import "${path.posix.join(targetPath, 'ng-zorro-antd.variable.less')}";`;
  promiseList.push(compileLess(variableLessContent, path.join(targetPath, 'ng-zorro-antd.variable.css'), false));
  promiseList.push(compileLess(variableLessContent, path.join(targetPath, 'ng-zorro-antd.variable.min.css'), true));

  // Compile css file that doesn't have component-specific styles.
  const cssIndexPath = path.join(sourcePath, 'style', 'entry.less');
  console.log(cssIndexPath); // /磁盘全路径/ng-zorro-antd/components/style/entry.less
  const cssIndex = await fs.readFile(cssIndexPath, { encoding: 'utf8' });
  // Rewrite `entry.less` file with `root-entry-name`
  const entryLessInStyle = needTransformStyle(cssIndex) ? `@root-entry-name: default;\n${cssIndex}` : cssIndex;
  console.log(entryLessInStyle); // @root-entry-name: default;
  // 编译全局style样式
  promiseList.push(
    compileLess(entryLessInStyle, path.join(targetPath, 'style', 'index.css'), false, true, cssIndexPath)
  );
  promiseList.push(
    compileLess(entryLessInStyle, path.join(targetPath, 'style', 'index.min.css'), true, true, cssIndexPath)
  );
  return Promise.all(promiseList).catch(e => console.log(e));
}

function needTransformStyle(content: string): boolean {
  return (
    content.includes('../../style/index.less') || content.includes('./index.less') || content.includes('/entry.less')
  );
}

```

ng-zorro-antd打包分析-less编译

如果有一系列的页面布局很类似，为了节省时间，我们可以把这些类似的页面所通用的属性和方法抽离成一个BaseView，让其它页面继承该基础页面，同时将一些经常改变的属性和差异的属性写到配置文件里。例如树容器初始时是否展开、某些图表是否显示等都可以写到配置文件里面。本文将带你实现该功能，抽离出BaseView页面组件，鉴于json文件无法写注释的情况，配置文件采取yml的格式


# 页面设计


![image.png](https://blog.qianxun.shop/static/img/128a8948133ed8ddb276629840d496a1.1.webp)
# 组件抽离
## BaseViewComponent
```
import { Injectable, OnDestroy, OnInit } from "@angular/core";

import { ConfigService } from "@app/core/config/config.service";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { deepMergeKey } from "../utils";
import { HandlebarCalendarModelType } from "./baseView.type";
import { TimeRange } from "topdsm-lib/core/util"

import dayjs from 'dayjs';
var customParseFormat = require('dayjs/plugin/advancedFormat')


@Injectable()
export class BaseViewComponent implements OnInit, OnDestroy {

    /** 页面通用属性 */
    pageNum = 1
    pageSize = 10
    tableData = []
    tableTotal = 0


    public unsubscribe$ = new Subject<void>();
    /** 原始config */
    public originalConfig: Record<string, any> = null

    /** 页面config */
    public config: Record<string, any> = {
        leftPanelExpand: true,
        handlebarCalendarModel: [],
        query: {}
    }
    constructor(
        public viewKey: string, // 页面唯一key
        public configService: ConfigService // 用来读取json配置文件
    ) {
        console.log("BaseViewComponent constructor");

    }
    ngOnInit(): void {
        console.log();

        this.configService.change.pipe(takeUntil(this.unsubscribe$)).subscribe(async (config) => {
            console.log(config);
            if (config) {
                this.originalConfig = config
                if (this['configServiceReaderBefore']) {
                    await this['configServiceReaderBefore'](config)
                }
                this.handleConfig()
                if (this['configServiceReaderAfter']) {
                    await this['configServiceReaderAfter'](config)
                }
            }
        });
    }
    ngOnDestroy(): void {
        const { unsubscribe$ } = this;
        unsubscribe$.next();
        unsubscribe$.complete();
    }

    handleConfig() {
        deepMergeKey(this.config, true, this.originalConfig.global, this.originalConfig?.modules?.[this.viewKey])
        this.handleCalendarTime()
        this.handleBarBtn()
        console.log(this.config);
    }

    /**
    * handlebar 日历组件初始值处理,
    * 获取开始时间和结束时间，该逻辑可以根据自己的业务场景自定义
    */
    handleCalendarTime() {
        let tg = {
            start: "",
            end: ""
        }
        switch (this.config.handlebarCalendarModelType) {
            case HandlebarCalendarModelType.CUSTOM:
                if (this.config.handlebarCalendarModel.length === 1) {
                    tg.start = this.config.handlebarCalendarModel[0]
                    tg.end = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss").substring(0, 10) + " 23:59:59"
                } else if (this.config.handlebarCalendarModel.length === 2) {
                    tg.start = this.config.handlebarCalendarModel[0]
                    tg.end = this.config.handlebarCalendarModel[1]
                }
                break;
            case HandlebarCalendarModelType.LASTYEAY: // 上一年
                tg = TimeRange.getLastYearRange()
                break;
            case HandlebarCalendarModelType.LASTQUATER: // 上一季度
                tg = TimeRange.getLastQuarterRange()
                break;
            case HandlebarCalendarModelType.LASTMONTH: // 上一月
                tg = TimeRange.getLastMonthRange()
                break;

            case HandlebarCalendarModelType.LAST7DAY: // 近7天
                tg = {
                    start: TimeRange.getLast7dayRange().start,
                    end: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss").substring(0, 10) + " 23:59:59"
                }
                break;
            case HandlebarCalendarModelType.MONTH: // 本月
                tg = TimeRange.getMonthRange()
                break;

            case HandlebarCalendarModelType.QUATER: // 本年度
                tg = TimeRange.getQuarterRange()
                break;

            case HandlebarCalendarModelType.YEAR: // 本年度
                tg = TimeRange.getYearRange()
                break;
            default:
                break;
        }

        if (tg.start !== "" && tg.end !== "") {
            tg.start = tg.start.substring(0, 10) + " 00:00:00"
            tg.end = tg.end.substring(0, 10) + " 23:59:59"
        }
        this.config.query.startTimeStr = tg.start
        this.config.query.endTimeStr = tg.end

        if (tg.start !== "" && tg.end !== "") {
            this.config.handlebarCalendarModel = [
                dayjs(this.config.query.startTimeStr, "YYYY-MM-DD HH:mm:ss").toDate(),
                dayjs(this.config.query.endTimeStr, "YYYY-MM-DD HH:mm:ss").toDate(),
            ]
        } else {
            this.config.handlebarCalendarModel = []
        }
    }

    handleBarBtn() {
        let btnSelected = {

        }
        this.config.handlebarRightBtn = this.config.handlebarRightBtn.filter(item => item.show)
        
        this.config.handlebarRightBtn.forEach(item => {
            btnSelected[item.key] = item.selected
        })
        this.config.handlebarRightBtnSelected = btnSelected
    }
}

```

时间段枚举
```
export enum HandlebarCalendarModelType {
    /** 自定义 */
    CUSTOM = "0",
    /** 上一年 */
    LASTYEAY = "1",
    /** 上一季度 */
    LASTQUATER = "2",
    /** 上一月 */
    LASTMONTH = "3",
    /** 上一周 */
    LASTWEEK = "4",
    /** 本周 */
    WEEK = "5",
    /** 本月 */
    MONTH = "6",
    /** 本季度 */
    QUATER = "7",
    /** 本年度 */
    YEAR = "8",
    /** 近7天 */
    LAST7DAY = "9"
}
```

属性合并的函数
```

/**
 * Deep merge object.
 *
 * 深度合并对象
 *
 * @param original 原始对象
 * @param arrayProcessMethod 数组处理方式
 *  - `true` 表示替换新值，不管新值为哪种类型
 *  - `false` 表示会合并整个数组（将旧数据与新数据合并成新数组）
 * @param objects 要合并的对象
 */
 export function deepMergeKey(original: unknown, arrayProcessMethod: boolean, ...objects: NzSafeAny[]): NzSafeAny {
  if (Array.isArray(original) || typeof original !== 'object') return original;

  const isObject = (v: unknown): boolean => typeof v === 'object';

  const merge = (target: NzSafeAny, obj: NzSafeAny): NzSafeAny => {
    Object.keys(obj)
      .filter(key => key !== '__proto__' && Object.prototype.hasOwnProperty.call(obj, key))
      .forEach(key => {
        const fromValue = obj[key];
        const toValue = target[key];
        if (Array.isArray(toValue)) {
          target[key] = arrayProcessMethod ? fromValue : [...toValue, ...fromValue];
        } else if (typeof fromValue === 'function') {
          target[key] = fromValue;
        } else if (fromValue != null && isObject(fromValue) && toValue != null && isObject(toValue)) {
          target[key] = merge(toValue, fromValue);
        } else {
          target[key] = deepCopy(fromValue);
        }
      });
    return target;
  };

  objects.filter(v => v != null && isObject(v)).forEach(v => merge(original, v));

  return original;
}
```


## ConfigService
读取yml配置文件
```
import { Injectable } from "@angular/core";
import { environment } from "@env/environment";
import { BehaviorSubject, Observable } from "rxjs";
import yaml from "js-yaml"
import axios from "axios"
@Injectable({
    providedIn: 'root'
})
export class ConfigService {
    private change$ = new BehaviorSubject(null);
    constructor() {
        this.getGlobalConfig()
    }

    get change(): Observable<any> {
        return this.change$.asObservable();
    }

    getGlobalConfig() {
        return new Promise((resolve, reject) => {
            let url = "/assets/config.yml"
            if(environment.production){
                url = environment.assetBaseUrl + "/assets/config.yml"
            }
            axios.get(url).then(res => {
                const config = yaml.load(res.data)
                this.change$.next(config);             
            }).catch(err => {
                reject(err)
            })
        })
    }
}
```

## config.yml
```
global: 
  handlebarCalendarModelType: "0"
  handlebarCalendarModel: 
     - "2023-01-01 00:00:00"
  leftPanelWidth: "200px" # 左侧树容器宽度
  leftPanelExpand: true   # 左侧容器初始是否展开 true: 展开  false: 收起
  handlebarRight: true # 是否展示 handlebar右侧的操作按钮
  handlebarRightBtn: # hanlebar右侧操作按钮 控制图标统计区域的显示与否
    - selected: true      # 是否选中
      show: true          # 是否显示
      label: "总量统计"
      icon: "icon-proxy"
      key: "cardNumStatis" # 每个按钮都应该有唯一的key
    - selected: true
      show: true
      label: "对比统计"
      icon: "icon-pie1"
      key: "pieAndBar"
    - selected: true
      show: false
      label: "趋势统计"
      icon: "icon-pie1"
      key: "lineTrend"

  barStyleConfig:
    grid: 
      bottom: 30
    xAxis:
      axisLabel: 
        width: 80

modules: 
  demoPage: 
    leftPanelExpand: true
    barStyleConfig:
      grid: 
        bottom: 45
      xAxis:
        axisLabel:
          overflow: "truncate" # 截断
          rotate: 330  # 旋转度数
```

# demo
## demo-component.ts
```
import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
import { ActivatedRoute, NavigationEnd, Router, RouterEvent } from "@angular/router";
import { BaseViewComponent } from "@app/core/config/base-view.component";
import { ConfigService } from "@app/core/config/config.service";
import { DEMOPAGE } from "@app/core/config/view-key";
import { removeNullProperty } from "@app/core/utils";
import { AccountAssetService } from "@app/services/data-asset-management/account-asset/account-asset.service";
import { format } from "date-fns";

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.less']
})
export class DemoComponent extends BaseViewComponent {

  q = {
   
  }

  constructor(
    private router: Router,
    public activatedRoute: ActivatedRoute,
    public configService: ConfigService,
    private apiService: AccountAssetService,
  ) {
    super(DEMOPAGE, configService)
    console.log("DemoComponent constructor");
  }

  ngOnInit(): void {
    console.log("DemoComponent ngOnInit");

    super.ngOnInit()
  }
  ngOnDestroy(): void {
    console.log("DemoComponent ngOnDestroy");
    super.ngOnDestroy()
  }

  configServiceReaderAfter(config) {
    console.log("configServiceReaderAfter...");
    return new Promise(async (resolve, reject) => {
      this.refsh()
      resolve(null)
    })
  }

  async refsh() {
    //await this.getAccountTypeTreeL1()
    if (this.config.handlebarRight) {
      this.getPieChart1Data()
      this.getPieChart2Data()
      this.getBarChartData()
      this.getAccountCard()
    }

    this.getData()
  }

  getAccountCard() {
  
  }

  getPieChart1Data() {
   
  }

  getPieChart2Data() {
   
  }

  getBarChartData() {
  
  }

  getData() {

    let params: { [key: string]: any } = {
      ...this.q,
      pageNum: this.pageNum,
      pageSize: this.pageSize,
    }

    if (this.config.handlebarRight) {
      params.startTimeStr = this.config.query.startTimeStr
      params.endTimeStr = this.config.query.endTimeStr
    }
    this.apiService.getAccountListByPageApi(removeNullProperty(params)).then((res: resType) => {
      if (res.resultStat == "0") {
        this.tableData = res.data.list
        this.tableTotal = res.data.total
      }
    })
  }

   /** handlebar 操作栏 */
   handleChange(e: any) {
    console.log(e);
    if(e.type === "button"){
      this.config.handlebarRightBtnSelected[e.data.key] = e.data.selected
    }else if(e.type === "calendar"){
      if(e.data.length === 2){
          this.config.query = {
            startTimeStr: format(e.data[0], 'yyyy-MM-dd HH:mm:ss').substring(0,10)+ " 00:00:00",
            endTimeStr: format(e.data[1], 'yyyy-MM-dd HH:mm:ss').substring(0,10)+ " 23:59:59",
          }
      }else{
        this.config.query = {
          startTimeStr: "",
          endTimeStr: ""
        }
      }
      this.refsh()
    }

  }

}

```

## 合并后的配置对象config
```
{
    "leftPanelExpand": true,
    "handlebarCalendarModel": [
        "2022-12-31T16:00:00.000Z",
        "2024-02-04T15:59:59.000Z"
    ],
    "query": {
        "startTimeStr": "2023-01-01 00:00:00",
        "endTimeStr": "2024-02-04 23:59:59"
    },
    "handlebarCalendarModelType": "0",
    "leftPanelWidth": "200px",
    "handlebarRight": true,
    "handlebarRightBtn": [
        {
            "selected": true,
            "show": true,
            "label": "总量统计",
            "icon": "icon-proxy",
            "key": "cardNumStatis"
        },
        {
            "selected": true,
            "show": true,
            "label": "对比统计",
            "icon": "icon-pie1",
            "key": "pieAndBar"
        }
    ],
    "barStyleConfig": {
        "grid": {
            "bottom": 45
        },
        "xAxis": {
            "axisLabel": {
                "width": 80,
                "overflow": "truncate",
                "rotate": 330
            }
        }
    },
    "handlebarRightBtnSelected": {
        "cardNumStatis": true,
        "pieAndBar": true
    }
}
```

Angular抽离通用页面

层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式，层叠性主要解决样式冲突的问题。那么,css是如何处理的呢


层叠计算分为三个步骤：优先级、特殊性(特定性)、源次序

## 步骤一： 优先级
优先级: 比较样式的来源

1. 作者样式表中带 `!important`
2. 浏览器默认样式表带 `!important`
3. 作者样式表普通样式
4. 浏览器默认样式表普通样式

优先级从上到下依次递减
如果在步骤一没有解决冲突就进入步骤二

![image.png](/static/img/9144d4b14b02834123994f6b0c3c1bd6.image.webp)
从上图可见，我们自己写的样式会把浏览器默认样式给覆盖掉

## 步骤二： 特殊性(特定性)
特殊性就是大家经常说的权重

每一个样式都可以用四段数字表示(A,B,C,D),这四段数字级别从左往右依次降低

第一段A: 只能是0或1，内联样式为1，否则就是 0

第二段B: 样式所处的选择器有多少个ID选择器

第三段C: 样式所处的选择器有多少个`类选择器`、`属性选择器`、`伪类选择器`

第四段D: 样式所处的选择器有多少个`元素选择器`、`伪元素选择器`

我们一般比较的都是外联样式的css，所以一般我们看到都是后三段

```css
#app .container.page-home[type="user"] .home-banner a:hover{
      color: burlywood;
    }
```

![image.png](/static/img/dded80621a25e46c8381adbbe76025af.image.webp)

图片中显示的特定性数字是怎么计算来的呢？

id选择器有一个: 
- #app 
类选择器、属性选择器、伪类选择器有5个: 
- .container
- .page-home
- [type="user"]
- .home-banner
- :hover

元素选择器、伪元素选择器1个
- a

所以特定性(1,5,1)


## 步骤三: 源次序

css样式从上到下扫描，下面的会覆盖上面的

css 层叠规则

文本溢出隐藏是常见的需求，如果把需求升级为超出指定的几行隐藏呢，常见的作法是
```
.ellipsis-container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 限制文本显示为3行 */
  overflow: hidden;
}
```
但是这种css方案有浏览器兼容性问题，火狐不支持。这种时候不得不使用javascript来实现,我们将实现一个Vue组件，需求如下:
1. 组件接收 title属性或slot内容，表示标题，如果没有则不显示标题。
2. 组件接收 maxHeight 属性，表示文本最多显示多少行，默认3行，超出则隐藏。
3. 鼠标悬浮tooltip 提示，鼠标移入时显示全部
4. 组件接收 ellipsis 属性，表示文本超出时显示的省略号，默认"..."。
5. 组件接收 showMore 属性(下拉或收起的图标)，表示是否显示“显示全部”按钮，默认显示。下拉或收起时要有动画过度。
6. 适配移动端，手机屏幕宽度小于768px时，隐藏标题。
7. 兼容主流浏览器，IE9+、Chrome、Firefox、Safari、Opera。
8. 适配不同的字体，使用不同的font-family，maxHeight不受影响
9. 使用ts setup 语法


# TextOverflow.vue
```vue
<template>
  <div class="text-overflow-container" :class="{ 'mobile': isMobile }">
    
    <div v-if="hasTitle" class="text-overflow-title">
      <slot name="title">
        {{ title }}
      </slot>
    </div>
    
    
    <div 
      ref="contentRef"
      class="text-overflow-content"
      :class="{ 'collapsed': !isExpanded && isOverflow }"
      :style="{ 
        maxHeight: isExpanded ? 'none' : `${lineHeight * maxHeight}px`,
        '--line-height': `${lineHeight}px`
      }"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <slot name="default">
        {{ title }}
      </slot>
      <span v-if="!isExpanded && isOverflow" class="ellipsis">{{ ellipsis }}</span>
    </div>
    
    
    <div 
      v-if="showTooltip" 
      class="text-overflow-tooltip"
      :class="tooltipClass"
      :style="{ 
        top: `-${tooltipOffset}px`,
        ...tooltipStyle
      }"
      @mouseenter="handleTooltipMouseEnter"
      @mouseleave="handleTooltipMouseLeave"
    >
      <div class="tooltip-content">
        <slot name="tooltip">
          <slot name="default">
            {{ title }}
          </slot>
        </slot>
      </div>
    </div>
    
    
    <div v-if="showMore && isOverflow" class="text-overflow-btn-wrap">
      <button
        class="text-overflow-toggle"
        @click="toggleExpand"
        :aria-expanded="isExpanded"
      >
        <span class="btn-text">{{ isExpanded ? '收起' : '显示全部' }}</span>
        <span class="toggle-icon" :class="{ 'rotate': isExpanded }">▼</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch,useSlots } from 'vue';

interface Props {
  title?: string;
  maxHeight?: number;
  ellipsis?: string;
  showMore?: boolean;
  tooltipClass?: string;
  tooltipStyle?: Record<string, string>;
  tooltipOffset?: number;
  tooltipMaxHeight?: number;
  tooltipMaxWidth?: number;
  // 新增：按钮自定义属性
  btnTextColor?: string;
  btnHoverColor?: string;
}

const props = withDefaults(defineProps<Props>(), {
  maxHeight: 3,
  ellipsis: '...',
  showMore: true,
  tooltipOffset: 10,
  tooltipMaxHeight: 150,
  tooltipMaxWidth: 300,
  btnTextColor: '#1890ff',
  btnHoverColor: '#40a9ff'
});

// 响应式数据
const contentRef = ref<HTMLDivElement | null>(null);
const isExpanded = ref(false);
const isOverflow = ref(false);
const isMobile = ref(false);
const showTooltip = ref(false);
const lineHeight = ref(24);
const isMouseInTooltip = ref(false);
const tooltipTimer = ref<number | null>(null);
const slots = useSlots();
// 是否有标题
const hasTitle = computed(() => {
  return !!props.title || !!slots.title;
});

// 处理窗口大小变化
const handleResize = () => {
  isMobile.value = window.innerWidth < 768;
  checkOverflow();
};

// 检查文本是否溢出
const checkOverflow = () => {
  if (contentRef.value) {
    contentRef.value.style.maxHeight = 'none';
    const scrollHeight = contentRef.value.scrollHeight;
    contentRef.value.style.maxHeight = isExpanded.value ? 'none' : `${lineHeight.value * props.maxHeight}px`;
    
    const computedStyle = window.getComputedStyle(contentRef.value);
    const computedLineHeight = computedStyle.lineHeight;
    lineHeight.value = computedLineHeight === 'normal' ? 24 : parseFloat(computedLineHeight);
    
    isOverflow.value = scrollHeight > lineHeight.value * props.maxHeight;
  }
};

// 切换展开/收起状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
  setTimeout(checkOverflow, 300);
};

// 文本容器鼠标进入
const handleMouseEnter = () => {
  if (isOverflow.value && !isExpanded.value) {
    clearTimeout(tooltipTimer.value!);
    tooltipTimer.value = setTimeout(() => {
      showTooltip.value = true;
    }, 200);
  }
};

// 文本容器鼠标离开
const handleMouseLeave = () => {
  clearTimeout(tooltipTimer.value!);
  tooltipTimer.value = setTimeout(() => {
    if (!isMouseInTooltip.value) {
      showTooltip.value = false;
    }
  }, 100);
};

// tooltip鼠标进入
const handleTooltipMouseEnter = () => {
  isMouseInTooltip.value = true;
  showTooltip.value = true;
};

// tooltip鼠标离开
const handleTooltipMouseLeave = () => {
  isMouseInTooltip.value = false;
  setTimeout(() => {
    showTooltip.value = false;
  }, 100);
};

// 监听属性变化
watch([() => props.maxHeight, () => props.ellipsis], () => {
  checkOverflow();
});

watch(isExpanded, () => {
  if (contentRef.value) {
    contentRef.value.style.maxHeight = isExpanded.value ? 'none' : `${lineHeight.value * props.maxHeight}px`;
  }
});

// 生命周期
onMounted(() => {
  handleResize();
  window.addEventListener('resize', handleResize);
  setTimeout(() => {
    checkOverflow();
  }, 0);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (tooltipTimer.value) clearTimeout(tooltipTimer.value);
});
</script>

<style scoped>
.text-overflow-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  /* 统一容器内间距 */
  padding: 8px 0;
}

/* 标题样式优化 */
.text-overflow-title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.mobile .text-overflow-title {
  display: none;
}

/* 文本内容容器优化 */
.text-overflow-content {
  position: relative;
  line-height: var(--line-height);
  overflow: hidden;
  transition: max-height 0.3s ease-in-out; /* 更顺滑的动画 */
  word-break: break-all;
  box-sizing: border-box;
  color: #666;
  /* 文本容器内边距，与按钮对齐 */
  padding-right: 4px;
}

.collapsed {
  position: relative;
}

/* 省略号优化：背景与文本容器一致，避免遮挡 */
.ellipsis {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: inherit;
  padding-left: 8px;
  /* 防止省略号被文字覆盖 */
  z-index: 1;
}

/* Tooltip 样式 */
.text-overflow-tooltip {
  position: absolute;
  left: 0;
  z-index: 999;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: v-bind('props.tooltipMaxWidth + "px"');
  min-width: 200px;
  word-break: break-all;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.text-overflow-tooltip::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.8);
}

.tooltip-content {
  max-height: v-bind('props.tooltipMaxHeight + "px"');
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.5) transparent;
  user-select: none;
  -webkit-user-select: none;
}

:deep(.tooltip-content::-webkit-scrollbar) {
  width: 4px;
}
:deep(.tooltip-content::-webkit-scrollbar-thumb) {
  border-radius: 2px;
  background-color: rgba(255,255,255,0.5);
}
:deep(.tooltip-content::-webkit-scrollbar-track) {
  background: transparent;
}

/* ========== 核心优化：按钮区域 ========== */
/* 按钮外层包裹：实现与文本容器左对齐，统一间距 */
.text-overflow-btn-wrap {
  margin-top: 12px; /* 与文本保持合理间距 */
  /* 关键：与文本容器padding一致，实现左对齐 */
  padding-right: 4px;
  box-sizing: border-box;
}

/* 按钮样式美化 */
.text-overflow-toggle {
  display: inline-flex; /* 改为inline-flex，避免占满整行 */
  align-items: center;
  gap: 6px; /* 文字与图标间距优化 */
  padding: 6px 12px; /* 增大点击区域 */
  border: none;
  border-radius: 4px; /* 圆角增加质感 */
  background-color: #f5f7fa; /* 浅背景色，增强区分度 */
  color: v-bind('props.btnTextColor');
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  /* 按钮动画 */
  transition: all 0.2s ease;
  /* 禁用文本选中 */
  user-select: none;
  -webkit-user-select: none;
}

/* hover状态优化：背景+文字颜色变化 */
.text-overflow-toggle:hover {
  background-color: #e6f7ff;
  color: v-bind('props.btnHoverColor');
}

/* 点击active状态：按压效果 */
.text-overflow-toggle:active {
  background-color: #d9efff;
  transform: translateY(1px);
}

/* 图标样式优化 */
.toggle-icon {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.2s ease;
  /* 图标居中 */
  line-height: 1;
}

.rotate {
  transform: rotate(180deg);
}

/* 移动端按钮适配 */
.mobile .text-overflow-toggle {
  padding: 4px 10px;
  font-size: 13px;
}

/* 兼容样式 */
:deep(.text-overflow-content) {
  *zoom: 1;
}
:deep(.text-overflow-tooltip) {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);
}
</style>

```

# 使用
```

    <div style="font-family: Microsoft YaHei; font-size: 16px; line-height: 1.8; margin-bottom: 20px;">
      <TextOverflow maxHeight="2" showMoreText="查看更多" :tooltipStyle="{width:'400px'}" :tooltipMaxHeight="80">
        <template v-slot:title>
          <h2>title 插槽</h2>
        </template>
        这是微软雅黑16px+1.8倍行高的测试文本，验证自定义行高下行数的精准性。即使修改了行高和字体，显示的行数依然和设置的maxHeight一致9999999999999999999999999999999999999999999999。
      </TextOverflow>
    </div>
```

![image.png](/static/img/bb0ef971ab4b6cb2bef413e9f4f198b2.image.webp)


![image.png](/static/img/70e1b244810bbf17087383cc074b9541.image.webp)