更新任务

.github/workflows/deploy.yml

@@ -1,77 +1,66 @@
-name: Deploy Hugo PaperMod Demo to Pages
+# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
+#
+name: Deploy VitePress site to Pages
 
 on:
+  # 在针对 `main` 分支的推送上运行。如果你
+  # 使用 `master` 分支作为默认分支，请将其更改为 `master`
   push:
-    paths-ignore:
-      - "images/**"
-      - "LICENSE"
-      - "README.md"
-    branches:
-      - main
+    branches: [main]
 
+  # 允许你从 Actions 选项卡手动运行此工作流程
   workflow_dispatch:
-    # manual run
-    inputs:
-      hugoVersion:
-        description: "Hugo Version"
-        required: false
-        default: "0.125.7"
 
-# Allow one concurrent deployment
-concurrency:
-  group: "pages"
-  cancel-in-progress: true
-
-# Default to bash
-defaults:
-  run:
-    shell: bash
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
+# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
+# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
 jobs:
-  # Build job
+  # 构建工作
   build:
     runs-on: ubuntu-latest
-    env:
-      HUGO_VERSION: ${{ github.event.inputs.hugoVersion || '0.125.7' }}
     steps:
-      - name: Install Hugo CLI
-        run: |
-          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_linux-amd64.deb \
-          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
-          ref: main
+          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
+      # - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消此区域注释
+      #   with:
+      #     version: 9
+      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm # 或 pnpm / yarn
       - name: Setup Pages
-        id: pages
-        uses: actions/configure-pages@v3
-      - name: Get Theme
-        run: git submodule update --init --recursive
-      - name: Update theme to Latest commit
-        run: git submodule update --remote --merge
-      - name: Build with Hugo
-        run: |
-          hugo \
-            --buildDrafts --gc \
-            --baseURL ${{ steps.pages.outputs.base_url }}
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci # 或 pnpm install / yarn install / bun install
+      - name: Build with VitePress
+        run: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
-          path: ./public
-  # Deployment job
+          path: docs/.vitepress/dist
+
+  # 部署工作
   deploy:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
     needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "themes/PaperMod"]
-	path = themes/PaperMod
-	url = https://github.com/adityatelange/hugo-PaperMod.git

archetypes/default.md

@@ -1,5 +0,0 @@
----
-date: '{{ .Date }}'
-draft: true
-title: '{{ replace .File.ContentBaseName "-" " " | title }}'
----

content/archives.md

@@ -1,6 +0,0 @@
----
-title: "Archive"
-layout: "archives"
-url: "/archives"
-summary: "archives"
----

content/posts/2022/08/Vue3中的ref为何要用.value进行值的调用？.md

@@ -1,91 +0,0 @@
----
-date: '2022-08-25T10:33:58+08:00'
-draft: false
-title: 'Vue3中的ref为何要用.value进行值的调用？'
-keywords: [ 'vue','vue3' ]
-tags: [ 'vue3' ]
-categories: [ 'skill' ]
----
-
-在`Vue2`中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的：
-
-```html
-<template>
-  <div class="div">
-    <todos :Obj="tos" :removeObj="removeObj"></todos>
-  </div>
-</template>
-
-<script>
-import search from '@/components/search'
-import todos from '@/components/todos'
-import all from '@/components/all'
-
-export default {
-  name: 'App',
-  data () {
-    return {
-      tos: [
-        { id: '001', value: '第一个', done: true },
-        { id: '002', value: '第二个', done: true },
-        { id: '003', value: '第三个', done: false },
-        { id: '004', value: '第四个', done: true },
-      ],
-    }
-  },
-  computed: { },
-  components: {
-    search, todos, all,
-  },
-  methods: {
-    removeObj (obj) {
-      console.log(obj.id)
-      this.tos = this.tos.filter(item => item.id !== obj.id)
-      console.log(this.tos)
-    },
-  },
-}
-</script>
-
-<style scoped>
-// 样式
-</style>
-```
-
-可以看出来这里定义的内容都在一个数组中进行，或者是一个函数，将要使用的数据返回出来，这里无论怎么进行操作处理，最终进行数据代理的时候得到的都是一个对象，Vue2中直接通过`defineProperty`进行处理，并绑定对应的监听事件进行响应式的处理。
-
-而Vue3中，数据的定义可以是单独的，Vue可以让我们随时需要随时定义，这也就带来了另一个问题，我需要的一个数据可能不是对象
-
-```js
-<script lang="ts" setup>
-
-let str = ref('响应式字符串')
-let obj = reactive({
-  name: '张三',
-  age: 10,
-})
-
-</script>
-```
-
-如果要定义的数据不是对象，还需要代理会怎么样？
-
-在Vue2中数据的定义都在对象中统一进行，也就不会出现这种情况，如果一定要代理一个单独的数据呢？
-
-Vue2中的数据代理通过`defineProperty`进行实现，也就是说我们要让`defineProperty`代理一个普通的数据，而不是一个对象，在`defineProperty`的MDN的文档中是这样定义的：
-
-> **`Object.defineProperty()`** 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
-
-通过这个可以明确看出，只能进行对象的代理，不能进行普通数据的代理，如果使用普通数据类型会直接报以下错误[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p1Lm0OSJ-1661407967498)(Vue3中的ref为何要用.value进行值的调用？.assets/image-20220825094409254.png)]
-
-	在Vue3中数据代理可以使用单一数据了，并且也改进了数据代理的方式，使用的是`Peoxy`完成了数据代理，而MDN中对`Proxy`也进行了定义：
-
-> **Proxy** 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
-
-可以看出，`Proxy`依然是为对象服务，而不是普通的内容，这样问题似乎就解决了
-
-本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
-
-可以看出，`Proxy`依然是为对象服务，而不是普通的内容，这样问题似乎就解决了
-
-> 即使是Vue3中使用的`Proxy`的代理方式也不能进行普通数据的代理，所以当调用`Ref`的时候其实仍然创建了一个`Proxy`对象，并且Vue帮你给这个对象了一个`value`属性，属性值就是你定义的内容，改变的时候监视的改变依然是通过`Proxy`的数据劫持来进行响应式的处理，而模板中使用的时候`Vue`会默认调用对应的`value`属性，从而完成模板中的内容的直接调用

content/posts/2022/08/在JavaScript获取Promise的状态.md

@@ -1,99 +0,0 @@
----
-date: '2022-08-09T10:33:58+08:00'
-draft: false
-title: '在JavaScript获取Promise的状态'
-keywords: [ 'JavaScript','Promise' ]
-tags: [ 'JavaScript' ]
-categories: [ 'skill' ]
----
-
-# 写在前面
-
-  本文属于对`stackoverflow`中写法的解析，原文链接：[**Stack Overflow** ](https://stackoverflow.com/questions/30564053/how-can-i-synchronously-determine-a-javascript-promises-state)
-
-  如果你在其他环境下遇到同样问题，这个[文章](https://blog.csdn.net/Lee_01/article/details/124892590)可能也会有帮助
-
-# 问题复现
-
-  如何在代码执行过程中获取到`promise`的状态？
-
-  如果你想寻找或尝试通过原生的属性，或者指定API进行访问，基本可以放弃了，我也是看了很多博客的确没找到，如果您找了其他方式，还望指教
-
-# 解决方式
-
-  本文中提到的解决方式主要是继续`stackoverflow`中提供的解决方式【完整代码】
-
-  ```js
-  /**
-   * 传入需要测试的 Promise 对象，将对应结果返回
-   * @param promise 需要测试的 Promise 对象
-   * @return {Promise<string>}
-   */
-  const promiseState = promise => {
-  	const target = {}
-  	return Promise.race([promise, target]).then(
-  			value => (value === target) ? 'pending' : 'fulfilled',
-  			() => 'rejected',
-  	)
-  }
-  
-  // 测试代码
-  let a = Promise.resolve();
-  let b = Promise.reject();
-  let c = new Promise(() => {});
-  
-  promiseState(a).then(state => console.log(state)); // fulfilled
-  promiseState(b).then(state => console.log(state)); // rejected
-  promiseState(c).then(state => console.log(state)); // pending
-  ```
-
-  这种方式通过`promise`中的`race()`方法来进行了状态的判断，非常奇妙的一种方式
-
-# 代码分析
-
-  1. 在方法中会接收一个`promise`对象，开始了整个方法
-
-  2. 进入方法后会先创建一个`target`对象，这个对象只用于后续的匹配，没有其他含义
-
-     ```js
-     const target = {}
-     ```
-
-  3. 然后开始最核心的部分，因为`stackoverflow`中对代码进行简写，可以先进行代码的还原
-
-     ```js
-     return Promise.race([promise, target]).then(
-         			// 成功回调
-     				value => {
-     					return (value === target) ? 'pending' : 'fulfilled'
-     				},
-         			// 失败回调
-     				() => {
-     					return 'rejected'
-     				},
-     		)
-     ```
-
-     可以复现出这种结构，`promise`的`race`开始后，接收两个对象，一个为刚刚创建的`target`对象，还有一个是接收到的`promise`对象，当两个其中一个状态结束时，整个`Promise.race()`结束，这时分为三种情况
-
-     1. 当传入的`promise`为`pending`状态时，`Promise.race`会找到最先有确定状态的元素，并将其返回，因为`promise`没有结束，那么返回值对象会接收到定义的`target`，因为`target`的状态是确定的，这时`value`接收到的值就是已经确定状态的`target`，如果进行对比，那么他们两个一定是相等的，这时也就是返回`pending`
-     2. 当传入的`promise`为`fulfilled`状态时，相当于`promise`已经有确定的值了，`Promise.race`匹配到第一个直接结束，并将匹配到的内容返回，返回的内容因为是一个全新的对象，对象的内存地址不可能相等，所以判断结果是`false`，也就返回`fulfilled`
-     3. 当传入的`promise`为`rejected`状态时，`promise`状态确定，那么因为状态报错，直接进入`catch`中，走失败回调，这个回调一旦执行，就可以判定`promsie`结束，并且内容出现报错，直接返回`rejected`即可
-     4. 在调用的时候，因为返回的时会将对应的状态通过`promise`返回，所以直接通过调用方法之后的`then`中指定回调来完成状态的获取
-
-     - **值得注意的是**：`Promise.race()`在匹配的过程中，一定保证要判断的`promise`在前，因为只有当`promise`状态不确定时才会判断第二个内容的状态，如果将状态已经确定的`target`放在第一个，那么将不会再进行`promise`的判断，返回结果永远为`fulfilled`
-
-     - 并且因为`catch`有两种形式，可以进行变形，这种形式可能更常见（根据个人习惯了）
-
-       ```js
-       const promiseState = promise => {
-       	const target = {}
-       	return Promise.race([promise, target]).then(
-       			value => {
-       				return (value === target) ? 'pending' : 'fulfilled'
-       			},
-       	).catch(() => {
-       		return 'rejected'
-       	})
-       }
-       ```

docs/.vitepress/config.mts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'duyl328',
+  description: 'hi.',
+  base: 'https://duyl328.github.io',
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+    ],
+    
+    sidebar: [
+      {
+        text: 'Examples',
+        items: [
+          { text: 'Markdown Examples', link: '/markdown-examples' },
+          { text: 'Runtime API Examples', link: '/api-examples' },
+        ],
+      },
+    ],
+    
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+    ],
+  },
+})

docs/.vitepress/config/index.mts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitepress'
+
+import shared from './shared'
+import zh from './zh'
+
+export default defineConfig({
+  ...shared,
+  locales: {
+    root: { label: '简体中文', ...zh },
+  }
+})

docs/.vitepress/config/shared.ts

@@ -0,0 +1,85 @@
+import { defineConfig, type SiteConfig } from 'vitepress'
+// 自动导入 TDesign
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { TDesignResolver } from 'unplugin-vue-components/resolvers'
+
+import { handleHeadMeta } from '../theme/utils/handleHeadMeta'
+import { search as zhSearch } from './zh'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  lastUpdated: true,
+  cleanUrls: true,
+  ignoreDeadLinks: true,
+  sitemap: {
+    hostname: 'https://duyl328.github.io',
+  },
+  base: 'https://duyl328.github.io',
+  head: [
+    // 谷歌分析，暂不使用
+    // ['script',
+    //   {
+    //     async: '',
+    //     src: 'https://www.googletagmanager.com/gtag/js?id=G-MB7XVBG1TQ',
+    //   }],
+    // [
+    //   'script',
+    //   {},
+    //   `window.dataLayer = window.dataLayer || [];
+    //   function gtag(){dataLayer.push(arguments);}
+    //   gtag('js', new Date());
+    //   gtag('config', 'G-MB7XVBG1TQ');`,
+    // ],
+    
+    [
+      'link',
+      {
+        rel: 'icon',
+        // href: '',
+      },
+    ],
+  ],
+  // https://vitepress.dev/reference/site-config#transformhead
+  async transformHead (context) {
+    return handleHeadMeta(context)
+  },
+  buildEnd: (config: SiteConfig) => {
+  },
+  
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    outline: [2, 4],
+    
+    search: {
+      provider: 'local',
+      options: {
+        locales: { ...zhSearch },
+      },
+    },
+    
+    externalLinkIcon: true,
+  },
+  
+  markdown: {
+    math: true,
+  },
+  
+  vite: {
+    plugins: [
+      // ...
+      AutoImport({
+        resolvers: [
+          TDesignResolver({
+            library: 'vue-next',
+          })],
+      }),
+      Components({
+        resolvers: [
+          TDesignResolver({
+            library: 'vue-next',
+          })],
+      }),
+    ],
+  },
+})

docs/.vitepress/config/zh.ts

@@ -0,0 +1,89 @@
+import { type DefaultTheme, defineConfig } from 'vitepress'
+
+import { createSideBarZH } from '../theme/utils/createSideBar'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'duyl328',
+  description: '广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust',
+  lang: 'zh-Hans', //语言
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: '博客', link: '/' },
+      { text: '归档', link: '/archive', activeMatch: '/archive' },
+      { text: '笔记', link: '/notes/', activeMatch: '/notes/' },
+      { text: '关于', link: '/about', activeMatch: '/about' },
+      // { text: "赞助", link: "/support-me", activeMatch: '/support-me' },
+    ],
+    docFooter: {
+      prev: '上一篇',
+      next: '下一篇',
+    },
+    
+    outline: {
+      label: '当前页面',
+    },
+    lastUpdated: {
+      text: '最近更新时间',
+    },
+    
+    sidebar: createSideBarZH(),
+    
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/duyl328' },
+    ],
+    
+    editLink: {
+      pattern: 'https://duyl328.github.io/edit/master/docs/:path',
+      text: '在 GitHub 上编辑此页',
+    },
+    returnToTopLabel: '回到顶部',
+    sidebarMenuLabel: '目录',
+    darkModeSwitchLabel: '深色模式',
+  },
+})
+
+export const search: DefaultTheme.AlgoliaSearchOptions['locales'] = {
+  root: {
+    placeholder: '搜索文档',
+    translations: {
+      button: {
+        buttonText: '搜索文档',
+        buttonAriaLabel: '搜索文档',
+      },
+      modal: {
+        searchBox: {
+          resetButtonTitle: '清除查询条件',
+          resetButtonAriaLabel: '清除查询条件',
+          cancelButtonText: '取消',
+          cancelButtonAriaLabel: '取消',
+        },
+        startScreen: {
+          recentSearchesTitle: '搜索历史',
+          noRecentSearchesText: '没有搜索历史',
+          saveRecentSearchButtonTitle: '保存至搜索历史',
+          removeRecentSearchButtonTitle: '从搜索历史中移除',
+          favoriteSearchesTitle: '收藏',
+          removeFavoriteSearchButtonTitle: '从收藏中移除',
+        },
+        errorScreen: {
+          titleText: '无法获取结果',
+          helpText: '你可能需要检查你的网络连接',
+        },
+        footer: {
+          selectText: '选择',
+          navigateText: '切换',
+          closeText: '关闭',
+          searchByText: '搜索提供者',
+        },
+        noResultsScreen: {
+          noResultsText: '无法找到相关结果',
+          suggestedQueryText: '你可以尝试查询',
+          reportMissingResultsText: '你认为该查询应该有结果？',
+          reportMissingResultsLinkText: '点击反馈',
+        },
+      },
+    },
+  },
+}

docs/.vitepress/dist/404.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="zh-Hans" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>404 | duyl328</title>
+    <meta name="description" content="Not Found">
+    <meta name="generator" content="VitePress v1.5.0">
+    <link rel="preload stylesheet" href="/assets/style.sUY7YFPl.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    
+    <script type="module" src="/assets/app.l-had4l0.js"></script>
+    <link rel="icon">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="preload" href="/assets/Niconne-Regular.A5U3m2m8.ttf" as="font" type="font/woff2" crossorigin="">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"about.md\":\"DYCliHn9\",\"archive.md\":\"BJNl5FZS\",\"index.md\":\"D9HbJL4R\",\"posts_2022_06_如何在vue3的store中使用i18n.md\":\"CsdC3YlB\",\"posts_2022_08_javascript和vue中实现表格(table)固定表头和首列【提供vue和原生代码】.md\":\"gIYgXCj5\",\"posts_2022_08_vue3中的ref为何要用.value进行值的调用？.md\":\"CZC63h3V\",\"posts_2022_08_vue3新属性 — css中使用v-bind（v-bind in css）.md\":\"D7pEpzPC\",\"posts_2022_08_在javascript获取promise的状态.md\":\"DwsppogZ\",\"posts_2024_08_typescript 应该被放弃吗.md\":\"70Va1UEl\",\"posts_2024_08_vue还是react.md\":\"c9EUtKit\",\"posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md\":\"C3N1Beeh\",\"posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md\":\"DP17vSOm\",\"posts_2024_08_登录功能的思考.md\":\"N6H68BWZ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":[2,4],\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"searchBox\":{\"resetButtonTitle\":\"清除查询条件\",\"resetButtonAriaLabel\":\"清除查询条件\",\"cancelButtonText\":\"取消\",\"cancelButtonAriaLabel\":\"取消\"},\"startScreen\":{\"recentSearchesTitle\":\"搜索历史\",\"noRecentSearchesText\":\"没有搜索历史\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"favoriteSearchesTitle\":\"收藏\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\"},\"errorScreen\":{\"titleText\":\"无法获取结果\",\"helpText\":\"你可能需要检查你的网络连接\"},\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\",\"searchByText\":\"搜索提供者\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"suggestedQueryText\":\"你可以尝试查询\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"reportMissingResultsLinkText\":\"点击反馈\"}}}}}}},\"externalLinkIcon\":true},\"locales\":{\"root\":{\"label\":\"简体中文\",\"title\":\"duyl328\",\"description\":\"广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust\",\"lang\":\"zh-Hans\",\"themeConfig\":{\"nav\":[{\"text\":\"博客\",\"link\":\"/\"},{\"text\":\"归档\",\"link\":\"/archive\",\"activeMatch\":\"/archive\"},{\"text\":\"笔记\",\"link\":\"/notes/\",\"activeMatch\":\"/notes/\"},{\"text\":\"关于\",\"link\":\"/about\",\"activeMatch\":\"/about\"}],\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"outline\":{\"label\":\"当前页面\"},\"lastUpdated\":{\"text\":\"最近更新时间\"},\"sidebar\":{\"/notes/\":[{\"text\":\"Python基础\",\"collapsed\":false,\"items\":[{\"text\":\"01python数据模型\",\"link\":\"/notes/Python基础/01python数据模型\"},{\"text\":\"02序列构成的数组\",\"link\":\"/notes/Python基础/02序列构成的数组\"},{\"text\":\"03字典与集合\",\"link\":\"/notes/Python基础/03字典与集合\"},{\"text\":\"04文本与字节序列\",\"link\":\"/notes/Python基础/04文本与字节序列\"},{\"text\":\"05一等函数\",\"link\":\"/notes/Python基础/05一等函数\"},{\"text\":\"06使用一等函数实现设计模式\",\"link\":\"/notes/Python基础/06使用一等函数实现设计模式\"},{\"text\":\"07函数装饰器与闭包\",\"link\":\"/notes/Python基础/07函数装饰器与闭包\"},{\"text\":\"08对象引用、可变性和垃圾回收\",\"link\":\"/notes/Python基础/08对象引用、可变性和垃圾回收\"},{\"text\":\"09符合python风格的对象\",\"link\":\"/notes/Python基础/09符合python风格的对象\"},{\"text\":\"10序列的修改、散列和切片\",\"link\":\"/notes/Python基础/10序列的修改、散列和切片\"},{\"text\":\"11接口：从协议到抽象基类\",\"link\":\"/notes/Python基础/11接口：从协议到抽象基类\"},{\"text\":\"12继承的优缺点\",\"link\":\"/notes/Python基础/12继承的优缺点\"},{\"text\":\"13正确重载运算符\",\"link\":\"/notes/Python基础/13正确重载运算符\"},{\"text\":\"14可迭代的对象、迭代器和生成器\",\"link\":\"/notes/Python基础/14可迭代的对象、迭代器和生成器\"},{\"text\":\"15上下文管理和else块\",\"link\":\"/notes/Python基础/15上下文管理和else块\"},{\"text\":\"16协程\",\"link\":\"/notes/Python基础/16协程\"},{\"text\":\"17使用future处理并发\",\"link\":\"/notes/Python基础/17使用future处理并发\"},{\"text\":\"18使用asyncio包处理并发\",\"link\":\"/notes/Python基础/18使用asyncio包处理并发\"},{\"text\":\"19元编程\",Line truncated
+    
+  </body>
+</html>

docs/.vitepress/dist/about.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="zh-Hans" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>关于我 | duyl328</title>
+    <meta name="description" content="广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust">
+    <meta name="generator" content="VitePress v1.5.0">
+    <link rel="preload stylesheet" href="/assets/style.sUY7YFPl.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    
+    <script type="module" src="/assets/app.l-had4l0.js"></script>
+    <link rel="modulepreload" href="/assets/chunks/theme.BT-YIZBO.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.BsGVjEHh.js">
+    <link rel="modulepreload" href="/assets/about.md.DYCliHn9.lean.js">
+    <link rel="icon">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="preload" href="/assets/Niconne-Regular.A5U3m2m8.ttf" as="font" type="font/woff2" crossorigin="">
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>duyl328</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>博客</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/archive" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>归档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/notes/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>笔记</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/about" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>关于</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>深色模式</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62Line truncated
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"about.md\":\"DYCliHn9\",\"archive.md\":\"BJNl5FZS\",\"index.md\":\"D9HbJL4R\",\"posts_2022_06_如何在vue3的store中使用i18n.md\":\"CsdC3YlB\",\"posts_2022_08_javascript和vue中实现表格(table)固定表头和首列【提供vue和原生代码】.md\":\"gIYgXCj5\",\"posts_2022_08_vue3中的ref为何要用.value进行值的调用？.md\":\"CZC63h3V\",\"posts_2022_08_vue3新属性 — css中使用v-bind（v-bind in css）.md\":\"D7pEpzPC\",\"posts_2022_08_在javascript获取promise的状态.md\":\"DwsppogZ\",\"posts_2024_08_typescript 应该被放弃吗.md\":\"70Va1UEl\",\"posts_2024_08_vue还是react.md\":\"c9EUtKit\",\"posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md\":\"C3N1Beeh\",\"posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md\":\"DP17vSOm\",\"posts_2024_08_登录功能的思考.md\":\"N6H68BWZ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":[2,4],\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"searchBox\":{\"resetButtonTitle\":\"清除查询条件\",\"resetButtonAriaLabel\":\"清除查询条件\",\"cancelButtonText\":\"取消\",\"cancelButtonAriaLabel\":\"取消\"},\"startScreen\":{\"recentSearchesTitle\":\"搜索历史\",\"noRecentSearchesText\":\"没有搜索历史\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"favoriteSearchesTitle\":\"收藏\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\"},\"errorScreen\":{\"titleText\":\"无法获取结果\",\"helpText\":\"你可能需要检查你的网络连接\"},\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\",\"searchByText\":\"搜索提供者\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"suggestedQueryText\":\"你可以尝试查询\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"reportMissingResultsLinkText\":\"点击反馈\"}}}}}}},\"externalLinkIcon\":true},\"locales\":{\"root\":{\"label\":\"简体中文\",\"title\":\"duyl328\",\"description\":\"广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust\",\"lang\":\"zh-Hans\",\"themeConfig\":{\"nav\":[{\"text\":\"博客\",\"link\":\"/\"},{\"text\":\"归档\",\"link\":\"/archive\",\"activeMatch\":\"/archive\"},{\"text\":\"笔记\",\"link\":\"/notes/\",\"activeMatch\":\"/notes/\"},{\"text\":\"关于\",\"link\":\"/about\",\"activeMatch\":\"/about\"}],\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"outline\":{\"label\":\"当前页面\"},\"lastUpdated\":{\"text\":\"最近更新时间\"},\"sidebar\":{\"/notes/\":[{\"text\":\"Python基础\",\"collapsed\":false,\"items\":[{\"text\":\"01python数据模型\",\"link\":\"/notes/Python基础/01python数据模型\"},{\"text\":\"02序列构成的数组\",\"link\":\"/notes/Python基础/02序列构成的数组\"},{\"text\":\"03字典与集合\",\"link\":\"/notes/Python基础/03字典与集合\"},{\"text\":\"04文本与字节序列\",\"link\":\"/notes/Python基础/04文本与字节序列\"},{\"text\":\"05一等函数\",\"link\":\"/notes/Python基础/05一等函数\"},{\"text\":\"06使用一等函数实现设计模式\",\"link\":\"/notes/Python基础/06使用一等函数实现设计模式\"},{\"text\":\"07函数装饰器与闭包\",\"link\":\"/notes/Python基础/07函数装饰器与闭包\"},{\"text\":\"08对象引用、可变性和垃圾回收\",\"link\":\"/notes/Python基础/08对象引用、可变性和垃圾回收\"},{\"text\":\"09符合python风格的对象\",\"link\":\"/notes/Python基础/09符合python风格的对象\"},{\"text\":\"10序列的修改、散列和切片\",\"link\":\"/notes/Python基础/10序列的修改、散列和切片\"},{\"text\":\"11接口：从协议到抽象基类\",\"link\":\"/notes/Python基础/11接口：从协议到抽象基类\"},{\"text\":\"12继承的优缺点\",\"link\":\"/notes/Python基础/12继承的优缺点\"},{\"text\":\"13正确重载运算符\",\"link\":\"/notes/Python基础/13正确重载运算符\"},{\"text\":\"14可迭代的对象、迭代器和生成器\",\"link\":\"/notes/Python基础/14可迭代的对象、迭代器和生成器\"},{\"text\":\"15上下文管理和else块\",\"link\":\"/notes/Python基础/15上下文管理和else块\"},{\"text\":\"16协程\",\"link\":\"/notes/Python基础/16协程\"},{\"text\":\"17使用future处理并发\",\"link\":\"/notes/Python基础/17使用future处理并发\"},{\"text\":\"18使用asyncio包处理并发\",\"link\":\"/notes/Python基础/18使用asyncio包处理并发\"},{\"text\":\"19元编程\",Line truncated
+    
+  </body>
+</html>

docs/.vitepress/dist/assets/about.md.DYCliHn9.js

@@ -0,0 +1 @@
+import{_ as e,D as t,af as o,B as r}from"./chunks/framework.BsGVjEHh.js";const m=JSON.parse('{"title":"关于我","description":"","frontmatter":{"layout":"doc","editLink":false,"lastUpdated":false,"isNoBackBtn":true},"headers":[],"relativePath":"about.md","filePath":"about.md"}'),l={name:"about.md"};function i(d,a,n,s,c,u){return r(),t("div",null,a[0]||(a[0]=[o('<h1 id="关于我" tabindex="-1">关于我 <a class="header-anchor" href="#关于我" aria-label="Permalink to &quot;关于我&quot;">​</a></h1><h2 id="自我描述" tabindex="-1">自我描述 <a class="header-anchor" href="#自我描述" aria-label="Permalink to &quot;自我描述&quot;">​</a></h2><p>网名<em>duyl328</em>，现居苏州。</p><h2 id="联系我" tabindex="-1">联系我 <a class="header-anchor" href="#联系我" aria-label="Permalink to &quot;联系我&quot;">​</a></h2><ul><li>邮箱：<code>jimmy.gatsby328@gmail.com</code></li><li>GitHub：<a href="https://github.com/duyl328" target="_blank" rel="noreferrer">github.com/duyl328</a></li></ul>',5)]))}const f=e(l,[["render",i]]);export{m as __pageData,f as default};

docs/.vitepress/dist/assets/about.md.DYCliHn9.lean.js

@@ -0,0 +1 @@
+import{_ as e,D as t,af as o,B as r}from"./chunks/framework.BsGVjEHh.js";const m=JSON.parse('{"title":"关于我","description":"","frontmatter":{"layout":"doc","editLink":false,"lastUpdated":false,"isNoBackBtn":true},"headers":[],"relativePath":"about.md","filePath":"about.md"}'),l={name:"about.md"};function i(d,a,n,s,c,u){return r(),t("div",null,a[0]||(a[0]=[o('<h1 id="关于我" tabindex="-1">关于我 <a class="header-anchor" href="#关于我" aria-label="Permalink to &quot;关于我&quot;">​</a></h1><h2 id="自我描述" tabindex="-1">自我描述 <a class="header-anchor" href="#自我描述" aria-label="Permalink to &quot;自我描述&quot;">​</a></h2><p>网名<em>duyl328</em>，现居苏州。</p><h2 id="联系我" tabindex="-1">联系我 <a class="header-anchor" href="#联系我" aria-label="Permalink to &quot;联系我&quot;">​</a></h2><ul><li>邮箱：<code>jimmy.gatsby328@gmail.com</code></li><li>GitHub：<a href="https://github.com/duyl328" target="_blank" rel="noreferrer">github.com/duyl328</a></li></ul>',5)]))}const f=e(l,[["render",i]]);export{m as __pageData,f as default};

docs/.vitepress/dist/assets/app.l-had4l0.js

@@ -0,0 +1 @@
+import{R as i}from"./chunks/theme.BT-YIZBO.js";import{a7 as s,ag as u,ah as l,ai as c,aj as f,ak as d,al as m,am as h,an as g,ao as A,ap as y,d as P,M as v,o as w,y as C,aq as R,ar as b,as as E,h as S}from"./chunks/framework.BsGVjEHh.js";function p(e){if(e.extends){const a=p(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const o=p(i),T=P({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=v();return w(()=>{C(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&R(),b(),E(),o.setup&&o.setup(),()=>S(o.Layout)}});async function j(){globalThis.__VITEPRESS__=!0;const e=_(),a=D();a.provide(l,e);const t=c(e.route);return a.provide(f,t),a.component("Content",d),a.component("ClientOnly",m),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),o.enhanceApp&&await o.enhanceApp({app:a,router:e,siteData:h}),{app:a,router:e,data:t}}function D(){return g(T)}function _(){let e=s,a;return A(t=>{let n=y(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=import(n)),s&&(e=!1),r},o.NotFound)}s&&j().then(({app:e,router:a,data:t})=>{a.go().then(()=>{u(a.route,t.site),e.mount("#app")})});export{j as createApp};

docs/.vitepress/dist/assets/archive.md.BJNl5FZS.js

@@ -0,0 +1 @@
+import{d as h}from"./chunks/posts.data.DQjUT6HS.js";import{d as u,c as p,D as a,F as i,Y as d,B as s,Q as r,I as l,_ as f}from"./chunks/framework.BsGVjEHh.js";const m=["id"],v=["href","aria-label"],k={class:"post-year hollow-text"},B=["href"],g={class:"post-date"},b=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"doc","editLink":false,"lastUpdated":false,"isNoComment":true,"isNoBackBtn":true},"headers":[],"relativePath":"archive.md","filePath":"archive.md"}'),x={name:"archive.md"},y=u({...x,setup(D){const _=p(()=>{const t=new Map;return h.forEach(c=>{var o;const e=c.date.year;t.has(e)||t.set(e,[]),(o=t.get(e))==null||o.push(c)}),t});return(t,c)=>(s(),a("div",null,[(s(!0),a(i,null,d(_.value,([e,o])=>(s(),a(i,{key:e},[r("h2",{id:e,class:"post-title"},[r("a",{class:"header-anchor",href:`#${e}`,"aria-label":`Permalink to "${e}"`},"​",8,v),r("div",k,l(e),1)],8,m),(s(!0),a(i,null,d(o,n=>(s(),a("div",{class:"post-container",key:n.url},[r("a",{href:n.url},l(n.title),9,B),r("span",g,l(n.date.monthDay),1)]))),128))],64))),128))]))}}),w=f(y,[["__scopeId","data-v-69cf8f88"]]);export{b as __pageData,w as default};

docs/.vitepress/dist/assets/archive.md.BJNl5FZS.lean.js

@@ -0,0 +1 @@
+import{d as h}from"./chunks/posts.data.DQjUT6HS.js";import{d as u,c as p,D as a,F as i,Y as d,B as s,Q as r,I as l,_ as f}from"./chunks/framework.BsGVjEHh.js";const m=["id"],v=["href","aria-label"],k={class:"post-year hollow-text"},B=["href"],g={class:"post-date"},b=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"doc","editLink":false,"lastUpdated":false,"isNoComment":true,"isNoBackBtn":true},"headers":[],"relativePath":"archive.md","filePath":"archive.md"}'),x={name:"archive.md"},y=u({...x,setup(D){const _=p(()=>{const t=new Map;return h.forEach(c=>{var o;const e=c.date.year;t.has(e)||t.set(e,[]),(o=t.get(e))==null||o.push(c)}),t});return(t,c)=>(s(),a("div",null,[(s(!0),a(i,null,d(_.value,([e,o])=>(s(),a(i,{key:e},[r("h2",{id:e,class:"post-title"},[r("a",{class:"header-anchor",href:`#${e}`,"aria-label":`Permalink to "${e}"`},"​",8,v),r("div",k,l(e),1)],8,m),(s(!0),a(i,null,d(o,n=>(s(),a("div",{class:"post-container",key:n.url},[r("a",{href:n.url},l(n.title),9,B),r("span",g,l(n.date.monthDay),1)]))),128))],64))),128))]))}}),w=f(y,[["__scopeId","data-v-69cf8f88"]]);export{b as __pageData,w as default};

docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.rA8ZmGDl.js

@@ -0,0 +1 @@
+const t='{"documentCount":95,"nextId":95,"documentIds":{"0":"/about#关于我","1":"/about#自我描述","2":"/about#联系我","3":"/posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】#写在前面","4":"/posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】#思路概述","5":"/posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】#具体实现","6":"/posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】#其他环境中要修改的内容","7":"/posts/2022/06/如何在Vue3的Store中使用i18n#使用环境","8":"/posts/2022/06/如何在Vue3的Store中使用i18n#问题复现","9":"/posts/2022/06/如何在Vue3的Store中使用i18n#问题解决","10":"/posts/2022/06/如何在Vue3的Store中使用i18n#解决","11":"/posts/2022/08/在JavaScript获取Promise的状态#写在前面","12":"/posts/2022/08/在JavaScript获取Promise的状态#问题复现","13":"/posts/2022/08/在JavaScript获取Promise的状态#解决方式","14":"/posts/2022/08/在JavaScript获取Promise的状态#代码分析","15":"/posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）#vue3新属性-css-中的-v-bind","16":"/posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）#写在前面","17":"/posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）#实际使用","18":"/posts/2024/08/TypeScript 应该被放弃吗#typescript-应该放弃吗","19":"/posts/2024/08/TypeScript 应该被放弃吗#第一篇-turbo-8-正在放弃-typescript-hey-com","20":"/posts/2024/08/TypeScript 应该被放弃吗#第二篇-根本不需要-typescript-js-jsdoc-够了-大佬说我想多了","21":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#参考1","22":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#中英文混排参考规范","23":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#中英文之间需要增加空格","24":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#数字与单位之间需要增加空格","25":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#全角标点与其他字符之间不加空格","26":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#用-text-spacing-来挽救","27":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#标点符号","28":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#不重复使用标点符号","29":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#全角和半角","30":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#使用全角中文标点","31":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#数字使用半角字符","32":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#遇到完整的英文整句、特殊名词-其内容使用半角标点","33":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#名词","34":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#专有名词使用正确的大小写","35":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异#不要使用不地道的缩写","36":"/posts/2024/08/Vue还是React#vue和react、nextjs如何选择","37":"/posts/2024/08/Vue还是React#第一篇-你因为-react-而忘记-或从来不知道-的事情-josh-collinsworth-博客","38":"/posts/2024/08/Vue还是React#并不是所有好的事物都会流行。","39":"/posts/2024/08/Vue还是React#react已经老化了","40":"/posts/2024/08/Vue还是React#react是定制的-这使其在不同框架之间很难移植-几乎不和其他平台兼容","41":"/posts/2024/08/Vue还是React#react-钩子实际上有点过时了","42":"/posts/2024/08/Vue还是React#react相对更加不智能","43":"/posts/2024/08/Vue还是React#服务器端渲染不再特别","44":"/posts/2024/08/Vue还是React#react-是由-facebook-创建的-目的是解决-facebook-独特的一系列问题","45":"/posts/2024/08/Vue还是React#react-在性能上远远落后","46":"/posts/2024/08/Vue还是React#svelte-是没有废话的-react","47":"/posts/2024/08/Vue还是React#第二篇-react-的自我实现预言-josh-collinsworth-博客","48":"/posts/2024/08/Vue还是React#react-除了受欢迎之外-什么都不擅长。","49":"/posts/2024/08/Vue还是React#更多的社区和支持并不代表他是一个更好的选择","50":"/posts/2024/08/Vue还是React#多年来-react-的满意度和兴趣一直在稳步下降-而其使用率却持平","51":"/posts/2024/08/Vue还是React#为什么-react-会保持领先地位呢","52":"/posts/2024/08/Vue还是React#第三篇-辛辣的-react-辩论秀-🌶️-js-party-244-changelog-com","53":"/posts/2024/08/Vue还是React#观点一-react赢被放弃","54":"/posts/2024/08/Vue还是React#观点二-react有自己的难Line truncated

docs/.vitepress/dist/assets/chunks/VPLocalSearchBox.BxcHhHT_.js

@@ -0,0 +1,8 @@
+var Ft=Object.defineProperty;var Ot=(a,e,t)=>e in a?Ft(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var Ae=(a,e,t)=>Ot(a,typeof e!="symbol"?e+"":e,t);import{a9 as Ct,r as ie,c as ge,at as tt,au as Rt,av as At,w as $e,aw as Mt,d as Lt,Z as xe,ax as nt,ay as Dt,az as zt,y as Pt,aA as jt,o as Me,n as fe,a5 as _e,aB as Vt,aC as $t,aa as Bt,a7 as Wt,q as Kt,B as H,J as Jt,Q as _,ad as Ut,R as L,u as qt,aD as Gt,aE as Ht,D as Z,G as st,L as Se,Y as it,F as rt,H as he,I as pe,T as Qt,aF as at,e as Yt,aj as Zt,ap as Xt,aG as en,_ as tn}from"./framework.BsGVjEHh.js";import{u as nn,c as sn}from"./theme.BT-YIZBO.js";const rn={root:()=>Ct(()=>import("./@localSearchIndexroot.rA8ZmGDl.js"),[])};/*!
+* tabbable 6.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/var gt=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[href]:not([inert])","button:not([inert])","[tabindex]:not(slot):not([inert])","audio[controls]:not([inert])","video[controls]:not([inert])",'[contenteditable]:not([contenteditable="false"]):not([inert])',"details>summary:first-of-type:not([inert])","details:not([inert])"],Ne=gt.join(","),vt=typeof Element>"u",ae=vt?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,Fe=!vt&&Element.prototype.getRootNode?function(a){var e;return a==null||(e=a.getRootNode)===null||e===void 0?void 0:e.call(a)}:function(a){return a==null?void 0:a.ownerDocument},Oe=function a(e,t){var n;t===void 0&&(t=!0);var s=e==null||(n=e.getAttribute)===null||n===void 0?void 0:n.call(e,"inert"),r=s===""||s==="true",i=r||t&&e&&a(e.parentNode);return i},an=function(e){var t,n=e==null||(t=e.getAttribute)===null||t===void 0?void 0:t.call(e,"contenteditable");return n===""||n==="true"},bt=function(e,t,n){if(Oe(e))return[];var s=Array.prototype.slice.apply(e.querySelectorAll(Ne));return t&&ae.call(e,Ne)&&s.unshift(e),s=s.filter(n),s},yt=function a(e,t,n){for(var s=[],r=Array.from(e);r.length;){var i=r.shift();if(!Oe(i,!1))if(i.tagName==="SLOT"){var o=i.assignedElements(),l=o.length?o:i.children,c=a(l,!0,n);n.flatten?s.push.apply(s,c):s.push({scopeParent:i,candidates:c})}else{var f=ae.call(i,Ne);f&&n.filter(i)&&(t||!e.includes(i))&&s.push(i);var g=i.shadowRoot||typeof n.getShadowRoot=="function"&&n.getShadowRoot(i),h=!Oe(g,!1)&&(!n.shadowRootFilter||n.shadowRootFilter(i));if(g&&h){var b=a(g===!0?i.children:g.children,!0,n);n.flatten?s.push.apply(s,b):s.push({scopeParent:i,candidates:b})}else r.unshift.apply(r,i.children)}}return s},wt=function(e){return!isNaN(parseInt(e.getAttribute("tabindex"),10))},re=function(e){if(!e)throw new Error("No node provided");return e.tabIndex<0&&(/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName)||an(e))&&!wt(e)?0:e.tabIndex},on=function(e,t){var n=re(e);return n<0&&t&&!wt(e)?0:n},ln=function(e,t){return e.tabIndex===t.tabIndex?e.documentOrder-t.documentOrder:e.tabIndex-t.tabIndex},xt=function(e){return e.tagName==="INPUT"},cn=function(e){return xt(e)&&e.type==="hidden"},un=function(e){var t=e.tagName==="DETAILS"&&Array.prototype.slice.apply(e.children).some(function(n){return n.tagName==="SUMMARY"});return t},dn=function(e,t){for(var n=0;n<e.length;n++)if(e[n].checked&&e[n].form===t)return e[n]},fn=function(e){if(!e.name)return!0;var t=e.form||Fe(e),n=function(o){return t.querySelectorAll('input[type="radio"][name="'+o+'"]')},s;if(typeof window<"u"&&typeof window.CSS<"u"&&typeof window.CSS.escape=="function")s=n(window.CSS.escape(e.name));else try{s=n(e.name)}catch(i){return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s",i.message),!1}var r=dn(s,e.form);return!r||r===e},hn=function(e){return xt(e)&&e.type==="radio"},pn=function(e){return hn(e)&&!fn(e)},mn=function(e){var t,n=e&&Fe(e),s=(t=n)===null||t===void 0?void 0:t.host,r=!1;if(n&&n!==e){var i,o,l;for(r=!!((i=s)!==null&&i!==void 0&&(o=i.ownerDocument)!==null&&o!==void 0&&o.contains(s)||e!=null&&(l=e.ownerDocument)!==null&&l!==void 0&&l.contains(e));!r&&s;){var c,f,g;n=Fe(s),s=(c=n)===null||c===void 0?void 0:c.host,r=!!((f=s)!==null&&f!==void 0&&(g=f.ownerDocument)!==null&&g!==void 0&&g.contains(s))}}return r},ot=function(e){var t=e.getBoundingClientRect(),n=t.width,s=t.height;return n===0&&s===0},gn=function(e,t){var n=t.displayCheck,s=t.getShadowRoot;if(getComputedStyle(e).visibility==="hidden")return!0;var r=ae.call(e,"details>summary:first-of-type"),i=r?e.parentElement:e;if(ae.call(i,"details:not([open]) *"))return!0;if(!n||n==="full"||n==="legacy-full"){if(typeof s=="function"){for(var o=e;e;){var l=e.parentElement,c=Fe(e);if(l&&!l.shadowRoot&&s(l)===!0)return ot(e);e.assignedSlot?e=e.assignedSlot:!l&&c!==e.ownerDocument?e=c.host:e=l}e=o}if(mn(e))return!e.getClientRects().length;if(n!=="legacy-full")return!0}else if(n==="non-zero-area")return ot(e);return!1},vn=function(e){if(/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))for(var t=e.parentElement;t;){if(t.tagName==="FIELDSET"&&t.disabled){for(var n=0;n<t.children.length;n++){var s=t.children.item(n);if(s.tagName==="LEGEND")return ae.call(t,"fieldset[disabled] *")?!0:!s.contains(e)}return!0}t=t.parentElement}return!1},Ce=function(e,t){return!(t.disabled||Oe(t)||cn(t)||gn(t,e)||un(t)||vn(t))},Be=function(e,t){return!(pn(t)||re(t)<0||!Ce(e,t))},bn=function(e){var t=parseInt(e.getAttribute("tabindex"),10);return!!(isNaN(t)||t>=0)},yn=function a(e){var t=[],n=[];return e.forEach(function(s,r){var i=!!s.scopeParent,o=i?s.scopeParent:s,l=on(o,i),c=i?a(s.candidates):o;l===0?i?t.push.apply(t,c):t.push(o):n.push({documentOrder:r,tabIndex:l,item:s,isScope:i,content:c})}),n.sort(ln).reduce(function(s,r){return r.isScope?s.push.apply(s,r.content):s.push(r.content),s},[]).concatLine truncated
+* focus-trap 7.6.4
+* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
+*/function We(a,e){(e==null||e>a.length)&&(e=a.length);for(var t=0,n=Array(e);t<e;t++)n[t]=a[t];return n}function Sn(a){if(Array.isArray(a))return We(a)}function En(a,e,t){return(e=Fn(e))in a?Object.defineProperty(a,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):a[e]=t,a}function Tn(a){if(typeof Symbol<"u"&&a[Symbol.iterator]!=null||a["@@iterator"]!=null)return Array.from(a)}function In(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function lt(a,e){var t=Object.keys(a);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(a);e&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(a,s).enumerable})),t.push.apply(t,n)}return t}function ct(a){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?lt(Object(t),!0).forEach(function(n){En(a,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):lt(Object(t)).forEach(function(n){Object.defineProperty(a,n,Object.getOwnPropertyDescriptor(t,n))})}return a}function kn(a){return Sn(a)||Tn(a)||On(a)||In()}function Nn(a,e){if(typeof a!="object"||!a)return a;var t=a[Symbol.toPrimitive];if(t!==void 0){var n=t.call(a,e||"default");if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(a)}function Fn(a){var e=Nn(a,"string");return typeof e=="symbol"?e:e+""}function On(a,e){if(a){if(typeof a=="string")return We(a,e);var t={}.toString.call(a).slice(8,-1);return t==="Object"&&a.constructor&&(t=a.constructor.name),t==="Map"||t==="Set"?Array.from(a):t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?We(a,e):void 0}}var ut={activateTrap:function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n._setPausedState(!0)}var s=e.indexOf(t);s===-1||e.splice(s,1),e.push(t)},deactivateTrap:function(e,t){var n=e.indexOf(t);n!==-1&&e.splice(n,1),e.length>0&&!e[e.length-1]._isManuallyPaused()&&e[e.length-1]._setPausedState(!1)}},Cn=function(e){return e.tagName&&e.tagName.toLowerCase()==="input"&&typeof e.select=="function"},Rn=function(e){return(e==null?void 0:e.key)==="Escape"||(e==null?void 0:e.key)==="Esc"||(e==null?void 0:e.keyCode)===27},ve=function(e){return(e==null?void 0:e.key)==="Tab"||(e==null?void 0:e.keyCode)===9},An=function(e){return ve(e)&&!e.shiftKey},Mn=function(e){return ve(e)&&e.shiftKey},dt=function(e){return setTimeout(e,0)},me=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),s=1;s<t;s++)n[s-1]=arguments[s];return typeof e=="function"?e.apply(void 0,n):e},Ee=function(e){return e.target.shadowRoot&&typeof e.composedPath=="function"?e.composedPath()[0]:e.target},Ln=[],Dn=function(e,t){var n=(t==null?void 0:t.document)||document,s=(t==null?void 0:t.trapStack)||Ln,r=ct({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:An,isKeyBackward:Mn},t),i={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,manuallyPaused:!1,delayInitialFocusTimer:void 0,recentNavEvent:void 0},o,l=function(u,d,v){return u&&u[d]!==void 0?u[d]:r[v||d]},c=function(u,d){var v=typeof(d==null?void 0:d.composedPath)=="function"?d.composedPath():void 0;return i.containerGroups.findIndex(function(E){var T=E.container,F=E.tabbableNodes;return T.contains(u)||(v==null?void 0:v.includes(T))||F.find(function(S){return S===u})})},f=function(u){var d=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},v=d.hasFallback,E=v===void 0?!1:v,T=d.params,F=T===void 0?[]:T,S=r[u];if(typeof S=="function"&&(S=S.apply(void 0,kn(F))),S===!0&&(S=void 0),!S){if(S===void 0||S===!1)return S;throw new Error("`".concat(u,"` was specified but was not a node, or did not return a node"))}var C=S;if(typeof S=="string"){try{C=n.querySelector(S)}catch(m){throw new Error("`".concat(u,'` appears to be an invalid selector; error="').concat(m.message,'"'))}if(!C&&!E)throw new Error("`".concat(u,"` as selector refers to no known node"))}return C},g=function(){var u=f("initialFocus",{hasFallback:!0});if(u===!1)return!1;if(u===void 0||u&&!Le(u,r.tabbableOptions))if(c(n.activeElement)>=0)u=n.activeElement;else{var d=i.tabbableGroups[0],v=d&&d.firstTabbableNode;u=v||f("fallbackFocus")}else u===null&&(u=f("fallbackFocus"));if(!u)throw new Error("Your focus-trap needs to have at least one focusable element");return u},h=function(){if(i.containerGroups=i.containers.map(function(u){var d=wn(u,r.tabbableOptions),v=xn(u,r.tabbableOptions),E=d.length>0?d[0]:void 0,T=d.length>0?d[d.length-1]:void 0,F=v.find(function(m){return oe(m)}),S=v.slice().reverse().find(function(m){return oe(m)}),C=!!d.find(function(m){return re(m)>0});return{container:u,tabbableNodes:d,focusableNodes:v,posTabIndexesFound:C,firstTabbableNode:E,lastTabbableNode:T,firstDomTabbableNode:F,lastDomTabbableNode:S,nextTabbableNode:function(p){var I=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0,O=d.indexOf(p);return O<0?I?v.slice(v.indexOf(p)+1).find(function(z){return oe(z)}):v.slice(0,v.indexOf(p)).reverse().find(function(z){return oe(z)}):d[O+(I?1:-1)]}}}),i.tabbableGroups=i.containerGroups.filter(function(u){return u.tabbableNodes.length>0}),i.tabbableGroups.length<=0&&!f("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all timesLine truncated

docs/.vitepress/dist/assets/chunks/framework.BsGVjEHh.js

@@ -0,0 +1,18 @@
+/**
+* @vue/shared v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**//*! #__NO_SIDE_EFFECTS__ */function Ds(e){const t=Object.create(null);for(const n of e.split(","))t[n]=1;return n=>n in t}const Z={},xt=[],ke=()=>{},Go=()=>!1,tn=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),Hs=e=>e.startsWith("onUpdate:"),de=Object.assign,$s=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},Yo=Object.prototype.hasOwnProperty,z=(e,t)=>Yo.call(e,t),B=Array.isArray,Tt=e=>Fn(e)==="[object Map]",oi=e=>Fn(e)==="[object Set]",q=e=>typeof e=="function",re=e=>typeof e=="string",Xe=e=>typeof e=="symbol",ne=e=>e!==null&&typeof e=="object",li=e=>(ne(e)||q(e))&&q(e.then)&&q(e.catch),ci=Object.prototype.toString,Fn=e=>ci.call(e),Xo=e=>Fn(e).slice(8,-1),ai=e=>Fn(e)==="[object Object]",js=e=>re(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Ct=Ds(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Dn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Jo=/-(\w)/g,Le=Dn(e=>e.replace(Jo,(t,n)=>n?n.toUpperCase():"")),zo=/\B([A-Z])/g,st=Dn(e=>e.replace(zo,"-$1").toLowerCase()),Hn=Dn(e=>e.charAt(0).toUpperCase()+e.slice(1)),wn=Dn(e=>e?`on${Hn(e)}`:""),tt=(e,t)=>!Object.is(e,t),vn=(e,...t)=>{for(let n=0;n<e.length;n++)e[n](...t)},fi=(e,t,n,s=!1)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,writable:s,value:n})},ws=e=>{const t=parseFloat(e);return isNaN(t)?e:t},Qo=e=>{const t=re(e)?Number(e):NaN;return isNaN(t)?e:t};let dr;const $n=()=>dr||(dr=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function Vs(e){if(B(e)){const t={};for(let n=0;n<e.length;n++){const s=e[n],r=re(s)?nl(s):Vs(s);if(r)for(const i in r)t[i]=r[i]}return t}else if(re(e)||ne(e))return e}const Zo=/;(?![^(]*\))/g,el=/:([^]+)/,tl=/\/\*[^]*?\*\//g;function nl(e){const t={};return e.replace(tl,"").split(Zo).forEach(n=>{if(n){const s=n.split(el);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function Us(e){let t="";if(re(e))t=e;else if(B(e))for(let n=0;n<e.length;n++){const s=Us(e[n]);s&&(t+=s+" ")}else if(ne(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const sl="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",rl=Ds(sl);function ui(e){return!!e||e===""}const di=e=>!!(e&&e.__v_isRef===!0),il=e=>re(e)?e:e==null?"":B(e)||ne(e)&&(e.toString===ci||!q(e.toString))?di(e)?il(e.value):JSON.stringify(e,hi,2):String(e),hi=(e,t)=>di(t)?hi(e,t.value):Tt(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,r],i)=>(n[Zn(s,i)+" =>"]=r,n),{})}:oi(t)?{[`Set(${t.size})`]:[...t.values()].map(n=>Zn(n))}:Xe(t)?Zn(t):ne(t)&&!B(t)&&!ai(t)?String(t):t,Zn=(e,t="")=>{var n;return Xe(e)?`Symbol(${(n=e.description)!=null?n:t})`:e};/**
+* @vue/reactivity v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/let ve;class ol{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this._isPaused=!1,this.parent=ve,!t&&ve&&(this.index=(ve.scopes||(ve.scopes=[])).push(this)-1)}get active(){return this._active}pause(){if(this._active){this._isPaused=!0;let t,n;if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].pause();for(t=0,n=this.effects.length;t<n;t++)this.effects[t].pause()}}resume(){if(this._active&&this._isPaused){this._isPaused=!1;let t,n;if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].resume();for(t=0,n=this.effects.length;t<n;t++)this.effects[t].resume()}}run(t){if(this._active){const n=ve;try{return ve=this,t()}finally{ve=n}}}on(){ve=this}off(){ve=this.parent}stop(t){if(this._active){this._active=!1;let n,s;for(n=0,s=this.effects.length;n<s;n++)this.effects[n].stop();for(this.effects.length=0,n=0,s=this.cleanups.length;n<s;n++)this.cleanups[n]();if(this.cleanups.length=0,this.scopes){for(n=0,s=this.scopes.length;n<s;n++)this.scopes[n].stop(!0);this.scopes.length=0}if(!this.detached&&this.parent&&!t){const r=this.parent.scopes.pop();r&&r!==this&&(this.parent.scopes[this.index]=r,r.index=this.index)}this.parent=void 0}}}function pi(){return ve}function ll(e,t=!1){ve&&ve.cleanups.push(e)}let te;const es=new WeakSet;class gi{constructor(t){this.fn=t,this.deps=void 0,this.depsTail=void 0,this.flags=5,this.next=void 0,this.cleanup=void 0,this.scheduler=void 0,ve&&ve.active&&ve.effects.push(this)}pause(){this.flags|=64}resume(){this.flags&64&&(this.flags&=-65,es.has(this)&&(es.delete(this),this.trigger()))}notify(){this.flags&2&&!(this.flags&32)||this.flags&8||yi(this)}run(){if(!(this.flags&1))return this.fn();this.flags|=2,hr(this),_i(this);const t=te,n=Ne;te=this,Ne=!0;try{return this.fn()}finally{bi(this),te=t,Ne=n,this.flags&=-3}}stop(){if(this.flags&1){for(let t=this.deps;t;t=t.nextDep)Ws(t);this.deps=this.depsTail=void 0,hr(this),this.onStop&&this.onStop(),this.flags&=-2}}trigger(){this.flags&64?es.add(this):this.scheduler?this.scheduler():this.runIfDirty()}runIfDirty(){vs(this)&&this.run()}get dirty(){return vs(this)}}let mi=0,jt,Vt;function yi(e,t=!1){if(e.flags|=8,t){e.next=Vt,Vt=e;return}e.next=jt,jt=e}function ks(){mi++}function Bs(){if(--mi>0)return;if(Vt){let t=Vt;for(Vt=void 0;t;){const n=t.next;t.next=void 0,t.flags&=-9,t=n}}let e;for(;jt;){let t=jt;for(jt=void 0;t;){const n=t.next;if(t.next=void 0,t.flags&=-9,t.flags&1)try{t.trigger()}catch(s){e||(e=s)}t=n}}if(e)throw e}function _i(e){for(let t=e.deps;t;t=t.nextDep)t.version=-1,t.prevActiveLink=t.dep.activeLink,t.dep.activeLink=t}function bi(e){let t,n=e.depsTail,s=n;for(;s;){const r=s.prevDep;s.version===-1?(s===n&&(n=r),Ws(s),cl(s)):t=s,s.dep.activeLink=s.prevActiveLink,s.prevActiveLink=void 0,s=r}e.deps=t,e.depsTail=n}function vs(e){for(let t=e.deps;t;t=t.nextDep)if(t.dep.version!==t.version||t.dep.computed&&(wi(t.dep.computed)||t.dep.version!==t.version))return!0;return!!e._dirty}function wi(e){if(e.flags&4&&!(e.flags&16)||(e.flags&=-17,e.globalVersion===qt))return;e.globalVersion=qt;const t=e.dep;if(e.flags|=2,t.version>0&&!e.isSSR&&e.deps&&!vs(e)){e.flags&=-3;return}const n=te,s=Ne;te=e,Ne=!0;try{_i(e);const r=e.fn(e._value);(t.version===0||tt(r,e._value))&&(e._value=r,t.version++)}catch(r){throw t.version++,r}finally{te=n,Ne=s,bi(e),e.flags&=-3}}function Ws(e,t=!1){const{dep:n,prevSub:s,nextSub:r}=e;if(s&&(s.nextSub=r,e.prevSub=void 0),r&&(r.prevSub=s,e.nextSub=void 0),n.subs===e&&(n.subs=s,!s&&n.computed)){n.computed.flags&=-5;for(let i=n.computed.deps;i;i=i.nextDep)Ws(i,!0)}!t&&!--n.sc&&n.map&&n.map.delete(n.key)}function cl(e){const{prevDep:t,nextDep:n}=e;t&&(t.nextDep=n,e.prevDep=void 0),n&&(n.prevDep=t,e.nextDep=void 0)}let Ne=!0;const vi=[];function rt(){vi.push(Ne),Ne=!1}function it(){const e=vi.pop();Ne=e===void 0?!0:e}function hr(e){const{cleanup:t}=e;if(e.cleanup=void 0,t){const n=te;te=void 0;try{t()}finally{te=n}}}let qt=0;class al{constructor(t,n){this.sub=t,this.dep=n,this.version=n.version,this.nextDep=this.prevDep=this.nextSub=this.prevSub=this.prevActiveLink=void 0}}class jn{constructor(t){this.computed=t,this.version=0,this.activeLink=void 0,this.subs=void 0,this.map=void 0,this.key=void 0,this.sc=0}track(t){if(!te||!Ne||te===this.computed)return;let n=this.activeLink;if(n===void 0||n.sub!==te)n=this.activeLink=new al(te,this),te.deps?(n.prevDep=te.depsTail,te.depsTail.nextDep=n,te.depsTail=n):te.deps=te.depsTail=n,Si(n);else if(n.version===-1&&(n.version=this.version,n.nextDep)){const s=n.nextDep;s.prevDep=n.prevDep,n.prevDep&&(n.prevDep.nextDep=s),n.prevDep=te.depsTail,n.nextDep=void 0,te.depsTail.nextDep=n,te.depsTail=n,te.deps===n&&(te.deps=s)}return n}trigger(t){this.version++,qt++,this.notify(t)}notify(t){ks();try{for(let n=this.subs;n;n=n.prevSub)n.sub.notify()&&n.sub.dep.notify()}finally{Bs()}}}function Si(e){if(e.dep.sc++,e.sub.flags&4){const t=e.dep.computed;if(t&&!e.dep.subs){t.flags|=20;for(let s=t.deps;s;s=s.nextDep)Si(s)}const n=e.dep.subs;n!==Line truncated
+* @vue/runtime-core v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/function nn(e,t,n,s){try{return s?e(...s):e()}catch(r){sn(r,t,n)}}function De(e,t,n,s){if(q(e)){const r=nn(e,t,n,s);return r&&li(r)&&r.catch(i=>{sn(i,t,n)}),r}if(B(e)){const r=[];for(let i=0;i<e.length;i++)r.push(De(e[i],t,n,s));return r}}function sn(e,t,n,s=!0){const r=t?t.vnode:null,{errorHandler:i,throwUnhandledErrorInProduction:o}=t&&t.appContext.config||Z;if(t){let l=t.parent;const c=t.proxy,f=`https://vuejs.org/error-reference/#runtime-${n}`;for(;l;){const a=l.ec;if(a){for(let h=0;h<a.length;h++)if(a[h](e,c,f)===!1)return}l=l.parent}if(i){rt(),nn(i,null,10,[e,c,f]),it();return}}jl(e,n,r,s,o)}function jl(e,t,n,s=!0,r=!1){if(r)throw e;console.error(e)}const Se=[];let Ve=-1;const At=[];let Qe=null,vt=0;const Ii=Promise.resolve();let On=null;function Bn(e){const t=On||Ii;return e?t.then(this?e.bind(this):e):t}function Vl(e){let t=Ve+1,n=Se.length;for(;t<n;){const s=t+n>>>1,r=Se[s],i=Yt(r);i<e||i===e&&r.flags&2?t=s+1:n=s}return t}function Xs(e){if(!(e.flags&1)){const t=Yt(e),n=Se[Se.length-1];!n||!(e.flags&2)&&t>=Yt(n)?Se.push(e):Se.splice(Vl(t),0,e),e.flags|=1,Ni()}}function Ni(){On||(On=Ii.then(Fi))}function Ul(e){B(e)?At.push(...e):Qe&&e.id===-1?Qe.splice(vt+1,0,e):e.flags&1||(At.push(e),e.flags|=1),Ni()}function gr(e,t,n=Ve+1){for(;n<Se.length;n++){const s=Se[n];if(s&&s.flags&2){if(e&&s.id!==e.uid)continue;Se.splice(n,1),n--,s.flags&4&&(s.flags&=-2),s(),s.flags&4||(s.flags&=-2)}}}function Mn(e){if(At.length){const t=[...new Set(At)].sort((n,s)=>Yt(n)-Yt(s));if(At.length=0,Qe){Qe.push(...t);return}for(Qe=t,vt=0;vt<Qe.length;vt++){const n=Qe[vt];n.flags&4&&(n.flags&=-2),n.flags&8||n(),n.flags&=-2}Qe=null,vt=0}}const Yt=e=>e.id==null?e.flags&2?-1:1/0:e.id;function Fi(e){try{for(Ve=0;Ve<Se.length;Ve++){const t=Se[Ve];t&&!(t.flags&8)&&(t.flags&4&&(t.flags&=-2),nn(t,t.i,t.i?15:14),t.flags&4||(t.flags&=-2))}}finally{for(;Ve<Se.length;Ve++){const t=Se[Ve];t&&(t.flags&=-2)}Ve=-1,Se.length=0,Mn(),On=null,(Se.length||At.length)&&Fi()}}let ue=null,Di=null;function Pn(e){const t=ue;return ue=e,Di=e&&e.type.__scopeId||null,t}function kl(e,t=ue,n){if(!t||e._n)return e;const s=(...r)=>{s._d&&Mr(-1);const i=Pn(t);let o;try{o=e(...r)}finally{Pn(i),s._d&&Mr(1)}return o};return s._n=!0,s._c=!0,s._d=!0,s}function vf(e,t){if(ue===null)return e;const n=Xn(ue),s=e.dirs||(e.dirs=[]);for(let r=0;r<t.length;r++){let[i,o,l,c=Z]=t[r];i&&(q(i)&&(i={mounted:i,updated:i}),i.deep&&Ye(o),s.push({dir:i,instance:n,value:o,oldValue:void 0,arg:l,modifiers:c}))}return e}function Ue(e,t,n,s){const r=e.dirs,i=t&&t.dirs;for(let o=0;o<r.length;o++){const l=r[o];i&&(l.oldValue=i[o].value);let c=l.dir[s];c&&(rt(),De(c,n,8,[e.el,l,e,t]),it())}}const Hi=Symbol("_vte"),$i=e=>e.__isTeleport,Ut=e=>e&&(e.disabled||e.disabled===""),mr=e=>e&&(e.defer||e.defer===""),yr=e=>typeof SVGElement<"u"&&e instanceof SVGElement,_r=e=>typeof MathMLElement=="function"&&e instanceof MathMLElement,Ts=(e,t)=>{const n=e&&e.to;return re(n)?t?t(n):null:n},ji={name:"Teleport",__isTeleport:!0,process(e,t,n,s,r,i,o,l,c,f){const{mc:a,pc:h,pbc:y,o:{insert:_,querySelector:S,createText:b,createComment:K}}=f,N=Ut(t.props);let{shapeFlag:j,children:p,dynamicChildren:g}=t;if(e==null){const O=t.el=b(""),F=t.anchor=b("");_(O,n,s),_(F,n,s);const H=(R,w)=>{j&16&&(r&&r.isCE&&(r.ce._teleportTarget=R),a(p,R,w,r,i,o,l,c))},V=()=>{const R=t.target=Ts(t.props,S),w=Vi(R,t,b,_);R&&(o!=="svg"&&yr(R)?o="svg":o!=="mathml"&&_r(R)&&(o="mathml"),N||(H(R,w),En(t,!1)))};N&&(H(n,F),En(t,!0)),mr(t.props)?we(()=>{V(),t.el.__isMounted=!0},i):V()}else{if(mr(t.props)&&!e.el.__isMounted){we(()=>{ji.process(e,t,n,s,r,i,o,l,c,f),delete e.el.__isMounted},i);return}t.el=e.el,t.targetStart=e.targetStart;const O=t.anchor=e.anchor,F=t.target=e.target,H=t.targetAnchor=e.targetAnchor,V=Ut(e.props),R=V?n:F,w=V?O:H;if(o==="svg"||yr(F)?o="svg":(o==="mathml"||_r(F))&&(o="mathml"),g?(y(e.dynamicChildren,g,R,r,i,o,l),tr(e,t,!0)):c||h(e,t,R,w,r,i,o,l,!1),N)V?t.props&&e.props&&t.props.to!==e.props.to&&(t.props.to=e.props.to):dn(t,n,O,f,1);else if((t.props&&t.props.to)!==(e.props&&e.props.to)){const I=t.target=Ts(t.props,S);I&&dn(t,I,null,f,0)}else V&&dn(t,F,H,f,1);En(t,N)}},remove(e,t,n,{um:s,o:{remove:r}},i){const{shapeFlag:o,children:l,anchor:c,targetStart:f,targetAnchor:a,target:h,props:y}=e;if(h&&(r(f),r(a)),i&&r(c),o&16){const _=i||!Ut(y);for(let S=0;S<l.length;S++){const b=l[S];s(b,t,n,_,!!b.dynamicChildren)}}},move:dn,hydrate:Bl};function dn(e,t,n,{o:{insert:s},m:r},i=2){i===0&&s(e.targetAnchor,t,n);const{el:o,anchor:l,shapeFlag:c,children:f,props:a}=e,h=i===2;if(h&&s(o,t,n),(!h||Ut(a))&&c&16)for(let y=0;y<f.length;y++)r(f[y],t,n,2);h&&s(l,t,n)}function Bl(e,t,n,s,r,i,{o:{nextSibling:o,parentNode:l,querySelector:c,insert:f,createText:a}},h){const y=t.target=Ts(t.props,c);if(y){const _=Ut(t.props),S=y._lpa||y.firstChild;if(t.shapeFlag&16)if(_)t.anchor=h(o(e),t,l(e),n,s,r,i),t.targetStart=S,t.targetAnchor=S&&o(S);else{t.anchor=o(e);let b=S;for(;b;){if(b&&b.nodeType===8){if(b.data==="teleport start anchor")t.targetStar
Line truncated
+`&&(p.tagName==="PRE"||p.tagName==="TEXTAREA")&&($=$.slice(1)),p.textContent!==$&&(gn(p,0)||wt(),p.textContent=g.children)}if(w){if(le||!V||I&48){const $=p.tagName.includes("-");for(const he in w)(le&&(he.endsWith("value")||he==="indeterminate")||tn(he)&&!Ct(he)||he[0]==="."||$)&&s(p,he,null,w[he],void 0,O)}else if(w.onClick)s(p,"onClick",null,w.onClick,void 0,O);else if(I&4&&ht(w.style))for(const $ in w.style)w.style[$]}let Y;(Y=w&&w.onVnodeBeforeMount)&&Oe(Y,O,g),W&&Ue(g,null,O,"beforeMount"),((Y=w&&w.onVnodeMounted)||W||U)&&mo(()=>{Y&&Oe(Y,O,g),U&&se.enter(p),W&&Ue(g,null,O,"mounted")},F)}return p.nextSibling},_=(p,g,O,F,H,V,R)=>{R=R||!!g.dynamicChildren;const w=g.children,I=w.length;for(let E=0;E<I;E++){const W=R?w[E]:w[E]=Me(w[E]),se=W.type===gt;p?(se&&!R&&E+1<I&&Me(w[E+1]).type===gt&&(c(r(p.data.slice(W.children.length)),O,i(p)),p.data=W.children),p=h(p,W,F,H,V,R)):se&&!W.children?c(W.el=r(""),O):(gn(O,1)||wt(),n(null,W,O,null,F,H,pn(O),V))}return p},S=(p,g,O,F,H,V)=>{const{slotScopeIds:R}=g;R&&(H=H?H.concat(R):R);const w=o(p),I=_(i(p),g,w,O,F,H,V);return I&&Et(I)&&I.data==="]"?i(g.anchor=I):(wt(),c(g.anchor=f("]"),w,I),I)},b=(p,g,O,F,H,V)=>{if(gn(p.parentElement,1)||wt(),g.el=null,V){const I=K(p);for(;;){const E=i(p);if(E&&E!==I)l(E);else break}}const R=i(p),w=o(p);return l(p),n(null,g,w,R,O,F,pn(w),H),O&&(O.vnode.el=g.el,po(O,g.el)),R},K=(p,g="[",O="]")=>{let F=0;for(;p;)if(p=i(p),p&&Et(p)&&(p.data===g&&F++,p.data===O)){if(F===0)return i(p);F--}return p},N=(p,g,O)=>{const F=g.parentNode;F&&F.replaceChild(p,g);let H=O;for(;H;)H.vnode.el===g&&(H.vnode.el=H.subTree.el=p),H=H.parent},j=p=>p.nodeType===1&&p.tagName==="TEMPLATE";return[a,h]}const vr="data-allow-mismatch",Jl={0:"text",1:"children",2:"class",3:"style",4:"attribute"};function gn(e,t){if(t===0||t===1)for(;e&&!e.hasAttribute(vr);)e=e.parentElement;const n=e&&e.getAttribute(vr);if(n==null)return!1;if(n==="")return!0;{const s=n.split(",");return t===0&&s.includes("children")?!0:n.split(",").includes(Jl[t])}}$n().requestIdleCallback;$n().cancelIdleCallback;function zl(e,t){if(Et(e)&&e.data==="["){let n=1,s=e.nextSibling;for(;s;){if(s.nodeType===1){if(t(s)===!1)break}else if(Et(s))if(s.data==="]"){if(--n===0)break}else s.data==="["&&n++;s=s.nextSibling}}else t(e)}const pt=e=>!!e.type.__asyncLoader;/*! #__NO_SIDE_EFFECTS__ */function Ef(e){q(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:s,delay:r=200,hydrate:i,timeout:o,suspensible:l=!0,onError:c}=e;let f=null,a,h=0;const y=()=>(h++,f=null,_()),_=()=>{let S;return f||(S=f=t().catch(b=>{if(b=b instanceof Error?b:new Error(String(b)),c)return new Promise((K,N)=>{c(b,()=>K(y()),()=>N(b),h+1)});throw b}).then(b=>S!==f&&f?f:(b&&(b.__esModule||b[Symbol.toStringTag]==="Module")&&(b=b.default),a=b,b)))};return Js({name:"AsyncComponentWrapper",__asyncLoader:_,__asyncHydrate(S,b,K){const N=i?()=>{const j=i(K,p=>zl(S,p));j&&(b.bum||(b.bum=[])).push(j)}:K;a?N():_().then(()=>!b.isUnmounted&&N())},get __asyncResolved(){return a},setup(){const S=fe;if(zs(S),a)return()=>rs(a,S);const b=p=>{f=null,sn(p,S,13,!s)};if(l&&S.suspense||Mt)return _().then(p=>()=>rs(p,S)).catch(p=>(b(p),()=>s?ce(s,{error:p}):null));const K=oe(!1),N=oe(),j=oe(!!r);return r&&setTimeout(()=>{j.value=!1},r),o!=null&&setTimeout(()=>{if(!K.value&&!N.value){const p=new Error(`Async component timed out after ${o}ms.`);b(p),N.value=p}},o),_().then(()=>{K.value=!0,S.parent&&rn(S.parent.vnode)&&S.parent.update()}).catch(p=>{b(p),N.value=p}),()=>{if(K.value&&a)return rs(a,S);if(N.value&&s)return ce(s,{error:N.value});if(n&&!j.value)return ce(n)}}})}function rs(e,t){const{ref:n,props:s,children:r,ce:i}=t.vnode,o=ce(e,s,r);return o.ref=n,o.ce=i,delete t.vnode.ce,o}const rn=e=>e.type.__isKeepAlive;function Ql(e,t){qi(e,"a",t)}function Zl(e,t){qi(e,"da",t)}function qi(e,t,n=fe){const s=e.__wdc||(e.__wdc=()=>{let r=n;for(;r;){if(r.isDeactivated)return;r=r.parent}return e()});if(Wn(t,s,n),n){let r=n.parent;for(;r&&r.parent;)rn(r.parent.vnode)&&ec(s,t,n,r),r=r.parent}}function ec(e,t,n,s){const r=Wn(t,e,s,!0);Kn(()=>{$s(s[t],r)},n)}function Wn(e,t,n=fe,s=!1){if(n){const r=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...o)=>{rt();const l=on(n),c=De(t,n,e,o);return l(),it(),c});return s?r.unshift(i):r.push(i),i}}const Je=e=>(t,n=fe)=>{(!Mt||e==="sp")&&Wn(e,(...s)=>t(...s),n)},tc=Je("bm"),Lt=Je("m"),nc=Je("bu"),sc=Je("u"),Gi=Je("bum"),Kn=Je("um"),rc=Je("sp"),ic=Je("rtg"),oc=Je("rtc");function lc(e,t=fe){Wn("ec",e,t)}const Qs="components",cc="directives";function xf(e,t){return Zs(Qs,e,!0,t)||e}const Yi=Symbol.for("v-ndc");function Tf(e){return re(e)?Zs(Qs,e,!1)||e:e||Yi}function Cf(e){return Zs(cc,e)}function Zs(e,t,n=!0,s=!1){const r=ue||fe;if(r){const i=r.type;if(e===Qs){const l=qc(i,!1);if(l&&(l===t||l===Le(t)||l===Hn(Le(t))))return i}const o=Sr(r[e]||i[e],t)||Sr(r.appContext[e],t);return!o&&s?i:o}}function Sr(e,t){return e&&(e[t]||e[Le(t)]||e[Hn(Le(t))])}function Af(e,t,n,s){let r;const i=n,o=B(e);if(o||re(e)){const l=o&&ht(e);let c=!1;l&&(c=
Line truncated
+* @vue/runtime-dom v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/let Fs;const Ir=typeof window<"u"&&window.trustedTypes;if(Ir)try{Fs=Ir.createPolicy("vue",{createHTML:e=>e})}catch{}const xo=Fs?e=>Fs.createHTML(e):e=>e,Xc="http://www.w3.org/2000/svg",Jc="http://www.w3.org/1998/Math/MathML",qe=typeof document<"u"?document:null,Nr=qe&&qe.createElement("template"),zc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t==="svg"?qe.createElementNS(Xc,e):t==="mathml"?qe.createElementNS(Jc,e):n?qe.createElement(e,{is:n}):qe.createElement(e);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>qe.createTextNode(e),createComment:e=>qe.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>qe.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,i){const o=n?n.previousSibling:t.lastChild;if(r&&(r===i||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===i||!(r=r.nextSibling)););else{Nr.innerHTML=xo(s==="svg"?`<svg>${e}</svg>`:s==="mathml"?`<math>${e}</math>`:e);const l=Nr.content;if(s==="svg"||s==="mathml"){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[o?o.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},ze="transition",Dt="animation",Zt=Symbol("_vtc"),To={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},Qc=de({},Ui,To),Zc=e=>(e.displayName="Transition",e.props=Qc,e),Ff=Zc((e,{slots:t})=>Ns(ql,ea(e),t)),ct=(e,t=[])=>{B(e)?e.forEach(n=>n(...t)):e&&e(...t)},Fr=e=>e?B(e)?e.some(t=>t.length>1):e.length>1:!1;function ea(e){const t={};for(const E in e)E in To||(t[E]=e[E]);if(e.css===!1)return t;const{name:n="v",type:s,duration:r,enterFromClass:i=`${n}-enter-from`,enterActiveClass:o=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=i,appearActiveClass:f=o,appearToClass:a=l,leaveFromClass:h=`${n}-leave-from`,leaveActiveClass:y=`${n}-leave-active`,leaveToClass:_=`${n}-leave-to`}=e,S=ta(r),b=S&&S[0],K=S&&S[1],{onBeforeEnter:N,onEnter:j,onEnterCancelled:p,onLeave:g,onLeaveCancelled:O,onBeforeAppear:F=N,onAppear:H=j,onAppearCancelled:V=p}=t,R=(E,W,se,le)=>{E._enterCancelled=le,at(E,W?a:l),at(E,W?f:o),se&&se()},w=(E,W)=>{E._isLeaving=!1,at(E,h),at(E,_),at(E,y),W&&W()},I=E=>(W,se)=>{const le=E?H:j,U=()=>R(W,E,se);ct(le,[W,U]),Dr(()=>{at(W,E?c:i),Ke(W,E?a:l),Fr(le)||Hr(W,s,b,U)})};return de(t,{onBeforeEnter(E){ct(N,[E]),Ke(E,i),Ke(E,o)},onBeforeAppear(E){ct(F,[E]),Ke(E,c),Ke(E,f)},onEnter:I(!1),onAppear:I(!0),onLeave(E,W){E._isLeaving=!0;const se=()=>w(E,W);Ke(E,h),E._enterCancelled?(Ke(E,y),Vr()):(Vr(),Ke(E,y)),Dr(()=>{E._isLeaving&&(at(E,h),Ke(E,_),Fr(g)||Hr(E,s,K,se))}),ct(g,[E,se])},onEnterCancelled(E){R(E,!1,void 0,!0),ct(p,[E])},onAppearCancelled(E){R(E,!0,void 0,!0),ct(V,[E])},onLeaveCancelled(E){w(E),ct(O,[E])}})}function ta(e){if(e==null)return null;if(ne(e))return[cs(e.enter),cs(e.leave)];{const t=cs(e);return[t,t]}}function cs(e){return Qo(e)}function Ke(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e[Zt]||(e[Zt]=new Set)).add(t)}function at(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const n=e[Zt];n&&(n.delete(t),n.size||(e[Zt]=void 0))}function Dr(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let na=0;function Hr(e,t,n,s){const r=e._endId=++na,i=()=>{r===e._endId&&s()};if(n!=null)return setTimeout(i,n);const{type:o,timeout:l,propCount:c}=sa(e,t);if(!o)return s();const f=o+"end";let a=0;const h=()=>{e.removeEventListener(f,y),i()},y=_=>{_.target===e&&++a>=c&&h()};setTimeout(()=>{a<c&&h()},l+1),e.addEventListener(f,y)}function sa(e,t){const n=window.getComputedStyle(e),s=S=>(n[S]||"").split(", "),r=s(`${ze}Delay`),i=s(`${ze}Duration`),o=$r(r,i),l=s(`${Dt}Delay`),c=s(`${Dt}Duration`),f=$r(l,c);let a=null,h=0,y=0;t===ze?o>0&&(a=ze,h=o,y=i.length):t===Dt?f>0&&(a=Dt,h=f,y=c.length):(h=Math.max(o,f),a=h>0?o>f?ze:Dt:null,y=a?a===ze?i.length:c.length:0);const _=a===ze&&/\b(transform|all)(,|$)/.test(s(`${ze}Property`).toString());return{type:a,timeout:h,propCount:y,hasTransform:_}}function $r(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map((n,s)=>jr(n)+jr(e[s])))}function jr(e){return e==="auto"?0:Number(e.slice(0,-1).replace(",","."))*1e3}function Vr(){return document.body.offsetHeight}function ra(e,t,n){const s=e[Zt];s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const Nn=Symbol("_vod"),Co=Symbol("_vsh"),Df={beforeMount(e,{value:t},{transition:n}){e[Nn]=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):Ht(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e
Line truncated

docs/.vitepress/dist/assets/chunks/giscus-Ci9LqPcC.CpG_NdUJ.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const x=globalThis,B=x.ShadowRoot&&(x.ShadyCSS===void 0||x.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,G=Symbol(),q=new WeakMap;let at=class{constructor(s,t,e){if(this._$cssResult$=!0,e!==G)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=s,this.t=t}get styleSheet(){let s=this.o;const t=this.t;if(B&&s===void 0){const e=t!==void 0&&t.length===1;e&&(s=q.get(t)),s===void 0&&((this.o=s=new CSSStyleSheet).replaceSync(this.cssText),e&&q.set(t,s))}return s}toString(){return this.cssText}};const ft=s=>new at(typeof s=="string"?s:s+"",void 0,G),pt=(s,...t)=>{const e=s.length===1?s[0]:t.reduce((n,i,o)=>n+(r=>{if(r._$cssResult$===!0)return r.cssText;if(typeof r=="number")return r;throw Error("Value passed to 'css' function must be a 'css' function result: "+r+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+s[o+1],s[0]);return new at(e,s,G)},_t=(s,t)=>{if(B)s.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of t){const n=document.createElement("style"),i=x.litNonce;i!==void 0&&n.setAttribute("nonce",i),n.textContent=e.cssText,s.appendChild(n)}},K=B?s=>s:s=>s instanceof CSSStyleSheet?(t=>{let e="";for(const n of t.cssRules)e+=n.cssText;return ft(e)})(s):s;/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:$t,defineProperty:gt,getOwnPropertyDescriptor:mt,getOwnPropertyNames:At,getOwnPropertySymbols:yt,getPrototypeOf:St}=Object,b=globalThis,F=b.trustedTypes,Et=F?F.emptyScript:"",J=b.reactiveElementPolyfillSupport,U=(s,t)=>s,H={toAttribute(s,t){switch(t){case Boolean:s=s?Et:null;break;case Object:case Array:s=s==null?s:JSON.stringify(s)}return s},fromAttribute(s,t){let e=s;switch(t){case Boolean:e=s!==null;break;case Number:e=s===null?null:Number(s);break;case Object:case Array:try{e=JSON.parse(s)}catch{e=null}}return e}},W=(s,t)=>!$t(s,t),Q={attribute:!0,type:String,converter:H,reflect:!1,hasChanged:W};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),b.litPropertyMetadata??(b.litPropertyMetadata=new WeakMap);class E extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=Q){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){const n=Symbol(),i=this.getPropertyDescriptor(t,n,e);i!==void 0&&gt(this.prototype,t,i)}}static getPropertyDescriptor(t,e,n){const{get:i,set:o}=mt(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get(){return i==null?void 0:i.call(this)},set(r){const h=i==null?void 0:i.call(this);o.call(this,r),this.requestUpdate(t,h,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??Q}static _$Ei(){if(this.hasOwnProperty(U("elementProperties")))return;const t=St(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(U("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(U("properties"))){const e=this.properties,n=[...At(e),...yt(e)];for(const i of n)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[n,i]of e)this.elementProperties.set(n,i)}this._$Eh=new Map;for(const[e,n]of this.elementProperties){const i=this._$Eu(e,n);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const n=new Set(t.flat(1/0).reverse());for(const i of n)e.unshift(K(i))}else t!==void 0&&e.push(K(t));return e}static _$Eu(t,e){const n=e.attribute;return n===!1?void 0:typeof n=="string"?n:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach(e=>e(this))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const n of e.keys())this.hasOwnProperty(n)&&(t.set(n,this[n]),delete this[n]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return _t(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach(e=>{var n;return(n=e.hostConnected)==null?void 0:n.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach(e=>{var n;return(n=e.hostDisconnected)==null?void 0:n.call(e)})}attributeChangedCallback(t,e,n){this._$AK(t,n)}_$EC(t,e){var n;const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(o!==void 0&&i.reflect===!0){const r=(((n=i.converter)==null?void 0:n.toAttribute)!==void 0?i.converter:H).toAttribute(e,i.type);this._$Em=t,r==null?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){var n;const i=this.constructor,o=i._$Eh.get(t);if(o!==void 0&&this._$Em!==o){const r=i.getPropertyOptions(o),h=typeof r.converter=="function"?{fromAttribute:r.converter}:((n=r.converter)==null?void 0:n.fromAttribute)!==void 0?r.converter:H;this._$Em=o,this[o]=h.fromAttribute(e,r.type),this._$Em=null}}requestUpdate(t,e,n){if(t!==void 0){if(n??(n=this.constructor.getPropertyOptions(t)),!(n.hasChanged??W)(this[t],e))return;this.P(t,e,n)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(t,e,n){this._$AL.has(t)||this._$AL.set(t,e),n.reflect===!0&&this._$Em!==t&&(this._$Ej??(this._$Ej=new Set)).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[o,r]of this._$Ep)this[o]=r;this._$Ep=void 0}const i=tLine truncated
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const L=globalThis,k=L.trustedTypes,Z=k?k.createPolicy("lit-html",{createHTML:s=>s}):void 0,ht="$lit$",m=`lit$${Math.random().toFixed(9).slice(2)}$`,lt="?"+m,bt=`<${lt}>`,S=document,T=()=>S.createComment(""),R=s=>s===null||typeof s!="object"&&typeof s!="function",V=Array.isArray,vt=s=>V(s)||typeof(s==null?void 0:s[Symbol.iterator])=="function",z=`[ 	
+\f\r]`,w=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,X=/-->/g,tt=/>/g,A=RegExp(`>|${z}(?:([^\\s"'>=/]+)(${z}*=${z}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),et=/'/g,st=/"/g,dt=/^(?:script|style|textarea|title)$/i,Ct=s=>(t,...e)=>({_$litType$:s,strings:t,values:e}),wt=Ct(1),v=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),nt=new WeakMap,y=S.createTreeWalker(S,129);function ct(s,t){if(!V(s)||!s.hasOwnProperty("raw"))throw Error("invalid template strings array");return Z!==void 0?Z.createHTML(t):t}const Ut=(s,t)=>{const e=s.length-1,n=[];let i,o=t===2?"<svg>":t===3?"<math>":"",r=w;for(let h=0;h<e;h++){const a=s[h];let c,f,l=-1,$=0;for(;$<a.length&&(r.lastIndex=$,f=r.exec(a),f!==null);)$=r.lastIndex,r===w?f[1]==="!--"?r=X:f[1]!==void 0?r=tt:f[2]!==void 0?(dt.test(f[2])&&(i=RegExp("</"+f[2],"g")),r=A):f[3]!==void 0&&(r=A):r===A?f[0]===">"?(r=i??w,l=-1):f[1]===void 0?l=-2:(l=r.lastIndex-f[2].length,c=f[1],r=f[3]===void 0?A:f[3]==='"'?st:et):r===st||r===et?r=A:r===X||r===tt?r=w:(r=A,i=void 0);const g=r===A&&s[h+1].startsWith("/>")?" ":"";o+=r===w?a+bt:l>=0?(n.push(c),a.slice(0,l)+ht+a.slice(l)+m+g):a+m+(l===-2?h:g)}return[ct(s,o+(s[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),n]};class M{constructor({strings:t,_$litType$:e},n){let i;this.parts=[];let o=0,r=0;const h=t.length-1,a=this.parts,[c,f]=Ut(t,e);if(this.el=M.createElement(c,n),y.currentNode=this.el.content,e===2||e===3){const l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(i=y.nextNode())!==null&&a.length<h;){if(i.nodeType===1){if(i.hasAttributes())for(const l of i.getAttributeNames())if(l.endsWith(ht)){const $=f[r++],g=i.getAttribute(l).split(m),I=/([.?@])?(.*)/.exec($);a.push({type:1,index:o,name:I[2],strings:g,ctor:I[1]==="."?Ot:I[1]==="?"?Tt:I[1]==="@"?Rt:j}),i.removeAttribute(l)}else l.startsWith(m)&&(a.push({type:6,index:o}),i.removeAttribute(l));if(dt.test(i.tagName)){const l=i.textContent.split(m),$=l.length-1;if($>0){i.textContent=k?k.emptyScript:"";for(let g=0;g<$;g++)i.append(l[g],T()),y.nextNode(),a.push({type:2,index:++o});i.append(l[$],T())}}}else if(i.nodeType===8)if(i.data===lt)a.push({type:2,index:o});else{let l=-1;for(;(l=i.data.indexOf(m,l+1))!==-1;)a.push({type:7,index:o}),l+=m.length-1}o++}}static createElement(t,e){const n=S.createElement("template");return n.innerHTML=t,n}}function C(s,t,e=s,n){var i,o;if(t===v)return t;let r=n!==void 0?(i=e._$Co)==null?void 0:i[n]:e._$Cl;const h=R(t)?void 0:t._$litDirective$;return(r==null?void 0:r.constructor)!==h&&((o=r==null?void 0:r._$AO)==null||o.call(r,!1),h===void 0?r=void 0:(r=new h(s),r._$AT(s,e,n)),n!==void 0?(e._$Co??(e._$Co=[]))[n]=r:e._$Cl=r),r!==void 0&&(t=C(s,r._$AS(s,t.values),r,n)),t}class Pt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:n}=this._$AD,i=((t==null?void 0:t.creationScope)??S).importNode(e,!0);y.currentNode=i;let o=y.nextNode(),r=0,h=0,a=n[0];for(;a!==void 0;){if(r===a.index){let c;a.type===2?c=new N(o,o.nextSibling,this,t):a.type===1?c=new a.ctor(o,a.name,a.strings,this,t):a.type===6&&(c=new Mt(o,this,t)),this._$AV.push(c),a=n[++h]}r!==(a==null?void 0:a.index)&&(o=y.nextNode(),r++)}return y.currentNode=S,i}p(t){let e=0;for(const n of this._$AV)n!==void 0&&(n.strings!==void 0?(n._$AI(t,n,e),e+=n.strings.length-2):n._$AI(t[e])),e++}}class N{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,n,i){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=n,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=C(this,t,e),R(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==v&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):vt(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==d&&R(this._$AH)?this._$AA.nextSibling.data=t:this.T(S.createTextNode(t)),this._$AH=t}$(t){var e;const{values:n,_$litType$:i}=t,o=typeof i=="number"?this._$AC(t):(i.el===void 0&&(i.el=M.createElement(ct(i.h,i.h[0]),this.options)),i);if(((e=this._$AH)==null?void 0:e._$AD)===o)this._$AH.p(n);else{const r=new Pt(o,this),h=r.u(this.options);r.p(n),this.T(h),this._$AH=r}}_$AC(t){let e=nt.get(t.strings);return e===void 0&&nt.set(t.strings,e=new M(t)),e}k(t){V(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let n,i=0;for(const o of t)i===e.length?e.push(n=new N(this.O(T()),this.O(T()),this,this.options)):n=e[i],n._$AI(o),i++;i<e.length&&(this._$AR(n&&n._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var n;for((n=this._$AP)==null?void 0:n.call(this,!1,!0,e);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class j{get tagNaLine truncated
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let P=class extends E{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var s;const t=super.createRenderRoot();return(s=this.renderOptions).renderBefore??(s.renderBefore=t.firstChild),t}update(s){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(s),this._$Do=Nt(t,this.renderRoot,this.renderOptions)}connectedCallback(){var s;super.connectedCallback(),(s=this._$Do)==null||s.setConnected(!0)}disconnectedCallback(){var s;super.disconnectedCallback(),(s=this._$Do)==null||s.setConnected(!1)}render(){return v}};var rt;P._$litElement$=!0,P.finalized=!0,(rt=globalThis.litElementHydrateSupport)==null||rt.call(globalThis,{LitElement:P});const ot=globalThis.litElementPolyfillSupport;ot==null||ot({LitElement:P});(globalThis.litElementVersions??(globalThis.litElementVersions=[])).push("4.1.1");/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const It=s=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(s,t)}):customElements.define(s,t)};/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const xt={attribute:!0,type:String,converter:H,reflect:!1,hasChanged:W},Ht=(s=xt,t,e)=>{const{kind:n,metadata:i}=e;let o=globalThis.litPropertyMetadata.get(i);if(o===void 0&&globalThis.litPropertyMetadata.set(i,o=new Map),o.set(e.name,s),n==="accessor"){const{name:r}=e;return{set(h){const a=t.get.call(this);t.set.call(this,h),this.requestUpdate(r,a,s)},init(h){return h!==void 0&&this.P(r,void 0,s),h}}}if(n==="setter"){const{name:r}=e;return function(h){const a=this[r];t.call(this,h),this.requestUpdate(r,a,s)}}throw Error("Unsupported decorator location: "+n)};function _(s){return(t,e)=>typeof e=="object"?Ht(s,t,e):((n,i,o)=>{const r=i.hasOwnProperty(o);return i.constructor.createProperty(o,r?{...n,wrapped:!0}:n),r?Object.getOwnPropertyDescriptor(i,o):void 0})(s,t,e)}/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Lt=s=>s.strings===void 0;/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const kt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Dt=s=>(...t)=>({_$litDirective$:s,values:t});let jt=class{constructor(s){}get _$AU(){return this._$AM._$AU}_$AT(s,t,e){this._$Ct=s,this._$AM=t,this._$Ci=e}_$AS(s,t){return this.update(s,t)}update(s,t){return this.render(...t)}};/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const O=(s,t)=>{var e;const n=s._$AN;if(n===void 0)return!1;for(const i of n)(e=i._$AO)==null||e.call(i,t,!1),O(i,t);return!0},D=s=>{let t,e;do{if((t=s._$AM)===void 0)break;e=t._$AN,e.delete(s),s=t}while((e==null?void 0:e.size)===0)},ut=s=>{for(let t;t=s._$AM;s=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(s))break;e.add(s),Bt(t)}};function zt(s){this._$AN!==void 0?(D(this),this._$AM=s,ut(this)):this._$AM=s}function Yt(s,t=!1,e=0){const n=this._$AH,i=this._$AN;if(i!==void 0&&i.size!==0)if(t)if(Array.isArray(n))for(let o=e;o<n.length;o++)O(n[o],!1),D(n[o]);else n!=null&&(O(n,!1),D(n));else O(this,s)}const Bt=s=>{s.type==kt.CHILD&&(s._$AP??(s._$AP=Yt),s._$AQ??(s._$AQ=zt))};class Gt extends jt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,n){super._$AT(t,e,n),ut(this),this.isConnected=t._$AU}_$AO(t,e=!0){var n,i;t!==this.isConnected&&(this.isConnected=t,t?(n=this.reconnected)==null||n.call(this):(i=this.disconnected)==null||i.call(this)),e&&(O(this,t),D(this))}setValue(t){if(Lt(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Wt=()=>new Vt;class Vt{}const Y=new WeakMap,qt=Dt(class extends Gt{render(s){return d}update(s,[t]){var e;const n=t!==this.Y;return n&&this.Y!==void 0&&this.rt(void 0),(n||this.lt!==this.ct)&&(this.Y=t,this.ht=(e=s.options)==null?void 0:e.host,this.rt(this.ct=s.element)),d}rt(s){if(this.isConnected||(s=void 0),typeof this.Y=="function"){const t=this.ht??globalThis;let e=Y.get(t);e===void 0&&(e=new WeakMap,Y.set(t,e)),e.get(this.Y)!==void 0&&this.Y.call(this.ht,void 0),e.set(this.Y,s),s!==void 0&&this.Y.call(this.ht,s)}else this.Y.value=s}get lt(){var s,t;return typeof this.Y=="function"?(s=Y.get(this.ht??globalThis))==null?void 0:s.get(this.Y):(t=this.Y)==null?void 0:t.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}});var Kt=Object.defineProperty,Ft=Object.getOwnPropertyDescriptor,p=(s,t,e,n)=>{for(var i=n>1?void 0:n?Ft(t,e):t,o=s.length-1,r;o>=0;o--)(r=s[o])&&(i=(n?r(t,e,i):r(i))||i);return n&&i&&Kt(t,e,i),i};function Jt(s){return customElements.get(s)?t=>t:It(s)}let u=class extends P{constructor(){super(),this.GISCUS_SESSION_KEY="giscus-session",this.GISCUS_DEFAULT_HOST="https://giscus.app",this.ERROR_SUGGESTION="Please consider reporting this error at https://github.com/giscus/giscus/issues/new.",this.__session="",this._iframeRef=Wt(),this.messageEventHandler=this.handleMessageEvent.bind(this),this.hasLoaded=!1,this.host=this.GISCUS_DEFAULT_HOST,this.strict="0",this.reactionsEnabled="1",this.emitMetadata="0",this.inputPosition="bottom",this.theme="light",this.lang="en",this.loading="eager",this.setupSession(),window.addEventListener("message",this.messageEventHandler)}get iframeRef(){var s;return(s=this._iframeRef)==null?void 0:s.value}get _host(){try{return new URL(this.host),this.host}catch{return this.GISCUS_DEFAULT_HOST}}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("message",this.messageEventHandler)}_formatError(s){return`[giscus] An error occurred. Error message: "${s}".`}setupSession(){const s=location.href,t=new URL(s),e=localStorage.getItem(this.GISCUS_SESSION_KEY),n=t.searchParams.get("giscus")??"";if(this.__session="",n){localStorage.setItem(this.GISCUS_SESSION_KEY,JSON.stringify(n)),this.__session=n,t.searchParams.delete("giscus"),t.hash="",history.replaceState(void 0,document.title,t.toString());return}if(e)try{this.__session=JSON.parse(e)}catch(i){localStorage.removeItem(this.GISCUS_SESSION_KEY),console.warn(`${this._formatError(i==null?void 0:i.message)} Session has been cleared.`)}}signOut(){localStorage.removeItem(this.GISCUS_SESSION_KEY),this.__session="",this.update(new Map)}handleMessageEvent(s){if(s.origin!==this._host)return;const{data:t}=s;if(!(typeof t=="object"&&t.giscus))return;if(this.iframeRef&&t.giscus.resizeHeight&&(this.iframeRef.style.height=`${t.giscus.resizeHeight}px`),t.giscus.signOut){console.info("[giscus] User has logged out. Session has been cleared."),this.signOut();return}if(!t.giscus.error)return;const e=t.giscus.error;if(e.includes("Bad credentials")||e.includes("Invalid state value")||e.includes("State has expired")){if(localStorage.getItem(this.GISCUS_SESSION_KEY)!==null){console.warn(`${this._formatError(e)} Session has been cleared.`),this.signOut();return}console.error(`${this._formatError(e)} No session is stored initially. ${this.ERROR_SUGGESTION}`)}if(e.includes("Discussion not found")){console.warn(`[giscus] ${e}. A new discussion will be created if a comment/reaction is submitted.`);return}console.error(`${this._formatError(e)} ${this.ERROR_SUGGESTION}`)}sendMessage(s){var t;!((t=this.iframeRef)!=null&&t.contentWindow)||!this.hasLoaded||this.iframeRef.contentWindow.postMessage({giscus:s},this._host)}updateConfig(){const s={setConfig:{repo:this.repo,repoId:this.repoId,category:this.category,categoryId:this.categoryId,term:this.getTerm(),number:+this.getNumber(),strict:this.strict==="1",reactionsEnabled:this.reactionsEnabled==="1",emitMetadata:this.emitMetadata==="1",inputPosition:this.inputPosition,theme:this.theme,lang:this.lang}};this.sendMessage(s)}firstUpdated(){var s;(s=this.iframeRef)==null||s.addEventListener("load",()=>{var t;(t=this.iframeRef)==null||t.classList.remove("loading"),this.hasLoaded=!0,this.updateConfig()})}requestUpdate(s,t,e){if(!this.hasUpdated||s==="host"){super.requestUpdate(s,t,e);return}this.updateConfig()}getMetaContent(s,t=!1){const e=t?`meta[property='og:${s}'],`:"",n=document.querySelector(e+`meta[name='${s}']`);return n?n.content:""}_getCleanedUrl(){const s=new URL(location.href);return s.searchParams.delete("giscus"),s.hash="",s}getTerm(){switch(this.mapping){case"url":return this._getCleanedUrl().toString();case"title":return document.title;case"og:title":return this.getMetaContent("title",!0);case"specific":return this.term??"";case"number":return"";case"pathname":default:return location.pathname.length<2?"index":location.pathname.substring(1).replace(/\.\w+$/,"")}}getNumber(){return this.mapping==="number"?this.term??"":""}getIframeSr
Line truncated
+      <iframe
+        title="Comments"
+        scrolling="no"
+        class="loading"
+        ${qt(this._iframeRef)}
+        src=${this.getIframeSrc()}
+        loading=${this.loading}
+        allow="clipboard-write"
+        part="iframe"
+      ></iframe>
+    `}};u.styles=pt`
+    :host,
+    iframe {
+      width: 100%;
+      border: none;
+      min-height: 150px;
+      color-scheme: light dark;
+    }
+
+    iframe.loading {
+      opacity: 0;
+    }
+  `;p([_({reflect:!0})],u.prototype,"host",2);p([_({reflect:!0})],u.prototype,"repo",2);p([_({reflect:!0})],u.prototype,"repoId",2);p([_({reflect:!0})],u.prototype,"category",2);p([_({reflect:!0})],u.prototype,"categoryId",2);p([_({reflect:!0})],u.prototype,"mapping",2);p([_({reflect:!0})],u.prototype,"term",2);p([_({reflect:!0})],u.prototype,"strict",2);p([_({reflect:!0})],u.prototype,"reactionsEnabled",2);p([_({reflect:!0})],u.prototype,"emitMetadata",2);p([_({reflect:!0})],u.prototype,"inputPosition",2);p([_({reflect:!0})],u.prototype,"theme",2);p([_({reflect:!0})],u.prototype,"lang",2);p([_({reflect:!0})],u.prototype,"loading",2);u=p([Jt("giscus-widget")],u);export{u as GiscusWidget};

docs/.vitepress/dist/assets/chunks/posts.data.DQjUT6HS.js

@@ -0,0 +1 @@
+const e=JSON.parse('[{"title":"中西文混排时汉字与拉丁字母之间差异","url":"/posts/2024/08/中西文混排时汉字与拉丁字母之间差异","excerpt":"<p>这篇文章讨论了中英文混排时，是否应在汉字与拉丁字母之间加入空格的争议。研究和实践表明，虽然专业排版软件如Adobe InDesign通常会自动调整汉字与西文之间的间距，但许多普通用户常常手动插入半角空格以保证文本的可读性和美观。文章介绍了“空格派”在排版中的一些习惯，阐述了何时应该加空格、何时不加空格，并引用了刘昕等人关于中英文混排的标准，最后强调了空格的使用对提高文本阅读体验的重要性。</p>\\n","date":{"time":1723032000000,"string":"2024/08/07","year":"2024年","monthDay":"08/07"},"tags":["编程","学习","设计"]},{"title":"登录功能的思考","url":"/posts/2024/08/登录功能的思考","excerpt":"<p>这篇文章介绍了如何安全地存储用户数据，包括用户名、密码哈希、邮箱等，强调使用 bcrypt 加密密码和唯一盐来提升安全性。它还详细解释了 HTTPS 如何通过加密、身份验证和数据完整性保护来确保通信安全，并探讨了前端加密与 HTTPS 的配合使用。此外，文章还讨论了如何管理 SSL/TLS 证书、Token 存储和安全性防护策略，如防止 XSS 和 CSRF 攻击。</p>\\n","date":{"time":1722859200000,"string":"2024/08/05","year":"2024年","monthDay":"08/05"},"tags":["编程","学习"]},{"title":"TypeScript 应该被放弃吗","url":"/posts/2024/08/TypeScript 应该被放弃吗","excerpt":"<p>文章讨论了关于是否放弃 TypeScript 的问题，尤其是在一些大牛和社区项目的选择上。重点聚焦于两篇文章的观点：</p>\\n<p>Turbo 8 放弃 TypeScript：作者认为 TypeScript 的类型检查反而增加了开发中的负担，并且声明类型复杂化代码，减少了开发效率。这个观点在 Reddit 和知乎引发了激烈讨论，部分评论指出 Turbo 8 并不具备广泛影响力，且作者习惯发表反向意见。</p>\\n<p>TypeScript 的额外成本：第二篇文章提到，在某些场景下，TypeScript 的类型体操带来不必要的复杂度，尤其是对于小型项目，编写精确的类型定义可能比核心逻辑代码更为冗长。然而，TypeScript 相比于 JavaScript 在维护性和可扩展性上具有优势，尤其是对于框架和类库的开发者而言，尽管带来一些额外的维护成本。</p>\\n<p>总体来看，放弃 TypeScript 的选择多见于小型或开源项目的维护者，而对于大多数开发者来说，TypeScript 提供的类型系统和可维护性仍然是更受欢迎的选择。</p>\\n","date":{"time":1722772800000,"string":"2024/08/04","year":"2024年","monthDay":"08/04"},"tags":["编程","学习","思考"]},{"title":"Vue还是React?","url":"/posts/2024/08/Vue还是React","excerpt":"<p>这篇文章探讨了 Vue、React 和 Next.js 之间的选择，并深入分析了 React 的一些优缺点。作者指出，虽然 Vue 在国内市场占据主导地位，React 在国外仍然保持强大的活力。但与此同时，React 面临不少批评，特别是其逐渐显现的技术债务和性能问题。文章引用了一些反对 React 的观点，强调 React 已显老化，且与其他框架相比，存在着难以兼容和过度依赖自定义模块的问题。同时，文章还提到其他框架如 Svelte 的优越性，认为它能提供类似 React 的功能，但更加简洁和高效。</p>\\n<p>如果你对前端框架的选择和 React 未来的方向感兴趣，这篇文章将为你提供一些新的视角，帮助你做出更明智的决策。</p>\\n","date":{"time":1722772800000,"string":"2024/08/04","year":"2024年","monthDay":"08/04"},"tags":["编程","学习","思考"]},{"title":"主流网站主页布局展示内容及渲染方式调研","url":"/posts/2024/08/主流网站主页布局展示内容及渲染方式调研","date":{"time":1722686400000,"string":"2024/08/03","year":"2024年","monthDay":"08/03"},"tags":["设计"]},{"title":"JavaScript和Vue中实现表格(table)固定表头和首列","url":"/posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】","excerpt":"<p>这篇文章介绍了如何在 JS 或 Vue 中实现表格的列和表头固定功能，适用于不同的开发环境（如原生\\nJavaScript、Vue、React、小程序等）。文章详细展示了实现这一功能的思路和具体步骤，包括使用 Vue3 和 TypeScript 结合 Less\\n来完成样式和功能的实现。</p>\\n","date":{"time":1661515200000,"string":"2022/08/26","year":"2022年","monthDay":"08/26"},"tags":["编程","学习"]},{"title":"Vue3中的ref为何要用.value进行值的调用？","url":"/posts/2022/08/Vue3中的ref为何要用.value进行值的调用？","excerpt":"<p>这篇文章对比了 Vue2 和 Vue3 中的数据响应式处理Line truncated

docs/.vitepress/dist/assets/chunks/theme.BT-YIZBO.js

@@ -0,0 +1,848 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chunks/VPLocalSearchBox.BxcHhHT_.js","assets/chunks/framework.BsGVjEHh.js"])))=>i.map(i=>d[i]);
+import{r as L,g as un,i as vn,c as g,p as et,h as tn,d as H,o as Me,n as an,a as h,b as rt,F as xe,w as fe,t as Xe,m as je,T as ir,e as Vs,f as pr,j as Dn,C as mi,k as pd,l as bi,q as Wn,s as Rs,u as lr,v as Jr,x as Ft,y as gr,z as zs,A as gd,B as E,D as q,E as X,G as Ke,H as nt,I as He,J as ce,K as Q,L as ae,_ as de,M as Qr,N as hd,O as md,P as yi,Q as ee,R as D,S as dt,U as Ra,V as _i,W as bd,X as ht,Y as sn,Z as Hs,$ as ea,a0 as An,a1 as Ks,a2 as mt,a3 as yd,a4 as Us,a5 as za,a6 as Ws,a7 as na,a8 as _d,a9 as Gs,aa as Xs,ab as Od,ac as Cd,ad as wd,ae as Sd}from"./framework.BsGVjEHh.js";/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Ha(n,e){(e==null||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}function qs(n,e){if(n){if(typeof n=="string")return Ha(n,e);var t={}.toString.call(n).slice(8,-1);return t==="Object"&&n.constructor&&(t=n.constructor.name),t==="Map"||t==="Set"?Array.from(n):t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?Ha(n,e):void 0}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function $d(n){if(Array.isArray(n))return Ha(n)}function Pd(n){if(typeof Symbol<"u"&&n[Symbol.iterator]!=null||n["@@iterator"]!=null)return Array.from(n)}function kd(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function On(n){return $d(n)||Pd(n)||qs(n)||kd()}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function nn(n){"@babel/helpers - typeof";return nn=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},nn(n)}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function xd(n,e){if(nn(n)!="object"||!n)return n;var t=n[Symbol.toPrimitive];if(t!==void 0){var r=t.call(n,e||"default");if(nn(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(n)}function Id(n){var e=xd(n,"string");return nn(e)=="symbol"?e:e+""}function G(n,e,t){return(e=Id(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Pt=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function Ed(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function jd(n){var e=nn(n);return n!=null&&(e=="object"||e=="function")}var Ee=jd;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Ad=nn(Pt)=="object"&&Pt&&Pt.Object===Object&&Pt,Ys=Ad,Td=Ys,Md=(typeof self>"u"?"undefined":nn(self))=="object"&&self&&self.Object===Object&&self,Nd=Td||Md||Function("return this")(),jn=Nd,Dd=jn,Bd=Dd.Symbol,Lt=Bd,ll=Lt,Zs=Object.prototype,Fd=Zs.hasOwnProperty,Ld=Zs.toString,qt=ll?ll.toStringTag:void 0;function Vd(n){var e=Fd.call(n,qt),t=n[qt];try{n[qt]=void 0;var r=!0}catch{}var a=Ld.call(n);return r&&(e?n[qt]=t:delete n[qt]),a}var Rd=Vd,zd=Object.prototype,Hd=zd.toString;function Kd(n){return Hd.call(n)}var Ud=Kd,ol=Lt,Wd=Rd,Gd=Ud,Xd="[object Null]",qd="[object Undefined]",ul=ol?ol.toStringTag:void 0;function Yd(n){return n==null?n===void 0?qd:Xd:ul&&ul in Object(n)?Wd(n):Gd(n)}var Gn=Yd;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Zd=Gn,Jd=Ee,Qd="[object AsyncFunction]",ev="[object Function]",nv="[object GeneratorFunction]",tv="[object Proxy]";function rv(n){if(!Jd(n))return!1;var e=Zd(n);return e==ev||e==nv||e==Qd||e==tv}var qe=rv;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var av=jn,iv=av["__core-js_shared__"],lv=iv,xa=lv,sl=function(){var n=/[^.]+$/.exec(xa&&xa.keys&&xa.keys.IE_PROTO||"");return n?"Symbol(src)_1."+n:""}();function ov(n){return!!sl&&sl in n}var uv=ov,sv=Function.prototype,cv=sv.toString;function fv(n){if(n!=null){try{return cv.call(n)}catch{}try{return n+""}catch{}}return""}var Js=fv,dv=qe,vv=uv,pv=Ee,gv=Js,hv=/[\\^$.*+?()[\]{}|]/g,mv=/^\[object .+?Constructor\]$/,bv=Function.prototype,yv=Object.prototype,_v=bv.toString,Ov=yv.hasOwnProperty,Cv=RegExp("^"+_v.call(Ov).replace(hv,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function wv(n){if(!pv(n)||vv(n))return!1;var e=dv(n)?Cv:mv;return e.test(gv(n))}var Sv=wv;function $v(n,e){return n==null?void 0:n[e]}var Pv=$v,kv=Sv,xv=Pv;function Iv(n,e){var t=xv(n,e);return kv(t)?t:void 0}var bt=Iv,Ev=bt,jv=jn,Av=Ev(jv,"Map"),Oi=Av;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Tv=bt,Mv=function(){try{var n=Tv(Object,"defineProperty");return n({},"",{}),n}catch{}}(),Qs=Mv;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Nv(n,e){return n===e||n!==n&&e!==e}var hr=Nv;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var cl=Qs;function Dv(n,e,t){e=="__proto__"&&cl?cl(n,e,{configurable:!0,enumerable:!0,value:t,writable:!0}):n[e]=t}var ta=Dv,Bv=ta,Fv=hr,Lv=Object.prototype,Vv=Lv.hasOwnProperty;function Rv(n,e,t){var r=n[e];(!(Vv.call(n,e)&&Fv(r,t))||t===void 0&&!(e in n))&&Bv(n,e,t)}var Ci=Rv;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function zv(){this.__data__=[],this.size=0}var Hv=zv,Kv=hr;function Uv(n,e){for(var t=n.length;t--;)if(Kv(n[t][0],e))return t;return-1}var ra=Uv,Wv=ra,Gv=Array.prototype,Xv=Gv.splice;function qv(n){var e=this.__data__,t=Wv(e,n);if(t<0)return!1;var r=e.length-1;return t==r?e.pop():Xv.call(e,t,1),--this.size,!0}var Yv=qv,Zv=ra;function Jv(n){var e=this.__data__,t=Zv(e,n);return t<0?void 0:e[t][1]}var Qv=Jv,ep=ra;function np(n){return ep(this.__data__,n)>-1}var tp=np,rp=ra;function ap(n,e){var t=this.__data__,r=rp(t,n);return r<0?(++this.size,t.push([n,e])):t[r][1]=e,this}var ip=ap,lp=Hv,op=Yv,up=Qv,sp=tp,cp=ip;function Vt(n){var e=-1,t=n==null?0:n.length;for(this.clear();++e<t;){var r=n[e];this.set(r[0],r[1])}}Vt.prototype.clear=lp;Vt.prototype.delete=op;Vt.prototype.get=up;Vt.prototype.has=sp;Vt.prototype.set=cp;var aa=Vt,fp=bt,dp=fp(Object,"create"),ia=dp,fl=ia;function vp(){this.__data__=fl?fl(null):{},this.size=0}var pp=vp;function gp(n){var e=this.has(n)&&delete this.__data__[n];return this.size-=e?1:0,e}var hp=gp,mp=ia,bp="__lodash_hash_undefined__",yp=Object.prototype,_p=yp.hasOwnProperty;function Op(n){var e=this.__data__;if(mp){var t=e[n];return t===bp?void 0:t}return _p.call(e,n)?e[n]:void 0}var Cp=Op,wp=ia,Sp=Object.prototype,$p=Sp.hasOwnProperty;function Pp(n){var e=this.__data__;return wp?e[n]!==void 0:$p.call(e,n)}var kp=Pp,xp=ia,Ip="__lodash_hash_undefined__";function Ep(n,e){var t=this.__data__;return this.size+=this.has(n)?0:1,t[n]=xp&&e===void 0?Ip:e,this}var jp=Ep,Ap=pp,Tp=hp,Mp=Cp,Np=kp,Dp=jp;function Rt(n){var e=-1,t=n==null?0:n.length;for(this.clear();++e<t;){var r=n[e];this.set(r[0],r[1])}}Rt.prototype.clear=Ap;Rt.prototype.delete=Tp;Rt.prototype.get=Mp;Rt.prototype.has=Np;Rt.prototype.set=Dp;var Bp=Rt,dl=Bp,Fp=aa,Lp=Oi;function Vp(){this.size=0,this.__data__={hash:new dl,map:new(Lp||Fp),string:new dl}}var Rp=Vp;function zp(n){var e=nn(n);return e=="string"||e=="number"||e=="symbol"||e=="boolean"?n!=="__proto__":n===null}var Hp=zp,Kp=Hp;function Up(n,e){var t=n.__data__;return Kp(e)?t[typeof e=="string"?"string":"hash"]:t.map}var la=Up,Wp=la;function Gp(n){var e=Wp(this,n).delete(n);return this.size-=e?1:0,e}var Xp=Gp,qp=la;function Yp(n){return qp(this,n).get(n)}var Zp=Yp,Jp=la;function Qp(n){return Jp(this,n).has(n)}var eg=Qp,ng=la;function tg(n,e){var t=ng(this,n),r=t.size;return t.set(n,e),this.size+=t.size==r?0:1,this}var rg=tg,ag=Rp,ig=Xp,lg=Zp,og=eg,ug=rg;function zt(n){var e=-1,t=n==null?0:n.length;for(this.clear();++e<t;){var r=n[e];this.set(r[0],r[1])}}zt.prototype.clear=ag;zt.prototype.delete=ig;zt.prototype.get=lg;zt.prototype.has=og;zt.prototype.set=ug;var wi=zt;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var sg=9007199254740991;function cg(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=sg}var Si=cg,fg=qe,dg=Si;function vg(n){return n!=null&&dg(n.length)&&!fg(n)}var mr=vg;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function pg(n){return n!=null&&nn(n)=="object"}var Sn=pg;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function gg(n){return function(e){return n(e)}}var oa=gg;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var tt={exports:{}};function hg(){return!1}var mg=hg;(function(n,e){var t=jn,r=mg,a=e&&!e.nodeType&&e,i=a&&!0&&n&&!n.nodeType&&n,l=i&&i.exports===a,o=l?t.Buffer:void 0,u=o?o.isBuffer:void 0,c=u||r;n.exports=c})(tt,tt.exports);tt.exports;var bg=Gn,yg=Si,_g=Sn,Og="[object Arguments]",Cg="[object Array]",wg="[object Boolean]",Sg="[object Date]",$g="[object Error]",Pg="[object Function]",kg="[object Map]",xg="[object Number]",Ig="[object Object]",Eg="[object RegExp]",jg="[object Set]",Ag="[object String]",Tg="[object WeakMap]",Mg="[object ArrayBuffer]",Ng="[object DataView]",Dg="[object Float32Array]",Bg="[object Float64Array]",Fg="[object Int8Array]",Lg="[object Int16Array]",Vg="[object Int32Array]",Rg="[object Uint8Array]",zg="[object Uint8ClampedArray]",Hg="[object Uint16Array]",Kg="[object Uint32Array]",Ge={};Ge[Dg]=Ge[Bg]=Ge[Fg]=Ge[Lg]=Ge[Vg]=Ge[Rg]=Ge[zg]=Ge[Hg]=Ge[Kg]=!0;Ge[Og]=Ge[Cg]=Ge[Mg]=Ge[wg]=Ge[Ng]=Ge[Sg]=Ge[$g]=Ge[Pg]=Ge[kg]=Ge[xg]=Ge[Ig]=Ge[Eg]=Ge[jg]=Ge[Ag]=Ge[Tg]=!1;function Ug(n){return _g(n)&&yg(n.length)&&!!Ge[bg(n)]}var Wg=Ug,jt={exports:{}};(function(n,e){var t=Ys,r=e&&!e.nodeType&&e,a=r&&!0&&n&&!n.nodeType&&n,i=a&&a.exports===r,l=i&&t.process,o=function(){try{var u=a&&a.require&&a.require("util").types;return u||l&&l.binding&&l.binding("util")}catch{}}();n.exports=o})(jt,jt.exports);jt.exports;var Gg=Wg,Xg=oa,vl=jt.exports,pl=vl&&vl.isTypedArray,qg=pl?Xg(pl):Gg,ua=qg,Yg=Object.prototype;function Zg(n){var e=n&&n.constructor,t=typeof e=="function"&&e.prototype||Yg;return n===t}var sa=Zg;function Jg(n,e){return function(t){return n(e(t))}}var ec=Jg;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Qg=Gn,eh=Sn,nh="[object Arguments]";function th(n){return eh(n)&&Qg(n)==nh}var rh=th,gl=rh,ah=Sn,nc=Object.prototype,ih=nc.hasOwnProperty,lh=nc.propertyIsEnumerable,oh=gl(function(){return arguments}())?gl:function(n){return ah(n)&&ih.call(n,"callee")&&!lh.call(n,"callee")},br=oh;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var uh=Array.isArray,Re=uh;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var sh=9007199254740991,ch=/^(?:0|[1-9]\d*)$/;function fh(n,e){var t=nn(n);return e=e??sh,!!e&&(t=="number"||t!="symbol"&&ch.test(n))&&n>-1&&n%1==0&&n<e}var ca=fh;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function dh(n,e){for(var t=-1,r=Array(n);++t<n;)r[t]=e(t);return r}var vh=dh,ph=vh,gh=br,hh=Re,mh=tt.exports,bh=ca,yh=ua,_h=Object.prototype,Oh=_h.hasOwnProperty;function Ch(n,e){var t=hh(n),r=!t&&gh(n),a=!t&&!r&&mh(n),i=!t&&!r&&!a&&yh(n),l=t||r||a||i,o=l?ph(n.length,String):[],u=o.length;for(var c in n)(e||Oh.call(n,c))&&!(l&&(c=="length"||a&&(c=="offset"||c=="parent")||i&&(c=="buffer"||c=="byteLength"||c=="byteOffset")||bh(c,u)))&&o.push(c);return o}var tc=Ch,wh=aa;function Sh(){this.__data__=new wh,this.size=0}var $h=Sh;function Ph(n){var e=this.__data__,t=e.delete(n);return this.size=e.size,t}var kh=Ph;function xh(n){return this.__data__.get(n)}var Ih=xh;function Eh(n){return this.__data__.has(n)}var jh=Eh,Ah=aa,Th=Oi,Mh=wi,Nh=200;function Dh(n,e){var t=this.__data__;if(t instanceof Ah){var r=t.__data__;if(!Th||r.length<Nh-1)return r.push([n,e]),this.size=++t.size,this;t=this.__data__=new Mh(r)}return t.set(n,e),this.size=t.size,this}var Bh=Dh,Fh=aa,Lh=$h,Vh=kh,Rh=Ih,zh=jh,Hh=Bh;function Ht(n){var e=this.__data__=new Fh(n);this.size=e.size}Ht.prototype.clear=Lh;Ht.prototype.delete=Vh;Ht.prototype.get=Rh;Ht.prototype.has=zh;Ht.prototype.set=Hh;var fa=Ht,Kh=jn,Uh=Kh.Uint8Array,rc=Uh,or={exports:{}};(function(n,e){var t=jn,r=e&&!e.nodeType&&e,a=r&&!0&&n&&!n.nodeType&&n,i=a&&a.exports===r,l=i?t.Buffer:void 0,o=l?l.allocUnsafe:void 0;function u(c,s){if(s)return c.slice();var d=c.length,f=o?o(d):new c.constructor(d);return c.copy(f),f}n.exports=u})(or,or.exports);or.exports;var hl=rc;function Wh(n){var e=new n.constructor(n.byteLength);return new hl(e).set(new hl(n)),e}var $i=Wh,Gh=$i;function Xh(n,e){var t=e?Gh(n.buffer):n.buffer;return new n.constructor(t,n.byteOffset,n.length)}var ac=Xh;function qh(n,e){var t=-1,r=n.length;for(e||(e=Array(r));++t<r;)e[t]=n[t];return e}var ic=qh,Yh=Ee,ml=Object.create,Zh=function(){function n(){}return function(e){if(!Yh(e))return{};if(ml)return ml(e);n.prototype=e;var t=new n;return n.prototype=void 0,t}}(),Jh=Zh,Qh=ec,em=Qh(Object.getPrototypeOf,Object),Pi=em,nm=Jh,tm=Pi,rm=sa;function am(n){return typeof n.constructor=="function"&&!rm(n)?nm(tm(n)):{}}var lc=am,im=Ci,lm=ta;function om(n,e,t,r){var a=!t;t||(t={});for(var i=-1,l=e.length;++i<l;){var o=e[i],u=r?r(t[o],n[o],o,t,n):void 0;u===void 0&&(u=n[o]),a?lm(t,o,u):im(t,o,u)}return t}var Kt=om;function um(n){var e=[];if(n!=null)for(var t in Object(n))e.push(t);return e}var sm=um,cm=Ee,fm=sa,dm=sm,vm=Object.prototype,pm=vm.hasOwnProperty;function gm(n){if(!cm(n))return dm(n);var e=fm(n),t=[];for(var r in n)r=="constructor"&&(e||!pm.call(n,r))||t.push(r);return t}var hm=gm,mm=tc,bm=hm,ym=mr;function _m(n){return ym(n)?mm(n,!0):bm(n)}var yr=_m;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Om(n){return n}var ki=Om;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Cm(n,e,t){switch(t.length){case 0:return n.call(e);case 1:return n.call(e,t[0]);case 2:return n.call(e,t[0],t[1]);case 3:return n.call(e,t[0],t[1],t[2])}return n.apply(e,t)}var wm=Cm,Sm=wm,bl=Math.max;function $m(n,e,t){return e=bl(e===void 0?n.length-1:e,0),function(){for(var r=arguments,a=-1,i=bl(r.length-e,0),l=Array(i);++a<i;)l[a]=r[e+a];a=-1;for(var o=Array(e+1);++a<e;)o[a]=r[a];return o[e]=t(l),Sm(n,this,o)}}var oc=$m;function Pm(n){return function(){return n}}var km=Pm,xm=km,yl=Qs,Im=ki,Em=yl?function(n,e){return yl(n,"toString",{configurable:!0,enumerable:!1,value:xm(e),writable:!0})}:Im,jm=Em,Am=800,Tm=16,Mm=Date.now;function Nm(n){var e=0,t=0;return function(){var r=Mm(),a=Tm-(r-t);if(t=r,a>0){if(++e>=Am)return arguments[0]}else e=0;return n.apply(void 0,arguments)}}var Dm=Nm,Bm=jm,Fm=Dm,Lm=Fm(Bm),uc=Lm;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Vm=mr,Rm=Sn;function zm(n){return Rm(n)&&Vm(n)}var sc=zm,Hm=ki,Km=oc,Um=uc;function Wm(n,e){return Um(Km(n,e,Hm),n+"")}var cc=Wm;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Gm=Gn,Xm=Pi,qm=Sn,Ym="[object Object]",Zm=Function.prototype,Jm=Object.prototype,fc=Zm.toString,Qm=Jm.hasOwnProperty,eb=fc.call(Object);function nb(n){if(!qm(n)||Gm(n)!=Ym)return!1;var e=Xm(n);if(e===null)return!0;var t=Qm.call(e,"constructor")&&e.constructor;return typeof t=="function"&&t instanceof t&&fc.call(t)==eb}var dc=nb;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var tb=hr,rb=mr,ab=ca,ib=Ee;function lb(n,e,t){if(!ib(t))return!1;var r=nn(e);return(r=="number"?rb(t)&&ab(e,t.length):r=="string"&&e in t)?tb(t[e],n):!1}var ob=lb;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var ub={classPrefix:"t",animation:{include:["ripple","expand","fade"],exclude:[]},calendar:{firstDayOfWeek:1,fillWithZero:!0,controllerConfig:void 0},icon:{},input:{autocomplete:""},dialog:{closeOnEscKeydown:!0,closeOnOverlayClick:!0,confirmBtnTheme:{default:"primary",info:"primary",warning:"primary",danger:"primary",success:"primary"}},message:{},popconfirm:{confirmBtnTheme:{default:"primary",warning:"primary",danger:"primary"}},table:{expandIcon:void 0,sortIcon:void 0,filterIcon:void 0,treeExpandAndFoldIcon:void 0,hideSortTips:!1,size:"medium"},select:{clearIcon:void 0,filterable:!1},drawer:{closeOnEscKeydown:!0,closeOnOverlayClick:!0,size:"small"},tree:{folderIcon:void 0},datePicker:{firstDayOfWeek:1},steps:{checkIcon:void 0,errorIcon:void 0},tag:{closeIcon:void 0},form:{requiredMark:void 0},empty:{titleText:{maintenance:void 0,success:void 0,fail:void 0,empty:void 0,networkError:void 0},image:{maintenance:void 0,success:void 0,fail:void 0,empty:void 0,networkError:void 0}}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Ka={pagination:{itemsPerPage:"{size} 条/页",jumpTo:"跳至",page:"页",total:"共 {total} 条数据"},cascader:{empty:"暂无数据",loadingText:"加载中",placeholder:"请选择"},calendar:{yearSelection:"{year} 年",monthSelection:"{month} 月",yearRadio:"年",monthRadio:"月",hideWeekend:"隐藏周末",showWeekend:"显示周末",today:"今天",thisMonth:"本月",week:"一,二,三,四,五,六,日",cellMonth:"1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月"},transfer:{title:"{checked} / {total} 项",empty:"暂无数据",placeholder:"请输入关键词搜索"},timePicker:{dayjsLocale:"zh-cn",now:"此刻",confirm:"确定",anteMeridiem:"上午",postMeridiem:"下午",placeholder:"选择时间"},dialog:{confirm:"确认",cancel:"取消"},drawer:{confirm:"确认",cancel:"取消"},popconfirm:{confirm:{content:"确定"},cancel:{content:"取消"}},table:{empty:"暂无数据",loadingText:"正在加载中，请稍后",loadingMoreText:"点击加载更多",filterInputPlaceholder:"请输入内容（无默认值）",sortAscendingOperationText:"点击升序",sortCancelOperationText:"点击取消排序",sortDescendingOperationText:"点击降序",clearFilterResultButtonText:"清空筛选",columnConfigButtonText:"列配置",columnConfigTitleText:"表格列配置",columnConfigDescriptionText:"请选择需要在表格中显示的数据列",confirmText:"确认",cancelText:"取消",resetText:"重置",selectAllText:"全选",searchResultText:"搜索“{result}”，找到 {count} 条结果"},select:{empty:"暂无数据",loadingText:"加载中",placeholder:"请选择"},tree:{empty:"暂无数据"},treeSelect:{empty:"暂无数据",loadingText:"加载中",placeholder:"请选择"},datePicker:{dayjsLocale:"zh-cn",placeholder:{date:"请选择日期",month:"请选择月份",year:"请选择年份",quarter:"请选择季度",week:"请选择周"},weekdays:["一","二","三","四","五","六","日"],months:["1 月","2 月","3 月","4 月","5 月","6 月","7 月","8 月","9 月","10 月","11 月","12 月"],quarters:["一季度","二季度","三季度","四季度"],rangeSeparator:" - ",direction:"ltr",format:"YYYY-MM-DD",dayAriaLabel:"日",weekAbbreviation:"周",yearAriaLabel:"年",monthAriaLabel:"月",confirm:"确定",selectTime:"选择时间",selectDate:"选择日期",nextYear:"下一年",preYear:"上一年",nextMonth:"下个月",preMonth:"上个月",preDecade:"上个十年",nextDecade:"下个十年",now:"当前"},upload:{sizeLimitMessage:"文件大小不能超过 {sizeLimit}",cancelUploadText:"取消上传",triggerUploadText:{fileInput:"选择文件",image:"点击上传图片",normal:"点击上传",reupload:"重新选择",continueUpload:"继续选择",delete:"删除",uploading:"上传中"},dragger:{dragDropText:"释放鼠标",draggingText:"拖拽到此区域",clickAndDragText:"点击上方“选择文件”或将文件拖拽到此区域"},file:{fileNameText:"文件名",fileSizeText:"文件大小",fileStatusText:"状态",fileOperationText:"操作",fileOperationDateText:"上传日期"},progress:{uploadingText:"上传中",waitingText:"待上传",failText:"上传失败",successText:"上传成功"}},form:{errorMessage:{date:"请输入正确的${name}",url:"请输入正确的${name}",required:"${name}必填",whitespace:"${name}不能为空",max:"${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符",min:"${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符",len:"${name}字符长度必须是 ${validate}",enum:"${name}只能是${validate}等",idcard:"请输入正确的${name}",telnumber:"请输入正确的${name}",pattern:"请输入正确的${name}",validator:"${name}不符合要求",boolean:"${name}数据类型必须是布尔类型",number:"${name}必须是数字"},colonText:"："},input:{placeholder:"请输入"},list:{loadingText:"正在加载中，请稍等",loadingMoreText:"点击加载更多"},alert:{expandText:"展开更多",collapseText:"收起"},anchor:{copySuccessText:"链接复制成功",copyText:"复制链接"},colorPicker:{swatchColorTitle:"系统预设颜色",recentColorTitle:"最近使用颜色",clearConfirmText:"确定清空最近使用的颜色吗？",singleColor:"单色",gradientColor:"渐变"},guide:{finishButtonProps:{content:"完成",theme:"primary"},nextButtonProps:{content:"下一步",theme:"primary"},skipButtonProps:{content:"跳过",theme:"default"},prevButtonProps:{content:"上一步",theme:"default"}},image:{errorText:"图片无法显示",loadingText:"图片加载中"},imageViewer:{errorText:"图片加载失败，可尝试重新加载",mirrorTipText:"镜像",rotateTipText:"旋转",originalSizeTipText:"原始大小"},typography:{expandText:"展开",collapseText:"收起",copiedText:"复制成功"},rate:{rateText:["极差","失望","一般","满意","惊喜"]},empty:{titleText:{maintenance:"建设中",success:"成功",fail:"失败",empty:"暂无数据",networkError:"网络错误"}},descriptions:{colonText:"："}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function sb(n){return function(e,t,r){for(var a=-1,i=Object(e),l=r(e),o=l.length;o--;){var u=l[n?o:++a];if(t(i[u],u,i)===!1)break}return e}}var cb=sb,fb=cb,db=fb(),vc=db,vb=ta,pb=hr;function gb(n,e,t){(t!==void 0&&!pb(n[e],t)||t===void 0&&!(e in n))&&vb(n,e,t)}var pc=gb;function hb(n,e){if(!(e==="constructor"&&typeof n[e]=="function")&&e!="__proto__")return n[e]}var gc=hb,mb=Kt,bb=yr;function yb(n){return mb(n,bb(n))}var _b=yb,_l=pc,Ob=or.exports,Cb=ac,wb=ic,Sb=lc,Ol=br,Cl=Re,$b=sc,Pb=tt.exports,kb=qe,xb=Ee,Ib=dc,Eb=ua,wl=gc,jb=_b;function Ab(n,e,t,r,a,i,l){var o=wl(n,t),u=wl(e,t),c=l.get(u);if(c){_l(n,t,c);return}var s=i?i(o,u,t+"",n,e,l):void 0,d=s===void 0;if(d){var f=Cl(u),v=!f&&Pb(u),p=!f&&!v&&Eb(u);s=u,f||v||p?Cl(o)?s=o:$b(o)?s=wb(o):v?(d=!1,s=Ob(u,!0)):p?(d=!1,s=Cb(u,!0)):s=[]:Ib(u)||Ol(u)?(s=o,Ol(o)?s=jb(o):(!xb(o)||kb(o))&&(s=Sb(u))):d=!1}d&&(l.set(u,s),a(s,u,r,i,l),l.delete(u)),_l(n,t,s)}var Tb=Ab,Mb=fa,Nb=pc,Db=vc,Bb=Tb,Fb=Ee,Lb=yr,Vb=gc;function hc(n,e,t,r,a){n!==e&&Db(e,function(i,l){if(a||(a=new Mb),Fb(i))Bb(n,e,l,t,hc,r,a);else{var o=r?r(Vb(n,l),i,l+"",n,e,a):void 0;o===void 0&&(o=i),Nb(n,l,o)}},Lb)}var mc=hc,Rb=cc,zb=ob;function Hb(n){return Rb(function(e,t){var r=-1,a=t.length,i=a>1?t[a-1]:void 0,l=a>2?t[2]:void 0;for(i=n.length>3&&typeof i=="function"?(a--,i):void 0,l&&zb(t[0],t[1],l)&&(i=a<3?void 0:i,a=1),e=Object(e);++r<a;){var o=t[r];o&&n(e,o,r,i)}return e})}var bc=Hb,Kb=mc,Ub=bc,Wb=Ub(function(n,e,t){Kb(n,e,t)}),yc=Wb,Gb=mc,Xb=bc,qb=Xb(function(n,e,t,r){Gb(n,e,t,r)}),Yb=qb,da=function(n){return n.ripple="ripple",n.expand="expand",n.fade="fade",n}(da||{}),_c=yc(ub,Ka),Oc=Symbol("configProvide"),Zb=function(e,t){return Yb(e,t,function(r,a){if(Re(r))return a})};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Jb=bt,Qb=jn,ey=Jb(Qb,"Set"),ny=ey;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var ty=ec,ry=ty(Object.keys,Object),ay=ry,iy=sa,ly=ay,oy=Object.prototype,uy=oy.hasOwnProperty;function sy(n){if(!iy(n))return ly(n);var e=[];for(var t in Object(n))uy.call(n,t)&&t!="constructor"&&e.push(t);return e}var Cc=sy,cy=bt,fy=jn,dy=cy(fy,"DataView"),vy=dy,py=bt,gy=jn,hy=py(gy,"Promise"),my=hy,by=bt,yy=jn,_y=by(yy,"WeakMap"),Oy=_y,Ua=vy,Wa=Oi,Ga=my,Xa=ny,qa=Oy,wc=Gn,Ut=Js,Sl="[object Map]",Cy="[object Object]",$l="[object Promise]",Pl="[object Set]",kl="[object WeakMap]",xl="[object DataView]",wy=Ut(Ua),Sy=Ut(Wa),$y=Ut(Ga),Py=Ut(Xa),ky=Ut(qa),st=wc;(Ua&&st(new Ua(new ArrayBuffer(1)))!=xl||Wa&&st(new Wa)!=Sl||Ga&&st(Ga.resolve())!=$l||Xa&&st(new Xa)!=Pl||qa&&st(new qa)!=kl)&&(st=function(e){var t=wc(e),r=t==Cy?e.constructor:void 0,a=r?Ut(r):"";if(a)switch(a){case wy:return xl;case Sy:return Sl;case $y:return $l;case Py:return Pl;case ky:return kl}return t});var _r=st;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function xy(n,e){for(var t=-1,r=e.length,a=n.length;++t<r;)n[a+t]=e[t];return n}var xi=xy;function Iy(n,e){for(var t=-1,r=n==null?0:n.length,a=0,i=[];++t<r;){var l=n[t];e(l,t,n)&&(i[a++]=l)}return i}var Ey=Iy;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var jy=tc,Ay=Cc,Ty=mr;function My(n){return Ty(n)?jy(n):Ay(n)}var Or=My,Ny=xi,Dy=Re;function By(n,e,t){var r=e(n);return Dy(n)?r:Ny(r,t(n))}var Sc=By;function Fy(){return[]}var $c=Fy,Ly=Ey,Vy=$c,Ry=Object.prototype,zy=Ry.propertyIsEnumerable,Il=Object.getOwnPropertySymbols,Hy=Il?function(n){return n==null?[]:(n=Object(n),Ly(Il(n),function(e){return zy.call(n,e)}))}:Vy,Ii=Hy,Ky=Sc,Uy=Ii,Wy=Or;function Gy(n){return Ky(n,Wy,Uy)}var Pc=Gy;function Xy(n,e){for(var t=-1,r=n==null?0:n.length;++t<r&&e(n[t],t,n)!==!1;);return n}var qy=Xy,Yy=Kt,Zy=Or;function Jy(n,e){return n&&Yy(e,Zy(e),n)}var Qy=Jy,e1=Kt,n1=yr;function t1(n,e){return n&&e1(e,n1(e),n)}var r1=t1,a1=Kt,i1=Ii;function l1(n,e){return a1(n,i1(n),e)}var o1=l1,u1=xi,s1=Pi,c1=Ii,f1=$c,d1=Object.getOwnPropertySymbols,v1=d1?function(n){for(var e=[];n;)u1(e,c1(n)),n=s1(n);return e}:f1,kc=v1,p1=Kt,g1=kc;function h1(n,e){return p1(n,g1(n),e)}var m1=h1,b1=Sc,y1=kc,_1=yr;function O1(n){return b1(n,_1,y1)}var xc=O1,C1=Object.prototype,w1=C1.hasOwnProperty;function S1(n){var e=n.length,t=new n.constructor(e);return e&&typeof n[0]=="string"&&w1.call(n,"index")&&(t.index=n.index,t.input=n.input),t}var $1=S1,P1=$i;function k1(n,e){var t=e?P1(n.buffer):n.buffer;return new n.constructor(t,n.byteOffset,n.byteLength)}var x1=k1,I1=/\w*$/;function E1(n){var e=new n.constructor(n.source,I1.exec(n));return e.lastIndex=n.lastIndex,e}var j1=E1,El=Lt,jl=El?El.prototype:void 0,Al=jl?jl.valueOf:void 0;function A1(n){return Al?Object(Al.call(n)):{}}var T1=A1,M1=$i,N1=x1,D1=j1,B1=T1,F1=ac,L1="[object Boolean]",V1="[object Date]",R1="[object Map]",z1="[object Number]",H1="[object RegExp]",K1="[object Set]",U1="[object String]",W1="[object Symbol]",G1="[object ArrayBuffer]",X1="[object DataView]",q1="[object Float32Array]",Y1="[object Float64Array]",Z1="[object Int8Array]",J1="[object Int16Array]",Q1="[object Int32Array]",e_="[object Uint8Array]",n_="[object Uint8ClampedArray]",t_="[object Uint16Array]",r_="[object Uint32Array]";function a_(n,e,t){var r=n.constructor;switch(e){case G1:return M1(n);case L1:case V1:return new r(+n);case X1:return N1(n,t);case q1:case Y1:case Z1:case J1:case Q1:case e_:case n_:case t_:case r_:return F1(n,t);case R1:return new r;case z1:case U1:return new r(n);case H1:return D1(n);case K1:return new r;case W1:return B1(n)}}var i_=a_,l_=_r,o_=Sn,u_="[object Map]";function s_(n){return o_(n)&&l_(n)==u_}var c_=s_,f_=c_,d_=oa,Tl=jt.exports,Ml=Tl&&Tl.isMap,v_=Ml?d_(Ml):f_,p_=v_,g_=_r,h_=Sn,m_="[object Set]";function b_(n){return h_(n)&&g_(n)==m_}var y_=b_,__=y_,O_=oa,Nl=jt.exports,Dl=Nl&&Nl.isSet,C_=Dl?O_(Dl):__,w_=C_,S_=fa,$_=qy,P_=Ci,k_=Qy,x_=r1,I_=or.exports,E_=ic,j_=o1,A_=m1,T_=Pc,M_=xc,N_=_r,D_=$1,B_=i_,F_=lc,L_=Re,V_=tt.exports,R_=p_,z_=Ee,H_=w_,K_=Or,U_=yr,W_=1,G_=2,X_=4,Ic="[object Arguments]",q_="[object Array]",Y_="[object Boolean]",Z_="[object Date]",J_="[object Error]",Ec="[object Function]",Q_="[object GeneratorFunction]",e0="[object Map]",n0="[object Number]",jc="[object Object]",t0="[object RegExp]",r0="[object Set]",a0="[object String]",i0="[object Symbol]",l0="[object WeakMap]",o0="[object ArrayBuffer]",u0="[object DataView]",s0="[object Float32Array]",c0="[object Float64Array]",f0="[object Int8Array]",d0="[object Int16Array]",v0="[object Int32Array]",p0="[object Uint8Array]",g0="[object Uint8ClampedArray]",h0="[object Uint16Array]",m0="[object Uint32Array]",We={};We[Ic]=We[q_]=We[o0]=We[u0]=We[Y_]=We[Z_]=We[s0]=We[c0]=We[f0]=We[d0]=We[v0]=We[e0]=We[n0]=We[jc]=We[t0]=We[r0]=We[a0]=We[i0]=We[p0]=We[g0]=We[h0]=We[m0]=!0;We[J_]=We[Ec]=We[l0]=!1;function Br(n,e,t,r,a,i){var l,o=e&W_,u=e&G_,c=e&X_;if(t&&(l=a?t(n,r,a,i):t(n)),l!==void 0)return l;if(!z_(n))return n;var s=L_(n);if(s){if(l=D_(n),!o)return E_(n,l)}else{var d=N_(n),f=d==Ec||d==Q_;if(V_(n))return I_(n,o);if(d==jc||d==Ic||f&&!a){if(l=u||f?{}:F_(n),!o)return u?A_(n,x_(l,n)):j_(n,k_(l,n))}else{if(!We[d])return a?n:{};l=B_(n,d,o)}}i||(i=new S_);var v=i.get(n);if(v)return v;i.set(n,l),H_(n)?n.forEach(function(b){l.add(Br(b,e,t,b,n,i))}):R_(n)&&n.forEach(function(b,y){l.set(y,Br(b,e,t,y,n,i))});var p=c?u?M_:T_:u?U_:K_,m=s?void 0:p(n);return $_(m||n,function(b,y){m&&(y=b,b=n[y]),P_(l,y,Br(b,e,t,y,n,i))}),l}var Ac=Br;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var b0="__lodash_hash_undefined__";function y0(n){return this.__data__.set(n,b0),this}var _0=y0;function O0(n){return this.__data__.has(n)}var C0=O0,w0=wi,S0=_0,$0=C0;function zr(n){var e=-1,t=n==null?0:n.length;for(this.__data__=new w0;++e<t;)this.add(n[e])}zr.prototype.add=zr.prototype.push=S0;zr.prototype.has=$0;var Tc=zr;function P0(n,e){return n.has(e)}var Mc=P0;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function k0(n){var e=-1,t=Array(n.size);return n.forEach(function(r){t[++e]=r}),t}var x0=k0;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function I0(n,e){for(var t=-1,r=n==null?0:n.length;++t<r;)if(e(n[t],t,n))return!0;return!1}var E0=I0,j0=Tc,A0=E0,T0=Mc,M0=1,N0=2;function D0(n,e,t,r,a,i){var l=t&M0,o=n.length,u=e.length;if(o!=u&&!(l&&u>o))return!1;var c=i.get(n),s=i.get(e);if(c&&s)return c==e&&s==n;var d=-1,f=!0,v=t&N0?new j0:void 0;for(i.set(n,e),i.set(e,n);++d<o;){var p=n[d],m=e[d];if(r)var b=l?r(m,p,d,e,n,i):r(p,m,d,n,e,i);if(b!==void 0){if(b)continue;f=!1;break}if(v){if(!A0(e,function(y,_){if(!T0(v,_)&&(p===y||a(p,y,t,r,i)))return v.push(_)})){f=!1;break}}else if(!(p===m||a(p,m,t,r,i))){f=!1;break}}return i.delete(n),i.delete(e),f}var Nc=D0;function B0(n){var e=-1,t=Array(n.size);return n.forEach(function(r,a){t[++e]=[a,r]}),t}var F0=B0,Bl=Lt,Fl=rc,L0=hr,V0=Nc,R0=F0,z0=x0,H0=1,K0=2,U0="[object Boolean]",W0="[object Date]",G0="[object Error]",X0="[object Map]",q0="[object Number]",Y0="[object RegExp]",Z0="[object Set]",J0="[object String]",Q0="[object Symbol]",eO="[object ArrayBuffer]",nO="[object DataView]",Ll=Bl?Bl.prototype:void 0,Ia=Ll?Ll.valueOf:void 0;function tO(n,e,t,r,a,i,l){switch(t){case nO:if(n.byteLength!=e.byteLength||n.byteOffset!=e.byteOffset)return!1;n=n.buffer,e=e.buffer;case eO:return!(n.byteLength!=e.byteLength||!i(new Fl(n),new Fl(e)));case U0:case W0:case q0:return L0(+n,+e);case G0:return n.name==e.name&&n.message==e.message;case Y0:case J0:return n==e+"";case X0:var o=R0;case Z0:var u=r&H0;if(o||(o=z0),n.size!=e.size&&!u)return!1;var c=l.get(n);if(c)return c==e;r|=K0,l.set(n,e);var s=V0(o(n),o(e),r,a,i,l);return l.delete(n),s;case Q0:if(Ia)return Ia.call(n)==Ia.call(e)}return!1}var rO=tO,Vl=Pc,aO=1,iO=Object.prototype,lO=iO.hasOwnProperty;function oO(n,e,t,r,a,i){var l=t&aO,o=Vl(n),u=o.length,c=Vl(e),s=c.length;if(u!=s&&!l)return!1;for(var d=u;d--;){var f=o[d];if(!(l?f in e:lO.call(e,f)))return!1}var v=i.get(n),p=i.get(e);if(v&&p)return v==e&&p==n;var m=!0;i.set(n,e),i.set(e,n);for(var b=l;++d<u;){f=o[d];var y=n[f],_=e[f];if(r)var O=l?r(_,y,f,e,n,i):r(y,_,f,n,e,i);if(!(O===void 0?y===_||a(y,_,t,r,i):O)){m=!1;break}b||(b=f=="constructor")}if(m&&!b){var w=n.constructor,I=e.constructor;w!=I&&"constructor"in n&&"constructor"in e&&!(typeof w=="function"&&w instanceof w&&typeof I=="function"&&I instanceof I)&&(m=!1)}return i.delete(n),i.delete(e),m}var uO=oO,Ea=fa,sO=Nc,cO=rO,fO=uO,Rl=_r,zl=Re,Hl=tt.exports,dO=ua,vO=1,Kl="[object Arguments]",Ul="[object Array]",Ir="[object Object]",pO=Object.prototype,Wl=pO.hasOwnProperty;function gO(n,e,t,r,a,i){var l=zl(n),o=zl(e),u=l?Ul:Rl(n),c=o?Ul:Rl(e);u=u==Kl?Ir:u,c=c==Kl?Ir:c;var s=u==Ir,d=c==Ir,f=u==c;if(f&&Hl(n)){if(!Hl(e))return!1;l=!0,s=!1}if(f&&!s)return i||(i=new Ea),l||dO(n)?sO(n,e,t,r,a,i):cO(n,e,u,t,r,a,i);if(!(t&vO)){var v=s&&Wl.call(n,"__wrapped__"),p=d&&Wl.call(e,"__wrapped__");if(v||p){var m=v?n.value():n,b=p?e.value():e;return i||(i=new Ea),a(m,b,t,r,i)}}return f?(i||(i=new Ea),fO(n,e,t,r,a,i)):!1}var hO=gO,mO=hO,Gl=Sn;function Dc(n,e,t,r,a){return n===e?!0:n==null||e==null||!Gl(n)&&!Gl(e)?n!==n&&e!==e:mO(n,e,t,r,Dc,a)}var Ei=Dc,bO=Ei;function yO(n,e){return bO(n,e)}var _O=yO;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var OO=Gn,CO=Sn,wO="[object Symbol]";function SO(n){return nn(n)=="symbol"||CO(n)&&OO(n)==wO}var va=SO;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function $O(n,e){for(var t=-1,r=n==null?0:n.length,a=Array(r);++t<r;)a[t]=e(n[t],t,n);return a}var pa=$O,Xl=Lt,PO=pa,kO=Re,xO=va,ql=Xl?Xl.prototype:void 0,Yl=ql?ql.toString:void 0;function Bc(n){if(typeof n=="string")return n;if(kO(n))return PO(n,Bc)+"";if(xO(n))return Yl?Yl.call(n):"";var e=n+"";return e=="0"&&1/n==-1/0?"-0":e}var IO=Bc,EO=IO;function jO(n){return n==null?"":EO(n)}var Cr=jO;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var AO=Re,TO=va,MO=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,NO=/^\w*$/;function DO(n,e){if(AO(n))return!1;var t=nn(n);return t=="number"||t=="symbol"||t=="boolean"||n==null||TO(n)?!0:NO.test(n)||!MO.test(n)||e!=null&&n in Object(e)}var ji=DO,Fc=wi,BO="Expected a function";function Ai(n,e){if(typeof n!="function"||e!=null&&typeof e!="function")throw new TypeError(BO);var t=function(){var a=arguments,i=e?e.apply(this,a):a[0],l=t.cache;if(l.has(i))return l.get(i);var o=n.apply(this,a);return t.cache=l.set(i,o)||l,o};return t.cache=new(Ai.Cache||Fc),t}Ai.Cache=Fc;var FO=Ai,LO=FO,VO=500;function RO(n){var e=LO(n,function(r){return t.size===VO&&t.clear(),r}),t=e.cache;return e}var zO=RO,HO=zO,KO=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,UO=/\\(\\)?/g,WO=HO(function(n){var e=[];return n.charCodeAt(0)===46&&e.push(""),n.replace(KO,function(t,r,a,i){e.push(a?i.replace(UO,"$1"):r||t)}),e}),GO=WO,XO=Re,qO=ji,YO=GO,ZO=Cr;function JO(n,e){return XO(n)?n:qO(n,e)?[n]:YO(ZO(n))}var Wt=JO,QO=va;function eC(n){if(typeof n=="string"||QO(n))return n;var e=n+"";return e=="0"&&1/n==-1/0?"-0":e}var Gt=eC,nC=Wt,tC=Gt;function rC(n,e){e=nC(e,n);for(var t=0,r=e.length;n!=null&&t<r;)n=n[tC(e[t++])];return t&&t==r?n:void 0}var ga=rC;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var aC=ga;function iC(n,e,t){var r=n==null?void 0:aC(n,e);return r===void 0?t:r}var It=iC;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function lC(n,e){return n!=null&&e in Object(n)}var oC=lC,uC=Wt,sC=br,cC=Re,fC=ca,dC=Si,vC=Gt;function pC(n,e,t){e=uC(e,n);for(var r=-1,a=e.length,i=!1;++r<a;){var l=vC(e[r]);if(!(i=n!=null&&t(n,l)))break;n=n[l]}return i||++r!=a?i:(a=n==null?0:n.length,!!a&&dC(a)&&fC(l,a)&&(cC(n)||sC(n)))}var gC=pC,hC=oC,mC=gC;function bC(n,e){return n!=null&&mC(n,e,hC)}var Lc=bC;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function yC(n){return function(e){return e==null?void 0:e[n]}}var _C=yC;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function OC(n){if(Array.isArray(n))return n}function CC(n,e){var t=n==null?null:typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(t!=null){var r,a,i,l,o=[],u=!0,c=!1;try{if(i=(t=t.call(n)).next,e===0){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=i.call(t)).done)&&(o.push(r.value),o.length!==e);u=!0);}catch(s){c=!0,a=s}finally{try{if(!u&&t.return!=null&&(l=t.return(),Object(l)!==l))return}finally{if(c)throw a}}return o}}function wC(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Se(n,e){return OC(n)||CC(n,e)||qs(n,e)||wC()}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Hr(n,e){var t=Object.keys(e);t.forEach(function(r){n.style[r]=e[r]})}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function SC(n,e){if(n==null)return{};var t={};for(var r in n)if({}.hasOwnProperty.call(n,r)){if(e.includes(r))continue;t[r]=n[r]}return t}function wr(n,e){if(n==null)return{};var t,r,a=SC(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)t=i[r],e.includes(t)||{}.propertyIsEnumerable.call(n,t)&&(a[t]=n[t])}return a}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var $C=Gn,PC=Re,kC=Sn,xC="[object String]";function IC(n){return typeof n=="string"||!PC(n)&&kC(n)&&$C(n)==xC}var Ye=IC;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function EC(n){return n===void 0}var ur=EC;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var jC=Gn,AC=Sn,TC="[object Number]";function MC(n){return typeof n=="number"||AC(n)&&jC(n)==TC}var Kn=MC;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Ti(){if(typeof navigator>"u"||!navigator)return Number.MAX_SAFE_INTEGER;var n=navigator,e=n.userAgent,t=e.indexOf("compatible")>-1&&e.indexOf("MSIE")>-1,r=e.indexOf("Trident")>-1&&e.indexOf("rv:11.0")>-1;if(t){var a=new RegExp("MSIE (\\d+\\.\\d+);"),i=e.match(a);if(!i)return-1;var l=parseFloat(i[1]);return l<7?6:l}return r?11:Number.MAX_SAFE_INTEGER}function NC(){var n,e,t;if(typeof navigator>"u"||!navigator)return!1;var r=navigator.userAgent,a=r.match(/AppleWebKit.+Chrome\/(.+) Safari\/.+/i);if(Number(a==null||(n=a[1])===null||n===void 0?void 0:n.split(".")[0])<100)return!0;var i=r.match(/AppleWebKit.+Version\/(.+) Safari\/.+/i);if(Number(i==null||(e=i[1])===null||e===void 0?void 0:e.split(".")[0])<12)return!0;var l=Ti();if(l<=11)return!0;var o=r.match(/Firefox\/(.+)/i);return Number(o==null||(t=o[1])===null||t===void 0?void 0:t.split(".")[0])<100}function Zl(n,e){var t=Kn(e);if(!n||n.length===0)return t?{length:0,characters:n}:0;for(var r=0,a=0;a<n.length;a++){var i=0;if(n.charCodeAt(a)>127?i=2:i=1,t&&r+i>e)return{length:r,characters:n.slice(0,a)};r+=i}return t?{length:r,characters:n}:r}function DC(n){return On(n??"").length}function BC(n,e,t){return On(t??"").slice().length===e?t||"":On(n??"").slice(0,e).join("")}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Jl(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Er(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Jl(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Jl(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function FC(n){var e,t,r,a={};if(!(!n||typeof window>"u")){var i=(e=window)===null||e===void 0||(t=e.getComputedStyle)===null||t===void 0?void 0:t.call(e,n),l=i.color,o=i.fontSize,u=(r=window)===null||r===void 0||(r=r.navigator)===null||r===void 0?void 0:r.userAgent,c=/Safari/.test(u)&&!/Chrome/.test(u),s=/(?=.*iPhone)[?=.*MicroMessenger]/.test(u)&&!/Chrome/.test(u);if((c||s)&&(a={transformOrigin:"0px 0px",transform:"scale(".concat(parseInt(o,10)/12,")")}),l&&Ti()>11){var d=l.match(/[\d.]+/g),f=d?"rgba(".concat(d[0],", ").concat(d[1],", ").concat(d[2],", 0)"):"";Hr(n,Er(Er({},a),{},{background:"conic-gradient(from 90deg at 50% 50%,".concat(f," 0deg, ").concat(l," 360deg)")}))}else Hr(n,Er(Er({},a),{},{background:""}))}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var LC=Ac,VC=1,RC=4;function zC(n){return LC(n,VC|RC)}var Mi=zC;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Ya=L();function cn(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:void 0,e=arguments.length>1?arguments[1]:void 0,t=un()?vn(Oc,null):Ya,r=g(function(){return(t==null?void 0:t.value)||_c}),a=g(function(){return Object.assign({},r.value[n],e)}),i=g(function(){return r.value.classPrefix}),l=function(u){for(var c=arguments.length,s=new Array(c>1?c-1:0),d=1;d<c;d++)s[d-1]=arguments[d];var f=s[0];if(Ye(u)){if(!f)return u;var v=/\{\s*([\w-]+)\s*\}/g,p=u.replace(v,function(m,b){return f?String(f[b]):""});return p}return qe(u)?s.length?u.apply(void 0,s):u(tn):""};return{t:l,global:a,globalConfig:a,classPrefix:i}}var HC=function(e){var t=Mi(_c),r=g(function(){return Object.assign({},Zb(t,e.globalConfig))});return et(Oc,r),Ya.value||(Ya.value=r.value),r};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function le(n){var e=cn("classPrefix"),t=e.classPrefix;return g(function(){return n?"".concat(t.value,"-").concat(n):t.value})}function Bn(){var n=cn("classPrefix"),e=n.classPrefix;return{SIZE:g(function(){return{small:"".concat(e.value,"-size-s"),medium:"".concat(e.value,"-size-m"),large:"".concat(e.value,"-size-l"),default:"",xs:"".concat(e.value,"-size-xs"),xl:"".concat(e.value,"-size-xl"),block:"".concat(e.value,"-size-full-width")}}),STATUS:g(function(){return{loading:"".concat(e.value,"-is-loading"),loadMore:"".concat(e.value,"-is-load-more"),disabled:"".concat(e.value,"-is-disabled"),focused:"".concat(e.value,"-is-focused"),success:"".concat(e.value,"-is-success"),error:"".concat(e.value,"-is-error"),warning:"".concat(e.value,"-is-warning"),selected:"".concat(e.value,"-is-selected"),active:"".concat(e.value,"-is-active"),checked:"".concat(e.value,"-is-checked"),current:"".concat(e.value,"-is-current"),hidden:"".concat(e.value,"-is-hidden"),visible:"".concat(e.value,"-is-visible"),expanded:"".concat(e.value,"-is-expanded"),indeterminate:"".concat(e.value,"-is-indeterminate")}})}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var KC=H({name:"TLoadingGradient",setup:function(){var e=le();return Me(function(){var t=un().refs.circle;an(function(){FC(t)})}),{classPrefix:e}},render:function(){var e=this.classPrefix,t="".concat(e,"-loading__gradient"),r=[t,"".concat(e,"-icon-loading")];return h("svg",{class:r,viewBox:"0 0 12 12",version:"1.1",width:"1em",height:"1em",xmlns:"http://www.w3.org/2000/svg"},[h("foreignObject",{x:"0",y:"0",width:"12",height:"12"},[h("div",{class:"".concat(t,"-conic"),ref:"circle"},null)])])}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Ni={exports:{}},Qt={exports:{}};(function(){var n,e,t,r,a,i;typeof performance<"u"&&performance!==null&&performance.now?Qt.exports=function(){return performance.now()}:typeof process<"u"&&process!==null&&process.hrtime?(Qt.exports=function(){return(n()-a)/1e6},e=process.hrtime,n=function(){var o;return o=e(),o[0]*1e9+o[1]},r=n(),i=process.uptime()*1e9,a=r-i):Date.now?(Qt.exports=function(){return Date.now()-t},t=Date.now()):(Qt.exports=function(){return new Date().getTime()-t},t=new Date().getTime())}).call(Pt);var UC=Qt.exports,zn=typeof window>"u"?Pt:window,jr=["moz","webkit"],Et="AnimationFrame",At=zn["request"+Et],sr=zn["cancel"+Et]||zn["cancelRequest"+Et];for(var Yt=0;!At&&Yt<jr.length;Yt++)At=zn[jr[Yt]+"Request"+Et],sr=zn[jr[Yt]+"Cancel"+Et]||zn[jr[Yt]+"CancelRequest"+Et];if(!At||!sr){var ja=0,Ql=0,lt=[],WC=1e3/60;At=function(e){if(lt.length===0){var t=UC(),r=Math.max(0,WC-(t-ja));ja=r+t,setTimeout(function(){var a=lt.slice(0);lt.length=0;for(var i=function(){if(!a[l].cancelled)try{a[l].callback(ja)}catch(u){setTimeout(function(){throw u},0)}},l=0;l<a.length;l++)i()},Math.round(r))}return lt.push({handle:++Ql,callback:e,cancelled:!1}),Ql},sr=function(e){for(var t=0;t<lt.length;t++)lt[t].handle===e&&(lt[t].cancelled=!0)}}Ni.exports=function(n){return At.call(zn,n)};Ni.exports.cancel=function(){sr.apply(zn,arguments)};Ni.exports.polyfill=function(n){n||(n=zn),n.requestAnimationFrame=At,n.cancelAnimationFrame=sr};var Di=typeof window>"u",GC=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},Bi=function(){return!Di&&document.addEventListener?function(n,e,t,r){n&&e&&t&&n.addEventListener(e,t,r)}:function(n,e,t){n&&e&&t&&n.attachEvent("on".concat(e),t)}}(),Kr=function(){return!Di&&document.removeEventListener?function(n,e,t,r){n&&e&&n.removeEventListener(e,t,r)}:function(n,e,t){n&&e&&n.detachEvent("on".concat(e),t)}}();function XC(n,e,t,r){var a=qe(t)?t:t.handleEvent,i=function(o){a(o),Kr(n,e,i,r)};Bi(n,e,i,r)}function Vc(n,e){if(!n||!e)return!1;if(e.indexOf(" ")!==-1)throw new Error("className should not contain space.");return n.classList?n.classList.contains(e):" ".concat(n.className," ").indexOf(" ".concat(e," "))>-1}function Za(n,e){if(n){for(var t=n.className,r=(e||"").split(" "),a=0,i=r.length;a<i;a++){var l=r[a];l&&(n.classList?n.classList.add(l):Vc(n,l)||(t+=" ".concat(l)))}n.classList||(n.className=t)}}function Ja(n,e){if(!(!n||!e)){for(var t=e.split(" "),r=" ".concat(n.className," "),a=0,i=t.length;a<i;a++){var l=t[a];l&&(n.classList?n.classList.remove(l):Vc(n,l)&&(r=r.replace(" ".concat(l," ")," ")))}n.classList||(n.className=GC(r))}}var ha=function(e,t){var r=qe(e)?e(t):e;return r?Ye(r)?document.querySelector(r):r instanceof HTMLElement?r:document.body:document.body},Rc=function(){};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var qC=Cc,YC=_r,ZC=br,JC=Re,QC=mr,ew=tt.exports,nw=sa,tw=ua,rw="[object Map]",aw="[object Set]",iw=Object.prototype,lw=iw.hasOwnProperty;function ow(n){if(n==null)return!0;if(QC(n)&&(JC(n)||typeof n=="string"||typeof n.splice=="function"||ew(n)||tw(n)||ZC(n)))return!n.length;var e=YC(n);if(e==rw||e==aw)return!n.size;if(nw(n))return!qC(n).length;for(var t in n)if(lw.call(n,t))return!1;return!0}var eo=ow;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function uw(n,e,t){var r=-1,a=n.length;e<0&&(e=-e>a?0:a+e),t=t>a?a:t,t<0&&(t+=a),a=e>t?0:t-e>>>0,e>>>=0;for(var i=Array(a);++r<a;)i[r]=n[r+e];return i}var zc=uw;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var sw=zc;function cw(n,e,t){var r=n.length;return t=t===void 0?r:t,!e&&t>=r?n:sw(n,e,t)}var fw=cw,dw="\\ud800-\\udfff",vw="\\u0300-\\u036f",pw="\\ufe20-\\ufe2f",gw="\\u20d0-\\u20ff",hw=vw+pw+gw,mw="\\ufe0e\\ufe0f",bw="\\u200d",yw=RegExp("["+bw+dw+hw+mw+"]");function _w(n){return yw.test(n)}var Hc=_w;function Ow(n){return n.split("")}var Cw=Ow,Kc="\\ud800-\\udfff",ww="\\u0300-\\u036f",Sw="\\ufe20-\\ufe2f",$w="\\u20d0-\\u20ff",Pw=ww+Sw+$w,kw="\\ufe0e\\ufe0f",xw="["+Kc+"]",Qa="["+Pw+"]",ei="\\ud83c[\\udffb-\\udfff]",Iw="(?:"+Qa+"|"+ei+")",Uc="[^"+Kc+"]",Wc="(?:\\ud83c[\\udde6-\\uddff]){2}",Gc="[\\ud800-\\udbff][\\udc00-\\udfff]",Ew="\\u200d",Xc=Iw+"?",qc="["+kw+"]?",jw="(?:"+Ew+"(?:"+[Uc,Wc,Gc].join("|")+")"+qc+Xc+")*",Aw=qc+Xc+jw,Tw="(?:"+[Uc+Qa+"?",Qa,Wc,Gc,xw].join("|")+")",Mw=RegExp(ei+"(?="+ei+")|"+Tw+Aw,"g");function Nw(n){return n.match(Mw)||[]}var Dw=Nw,Bw=Cw,Fw=Hc,Lw=Dw;function Vw(n){return Fw(n)?Lw(n):Bw(n)}var Rw=Vw;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function zw(n,e,t,r){var a=-1,i=n==null?0:n.length;for(r&&i&&(t=n[++a]);++a<i;)t=e(t,n[a],a,n);return t}var Hw=zw;function Kw(n){return function(e){return n==null?void 0:n[e]}}var Uw=Kw,Ww=Uw,Gw={À:"A",Á:"A",Â:"A",Ã:"A",Ä:"A",Å:"A",à:"a",á:"a",â:"a",ã:"a",ä:"a",å:"a",Ç:"C",ç:"c",Ð:"D",ð:"d",È:"E",É:"E",Ê:"E",Ë:"E",è:"e",é:"e",ê:"e",ë:"e",Ì:"I",Í:"I",Î:"I",Ï:"I",ì:"i",í:"i",î:"i",ï:"i",Ñ:"N",ñ:"n",Ò:"O",Ó:"O",Ô:"O",Õ:"O",Ö:"O",Ø:"O",ò:"o",ó:"o",ô:"o",õ:"o",ö:"o",ø:"o",Ù:"U",Ú:"U",Û:"U",Ü:"U",ù:"u",ú:"u",û:"u",ü:"u",Ý:"Y",ý:"y",ÿ:"y",Æ:"Ae",æ:"ae",Þ:"Th",þ:"th",ß:"ss",Ā:"A",Ă:"A",Ą:"A",ā:"a",ă:"a",ą:"a",Ć:"C",Ĉ:"C",Ċ:"C",Č:"C",ć:"c",ĉ:"c",ċ:"c",č:"c",Ď:"D",Đ:"D",ď:"d",đ:"d",Ē:"E",Ĕ:"E",Ė:"E",Ę:"E",Ě:"E",ē:"e",ĕ:"e",ė:"e",ę:"e",ě:"e",Ĝ:"G",Ğ:"G",Ġ:"G",Ģ:"G",ĝ:"g",ğ:"g",ġ:"g",ģ:"g",Ĥ:"H",Ħ:"H",ĥ:"h",ħ:"h",Ĩ:"I",Ī:"I",Ĭ:"I",Į:"I",İ:"I",ĩ:"i",ī:"i",ĭ:"i",į:"i",ı:"i",Ĵ:"J",ĵ:"j",Ķ:"K",ķ:"k",ĸ:"k",Ĺ:"L",Ļ:"L",Ľ:"L",Ŀ:"L",Ł:"L",ĺ:"l",ļ:"l",ľ:"l",ŀ:"l",ł:"l",Ń:"N",Ņ:"N",Ň:"N",Ŋ:"N",ń:"n",ņ:"n",ň:"n",ŋ:"n",Ō:"O",Ŏ:"O",Ő:"O",ō:"o",ŏ:"o",ő:"o",Ŕ:"R",Ŗ:"R",Ř:"R",ŕ:"r",ŗ:"r",ř:"r",Ś:"S",Ŝ:"S",Ş:"S",Š:"S",ś:"s",ŝ:"s",ş:"s",š:"s",Ţ:"T",Ť:"T",Ŧ:"T",ţ:"t",ť:"t",ŧ:"t",Ũ:"U",Ū:"U",Ŭ:"U",Ů:"U",Ű:"U",Ų:"U",ũ:"u",ū:"u",ŭ:"u",ů:"u",ű:"u",ų:"u",Ŵ:"W",ŵ:"w",Ŷ:"Y",ŷ:"y",Ÿ:"Y",Ź:"Z",Ż:"Z",Ž:"Z",ź:"z",ż:"z",ž:"z",IJ:"IJ",ij:"ij",Œ:"Oe",œ:"oe",ʼn:"'n",ſ:"s"},Xw=Ww(Gw),qw=Xw,Yw=qw,Zw=Cr,Jw=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,Qw="\\u0300-\\u036f",eS="\\ufe20-\\ufe2f",nS="\\u20d0-\\u20ff",tS=Qw+eS+nS,rS="["+tS+"]",aS=RegExp(rS,"g");function iS(n){return n=Zw(n),n&&n.replace(Jw,Yw).replace(aS,"")}var lS=iS,oS=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;function uS(n){return n.match(oS)||[]}var sS=uS,cS=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;function fS(n){return cS.test(n)}var dS=fS,Yc="\\ud800-\\udfff",vS="\\u0300-\\u036f",pS="\\ufe20-\\ufe2f",gS="\\u20d0-\\u20ff",hS=vS+pS+gS,Zc="\\u2700-\\u27bf",Jc="a-z\\xdf-\\xf6\\xf8-\\xff",mS="\\xac\\xb1\\xd7\\xf7",bS="\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf",yS="\\u2000-\\u206f",_S=" \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",Qc="A-Z\\xc0-\\xd6\\xd8-\\xde",OS="\\ufe0e\\ufe0f",ef=mS+bS+yS+_S,nf="['’]",no="["+ef+"]",CS="["+hS+"]",tf="\\d+",wS="["+Zc+"]",rf="["+Jc+"]",af="[^"+Yc+ef+tf+Zc+Jc+Qc+"]",SS="\\ud83c[\\udffb-\\udfff]",$S="(?:"+CS+"|"+SS+")",PS="[^"+Yc+"]",lf="(?:\\ud83c[\\udde6-\\uddff]){2}",of="[\\ud800-\\udbff][\\udc00-\\udfff]",St="["+Qc+"]",kS="\\u200d",to="(?:"+rf+"|"+af+")",xS="(?:"+St+"|"+af+")",ro="(?:"+nf+"(?:d|ll|m|re|s|t|ve))?",ao="(?:"+nf+"(?:D|LL|M|RE|S|T|VE))?",uf=$S+"?",sf="["+OS+"]?",IS="(?:"+kS+"(?:"+[PS,lf,of].join("|")+")"+sf+uf+")*",ES="\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",jS="\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])",AS=sf+uf+IS,TS="(?:"+[wS,lf,of].join("|")+")"+AS,MS=RegExp([St+"?"+rf+"+"+ro+"(?="+[no,St,"$"].join("|")+")",xS+"+"+ao+"(?="+[no,St+to,"$"].join("|")+")",St+"?"+to+"+"+ro,St+"+"+ao,jS,ES,tf,TS].join("|"),"g");function NS(n){return n.match(MS)||[]}var DS=NS,BS=sS,FS=dS,LS=Cr,VS=DS;function RS(n,e,t){return n=LS(n),e=t?void 0:e,e===void 0?FS(n)?VS(n):BS(n):n.match(e)||[]}var zS=RS,HS=Hw,KS=lS,US=zS,WS="['’]",GS=RegExp(WS,"g");function XS(n){return function(e){return HS(US(KS(e).replace(GS,"")),n,"")}}var cf=XS;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var qS=fw,YS=Hc,ZS=Rw,JS=Cr;function QS(n){return function(e){e=JS(e);var t=YS(e)?ZS(e):void 0,r=t?t[0]:e.charAt(0),a=t?qS(t,1).join(""):e.slice(1);return r[n]()+a}}var e$=QS,n$=e$,t$=n$("toUpperCase"),r$=t$,a$=Cr,i$=r$;function l$(n){return i$(a$(n).toLowerCase())}var o$=l$,u$=o$,s$=cf,c$=s$(function(n,e,t){return e=e.toLowerCase(),n+(t?u$(e):e)}),ma=c$;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var f$=cf,d$=f$(function(n,e,t){return n+(t?"-":"")+e.toLowerCase()}),Xt=d$;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Sr(n){var e;return Ee(n)&&"defaultNode"in n?e=n.defaultNode:(rt(n)||Ye(n))&&(e=n),e}function v$(n){var e=[],t=function(a){if(Re(a))return a.forEach(function(i){if(i.children&&Re(i.children)){if(i.type!==xe)return;t(i.children)}else e.push(i)}),e};return t(n)}function ba(n){return Ee(n)&&"params"in n?n.params:{}}function p$(n){return Ee(n)&&"slotFirst"in n?n.slotFirst:{}}function io(n,e,t){var r,a,i,l,o=(r=(a=n.$slots)[ma(t)])===null||r===void 0?void 0:r.call(a,e);return o||(o=(i=(l=n.$slots)[Xt(t)])===null||i===void 0?void 0:i.call(l,e),o)?o:null}var Zn=function(e,t,r){var a=ba(r),i=Sr(r),l;if(t in e&&(l=e[t]),!(l===!1||l===null)){if(l===!0&&i)return io(e,a,t)||i;if(qe(l))return l(tn,a);var o=[void 0,a,""].includes(l);return o&&(e.$slots[ma(t)]||e.$slots[Xt(t)])?io(e,a,t):l}},g$=function(e,t,r,a){var i=ba(a),l=Sr(a),o=i?{params:i}:void 0,u=Zn(e,t,o),c=Zn(e,r,o),s=eo(u)?c:u;return eo(s)?l:s};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var h$={attach:{type:[String,Function],default:""},content:{type:[String,Function]},default:{type:[String,Function]},delay:{type:Number,default:0},fullscreen:Boolean,indicator:{type:[Boolean,Function],default:!0},inheritColor:Boolean,loading:{type:Boolean,default:!0},preventScrollThrough:{type:Boolean,default:!0},showOverlay:{type:Boolean,default:!0},size:{type:String,default:"medium"},text:{type:[String,Function]},zIndex:{type:Number}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Fi=function(e,t){var r=qe(e)?g(e):L(e),a=qe(t)?g(t):L(t),i=L(),l=function(){i.value=Rc()||ha(r.value,a.value)};return Me(function(){return l()}),fe([r,a],function(){return l()}),i};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var m$=function(){return{name:le("loading"),centerClass:le("loading--center"),fullscreenClass:le("loading__fullscreen"),lockClass:le("loading--lock"),overlayClass:le("loading__overlay"),relativeClass:le("loading__parent"),fullClass:le("loading--full"),inheritColorClass:le("loading--inherit-color")}},ni=H({name:"TLoading",inheritAttrs:!1,props:h$,setup:function(e,t){var r=t.slots,a=L(!1),i=m$(),l=i.name,o=i.centerClass,u=i.fullscreenClass,c=i.lockClass,s=i.overlayClass,d=i.relativeClass,f=i.fullClass,v=i.inheritColorClass,p=le(),m=Bn(),b=m.SIZE,y=function(){a.value=!1;var z=setTimeout(function(){a.value=!0,clearTimeout(z)},e.delay)},_=Fi(function(){return e.attach}),O=g(function(){return!!(!e.delay||e.delay&&a.value)}),w=g(function(){var N={};return e.zIndex!==void 0&&(N.zIndex=e.zIndex),["small","medium","large"].includes(e.size)||(N["font-size"]=e.size),N}),I=g(function(){return!!(e.default||r.default||e.content||r.content)}),k=g(function(){return e.preventScrollThrough&&e.fullscreen}),j=g(function(){return!!(e.text||r.text)}),S=g(function(){return I.value&&e.loading&&O.value}),$=g(function(){return e.fullscreen&&e.loading&&O.value}),P=g(function(){return e.attach&&e.loading&&O.value}),C=g(function(){return e.attach&&e.loading&&O.value}),U=g(function(){var N=[o.value,b.value[e.size],G({},v.value,e.inheritColor)],z=[l.value,u.value,o.value,s.value];return{baseClasses:N,attachClasses:N.concat([l.value,f.value,G({},s.value,e.showOverlay)]),withContentClasses:N.concat([l.value,f.value,G({},s.value,e.showOverlay)]),fullScreenClasses:z,normalClasses:N.concat([l.value])}}),Z=Xe(e),J=Z.loading;return fe([J],function(N){var z=Se(N,1),V=z[0];V?(y(),k.value&&Za(document.body,c.value)):k.value&&Ja(document.body,c.value)}),Me(function(){e.delay&&y()}),{classPrefix:p,relativeClass:d,delayShowLoading:a,styles:w,showText:j,hasContent:I,classes:U,lockFullscreen:k,showWrapLoading:S,showNormalLoading:P,showFullScreenLoading:$,showAttachedLoading:C,teleportElement:_}},render:function(){var e=this,t=this.classes,r=t.fullScreenClasses,a=t.baseClasses,i=t.withContentClasses,l=t.attachClasses,o=t.normalClasses,u=h(KC,{size:this.size},null),c=this.loading&&Zn(this,"indicator",u),s=this.showText&&h("div",{class:"".concat(this.classPrefix,"-loading__text")},[Zn(this,"text")]);return this.fullscreen?!this.showFullScreenLoading||!this.loading?null:h(ir,{disabled:!this.attach||!this.teleportElement,to:this.teleportElement},{default:function(){return[h("div",je({class:r,style:e.styles},e.$attrs),[h("div",{class:a},[c,s])])]}}):this.hasContent?h("div",je({class:this.relativeClass},this.$attrs),[g$(this,"default","content"),this.showWrapLoading&&h("div",{class:i,style:this.styles},[c,s])]):this.attach?!this.showAttachedLoading||!this.loading?null:h(ir,{disabled:!this.attach||!this.teleportElement,to:this.teleportElement},{default:function(){return[h("div",je({class:l,style:e.styles},e.$attrs),[c,s])]}}):this.loading?h("div",je({class:o,style:this.styles},this.$attrs),[c,s]):null}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function lo(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function b$(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?lo(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):lo(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var kt=null;function y$(n){var e=yc({fullscreen:!1,attach:"body",loading:!0,preventScrollThrough:!0},n);return e}function oo(n){var e=y$(n);if(e.fullscreen&&kt)return kt;var t=H({setup:function(){var d=pr(e);return{loadingOptions:d}},render:function(){return tn(ni,b$({},this.loadingOptions))}}),r=ha(e.fullscreen?"body":e.attach),a=Vs(t),i=a.mount(document.createElement("div")),l=le("loading__parent--relative").value,o=le("loading--lock"),u=e.preventScrollThrough&&e.fullscreen;u&&Za(document.body,o.value),r?Za(r,l):console.error("attach is not exist");var c={hide:function(){i.loading=!1,Ja(r,l),Ja(document.body,o.value),a.unmount()}};return c}function ff(n){if(n===!0)return kt=oo({fullscreen:!0,loading:!0,attach:"body",preventScrollThrough:!0}),kt;if(n===!1){var e;(e=kt)===null||e===void 0||e.hide(),kt=null;return}return oo(n)}var df=ff;df.install=function(n){n.config.globalProperties.$loading=ff};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var _$=vc,O$=Or;function C$(n,e){return n&&_$(n,e,O$)}var w$=C$,S$=fa,$$=Ei,P$=1,k$=2;function x$(n,e,t,r){var a=t.length,i=a,l=!r;if(n==null)return!i;for(n=Object(n);a--;){var o=t[a];if(l&&o[2]?o[1]!==n[o[0]]:!(o[0]in n))return!1}for(;++a<i;){o=t[a];var u=o[0],c=n[u],s=o[1];if(l&&o[2]){if(c===void 0&&!(u in n))return!1}else{var d=new S$;if(r)var f=r(c,s,u,n,e,d);if(!(f===void 0?$$(s,c,P$|k$,r,d):f))return!1}}return!0}var I$=x$,E$=Ee;function j$(n){return n===n&&!E$(n)}var vf=j$,A$=vf,T$=Or;function M$(n){for(var e=T$(n),t=e.length;t--;){var r=e[t],a=n[r];e[t]=[r,a,A$(a)]}return e}var N$=M$;function D$(n,e){return function(t){return t==null?!1:t[n]===e&&(e!==void 0||n in Object(t))}}var pf=D$,B$=I$,F$=N$,L$=pf;function V$(n){var e=F$(n);return e.length==1&&e[0][2]?L$(e[0][0],e[0][1]):function(t){return t===n||B$(t,n,e)}}var R$=V$,z$=Ei,H$=It,K$=Lc,U$=ji,W$=vf,G$=pf,X$=Gt,q$=1,Y$=2;function Z$(n,e){return U$(n)&&W$(e)?G$(X$(n),e):function(t){var r=H$(t,n);return r===void 0&&r===e?K$(t,n):z$(e,r,q$|Y$)}}var J$=Z$,Q$=ga;function eP(n){return function(e){return Q$(e,n)}}var nP=eP,tP=_C,rP=nP,aP=ji,iP=Gt;function lP(n){return aP(n)?tP(iP(n)):rP(n)}var oP=lP,uP=R$,sP=J$,cP=ki,fP=Re,dP=oP;function vP(n){return typeof n=="function"?n:n==null?cP:nn(n)=="object"?fP(n)?sP(n[0],n[1]):uP(n):dP(n)}var pP=vP,gP=ta,hP=w$,mP=pP;function bP(n,e){var t={};return e=mP(e),hP(n,function(r,a,i){gP(t,e(r,a,i),r)}),t}var yP=bP,ti=Symbol("TdLoading"),uo=function(e,t){var r=t.modifiers,a=r.fullscreen,i=r.inheritColor,l={attach:function(){return e},fullscreen:a??!1,inheritColor:i??!1,loading:t.value};Ee(t.value)&&yP(t.value,function(o,u){l[u]=o}),e[ti]={options:l,instance:df(l)}},_P={mounted:function(e,t){t.value&&uo(e,t)},updated:function(e,t){var r=e[ti],a=t.value,i=t.oldValue;if(!_O(a,i)){var l,o=(l=a==null?void 0:a.loading)!==null&&l!==void 0?l:a;o?uo(e,t):r==null||r.instance.hide()}},unmounted:function(e){var t;(t=e[ti])===null||t===void 0||t.instance.hide()}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Ze(n,e,t){var r=n;return r.install=function(a,i){a.component(e||i||r.name,n),t&&a.directive(t.name,t.comp)},r}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var ya=Ze(ni,ni.name,{name:"loading",comp:_P});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var OP={block:Boolean,content:{type:[String,Function]},default:{type:[String,Function]},disabled:{type:Boolean,default:void 0},form:{type:String,default:void 0},ghost:Boolean,href:{type:String,default:""},icon:{type:Function},loading:Boolean,loadingProps:{type:Object},shape:{type:String,default:"rectangle",validator:function(e){return e?["rectangle","square","round","circle"].includes(e):!0}},size:{type:String,default:"medium",validator:function(e){return e?["extra-small","small","medium","large"].includes(e):!0}},suffix:{type:Function},tag:{type:String,validator:function(e){return e?["button","a","div"].includes(e):!0}},theme:{type:String,validator:function(e){return e?["default","primary","danger","warning","success"].includes(e):!0}},type:{type:String,default:"button",validator:function(e){return e?["submit","reset","button"].includes(e):!0}},variant:{type:String,default:"base",validator:function(e){return e?["base","outline","dashed","text"].includes(e):!0}},onClick:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var CP=da.expand,wP=da.ripple,SP=da.fade;function $P(){var n=cn("animation"),e=n.globalConfig,t=function(a){var i,l,o=e.value;return o&&!((i=o.exclude)!==null&&i!==void 0&&i.includes(a))&&((l=o.include)===null||l===void 0?void 0:l.includes(a))};return{keepExpand:t(CP),keepRipple:t(wP),keepFade:t(SP)}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function so(n,e){var t=Object.keys(e);t.forEach(function(r){n.style[r]=e[r]})}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Aa=200,PP="rgba(0, 0, 0, 0)",kP="rgba(0, 0, 0, 0.35)",xP=function(e,t){var r;if(e!=null&&(r=e.dataset)!==null&&r!==void 0&&r.ripple){var a=e.dataset.ripple;return a}var i=getComputedStyle(e).getPropertyValue("--ripple-color");return i||kP};function Li(n,e){var t=L(null),r=le(),a=$P(),i=a.keepRipple,l=function(u){var c=n.value,s=xP(c);if(!(u.button!==0||!n||!i)&&!(c.classList.contains("".concat(r.value,"-is-active"))||c.classList.contains("".concat(r.value,"-is-disabled"))||c.classList.contains("".concat(r.value,"-is-checked"))||c.classList.contains("".concat(r.value,"-is-loading")))){var d=getComputedStyle(c),f=parseInt(d.borderWidth,10),v=f>0?f:0,p=c.offsetWidth,m=c.offsetHeight;t.value.parentNode===null&&(so(t.value,{position:"absolute",left:"".concat(0-v,"px"),top:"".concat(0-v,"px"),width:"".concat(p,"px"),height:"".concat(m,"px"),borderRadius:d.borderRadius,pointerEvents:"none",overflow:"hidden"}),c.appendChild(t.value));var b=document.createElement("div");so(b,{marginTop:"0",marginLeft:"0",right:"".concat(p,"px"),width:"".concat(p+20,"px"),height:"100%",transition:"transform ".concat(Aa,"ms cubic-bezier(.38, 0, .24, 1), background ").concat(Aa*2,"ms linear"),transform:"skewX(-8deg)",pointerEvents:"none",position:"absolute",zIndex:0,backgroundColor:s,opacity:"0.9"});for(var y=new WeakMap,_=c.children.length,O=0;O<_;++O){var w=c.children[O];w.style.zIndex===""&&w!==t.value&&(w.style.zIndex="1",y.set(w,!0))}var I=c.style.position?c.style.position:getComputedStyle(c).position;(I===""||I==="static")&&(c.style.position="relative"),t.value.insertBefore(b,t.value.firstChild),setTimeout(function(){b.style.transform="translateX(".concat(p,"px)")},0);var k=function(){b.style.backgroundColor=PP,n.value&&(n.value.removeEventListener("pointerup",k,!1),n.value.removeEventListener("pointerleave",k,!1),setTimeout(function(){b.remove(),t.value.children.length===0&&t.value.remove()},Aa*2+100))};n.value.addEventListener("pointerup",k,!1),n.value.addEventListener("pointerleave",k,!1)}};Me(function(){var o=n==null?void 0:n.value;o&&(t.value=document.createElement("div"),o.addEventListener("pointerdown",l,!1))}),Dn(function(){var o;n==null||(o=n.value)===null||o===void 0||o.removeEventListener("pointerdown",l,!1)})}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function co(n,e,t){var r,a,i,l,o=(r=(a=n.slots)[ma(e)])===null||r===void 0?void 0:r.call(a,t);return o&&o.filter(function(u){return u.type.toString()!=="Symbol(v-cmt)"}).length||(o=(i=(l=n.slots)[Xt(e)])===null||i===void 0?void 0:i.call(l,t),o&&o.filter(function(u){return u.type.toString()!=="Symbol(v-cmt)"}).length)?o:null}function fo(n){if([void 0,null,""].includes(n))return!0;var e=n instanceof Array?n:[n],t=e.filter(function(r){var a;return(r==null||(a=r.type)===null||a===void 0?void 0:a.toString())!=="Symbol(Comment)"});return!t.length}var Ue=function(){var e=un();return function(t,r){var a=ba(r),i=Sr(r),l=p$(r),o;if(Object.keys(e.props).includes(t)&&(o=e.props[t]),!(o===!1||o===null)){if(o===!0)return co(e,t,a)||i;if(qe(o))return o(tn,a);var u=[void 0,a,""].includes(o);return(u||l)&&(e.slots[ma(t)]||e.slots[Xt(t)])?co(e,t,a):o}}},gf=function(){var e=Ue();return function(t,r){var a=Sr(r);return e(t,r)||a}},Xn=function(){var e=Ue();return function(t,r,a){var i=ba(a),l=Sr(a),o=i?{params:i}:void 0,u=e(t,o),c=e(r,o),s=fo(u)?c:u;return fo(s)?l:s}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var IP=Gn,EP=Sn,jP="[object Boolean]";function AP(n){return n===!0||n===!1||EP(n)&&IP(n)==jP}var Jn=AP;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function $n(n){var e=un(),t=g(function(){return e.props.disabled}),r=vn("formDisabled",Object.create(null));return g(function(){var a,i,l;return Jn(n==null||(a=n.beforeDisabled)===null||a===void 0?void 0:a.value)?n.beforeDisabled.value:Jn(t.value)?t.value:Jn(n==null||(i=n.afterDisabled)===null||i===void 0?void 0:i.value)?n.afterDisabled.value:Jn((l=r.disabled)===null||l===void 0?void 0:l.value)?r.disabled.value:!1})}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function vo(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Ar(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?vo(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):vo(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var TP=H({name:"TButton",props:OP,setup:function(e,t){var r=t.attrs,a=t.slots,i=Ue(),l=Xn(),o=le("button"),u=Bn(),c=u.STATUS,s=u.SIZE,d=L();Li(d);var f=$n(),v=g(function(){var m=e.theme,b=e.variant;return m||(b==="base"?"primary":"default")}),p=g(function(){return["".concat(o.value),"".concat(o.value,"--variant-").concat(e.variant),"".concat(o.value,"--theme-").concat(v.value),G(G(G(G(G(G({},s.value[e.size],e.size!=="medium"),c.value.disabled,f.value),c.value.loading,e.loading),"".concat(o.value,"--shape-").concat(e.shape),e.shape!=="rectangle"),"".concat(o.value,"--ghost"),e.ghost),s.value.block,e.block)]});return function(){var m=l("default","content"),b=e.loading?h(ya,Ar({inheritColor:!0},e.loadingProps),null):i("icon"),y=b&&!m,_=e.suffix||a.suffix?h("span",{className:"".concat(o.value,"__suffix")},[i("suffix")]):null;m=m?h("span",{class:"".concat(o.value,"__text")},[m]):"",b&&(m=[b,m]),_&&(m=[m].concat(_));var O=function(){return!e.tag&&e.href?"a":e.tag||"button"},w={class:[].concat(On(p.value),[G({},"".concat(o.value,"--icon-only"),y)]),type:e.type,disabled:f.value||e.loading,href:e.href,tabindex:f.value?void 0:"0"};return tn(O(),Ar(Ar(Ar({ref:d},r),w),{},{onClick:e.onClick}),[m])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Hn=Ze(TP);function Le(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function po(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function go(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?po(Object(t),!0).forEach(function(r){Le(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):po(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function MP(n){var e=["fillOpacity","fillRule","clipRule"];return e.includes(n)?n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase():n}function Ve(n,e){var t=Object.keys(n.attrs).reduce((r,a)=>(r[MP(a)]=n.attrs[a],r),{});return tn(n.tag,go(go({},t),e),(n.children||[]).map(r=>Ve(r,{})))}var NP="t",DP="zh-CN",BP={classPrefix:NP,locale:DP};function FP(){var{classPrefix:n}=BP;return{SIZE:{default:"",xs:"".concat(n,"-size-xs"),small:"".concat(n,"-size-s"),medium:"".concat(n,"-size-m"),large:"".concat(n,"-size-l"),xl:"".concat(n,"-size-xl"),block:"".concat(n,"-size-full-width")},STATUS:{loading:"".concat(n,"-is-loading"),disabled:"".concat(n,"-is-disabled"),focused:"".concat(n,"-is-focused"),success:"".concat(n,"-is-success"),error:"".concat(n,"-is-error"),warning:"".concat(n,"-is-warning"),selected:"".concat(n,"-is-selected"),active:"".concat(n,"-is-active"),checked:"".concat(n,"-is-checked"),current:"".concat(n,"-is-current"),hidden:"".concat(n,"-is-hidden"),visible:"".concat(n,"-is-visible"),expanded:"".concat(n,"-is-expanded"),indeterminate:"".concat(n,"-is-indeterminate")}}}function ze(n){var e=FP().SIZE,t=g(()=>n.value in e?e[n.value]:""),r=g(()=>n.value===void 0||n.value in e?{}:{fontSize:n.value});return{style:r,className:t}}function ho(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function mo(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?ho(Object(t),!0).forEach(function(r){Le(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):ho(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var LP={tag:"svg",attrs:{fill:"none",viewBox:"0 0 24 24",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"}}]},VP=H({name:"AddIcon",props:{size:{type:String},onClick:{type:Function}},setup(n,e){var{attrs:t}=e,r=g(()=>n.size),{className:a,style:i}=ze(r),l=g(()=>["t-icon","t-icon-add",a.value]),o=g(()=>mo(mo({},i.value),t.style)),u=g(()=>({class:l.value,style:o.value,onClick:c=>{var s;return(s=n.onClick)===null||s===void 0?void 0:s.call(n,{e:c})}}));return()=>Ve(LP,u.value)}});function bo(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function yo(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?bo(Object(t),!0).forEach(function(r){Le(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):bo(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var RP={tag:"svg",attrs:{fill:"none",viewBox:"0 0 26 24",width:"1em",height:"1em"},children:[{tag:"path",attrs:{fill:"currentColor",d:"M4 1.59l6.17 6.17 7.07 7.07L23.41 21 22 22.41l-2.97-2.96A12.5 12.5 0 011.08 12.3L1 12l.1-.3c.77-2.4 2.24-4.5 4.18-6.02L2.59 3 4 1.59zM6.7 7.1A10.53 10.53 0 003.1 12a10.5 10.5 0 0014.45 5.97l-1.8-1.8a5 5 0 01-6.93-6.93L6.7 7.11zm3.6 3.6a3 3 0 004 4l-4-4zM13 5c-.58 0-1.14.05-1.7.14l-.98.16L10 3.32l.99-.16A12.5 12.5 0 0124.9 11.7l.1.31-.1.3c-.41 1.3-1.03 2.5-1.82 3.58l-.59.8-1.61-1.18.59-.8c.6-.82 1.08-1.73 1.42-2.7A10.5 10.5 0 0013 5zm.51 1.93l.96.29a5 5 0 013.31 3.31l.3.96-1.92.58-.3-.95a3 3 0 00-1.98-1.99l-.95-.3.58-1.9z"}}]},zP=H({name:"BrowseOffIcon",props:{size:{type:String},onClick:{type:Function}},setup(n,e){var{attrs:t}=e,r=g(()=>n.size),{className:a,style:i}=ze(r),l=g(()=>["t-icon","t-icon-browse-off",a.value]),o=g(()=>yo(yo({},i.value),t.style)),u=g(()=>({class:l.value,style:o.value,onClick:c=>{var s;return(s=n.onClick)===null||s===void 0?void 0:s.call(n,{e:c})}}));return()=>Ve(RP,u.value)}});function _o(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Oo(n){for(var e=1;e<arguments.length;e++){var t=arguments[Line truncated
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Ek={align:{type:String,validator:function(e){return e?["start","end","center","baseline"].includes(e):!0}},breakLine:Boolean,direction:{type:String,default:"horizontal",validator:function(e){return e?["vertical","horizontal"].includes(e):!0}},separator:{type:[String,Function]},size:{type:[String,Number,Array],default:"medium"}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Sf(){var n=un();return function(e,t){var r,a;t||(t=n.slots);var i=((r=t)===null||r===void 0||(a=r.default)===null||a===void 0?void 0:a.call(r))||[];return v$(i).filter(function(l){var o;return(o=l.type.name)===null||o===void 0?void 0:o.endsWith(e)})}}function jk(){var n=un();return function(){var e,t=n.slots,r=(t==null||(e=t.default)===null||e===void 0?void 0:e.call(t))||[];return r.filter(function(a){return nn(a.type)==="symbol"&&!a.children?!1:a.type!==mi}).map(function(a){return a.children&&Re(a.children)&&a.type===xe?a.children:a}).flat()}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function bu(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function yu(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?bu(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):bu(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var _u={small:"8px",medium:"16px",large:"24px"},Ak=NC(),Tk=H({name:"TSpace",props:yu(yu({},Ek),{},{forceFlexGapPolyfill:Boolean}),setup:function(e){var t=le("space"),r=Ue(),a=jk(),i=g(function(){return e.forceFlexGapPolyfill||Ak}),l=g(function(){var u="";Re(e.size)?u=e.size.map(function(p){return Kn(p)?"".concat(p,"px"):Ye(p)&&_u[p]||p}).join(" "):Ye(e.size)?u=_u[e.size]||e.size:Kn(e.size)&&(u="".concat(e.size,"px"));var c={};if(i.value){var s=u.split(" "),d=Se(s,2),f=d[0],v=d[1];c["--td-space-column-gap"]=f,c["--td-space-row-gap"]=v||f}else c.gap=u;return c});function o(){var u=a(),c=r("separator");return u.filter(function(s){return rt(s)?s.type!==mi:!0}).map(function(s,d){var f=d+1!==u.length&&c;return h(xe,null,[h("div",{class:"".concat(t.value,"-item")},[s]),f&&h("div",{class:"".concat(t.value,"-item-separator")},[c])])})}return function(){var u=["".concat(t.value),G(G(G(G({},"".concat(t.value,"-align-").concat(e.align),e.align),"".concat(t.value,"-").concat(e.direction),e.direction),"".concat(t.value,"--break-line"),e.breakLine),"".concat(t.value,"--polyfill"),i.value)];return h("div",{class:u,style:l.value},[o()])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Ou=Ze(Tk);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Cu(n,e,t,r,a,i,l){try{var o=n[i](l),u=o.value}catch(c){return void t(c)}o.done?e(u):Promise.resolve(u).then(r,a)}function ri(n){return function(){var e=this,t=arguments;return new Promise(function(r,a){var i=n.apply(e,t);function l(u){Cu(i,r,a,l,o,"next",u)}function o(u){Cu(i,r,a,l,o,"throw",u)}l(void 0)})}}var zi={exports:{}},$f={exports:{}};(function(n){function e(t){"@babel/helpers - typeof";return n.exports=e=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(r){return typeof r}:function(r){return r&&typeof Symbol=="function"&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},n.exports.__esModule=!0,n.exports.default=n.exports,e(t)}n.exports=e,n.exports.__esModule=!0,n.exports.default=n.exports})($f);(function(n){var e=$f.exports.default;function t(){/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */n.exports=t=function(){return a},n.exports.__esModule=!0,n.exports.default=n.exports;var r,a={},i=Object.prototype,l=i.hasOwnProperty,o=Object.defineProperty||function(M,A,F){M[A]=F.value},u=typeof Symbol=="function"?Symbol:{},c=u.iterator||"@@iterator",s=u.asyncIterator||"@@asyncIterator",d=u.toStringTag||"@@toStringTag";function f(M,A,F){return Object.defineProperty(M,A,{value:F,enumerable:!0,configurable:!0,writable:!0}),M[A]}try{f({},"")}catch{f=function(F,W,K){return F[W]=K}}function v(M,A,F,W){var K=A&&A.prototype instanceof w?A:w,B=Object.create(K.prototype),T=new V(W||[]);return o(B,"_invoke",{value:Z(M,F,T)}),B}function p(M,A,F){try{return{type:"normal",arg:M.call(A,F)}}catch(W){return{type:"throw",arg:W}}}a.wrap=v;var m="suspendedStart",b="suspendedYield",y="executing",_="completed",O={};function w(){}function I(){}function k(){}var j={};f(j,c,function(){return this});var S=Object.getPrototypeOf,$=S&&S(S(ne([])));$&&$!==i&&l.call($,c)&&(j=$);var P=k.prototype=w.prototype=Object.create(j);function C(M){["next","throw","return"].forEach(function(A){f(M,A,function(F){return this._invoke(A,F)})})}function U(M,A){function F(K,B,T,R){var x=p(M[K],M,B);if(x.type!=="throw"){var Y=x.arg,re=Y.value;return re&&e(re)=="object"&&l.call(re,"__await")?A.resolve(re.__await).then(function(ve){F("next",ve,T,R)},function(ve){F("throw",ve,T,R)}):A.resolve(re).then(function(ve){Y.value=ve,T(Y)},function(ve){return F("throw",ve,T,R)})}R(x.arg)}var W;o(this,"_invoke",{value:function(B,T){function R(){return new A(function(x,Y){F(B,T,x,Y)})}return W=W?W.then(R,R):R()}})}function Z(M,A,F){var W=m;return function(K,B){if(W===y)throw Error("Generator is already running");if(W===_){if(K==="throw")throw B;return{value:r,done:!0}}for(F.method=K,F.arg=B;;){var T=F.delegate;if(T){var R=J(T,F);if(R){if(R===O)continue;return R}}if(F.method==="next")F.sent=F._sent=F.arg;else if(F.method==="throw"){if(W===m)throw W=_,F.arg;F.dispatchException(F.arg)}else F.method==="return"&&F.abrupt("return",F.arg);W=y;var x=p(M,A,F);if(x.type==="normal"){if(W=F.done?_:b,x.arg===O)continue;return{value:x.arg,done:F.done}}x.type==="throw"&&(W=_,F.method="throw",F.arg=x.arg)}}}function J(M,A){var F=A.method,W=M.iterator[F];if(W===r)return A.delegate=null,F==="throw"&&M.iterator.return&&(A.method="return",A.arg=r,J(M,A),A.method==="throw")||F!=="return"&&(A.method="throw",A.arg=new TypeError("The iterator does not provide a '"+F+"' method")),O;var K=p(W,M.iterator,A.arg);if(K.type==="throw")return A.method="throw",A.arg=K.arg,A.delegate=null,O;var B=K.arg;return B?B.done?(A[M.resultName]=B.value,A.next=M.nextLoc,A.method!=="return"&&(A.method="next",A.arg=r),A.delegate=null,O):B:(A.method="throw",A.arg=new TypeError("iterator result is not an object"),A.delegate=null,O)}function N(M){var A={tryLoc:M[0]};1 in M&&(A.catchLoc=M[1]),2 in M&&(A.finallyLoc=M[2],A.afterLoc=M[3]),this.tryEntries.push(A)}function z(M){var A=M.completion||{};A.type="normal",delete A.arg,M.completion=A}function V(M){this.tryEntries=[{tryLoc:"root"}],M.forEach(N,this),this.reset(!0)}function ne(M){if(M||M===""){var A=M[c];if(A)return A.call(M);if(typeof M.next=="function")return M;if(!isNaN(M.length)){var F=-1,W=function K(){for(;++F<M.length;)if(l.call(M,F))return K.value=M[F],K.done=!1,K;return K.value=r,K.done=!0,K};return W.next=W}}throw new TypeError(e(M)+" is not iterable")}return I.prototype=k,o(P,"constructor",{value:k,configurable:!0}),o(k,"constructor",{value:I,configurable:!0}),I.displayName=f(k,d,"GeneratorFunction"),a.isGeneratorFunction=function(M){var A=typeof M=="function"&&M.constructor;return!!A&&(A===I||(A.displayName||A.name)==="GeneratorFunction")},a.mark=function(M){return Object.setPrototypeOf?Object.setPrototypeOf(M,k):(M.__proto__=k,f(M,d,"GeneratorFunction")),M.prototype=Object.create(P),M},a.awrap=function(M){return{__await:M}},C(U.prototype),f(U.prototype,s,function(){return this}),a.AsyncIterator=U,a.async=function(M,A,F,W,K){K===void 0&&(K=Promise);var B=new U(v(M,A,F,W),K);return a.isGeneratorFunction(A)?B:B.nLine truncated
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Mk=["info","success","warning","error","question","loading"],bn="32px",Pf={top:{top:bn,left:"50%",transform:"translateX(-50%)"},center:{left:"50%",top:"50%",transform:"translateX(-50%) translateY(-50%)"},left:{left:bn,top:"50%",transform:"translateY(-50%)"},bottom:{bottom:bn,left:"50%",transform:"translateX(-50%)"},right:{right:bn,top:"50%",transform:"translateY(-50%)",display:"flex",flexDirection:"column",alignItems:"flex-end"},"top-left":{left:bn,top:bn},"top-right":{right:bn,top:bn,display:"flex",flexDirection:"column",alignItems:"flex-end"},"bottom-right":{right:bn,bottom:bn,display:"flex",flexDirection:"column",alignItems:"flex-end"},"bottom-left":{left:bn,bottom:bn}},kf=Object.keys(Pf);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Nk={closeBtn:{type:[String,Boolean,Function],default:void 0},content:{type:[String,Function]},duration:{type:Number,default:3e3},icon:{type:[Boolean,Function],default:!0},theme:{type:String,default:"info",validator:function(e){return e?["info","success","warning","error","question","loading"].includes(e):!0}},onClose:Function,onCloseBtnClick:Function,onDurationEnd:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function at(n){var e=cn("icon"),t=e.globalConfig,r={};return Object.keys(n).forEach(function(a){var i;r[a]=((i=t.value)===null||i===void 0?void 0:i[a])||n[a]}),r}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var xf={duration:200,easing:"linear"};function Dk(n,e){if(n){var t=(n==null?void 0:n.offsetWidth)||0,r=(n==null?void 0:n.offsetHeight)||0,a=Fk(e,t,r);if(a){var i=a[a.length-1];If(n,i),n.animate&&n.animate(a,xf)}}}function Bk(n,e,t){if(n){var r=(n==null?void 0:n.offsetHeight)||0,a=Lk(e,r);if(!a)return t();var i=a[a.length-1];If(n,i);var l=n.animate&&n.animate(a,xf);l?l.onfinish=function(){n.style.display="none",t()}:(n.style.display="none",t())}}function If(n,e){for(var t=Object.keys(e),r=0;r<t.length;r+=1){var a=t[r];n.style[a]=e[a]}}function Fk(n,e,t){if(!kf.includes(n))return null;if(["top-left","left","bottom-left"].includes(n))return[{opacity:0,marginLeft:"-".concat(e,"px")},{opacity:1,marginLeft:"0"}];if(["top-right","right","bottom-right"].includes(n))return[{opacity:0,marginRight:"-".concat(e,"px")},{opacity:1,marginRight:"0"}];if(["top","center"].includes(n))return[{opacity:0,marginTop:"-".concat(t,"px")},{opacity:1,marginTop:"0"}];if(["bottom"].includes(n))return[{opacity:0,transform:"translate3d(0, ".concat(t,"px, 0)")},{opacity:1,transform:"translate3d(0, 0, 0)"}]}function Lk(n,e){if(!kf.includes(n))return null;if(["bottom-left","bottom","bottom-right"].includes(n)){var t="".concat(e,"px");return[{opacity:1,marginTop:"0px"},{opacity:0,marginTop:t}]}var r="-".concat(e,"px");return[{opacity:1,marginTop:"0px"},{opacity:0,marginTop:r}]}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function wu(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Su(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?wu(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):wu(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var Vk=H({name:"TMessage",props:Su(Su({},Nk),{},{placement:String}),setup:function(e,t){var r=t.slots,a=t.expose,i=le("message"),l=at({InfoCircleFilledIcon:wf,CheckCircleFilledIcon:hf,ErrorCircleFilledIcon:_f,HelpCircleFilledIcon:uk,CloseIcon:_a}),o=l.InfoCircleFilledIcon,u=l.CheckCircleFilledIcon,c=l.ErrorCircleFilledIcon,s=l.HelpCircleFilledIcon,d=l.CloseIcon,f=le(),v=Ue(),p=Xn(),m=L(null),b=L(null),y=g(function(){var j={};return Mk.forEach(function(S){return j["".concat(f.value,"-is-").concat(S)]=e.theme===S}),[i.value,j,G({},"".concat(f.value,"-is-closable"),e.closeBtn||r.closeBtn)]}),_=function(S){var $,P;($=e.onClose)===null||$===void 0||$.call(e,{trigger:"close-click",e:S}),(P=e.onCloseBtnClick)===null||P===void 0||P.call(e,{e:S})},O=function(){e.duration&&clearTimeout(b.value)},w=function(){e.duration&&(b.value=Number(setTimeout(function(){O();var S=m.value;Bk(S,e.placement,function(){var $,P;($=e.onClose)===null||$===void 0||$.call(e,{trigger:"duration-end"}),(P=e.onDurationEnd)===null||P===void 0||P.call(e)})},e.duration)))},I=function(){var S=h(d,null,null);return h("span",{class:"".concat(i.value,"__close"),onClick:_},[v("closeBtn",S)])},k=function(){if(e.icon!==!1){if(qe(e.icon))return e.icon(tn);if(r.icon)return r.icon(null);var S={info:o,success:u,warning:c,error:c,question:s,loading:ya}[e.theme];return h(S,null,null)}};return pd(function(){e.duration&&w()}),Me(function(){var j=m.value;Dk(j,e.placement)}),a({close:_}),function(){return h("div",{ref:m,class:y.value,onMouseenter:O,onMouseleave:w},[k(),p("content","default"),I()])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function $u(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function _t(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?$u(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):$u(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var ai=6e3,Rk=function(){var n=0;return function(){return n+=1,n}}(),zk=H({name:"TMessageList",props:{zIndex:{type:Number,default:0},placement:{type:String,default:""}},setup:function(e,t){var r=t.expose,a=le("message__list"),i=L([]),l=L([]),o=g(function(){return _t(_t({},Pf[e.placement]),{},{zIndex:e.zIndex!==ai?e.zIndex:ai})}),u=function(b){var y=_t(_t({},b),{},{key:Rk()});return i.value.push(y),y.key},c=function(b){i.value.splice(b,1)},s=function(){i.value=[]},d=function(b){if(b)return isNaN(Number(b))?b:"".concat(b,"px")},f=function(b){return b.offset&&{position:"relative",left:d(b.offset[0]),top:d(b.offset[1])}},v=function(b,y){return _t(_t({},y),{},{onCloseBtnClick:function(O){return y.onCloseBtnClick&&y.onCloseBtnClick(O),c(b)},onDurationEnd:function(){return y.onDurationEnd&&y.onDurationEnd(),c(b)}})},p=function(b){b&&l.value.push(b)};return r({add:u,removeAll:s,list:i,messageList:l}),function(){if(i.value.length)return h("div",{class:a.value,style:o.value},[i.value.map(function(m,b){return h(Vk,je({key:m.key,style:f(m),ref:p},v(b,m)),null)})])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Pu(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function ii(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Pu(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Pu(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var ct=new Map;function Hk(n){var e=ii({duration:3e3,attach:"body",zIndex:ai,placement:"top"},n);return e.content=n.content,e}var Kk=function(e){var t=Hk(e),r=t.attach,a=t.placement,i=ha(r);ct.get(i)||ct.set(i,{});var l=ct.get(i)[a],o;if(l)o=l.add(t);else{var u=document.createElement("div"),c=Vs(zk,{zIndex:t.zIndex,placement:t.placement}).mount(u);o=c.add(t),ct.get(i)[a]=c,i.appendChild(u)}return new Promise(function(s){var d=ct.get(i)[a];an(function(){var f=d.messageList;s(f==null?void 0:f.find(function(v){var p;return((p=v.$)===null||p===void 0||(p=p.vnode)===null||p===void 0?void 0:p.key)===o}))})})},Yn=function(e,t,r){var a={theme:e};return Ye(t)?a.content=t:Ee(t)&&!(t instanceof Array)&&(a=ii(ii({},a),t)),(r||r===0)&&(a.duration=r),Kk(a)},Ur={info:function(e,t){return Yn("info",e,t)},success:function(e,t){return Yn("success",e,t)},warning:function(e,t){return Yn("warning",e,t)},error:function(e,t){return Yn("error",e,t)},question:function(e,t){return Yn("question",e,t)},loading:function(e,t){return Yn("loading",e,t)},close:function(e){e.then(function(t){return t==null?void 0:t.close()})},closeAll:function(){ct instanceof Map&&ct.forEach(function(e){Object.keys(e).forEach(function(t){var r=e[t];r.list=[]})})}},Ef=Yn;Ef.install=function(n){n.config.globalProperties.$message=Yn,Object.keys(Ur).forEach(function(e){n.config.globalProperties.$message[e]=Ur[e]})};Object.keys(Ur).forEach(function(n){Ef[n]=Ur[n]});var fn="top",Cn="bottom",wn="right",dn="left",Hi="auto",$r=[fn,Cn,wn,dn],Tt="start",cr="end",Uk="clippingParents",jf="viewport",Zt="popper",Wk="reference",ku=$r.reduce(function(n,e){return n.concat([e+"-"+Tt,e+"-"+cr])},[]),Af=[].concat($r,[Hi]).reduce(function(n,e){return n.concat([e,e+"-"+Tt,e+"-"+cr])},[]),Gk="beforeRead",Xk="read",qk="afterRead",Yk="beforeMain",Zk="main",Jk="afterMain",Qk="beforeWrite",ex="write",nx="afterWrite",tx=[Gk,Xk,qk,Yk,Zk,Jk,Qk,ex,nx];function Nn(n){return n?(n.nodeName||"").toLowerCase():null}function mn(n){if(n==null)return window;if(n.toString()!=="[object Window]"){var e=n.ownerDocument;return e&&e.defaultView||window}return n}function vt(n){var e=mn(n).Element;return n instanceof e||n instanceof Element}function _n(n){var e=mn(n).HTMLElement;return n instanceof e||n instanceof HTMLElement}function Ki(n){if(typeof ShadowRoot>"u")return!1;var e=mn(n).ShadowRoot;return n instanceof e||n instanceof ShadowRoot}function rx(n){var e=n.state;Object.keys(e.elements).forEach(function(t){var r=e.styles[t]||{},a=e.attributes[t]||{},i=e.elements[t];!_n(i)||!Nn(i)||(Object.assign(i.style,r),Object.keys(a).forEach(function(l){var o=a[l];o===!1?i.removeAttribute(l):i.setAttribute(l,o===!0?"":o)}))})}function ax(n){var e=n.state,t={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,t.popper),e.styles=t,e.elements.arrow&&Object.assign(e.elements.arrow.style,t.arrow),function(){Object.keys(e.elements).forEach(function(r){var a=e.elements[r],i=e.attributes[r]||{},l=Object.keys(e.styles.hasOwnProperty(r)?e.styles[r]:t[r]),o=l.reduce(function(u,c){return u[c]="",u},{});!_n(a)||!Nn(a)||(Object.assign(a.style,o),Object.keys(i).forEach(function(u){a.removeAttribute(u)}))})}}const ix={name:"applyStyles",enabled:!0,phase:"write",fn:rx,effect:ax,requires:["computeStyles"]};function Tn(n){return n.split("-")[0]}var ft=Math.max,Wr=Math.min,Mt=Math.round;function li(){var n=navigator.userAgentData;return n!=null&&n.brands&&Array.isArray(n.brands)?n.brands.map(function(e){return e.brand+"/"+e.version}).join(" "):navigator.userAgent}function Tf(){return!/^((?!chrome|android).)*safari/i.test(li())}function Nt(n,e,t){e===void 0&&(e=!1),t===void 0&&(t=!1);var r=n.getBoundingClientRect(),a=1,i=1;e&&_n(n)&&(a=n.offsetWidth>0&&Mt(r.width)/n.offsetWidth||1,i=n.offsetHeight>0&&Mt(r.height)/n.offsetHeight||1);var l=vt(n)?mn(n):window,o=l.visualViewport,u=!Tf()&&t,c=(r.left+(u&&o?o.offsetLeft:0))/a,s=(r.top+(u&&o?o.offsetTop:0))/i,d=r.width/a,f=r.height/i;return{width:d,height:f,top:s,right:c+d,bottom:s+f,left:c,x:c,y:s}}function Ui(n){var e=Nt(n),t=n.offsetWidth,r=n.offsetHeight;return Math.abs(e.width-t)<=1&&(t=e.width),Math.abs(e.height-r)<=1&&(r=e.height),{x:n.offsetLeft,y:n.offsetTop,width:t,height:r}}function Mf(n,e){var t=e.getRootNode&&e.getRootNode();if(n.contains(e))return!0;if(t&&Ki(t)){var r=e;do{if(r&&n.isSameNode(r))return!0;r=r.pLine truncated
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Zx=/\s/;function Jx(n){for(var e=n.length;e--&&Zx.test(n.charAt(e)););return e}var Qx=Jx,eI=Qx,nI=/^\s+/;function tI(n){return n&&n.slice(0,eI(n)+1).replace(nI,"")}var rI=tI,aI=rI,Du=Ee,iI=va,Bu=NaN,lI=/^[-+]0x[0-9a-f]+$/i,oI=/^0b[01]+$/i,uI=/^0o[0-7]+$/i,sI=parseInt;function cI(n){if(typeof n=="number")return n;if(iI(n))return Bu;if(Du(n)){var e=typeof n.valueOf=="function"?n.valueOf():n;n=Du(e)?e+"":e}if(typeof n!="string")return n===0?n:+n;n=aI(n);var t=oI.test(n);return t||uI.test(n)?sI(n.slice(2),t?2:8):lI.test(n)?Bu:+n}var fI=cI;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var dI=jn,vI=function(){return dI.Date.now()},pI=vI,gI=Ee,Ta=pI,Fu=fI,hI="Expected a function",mI=Math.max,bI=Math.min;function yI(n,e,t){var r,a,i,l,o,u,c=0,s=!1,d=!1,f=!0;if(typeof n!="function")throw new TypeError(hI);e=Fu(e)||0,gI(t)&&(s=!!t.leading,d="maxWait"in t,i=d?mI(Fu(t.maxWait)||0,e):i,f="trailing"in t?!!t.trailing:f);function v(k){var j=r,S=a;return r=a=void 0,c=k,l=n.apply(S,j),l}function p(k){return c=k,o=setTimeout(y,e),s?v(k):l}function m(k){var j=k-u,S=k-c,$=e-j;return d?bI($,i-S):$}function b(k){var j=k-u,S=k-c;return u===void 0||j>=e||j<0||d&&S>=i}function y(){var k=Ta();if(b(k))return _(k);o=setTimeout(y,m(k))}function _(k){return o=void 0,f&&r?v(k):(r=a=void 0,l)}function O(){o!==void 0&&clearTimeout(o),c=0,r=u=a=o=void 0}function w(){return o===void 0?l:_(Ta())}function I(){var k=Ta(),j=b(k);if(r=arguments,a=this,u=k,j){if(o===void 0)return p(u);if(d)return clearTimeout(o),o=setTimeout(y,e),v(u)}return o===void 0&&(o=setTimeout(y,e)),l}return I.cancel=O,I.flush=w,I}var Yi=yI;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function _I(){var n=cn(),e=n.classPrefix,t={small:"".concat(e.value,"-size-s"),medium:"".concat(e.value,"-size-m"),large:"".concat(e.value,"-size-l"),default:"",xs:"".concat(e.value,"-size-xs"),xl:"".concat(e.value,"-size-xl"),block:"".concat(e.value,"-size-full-width")},r={loading:"".concat(e.value,"-is-loading"),loadMore:"".concat(e.value,"-is-load-more"),disabled:"".concat(e.value,"-is-disabled"),focused:"".concat(e.value,"-is-focused"),success:"".concat(e.value,"-is-success"),error:"".concat(e.value,"-is-error"),warning:"".concat(e.value,"-is-warning"),selected:"".concat(e.value,"-is-selected"),active:"".concat(e.value,"-is-active"),checked:"".concat(e.value,"-is-checked"),current:"".concat(e.value,"-is-current"),hidden:"".concat(e.value,"-is-hidden"),visible:"".concat(e.value,"-is-visible"),expanded:"".concat(e.value,"-is-expanded"),indeterminate:"".concat(e.value,"-is-indeterminate")};return{classPrefix:e,sizeClassNames:t,statusClassNames:r,classNames:{size:t,status:r}}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function pt(n,e,t,r){var a=un(),i=a.emit,l=a.vnode,o=L(),u=l.props||{},c=Object.prototype.hasOwnProperty.call(u,r)||Object.prototype.hasOwnProperty.call(u,Xt(r));return c?[n,function(s){i("update:".concat(r),s);for(var d=arguments.length,f=new Array(d>1?d-1:0),v=1;v<d;v++)f[v-1]=arguments[v];t==null||t.apply(void 0,[s].concat(f))}]:(o.value=e,[o,function(s){o.value=s;for(var d=arguments.length,f=new Array(d>1?d-1:0),v=1;v<d;v++)f[v-1]=arguments[v];t==null||t.apply(void 0,[s].concat(f))}])}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var OI="t-display-none-element-refresh";function CI(){var n=L(0);et(OI,n),bi(function(){n.value+=1})}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Lu(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Vu(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Lu(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Lu(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var wI=function(e){var t=e.data,r=e.container,a=e.fixedHeight,i=a===void 0?!1:a,l=e.lineHeight,o=l===void 0?30:l,u=e.bufferSize,c=u===void 0?20:u,s=e.threshold,d=s===void 0?100:s,f=pr({visibleData:[],cachedHeight:[],cachedScrollY:[]}),v=g(function(){return t.value.length>d}),p=L(0),m=new Map,b=0,y=0,_=0,O=0,w=0,I=0,k=function(){t.value.forEach(function(z,V){z.$index=V,i&&(f.cachedScrollY[V]=V*o)}),i||(f.cachedScrollY[t.value.length-1]=void 0)};k();var j=g(function(){var N=f.cachedHeight,z=N.length;if(z){var V=N.reduce(function(M,A){return M+A||o},0);if(N.length===t.value.length)return V;var ne=V/N.length;return V+(t.value.length-N.length)*ne}return v.value?t.value.length*o:0}),S=g(function(){var N=f.visibleData,z=N[0];return z?N.length===1?0:f.cachedScrollY[z.$index]:0}),$=function(){I=Math.min(w+b+c*2,t.value.length),f.visibleData=t.value.slice(w,I)},P=function(){var z,V=m.get(_);if(V){var ne=V==null||(z=V.getBoundingClientRect())===null||z===void 0?void 0:z.height;f.cachedScrollY[_]=r.value.scrollTop-O,f.cachedHeight[_]=ne;for(var M=_+1;M<=((A=f.visibleData[f.visibleData.length-1])===null||A===void 0?void 0:A.$index);M++){var A,F=m.get(M),W=(F==null?void 0:F.getBoundingClientRect())||{},K=W.height;f.cachedHeight[M]=K;var B=f.cachedScrollY[M-1]+f.cachedHeight[M-1];f.cachedScrollY.splice(M,1,B)}for(var T=_-1;T>=((R=f.visibleData[0])===null||R===void 0?void 0:R.$index);T--){var R,x=m.get(T),Y=(x==null?void 0:x.getBoundingClientRect())||{},re=Y.height;f.cachedHeight[T]=re;var ve=f.cachedScrollY[T+1]-f.cachedHeight[T];f.cachedScrollY.splice(T,1,ve)}if(f.cachedScrollY[0]>0){for(var we=f.cachedScrollY[0],$e=Math.min(I,t.value.length),pe=0;pe<$e;pe++)f.cachedScrollY.splice(pe,1,f.cachedScrollY[pe]-we);var he=f.cachedScrollY[_-1]?f.cachedScrollY[_-1]+O:O;r.value.scrollTop=he,y=he}if(f.cachedScrollY[w]<0){var _e=f.cachedHeight.slice(0,Math.max(0,_)).reduce(function(Ne,Ae){return Ne+Ae},0)+O;r.value.scrollTop=_e,y=_e,_e===0&&(_=0,O=0)}an(function(){var Ne=r.value,Ae=Ne.scrollTop,Ie=Ne.scrollHeight,ln=Ne.clientHeight;if(Ae+ln===Ie)for(var ie=I-1;ie>=w;ie--)ie===I-1?f.cachedScrollY.splice(ie,1,Ie.value-f.cachedHeight[ie]):f.cachedScrollY.splice(ie,1,f.cachedScrollY[ie+1]-f.cachedHeight[ie])})}},C=function(){if(v.value){var z=r.value.scrollTop,V=z-y;y=z,V+=O;var ne=_;if(V){if(V>=0){for(;ne<t.value.length&&V>(f.cachedHeight[ne]||o);)f.cachedHeight[ne]||(f.cachedHeight[ne]=o),V-=f.cachedHeight[ne],ne++;ne>=t.value.length?(_=t.value.length-1,O=0):(_=ne,O=V);var M=r.value,A=M.clientHeight,F=M.scrollHeight;z+A===F&&(_=t.value.length-b+1),w<=_-c&&(w=Math.min(t.value.length-b,_-c),w<0&&(w=0))}else{for(;V<0;)ne--,f.cachedHeight[ne]||(f.cachedHeight[ne]=o),V+=f.cachedHeight[ne];ne<0?(_=0,O=0):(_=ne,O=V),P(),w>_-c&&(w=Math.max(0,_-c))}$()}}};!i&&fe(p,P,{flush:"post"});var U=function(){v.value&&p.value++};fe(t,function(){k(),f.visibleData=[],f.cachedScrollY=[],f.cachedHeight=[],y=0,_=0,O=0,w=0,m.clear(),t.value.length<=d?f.visibleData=t.value:$(),r.value&&(r.value.scrollTop=0)});var Z=!1,J=function(){Z&&(b=Math.ceil(r.value.offsetHeight/o),$())};return Me(function(){if(!(!window||!window.IntersectionObserver)){var N=new window.IntersectionObserver(function(z){var V=z[0];(V.isIntersecting||V.intersectionRatio)&&(Z=!0,v.value&&J(),N.unobserve(r.value))});r.value&&N.observe(r.value)}}),Vu(Vu({trs:m,scrollHeight:j},Xe(f)),{},{translateY:S,handleScroll:C,handleRowMounted:U,refreshContainer:J,fixedHeight:i,calculateScrollY:P})};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Pn(n,e,t,r){var a=arguments.length>4&&arguments[4]!==void 0?arguments[4]:"value",i=un(),l=i.emit,o=i.vnode,u=L(),c=o.props||{},s=Object.prototype.hasOwnProperty.call(c,"modelValue")||Object.prototype.hasOwnProperty.call(c,"model-value"),d=Object.prototype.hasOwnProperty.call(c,a)||Object.prototype.hasOwnProperty.call(c,Xt(a));return s?[e,function(f){l("update:modelValue",f);for(var v=arguments.length,p=new Array(v>1?v-1:0),m=1;m<v;m++)p[m-1]=arguments[m];r==null||r.apply(void 0,[f].concat(p))}]:d?[n,function(f){l("update:".concat(a),f);for(var v=arguments.length,p=new Array(v>1?v-1:0),m=1;m<v;m++)p[m-1]=arguments[m];r==null||r.apply(void 0,[f].concat(p))}]:(u.value=t,[u,function(f){u.value=f;for(var v=arguments.length,p=new Array(v>1?v-1:0),m=1;m<v;m++)p[m-1]=arguments[m];r==null||r.apply(void 0,[f].concat(p))}])}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Mr=new Set,Ca={warn:function(e,t){console.warn("TDesign ".concat(e," Warn: ").concat(t))},warnOnce:function(e,t){var r="TDesign ".concat(e," Warn: ").concat(t);Mr.has(r)||(Mr.add(r),console.warn(r))},error:function(e,t){console.error("TDesign ".concat(e," Error: ").concat(t))},errorOnce:function(e,t){var r="TDesign ".concat(e," Error: ").concat(t);Mr.has(r)||(Mr.add(r),console.error(r))},info:function(e,t){console.info("TDesign ".concat(e," Info: ").concat(t))}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function SI(n){return new Promise(function(e){if(!n){e("");return}var t=new FileReader;t.readAsDataURL(n),t.onload=function(r){var a;e((a=r.target)===null||a===void 0?void 0:a.result)}})}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Gr(n){var e=L("");return fe([n],function(t,r){var a=Se(t,1),i=a[0],l=Se(r,1),o=l[0];if(o!==i){if(typeof i=="string"){e.value=i;return}SI(i).then(function(u){e.value=u})}},{immediate:!0}),{previewUrl:e}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Zi={attach:{type:[String,Function],default:"body"},content:{type:[String,Function]},default:{type:[String,Function]},delay:{type:[Number,Array]},destroyOnClose:Boolean,disabled:Boolean,hideEmptyPopup:Boolean,overlayClassName:{type:[String,Object,Array]},overlayInnerClassName:{type:[String,Object,Array]},overlayInnerStyle:{type:[Boolean,Object,Function]},overlayStyle:{type:[Boolean,Object,Function]},placement:{type:String,default:"top"},popperOptions:{type:Object},showArrow:Boolean,trigger:{type:String,default:"hover",validator:function(e){return e?["hover","click","focus","mousedown","context-menu"].includes(e):!0}},triggerElement:{type:[String,Function]},visible:{type:Boolean,default:void 0},modelValue:{type:Boolean,default:void 0},defaultVisible:Boolean,zIndex:{type:Number},onOverlayClick:Function,onScroll:Function,onScrollToBottom:Function,onVisibleChange:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Ji(n,e){if(!(typeof window>"u")){var t=window&&window.ResizeObserver;if(t){var r=null,a=function(){!r||!n.value||(r.unobserve(n.value),r.disconnect(),r=null)},i=function(o){r=new ResizeObserver(e),r.observe(o)};n&&fe(n,function(l){a(),l&&i(l)},{immediate:!0,flush:"post"}),Wn(function(){a()})}}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function $I(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!rt(n)}function Vf(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:[],e=[];return n.forEach(function(t){Re(t)?e.push.apply(e,On(t)):t.type===xe?e.push.apply(e,On(Vf(t.children))):e.push(t)}),e.filter(function(t){return!(t&&(t.type===mi||t.type===xe&&t.children.length===0||t.type===Rs&&t.children.trim()===""))})}function PI(n,e){return!n&&!e?!1:!!(!n||!e||["width","height","x","y"].some(function(t){return n[t]!==e[t]}))}function Rf(n){var e=un(),t=L();return Me(function(){t.value=n(e)}),bi(function(){var r=n(e);t.value!==r&&(t.value=r)}),t}var kI=H({name:"TPopupTrigger",props:{forwardRef:Function},emits:["resize"],setup:function(e,t){var r=t.emit,a=t.slots,i=Rf(function(o){var u=o.parent.vnode;return u.el.nextElementSibling}),l=L();return fe(i,function(){var o;(o=e.forwardRef)===null||o===void 0||o.call(e,i.value)}),Ji(i,function(o){var u=Se(o,1),c=u[0].contentRect;l.value=c}),fe(l,function(o,u){PI(o,u)&&r("resize")}),function(){var o,u,c=Vf((o=a.default)===null||o===void 0?void 0:o.call(a));return c.length>1||((u=c[0])===null||u===void 0?void 0:u.type)===Rs?h("span",null,[c]):c[0]}}}),xI=H({name:"TPopupContent",emits:["resize"],setup:function(e,t){var r=t.emit,a=t.slots,i=Rf(function(l){return l.vnode.el.children[0]});return Ji(i,function(){r("resize")}),function(){return h("div",{style:"position: absolute; top: 0px; left: 0px; width: 100%"},[a.default()])}}}),II=H({name:"TPopupContainer",inheritAttrs:!1,props:{parent:Object,visible:Boolean,attach:Zi.attach,forwardRef:Function},emits:["resize","contentMounted"],setup:function(e,t){var r=t.emit,a=t.attrs,i=t.slots,l=t.expose,o=L(),u=L(!1);function c(){r("resize")}return Me(function(){requestAnimationFrame(function(){u.value=e.visible})}),fe(function(){return e.visible},function(s){s&&(u.value=e.visible)}),l({unmountContent:function(){u.value=!1}}),function(){var s,d=function(){return Rc()||ha(e.attach,o.value)};return h(xe,null,[h(kI,{class:a.class,forwardRef:function(v){e.forwardRef(v),o.value=v},onResize:c},$I(s=i.default())?s:{default:function(){return[s]}}),u.value&&h(ir,{disabled:!d(),to:d()},{default:function(){return[h(xI,{onResize:c,onVnodeMounted:function(){return r("contentMounted")}},{default:function(){return[i.content&&i.content()]}})]}})])}}}),Ru={};function zu(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Ma(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?zu(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):zu(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function EI(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!rt(n)}var zf="data-td-popup",ui="data-td-popup-parent";function Na(n,e){var t=[],r=[ui,zf];if(!n)return t;return e&&r.unshift(r.pop()),a(n),t;function a(i){var l=document.querySelectorAll("[".concat(r[0],'="').concat(i,'"]'));l.forEach(function(o){t.push(o);var u=o.getAttribute(r[1]);u&&u!==i&&a(u)})}}var Hu=Symbol();function jI(n){return n.replace(/-(left|top)$/,"-start").replace(/-(right|bottom)$/,"-end")}function AI(n){var e=[];return{add:function(r,a){r&&(Bi(n.value,r,a),e.push(function(){Kr(n.value,r,a)}))},clean:function(){e.forEach(function(r){return r==null?void 0:r()}),e.length=0}}}var TI=H({name:"TPopup",props:Ma(Ma({},Zi),{},{expandAnimation:{type:Boolean}}),setup:function(e,t){var r,a=t.expose,i=Xe(e),l=i.visible,o=i.modelValue,u=Pn(l,o,e.defaultVisible,e.onVisibleChange,"visible"),c=Se(u,2),s=c[0],d=c[1],f=Ue(),v=Xn(),p,m,b,y=L(null),_=L(null),O=L(null),w=L(null),I=L(!1),k=typeof process<"u"&&(r=Ru)!==null&&r!==void 0&&r.TEST?"":Date.now().toString(36),j=vn(Hu,void 0);et(Hu,{id:k,assertMouseLeave:W});var S=le("popup"),$=Bn(),P=$.STATUS,C=g(function(){var x,Y,re=e.trigger!=="hover"?[0,0]:[].concat((x=e.delay)!==null&&x!==void 0?x:[250,150]);return{show:re[0],hide:(Y=re[1])!==null&&Y!==void 0?Y:re[0]}}),U=AI(y);fe(function(){return[e.trigger,y.value]},function(){y.value&&(U.clean(),U.add({hover:"mouseenter",focus:"focusin","context-menu":"contextmenu",click:"click"}[e.trigger],function(x){if(!e.disabled){if(x.type==="contextmenu"&&x.preventDefault(),(x.type==="click"||x.type==="contextmenu")&&s.value){ne(x);return}V(x)}}),U.add({hover:"mouseleave",focus:"focusout"}[e.trigger],ne))}),fe(function(){return[e.overlayStyle,e.overlayInnerStyle,_.value]},function(){J(),N()}),fe(function(){return e.placement},function(){z(),N()}),fe(function(){return s.value},function(x){if(x){Bi(document,"mousedown",F,!0),e.trigger==="focus"&&XC(y.value,"keydown",function(Y){var re,ve=typeof process<"u"&&(re=Ru)!==null&&re!==void 0&&re.Line truncated
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Hf=Ze(TI);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function MI(n){var e=n==null?0:n.length;return e?n[e-1]:void 0}var NI=MI;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Ku=Lt,DI=br,BI=Re,Uu=Ku?Ku.isConcatSpreadable:void 0;function FI(n){return BI(n)||DI(n)||!!(Uu&&n&&n[Uu])}var LI=FI,VI=xi,RI=LI;function Kf(n,e,t,r,a){var i=-1,l=n.length;for(t||(t=RI),a||(a=[]);++i<l;){var o=n[i];e>0&&t(o)?e>1?Kf(o,e-1,t,r,a):VI(a,o):r||(a[a.length]=o)}return a}var zI=Kf,HI=zI;function KI(n){var e=n==null?0:n.length;return e?HI(n,1):[]}var UI=KI,WI=UI,GI=oc,XI=uc;function qI(n){return XI(GI(n,void 0,WI),n+"")}var Uf=qI;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var YI=ga,ZI=zc;function JI(n,e){return e.length<2?n:YI(n,ZI(e,0,-1))}var QI=JI,eE=Wt,nE=NI,tE=QI,rE=Gt;function aE(n,e){return e=eE(e,n),n=tE(n,e),n==null||delete n[rE(nE(e))]}var iE=aE,lE=dc;function oE(n){return lE(n)?void 0:n}var uE=oE,sE=pa,cE=Ac,fE=iE,dE=Wt,vE=Kt,pE=uE,gE=Uf,hE=xc,mE=1,bE=2,yE=4,_E=gE(function(n,e){var t={};if(n==null)return t;var r=!1;e=sE(e,function(i){return i=dE(i,n),r||(r=i.length>1),i}),vE(n,hE(n),t),r&&(t=cE(t,mE|bE|yE,pE));for(var a=e.length;a--;)fE(t,e[a]);return t}),wa=_E;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var OE={delay:{type:Number},destroyOnClose:{type:Boolean,default:!0},duration:{type:Number},placement:{type:String,default:"top"},showArrow:{type:Boolean,default:!0},theme:{type:String,default:"default",validator:function(e){return e?["default","primary","success","danger","warning","light"].includes(e):!0}}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var CE=function(){var e=L(0),t=L(0),r=function(i){e.value=i.clientX,t.value=i.clientY};return Di||(Me(function(){window.addEventListener("mousemove",r,{passive:!0})}),Dn(function(){window.removeEventListener("mousemove",r)})),{x:e,y:t}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Wu(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Ot(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Wu(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Wu(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var wE=H({name:"TTooltip",props:Ot(Ot({},Zi),OE),setup:function(e,t){var r=L(null),a=L(null),i=Xe(e),l=i.visible,o=i.modelValue,u=Pn(l,o,e.defaultVisible,e.onVisibleChange,"visible"),c=Se(u,2),s=c[0],d=c[1],f=un(),v=L(e.visible||e.defaultVisible),p=le(),m=Ue(),b=Xn(),y=CE(),_=y.x,O=L(_.value);Me(function(){e.duration&&v.value&&(r.value=setTimeout(function(){d(!1,{}),clearTimeout(r.value),r.value=null},e.duration))});var w=function(P,C){r.value&&(C==null?void 0:C.trigger)!=="document"||(P&&(O.value=_.value),d(P,C))},I=g(function(){return["".concat(p.value,"-tooltip"),G({},"".concat(p.value,"-tooltip--").concat(e.theme),e.theme),e.overlayClassName]}),k=g(function(){return Ot(Ot({},(f==null?void 0:f.vnode.props)||{}),{},{placement:e.placement==="mouse"?"bottom-left":e.placement,showArrow:e.placement==="mouse"?!1:e.showArrow,overlayClassName:I.value,onVisibleChange:w,disabled:e.disabled})}),j=g(function(){if(e.placement!=="mouse"||O.value===0)return e.overlayInnerStyle;var $=function(C){return{transform:"translateX(".concat(O.value-C.getBoundingClientRect().left,"px)")}};return e.overlayInnerStyle?function(P,C){return Ot(Ot({},$(P)),qe(e.overlayInnerStyle)?e.overlayInnerStyle(P,C):e.overlayInnerStyle)}:$});fe(function(){return v.value},function(){r.value&&!v.value&&(clearTimeout(r.value),r.value=null)});var S=function(){var P,C;(P=a.value)===null||P===void 0||(C=P.update)===null||C===void 0||C.call(P)};return t.expose({updatePopper:S}),function(){var $=m("content");return!$&&!e.content?b("default","triggerElement"):h(Hf,je(wa(k.value,["content","default"]),{ref:a,overlayInnerStyle:j.value,visible:s.value}),{default:function(){return[b("default","triggerElement")]},content:function(){return $}})}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Da=Ze(wE);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function SE(n,e){if(!(n instanceof e))throw new TypeError("Cannot call a class as a function")}function $E(n,e,t){return Object.defineProperty(n,"prototype",{writable:!1}),n}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var PE=H({name:"TFakeArrow",props:{isActive:{type:Boolean},overlayClassName:{type:[String,Object,Array]},overlayStyle:{type:Object||String}},setup:function(e){var t=le("fake-arrow"),r=g(function(){return[t.value,G({},"".concat(t.value,"--active"),e.isActive),e.overlayClassName]});return{classes:r}},render:function(){return h("svg",{class:this.classes,width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:this.overlayStyle},[h("path",{d:"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921",stroke:"black","stroke-opacity":"0.9","stroke-width":"1.3"},null)])}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var kE={align:{type:String,default:"left",validator:function(e){return e?["left","center","right"].includes(e):!0}},allowInputOverMax:Boolean,autoWidth:Boolean,autocomplete:{type:String,default:void 0},autofocus:Boolean,borderless:Boolean,clearable:Boolean,disabled:{type:Boolean,default:void 0},format:{type:Function},inputClass:{type:[String,Object,Array]},label:{type:[String,Function]},maxcharacter:{type:Number},maxlength:{type:[String,Number]},name:{type:String,default:""},placeholder:{type:String,default:void 0},prefixIcon:{type:Function},readonly:{type:Boolean,default:void 0},showClearIconOnEmpty:Boolean,showLimitNumber:Boolean,size:{type:String,default:"medium",validator:function(e){return e?["small","medium","large"].includes(e):!0}},spellCheck:Boolean,status:{type:String,default:"default",validator:function(e){return e?["default","success","warning","error"].includes(e):!0}},suffix:{type:[String,Function]},suffixIcon:{type:Function},tips:{type:[String,Function]},type:{type:String,default:"text",validator:function(e){return e?["text","number","url","tel","password","search","submit","hidden"].includes(e):!0}},value:{type:[String,Number],default:void 0},modelValue:{type:[String,Number],default:void 0},defaultValue:{type:[String,Number]},onBlur:Function,onChange:Function,onClear:Function,onClick:Function,onCompositionend:Function,onCompositionstart:Function,onEnter:Function,onFocus:Function,onKeydown:Function,onKeypress:Function,onKeyup:Function,onMouseenter:Function,onMouseleave:Function,onPaste:Function,onValidate:Function,onWheel:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Fn(n){var e=un(),t=g(function(){return e.props.readonly}),r=vn("formReadonly",Object.create(null));return g(function(){var a,i,l;return Jn(n==null||(a=n.beforeReadonly)===null||a===void 0?void 0:a.value)?n.beforeReadonly.value:Jn(t==null?void 0:t.value)?t.value:Jn(n==null||(i=n.afterReadonly)===null||i===void 0?void 0:i.value)?n.afterReadonly.value:Jn((l=r.readonly)===null||l===void 0?void 0:l.value)?r.readonly.value:!1})}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var xE=Symbol("FormItemProvide");/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function IE(n){var e=function(o){var u=n.value,c=u.allowInputOverMax,s=u.maxlength,d=u.maxcharacter;if(!(s||d)||c||!o)return o;if(s)return BC(o,s);if(d){var f=Zl(o,d);if(Ee(f))return f.characters}},t=g(function(){var l=n.value,o=l.maxlength,u=l.maxcharacter,c=l.value;if(Kn(c))return String(c);if(o&&u&&Ca.warn("Input","Pick one of maxlength and maxcharacter please."),o){var s=c!=null&&c.length?DC(c):0;return"".concat(s,"/").concat(o)}return u?"".concat(Zl(c||""),"/").concat(u):""}),r=g(function(){if(t.value){var l=t.value.split("/"),o=Se(l,2),u=o[0],c=o[1];return Number(u)>Number(c)?"error":""}return""}),a=g(function(){var l=n.value.status;return l||r.value}),i=function(){var o,u;(o=(u=n.value).onValidate)===null||o===void 0||o.call(u,{error:r.value?"exceed-maximum":void 0})};return fe(r,i),Me(function(){r.value&&i()}),{tStatus:a,limitNumber:t,getValueByLimitNumber:e}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Vr(n,e){return e==="number"?n||n===0?Number(n):void 0:n}function EE(n,e){var t=Xe(n),r=t.value,a=t.modelValue,i=L(),l=L(!1),o=L(),u=L(null),c=L(),s=$n(),d=Fn(),f=Pn(r,a,n.defaultValue,n.onChange),v=Se(f,2),p=v[0],m=v[1],b=L(!1),y=L(!1),_=L(n.type),O=L(null),w=g(function(){return{value:[void 0,null].includes(p.value)?void 0:String(p.value),status:n.status,maxlength:Number(n.maxlength),maxcharacter:n.maxcharacter,allowInputOverMax:n.allowInputOverMax,onValidate:n.onValidate}}),I=IE(w),k=I.limitNumber,j=I.getValueByLimitNumber,S=I.tStatus,$=g(function(){return(p.value&&!s.value&&n.clearable&&!d.value||n.showClearIconOnEmpty)&&b.value}),P=function(){var R;y.value=!0,(R=O.value)===null||R===void 0||R.focus()},C=function(){var R;y.value=!1,(R=O.value)===null||R===void 0||R.blur()},U=function(R){var x;b.value&&y.value||(i.value=p.value,!n.disabled&&(y.value=!0,(x=n.onFocus)===null||x===void 0||x.call(n,p.value,{e:R})))},Z=function(R){var x,Y=R.e,re=n.type==="number"?void 0:"";m(re,{e:Y,trigger:"clear"}),(x=n.onClear)===null||x===void 0||x.call(n,{e:Y})},J=function(R){c.value=R.target},N=function(){if(!s.value){var R=_.value==="password"?"text":"password";_.value=R}},z=function(){var R=arguments.length>0&&arguments[0]!==void 0?arguments[0]:"",x=O.value;if(x){var Y=String(R);x.value&&x.value!==Y&&(x.value=Y)}},V=function(R){var x,Y=R.target,re=Y.value;n.type!=="number"&&typeof p.value=="string"&&re.length>((x=p.value)===null||x===void 0?void 0:x.length)&&(re=j(re)),m(Vr(re,n.type),{e:R,trigger:"input"}),an(function(){n.type==="number"&&/\.(\d+)?0$/.test(re)?z(re):z(p.value)})},ne=function(R){var x=R.inputType&&R.inputType==="insertCompositionText",Y=R.currentTarget.value;if(x||l.value){o.value=Y;return}V(R)},M=function(){var R,x=c.value;if(!x||!x.tagName||!((R=u.value)!==null&&R!==void 0&&R.$el)||!["path","svg"].includes(x.tagName))return!1;for(;x;){var Y;if(((Y=u.value)===null||Y===void 0?void 0:Y.$el)===x)return!0;x=x.parentNode}return!1},A=vn(xE,void 0),F=function(R){if(M())P();else{var x;n.format&&(i.value=typeof p.value=="number"||n.type==="number"?p.value:n.format(p.value)),y.value=!1,(x=n.onBlur)===null||x===void 0||x.call(n,p.value,{e:R}),A==null||A.handleBlur()}},W=function(R){var x;l.value=!1,o.value="",V(R),(x=n.onCompositionend)===null||x===void 0||x.call(n,String(p.value),{e:R})},K=function(R){var x;l.value=!0;var Y=R.currentTarget.value;o.value=Y,(x=n.onCompositionstart)===null||x===void 0||x.call(n,String(p.value),{e:R})},B=function(R){var x,Y;(x=O.value)===null||x===void 0||x.focus(),(Y=n.onClick)===null||Y===void 0||Y.call(n,{e:R})};return fe(function(){return n.autofocus},function(T){T===!0&&an(function(){var R;(R=O.value)===null||R===void 0||R.focus()})},{immediate:!0}),fe(p,function(T,R){var x=n.type==="number";R===void 0&&n.format&&typeof T!="number"&&!x?i.value=n.format(T):i.value=T;var Y=typeof T=="number"?T:j(T);Y!==T&&!x&&m(Y,{trigger:"initial"})},{immediate:!0}),fe(function(){return n.type},function(T){_.value=T},{immediate:!0}),e({inputRef:O,focus:P,blur:C}),{isHover:b,focused:y,renderType:_,showClear:$,inputRef:O,clearIconRef:u,inputValue:i,isComposition:l,compositionValue:o,limitNumber:k,tStatus:S,emitFocus:U,formatAndEmitBlur:F,onHandleCompositionend:W,onHandleCompositionstart:K,onRootClick:B,emitPassword:N,handleInput:ne,emitClear:Z,onClearIconMousedown:J,innerValue:p}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function jE(n,e){var t=function(d){if(!n.disabled){var f=d.code,v=Vr(d.currentTarget.value,n.type);if(/enter/i.test(f)||/enter/i.test(d.key)){var p;(p=n.onEnter)===null||p===void 0||p.call(n,v,{e:d})}else{var m;(m=n.onKeydown)===null||m===void 0||m.call(n,v,{e:d})}}},r=function(d){var f;if(!n.disabled){var v=Vr(d.currentTarget.value,n.type);(f=n.onKeyup)===null||f===void 0||f.call(n,v,{e:d})}},a=function(d){var f;if(!n.disabled){var v=Vr(d.currentTarget.value,n.type);(f=n.onKeypress)===null||f===void 0||f.call(n,v,{e:d})}},i=function(d){var f;if(!n.disabled){var v=d.clipboardData||window.clipboardData;(f=n.onPaste)===null||f===void 0||f.call(n,{e:d,pasteValue:v==null?void 0:v.getData("text/plain")})}},l=function(d){return e.value=d},o=function(d){var f;return(f=n.onWheel)===null||f===void 0?void 0:f.call(n,{e:d})},u=function(d){var f;l(!0),(f=n.onMouseenter)===null||f===void 0||f.call(n,{e:d})},c=function(d){var f;l(!1),(f=n.onMouseleave)===null||f===void 0||f.call(n,{e:d})};return{isHover:e,handleKeydown:t,handleKeyUp:r,handleKeypress:a,onHandlePaste:i,onHandleMousewheel:o,onInputMouseenter:u,onInputMouseleave:c}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var AE=100;function TE(n,e,t){var r=Xe(n),a=r.autoWidth,i=r.placeholder,l=L(null),o=L(null),u=function(){!l.value||!e.value||(e.value.style.width=getComputedStyle(l.value).width)};Ji(l,function(){a.value&&(o.value=setTimeout(function(){u(),clearTimeout(o.value)},AE))}),Wn(function(){clearTimeout(o.value)});var c=function(){fe([t,i],function(){a.value&&an(function(){u()})},{immediate:!0})};return Me(function(){a.value&&c()}),{inputPreRef:l}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var ME=["isHover","tStatus","inputRef","renderType","showClear","focused","inputValue","isComposition","compositionValue","innerValue","limitNumber"];function Gu(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Xu(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Gu(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Gu(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function qu(n){var e={};return Object.keys(n).forEach(function(t){ur(n[t])||(e[t]=n[t])}),e}var NE=H({name:"TInput",props:Xu(Xu({},kE),{},{showInput:{type:Boolean,default:!0},keepWrapperWidth:{type:Boolean,default:!1}}),setup:function(e,t){var r=t.expose,a=cn("input"),i=a.globalConfig,l=at({BrowseIcon:KP,BrowseOffIcon:zP,CloseCircleFilledIcon:yf}),o=l.BrowseIcon,u=l.BrowseOffIcon,c=l.CloseCircleFilledIcon,s=Fn(),d=$n(),f=le("input"),v=le("input__wrap"),p=le("input__tips"),m=Bn(),b=m.STATUS,y=m.SIZE,_=le(),O=Ue(),w=EE(e,r),I=w.isHover,k=w.tStatus,j=w.inputRef,S=w.renderType,$=w.showClear,P=w.focused,C=w.inputValue,U=w.isComposition,Z=w.compositionValue,J=w.innerValue,N=w.limitNumber,z=wr(w,ME),V=TE(e,j,J),ne=V.inputPreRef,M=jE(e,I),A=g(function(){var B;return(B=e.placeholder)!==null&&B!==void 0?B:i.value.placeholder}),F=g(function(){var B;return qu({autofocus:e.autofocus,disabled:d.value,readonly:s.value,placeholder:A.value,name:e.name||void 0,type:S.value,autocomplete:(B=e.autocomplete)!==null&&B!==void 0?B:i.value.autocomplete||void 0,unselectable:s.value?"on":void 0,spellcheck:e.spellCheck})}),W=g(function(){return[v.value,G({},"".concat(f.value,"--auto-width"),e.autoWidth&&!e.keepWrapperWidth)]}),K=qu({onFocus:z.emitFocus,onBlur:z.formatAndEmitBlur,onKeydown:M.handleKeydown,onKeyup:M.handleKeyUp,onKeypress:M.handleKeypress,onPaste:M.onHandlePaste,onCompositionend:z.onHandleCompositionend,onCompositionstart:z.onHandleCompositionstart});return function(){var B,T,R,x=O("prefixIcon"),Y=O("suffixIcon"),re=O("passwordIcon"),ve=O("label",{silent:!0}),we=O("suffix"),$e=N.value&&e.showLimitNumber?h("div",{class:["".concat(_.value,"-input__limit-number"),G({},"".concat(_.value,"-is-disabled"),d.value)]},[N.value]):null,pe=ve?h("div",{class:"".concat(f.value,"__prefix")},[ve]):null,he=we||$e?h("div",{class:"".concat(f.value,"__suffix")},[we,$e]):null;if(e.type==="password"){var _e=[G({},"".concat(f.value,"__suffix-clear"),!d.value)];S.value==="password"?Y=h(u,{class:_e,onClick:z.emitPassword},null):S.value==="text"&&(Y=h(o,{class:_e,onClick:z.emitPassword},null))}$.value&&(e.type==="password"?re=h(c,{ref:z.clearIconRef,class:"".concat(f.value,"__suffix-clear"),onClick:z.emitClear,onMousedown:z.onClearIconMousedown},null):Y=h(c,{ref:z.clearIconRef,class:"".concat(f.value,"__suffix-clear"),onClick:z.emitClear,onMousedown:z.onClearIconMousedown},null));var Ne=[f.value,e.inputClass,G(G(G(G(G(G(G(G(G(G({},y.value[e.size],e.size!=="medium"),b.value.disabled,d.value),b.value.focused,d.value?!1:P.value),"".concat(_.value,"-is-").concat(k.value),k.value&&k.value!=="default"),"".concat(_.value,"-align-").concat(e.align),e.align!=="left"),"".concat(_.value,"-is-readonly"),s.value),"".concat(f.value,"--prefix"),x||pe),"".concat(f.value,"--suffix"),Y||he),"".concat(f.value,"--borderless"),e.borderless),"".concat(f.value,"--focused"),P.value)],Ae=O("tips"),Ie=[p.value,"".concat(_.value,"-tips"),"".concat(_.value,"-is-").concat(k.value||"default")];return lr(h("div",{class:W.value},[h("div",{class:Ne,onClick:z.onRootClick,onMouseenter:M.onInputMouseenter,onMouseleave:M.onInputMouseleave,onWheel:M.onHandleMousewheel},[x?h("span",{class:["".concat(f.value,"__prefix"),"".concat(f.value,"__prefix-icon")]},[x]):null,pe,h("input",je({class:["".concat(f.value,"__inner"),G({},"".concat(f.value,"--soft-hidden"),!e.showInput)]},F.value,K,{ref:j,value:U.value?(B=Z.value)!==null&&B!==void 0?B:"":(T=C.value)!==null&&T!==void 0?T:"",onInput:function(ie){return z.handleInput(ie)}}),null),e.autoWidth&&h("span",{ref:ne,class:"".concat(_.value,"-input__input-pre")},[U.value?(R=Z.value)!==null&&R!==void 0?R:"":J.value||A.value]),he,re?h("span",{class:["".concat(f.value,"__suffix"),"".concat(f.value,"__suffix-icon"),"".concat(f.value,"__clear")]},[re]):null,Y?h("span",{class:["".concat(f.value,"__suffix"),"".concat(f.value,"__suffix-icon"),G({},"".concat(f.value,"__clear"),$.value)]},[Y]):null]),Ae&&h("div",{class:Ie},[Ae])]),[[Jr,e.type!=="hidden"]])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var DE={separate:Boolean};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var BE=H({name:"TInputGroup",props:DE,setup:function(e){var t=le("input-group"),r=Ue(),a=g(function(){return[t.value,G({},"".concat(t.value,"--separate"),e.separate)]});return function(){return h("div",{class:a.value},[r("default")])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Qi=Ze(NE);Ze(BE);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var FE={align:{type:String,validator:function(e){return e?["left","center","right"].includes(e):!0}},allowInputOverLimit:{type:Boolean,default:!0},autoWidth:Boolean,decimalPlaces:{type:[Number,Object],default:void 0},disabled:{type:Boolean,default:void 0},format:{type:Function},inputProps:{type:Object},label:{type:[String,Function]},largeNumber:Boolean,max:{type:[String,Number],default:1/0},min:{type:[String,Number],default:-1/0},placeholder:{type:String,default:void 0},readonly:{type:Boolean,default:void 0},size:{type:String,default:"medium",validator:function(e){return e?["small","medium","large"].includes(e):!0}},status:{type:String,default:"default",validator:function(e){return e?["default","success","warning","error"].includes(e):!0}},step:{type:[String,Number],default:1},suffix:{type:[String,Function]},theme:{type:String,default:"row",validator:function(e){return e?["column","row","normal"].includes(e):!0}},tips:{type:[String,Function]},value:{type:[String,Number],default:void 0},modelValue:{type:[String,Number],default:void 0},defaultValue:{type:[String,Number]},onBlur:Function,onChange:Function,onEnter:Function,onFocus:Function,onKeydown:Function,onKeypress:Function,onKeyup:Function,onValidate:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Qn(n){return new Array(n).fill(0).join("")}function Wf(n){if(!n)return!0;if(Kn(n))return!Number.isNaN(n);var e=/^[0-9|e|E|-]+\.*[0-9|e|E|-]*$/.test(n);if(!e)return!1;for(var t=0,r=0,a=0,i=0,l=n.length;i<l;i++)if(n[i]==="."&&(a+=1,a>1)||/(e|E)+/.test(n[i])&&(t+=1,t>1)||n[i]==="-"&&(r+=1,r>2))return!1;return!0}function hn(n){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!1;return n.indexOf(".")!==-1?(Ca.error("InputNumber","num is not a integer number."),n):!n||n==="0"&&e?"":n==="0"?n:(e?n.replace(/0+$/,""):n.replace(/^0+/,""))||"0"}function Ba(n,e){for(var t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!1,r=hn(n,t),a=hn(e,t),i=r.length>a.length,l=i?r:a,o=i?a:r,u=[],c=[],s=t?0:l.length-o.length,d=t?o.length:l.length,f=d-1;f>=0;f--){var v=f-s,p=Number(l[f])+(Number(o[v])||0)+(c[f]||0);p>=10&&(c[f-1]=1),u.unshift(String(p%10))}return c[-1]&&u.unshift("1"),t?u.concat(l.slice(d,l.length)).join(""):u.join("")}function Bt(n,e){var t=n.split("."),r=Se(t,2),a=r[0],i=a===void 0?"0":a,l=r[1],o=l===void 0?"0":l,u=e.split("."),c=Se(u,2),s=c[0],d=s===void 0?"0":s,f=c[1],v=f===void 0?"0":f,p=Ba(i,d);if(o==="0"&&v==="0")return p;var m=hn(o,!0),b=hn(v,!0),y=Ba(m,b,!0),_=y.length;return _>m.length&&_>b.length?[hn(Ba(p,"1")),hn(y.slice(1),!0)].filter(function(O){return O}).join("."):[hn(p),hn(y,!0)].filter(function(O){return O}).join(".")}function Gf(n,e){var t=hn(n),r=hn(e);if(t.length===r.length){for(var a=0,i=t.length;a<i;a++){if(t[a]>r[a])return 1;if(t[a]<r[a])return-1}return 0}return t.length>r.length?1:-1}function Xf(n,e){for(var t=n&&n!=="0"?n.replace(/0+$/,""):"0",r=e&&e!=="0"?e.replace(/0+$/,""):"0",a=Math.max(t.length,r.length),i=0,l=a;i<l;i++){if((t[i]||0)>(r[i]||0))return 1;if((t[i]||0)<(r[i]||0))return-1}return 0}function si(n){var e=n.split("e"),t=Se(e,2),r=t[0],a=t[1];if(!a)return n;var i=n.split("."),l=Se(i,2),o=l[0],u=l[1],c=u===void 0?"":u,s=Number(a),d=c.split("e"),f=Se(d,1),v=f[0];if(s>v.length){var p=Qn(s-v.length);return r.replace(/(^0+|\.)/g,"")+p}var m=o.replace(/^0+/,"")+v.slice(0,s),b=v.slice(s);return b?[m,b].join("."):m}function LE(n,e){var t=si(n).split("."),r=Se(t,2),a=r[0],i=r[1],l=si(e).split("."),o=Se(l,2),u=o[0],c=o[1],s=Gf(a.replace("-",""),u.replace("-","")),d=a.includes("-"),f=u.includes("-");return d&&!f?-1:!d&&f?1:d&&f?s===0?0:s>0?-1:1:s===0?Xf(i,c):s}function Yu(n){return[-1/0,1/0].includes(Number(n))}function Zu(n){return Number(n)<Number.MAX_SAFE_INTEGER&&Number(n)>Number.MIN_SAFE_INTEGER}function gt(n,e,t){var r=Zu(n)&&Zu(e)&&!t,a=Yu(n)||Yu(e);return r||a?Number(n)===Number(e)?0:Number(n)>Number(e)?1:-1:LE(String(n),String(e))}function Jt(n,e,t){if(n===e)return"0";for(var r=t||{},a=r.decimal,i=r.stayZero,l=hn(n),o=hn(e),u=Gf(l,o)>0,c=u?l:o,s=u?o:l,d=[],f=[],v=a?0:c.length-s.length,p=a?s.length:c.length,m=p-1;m>=0;m--){var b=m-v,y=Number(c[m])-(Number(s[b])||0)-(f[m]||0);y<0&&(f[m-1]=1,y+=10),d.unshift(String(y))}if(a)return d.concat(c.slice(p,c.length)).join("");var _=d.join("");return i||(_=_.replace(/^0+/,"")),hn(u?_:"-".concat(_))}function Xr(n,e){if(n===e)return"0";var t=gt(n,e,!0)>0,r=t?n:e,a=t?e:n,i=r.split("."),l=Se(i,2),o=l[0],u=l[1],c=u===void 0?"0":u,s=a.split("."),d=Se(s,2),f=d[0],v=d[1],p=v===void 0?"0":v,m=Jt(o,f);if(c==="0"&&p==="0")return t?m:"-".concat(m);var b="",y=c;c.length<p.length&&(y="".concat(c).concat(Qn(p.length-c.length))),Xf(y,p)>=0?b=Jt(y,p,{decimal:!0}):(c.length<p.length||c==="0"?(b=Jt("1".concat(y),p,{stayZero:!0}),b=Qn(p.length-b.length)+b):b=Jt(c,p,{decimal:!0}),m=Jt(m,"1"));var _=b?[m,b].join("."):m;return t?_:"-".concat(_)}function VE(n,e){var t=n[0]==="-",r=e[0]==="-";if(t&&!r){var a=Bt(n.slice(1),e);return"-".concat(a)}return t&&r?Xr(e.slice(1),n.slice(1)):!t&&r?Bt(n,e.slice(1)):Xr(n,e)}function RE(n,e){var t=n[0]==="-",r=e[0]==="-";if(t&&!r)return Xr(e,n.slice(1));if(t&&r){var a=Bt(e.slice(1),n.slice(1));return"-".concat(a)}return!t&&r?Xr(n,e.slice(1)):Bt(n,e)}function Ju(n,e){var t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!0;if(t)return n.toFixed(e);var r=n.toString().split("."),a=Se(r,2),i=a[0],l=a[1];if(e===0)return i;var o=l.slice(0,e);return l.length<e&&(o+=Qn(e-l.length)),[i,o].join(".")}function zE(n,e){if(Ee(e)){var t;return Ju(n,e.places,(t=e.enableRound)!==null&&t!==void 0?t:!0)}return Ju(n,e,!0)}function qr(n){var e,t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0,r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!0;if(Number.isNaN(Number(n)))return"";if(!r)return zE(Number(n),t);var a=Ee(t)?t.places:t,i=Ee(t)&&(e=t.enableRound)!==null&&e!==void 0?e:!0;if(!Ye(n))return String(n);var l=n.split("."),o=Se(l,2),u=o[0],c=o[1];if(!c)return a>0&&i?[n,Qn(a)].join("."):n;if(a===0)return i&&Number(c[0])>=5?Bt(u,"1"):u;var s=c.slice(0,a);if(c.length<a)s+=Qn(a-c.length);else if(i){var d,f=(d=s.match(/^0+/))===null||d===void 0?void 0:d[0].length,v=s.match(/^9+/),p=Number(c[a])>=5;s=p?Bt(s,"1"):s,f&&p&&f+s.length>=a&&(s="".concat(Qn(a-s.length)).concat(s)),v&&s.length>a&&(u=(Number(Line truncated
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function HE(n,e){var t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!1;return!n&&n!==0?!0:t&&Ye(n)?gt(n,e,t)<0:n<e}function KE(n,e){var t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!1;return!n&&n!==0?!0:t&&Ye(n)?gt(n,e,t)>0:n>e}function UE(n,e){if(n!==""){var t=e.max,r=e.min,a=e.lastValue,i=e.largeNumber;return Wf(n)?i&&(Ye(t)||t===1/0)&&(Ye(r)||r===-1/0)?gt(t,n,i)<0?t:gt(r,n,i)>0?r:n:Math.max(Number(r),Math.min(Number(t),Number(n))):a}}function dr(n,e){var t,r;if(!n||!e)return(n||0)+(e||0);var a=((t=n.toString().split(".")[1])===null||t===void 0?void 0:t.length)||0,i=((r=e.toString().split(".")[1])===null||r===void 0?void 0:r.length)||0;if(!a&&!i)return n+e;var l=n,o=e,u=Math.abs(a-i),c=Math.pow(10,Math.max(a,i));if(u>0){var s=Math.pow(10,u);a>i?(l=Number(n.toString().replace(".","")),o=Number(e.toString().replace(".",""))*s):(l=Number(n.toString().replace(".",""))*s,o=Number(e.toString().replace(".","")))}else l=Number(n.toString().replace(".","")),o=Number(e.toString().replace(".",""));return(l+o)/c}function vr(n,e){var t,r;if(!n||!e)return(n||0)-(e||0);var a=((t=n.toString().split(".")[1])===null||t===void 0?void 0:t.length)||0,i=((r=e.toString().split(".")[1])===null||r===void 0?void 0:r.length)||0,l=Math.pow(10,Math.max(a,i)),o=a>=i?a:i;return Number(((n*l-e*l)/l).toFixed(o))}function WE(n,e){return n<0&&e>0?vr(e,Math.abs(n)):n<0&&e<0?dr(Math.abs(n),Math.abs(e))*-1:n>0&&e<0?vr(n,Math.abs(e)):dr(n,e)}function GE(n,e){return n<0&&e>0?dr(Math.abs(n),e)*-1:n<0&&e<0?vr(Math.abs(e),Math.abs(n)):n>0&&e<0?dr(n,Math.abs(e)):vr(n,e)}function XE(n){var e=n.op,t=n.step,r=n.lastValue,a=n.max,i=n.min,l=n.largeNumber;if(Number(t)<=0)return Ca.error("InputNumber","step must be larger than 0."),r;var o=Kn(t)?String(t):t,u;return e==="add"?l&&Ye(r)?u=RE(String(r),String(o)):u=WE(Number(r||0),Number(t)):e==="reduce"&&(l&&Ye(r)?u=VE(String(r),String(o)):u=GE(Number(r||0),Number(t))),ur(r)&&(u=UE(u,{max:a,min:i,lastValue:r,largeNumber:l})),l?u:Number(u)}function Fa(n){var e=n.largeNumber,t=n.value,r=n.max,a=n.min;if(!(ur(t)||ur(e))){e&&Kn(t)&&Ca.warn("InputNumber","largeNumber value must be a string.");var i;return gt(t,r,e)>0?i="exceed-maximum":gt(t,a,e)<0?i="below-minimum":i=void 0,i}}var qE=["-",".","e","E","+"];function YE(n,e){var t,r;if(["",null,void 0].includes(n))return!0;if(n.slice(0,2)==="00"||n.match(/\s/g)||((t=n.match(/\./g))===null||t===void 0?void 0:t.length)>1||((r=n.match(/e/g))===null||r===void 0?void 0:r.length)>1)return!1;var a=n.slice(1);if(/(\+|-)/.test(a)&&!/e+/i.test(a))return!1;var i=e&&Wf(n)||!Number.isNaN(Number(n));return!(!i&&!qE.includes(n.slice(-1))||/e/i.test(n)&&!/\de/i.test(n))}function ZE(n,e){return parseFloat(n)!==e&&!Number.isNaN(Number(n))}function Nr(n){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};if(!(["",null,void 0].includes(n)||!/\d+/.test(n))){var t=e.decimalPlaces,r=e.largeNumber,a=e.isToFixed,i=n.replace(/[.|+|\-|e]$/,"");return r&&(i=si(i)),t!==void 0&&(i=qr(i,t,r)),r||a?i:parseFloat(i)}}function JE(n){var e=/^[-+]?\d{1,3}(,\d{3})*(\.(\d*))?$/;return e.test(n)?n.replace(/,/g,""):n}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function QE(n){var e=_I(),t=e.classPrefix,r=e.sizeClassNames,a=e.statusClassNames,i=Xe(n),l=i.value,o=i.modelValue,u=i.max,c=i.min,s=Pn(l,o,n.defaultValue,n.onChange),d=Se(s,2),f=d[0],v=d[1],p=L(),m=L(""),b=$n(),y=Fn(),_=L(),O=g(function(){return b.value||!KE(f.value,n.min,n.largeNumber)}),w=g(function(){return b.value||!HE(f.value,n.max,n.largeNumber)}),I=g(function(){return["".concat(t.value,"-input-number"),r[n.size],G(G(G(G({},a.disabled,b.value),"".concat(t.value,"-is-controls-right"),n.theme==="column"),"".concat(t.value,"-input-number--").concat(n.theme),n.theme),"".concat(t.value,"-input-number--auto-width"),n.autoWidth)]}),k=g(function(){return["".concat(t.value,"-input-number__decrease"),G({},a.disabled,O.value)]}),j=g(function(){return["".concat(t.value,"-input-number__increase"),G({},a.disabled,w.value)]}),S=function(K){var B;if(!K&&K!==0)return"";var T=K||K===0?String(K):"";if(!((B=p.value)!==null&&B!==void 0&&(B=B.inputRef)!==null&&B!==void 0&&B.contains(document.activeElement))){var R=Nr(T,{decimalPlaces:n.decimalPlaces,largeNumber:n.largeNumber,isToFixed:!0});T=R||R===0?String(R):"",n.format&&(T=String(n.format(K,{fixedNumber:T})))}return T};fe(f,function(W){var K=n.largeNumber,B=n.decimalPlaces,T=[void 0,null].includes(W)?"":String(W);if(!K&&!Number.isNaN(m.value)){parseFloat(m.value)!==W&&(m.value=S(T));var R=Number(qr(T,B,K));B!==void 0&&![void 0,null].includes(W)&&Number(R)!==Number(f.value)&&v(R,{type:"props",e:void 0})}if(K&&(m.value=S(T),B!==void 0&&qr(T,B,K)!==W)){var x,Y=T;(x=p.value)!==null&&x!==void 0&&(x=x.inputRef)!==null&&x!==void 0&&x.contains(document.activeElement)||(Y=Nr(Y,{decimalPlaces:n.decimalPlaces,largeNumber:n.largeNumber,isToFixed:!0})),v(Y,{type:"props",e:void 0})}},{immediate:!0}),fe([f,u,c],function(){var W;if(![void 0,"",null].includes(f.value)){var K=n.max,B=n.min,T=n.largeNumber,R=Fa({value:f.value,largeNumber:T,max:K,min:B});_.value=R,(W=n.onValidate)===null||W===void 0||W.call(n,{error:R})}},{immediate:!0});var $=function(K){var B=XE({op:K,step:n.step,max:n.max,min:n.min,lastValue:f.value,largeNumber:n.largeNumber}),T=n.largeNumber,R=n.max,x=n.min,Y=Fa({value:B,largeNumber:T,max:R,min:x});return{overLimit:Y,newValue:B}},P=function(K){if(!(O.value||y.value)){var B=$("reduce");B.overLimit&&!n.allowInputOverLimit||v(B.newValue,{type:"reduce",e:K})}},C=function(K){if(!(w.value||y.value)){var B=$("add");B.overLimit&&!n.allowInputOverLimit||v(B.newValue,{type:"add",e:K})}},U=function(K,B){var T=B.e,R=JE(K);if(YE(R,n.largeNumber)){if(m.value=R,n.largeNumber){v(R,{type:"input",e:T});return}if(ZE(String(R),Number(f.value))){var x=R===""?void 0:Number(R);v(x,{type:"input",e:T})}}},Z=function(K,B){var T,R=n.largeNumber,x=n.max,Y=n.min,re=n.decimalPlaces;if(!n.allowInputOverLimit&&f.value!==void 0){var ve=Fa({value:f.value,largeNumber:R,max:x,min:Y});if(ve==="below-minimum"){var we;v(Y,{type:"blur",e:B.e}),(we=n.onBlur)===null||we===void 0||we.call(n,Y,B);return}if(ve==="exceed-maximum"){var $e;v(x,{type:"blur",e:B.e}),($e=n.onBlur)===null||$e===void 0||$e.call(n,x,B);return}}var pe=Nr(K,{decimalPlaces:re,largeNumber:R});m.value=S(pe),pe!==f.value&&v(pe,{type:"blur",e:B.e}),(T=n.onBlur)===null||T===void 0||T.call(n,pe,B)},J=function(K,B){var T;m.value=f.value||f.value===0?String(f.value):"",(T=n.onFocus)===null||T===void 0||T.call(n,K,B)},N=function(K,B){var T;if(!b.value){var R=B.e,x={ArrowUp:C,ArrowDown:P},Y=R.code||R.key;x[Y]!==void 0&&x[Y](R),(T=n.onKeydown)===null||T===void 0||T.call(n,K,B)}},z=function(K,B){var T;(T=n.onKeyup)===null||T===void 0||T.call(n,K,B)},V=function(K,B){var T;(T=n.onKeypress)===null||T===void 0||T.call(n,K,B)},ne=function(K,B){var T;m.value=S(K);var R=Nr(K,{decimalPlaces:n.decimalPlaces,largeNumber:n.largeNumber});R!==K&&String(R)!==K&&v(R,{type:"enter",e:B.e}),(T=n.onEnter)===null||T===void 0||T.call(n,R,B)},M=function(){b.value||y.value||p.value.focus()},A=function(){p.value.blur()},F={onBlur:Z,onFocus:J,onKeydown:N,onKeyup:z,onKeypress:V,onEnter:ne,onClick:M};return{classPrefix:t,wrapClasses:I,reduceClasses:k,addClasses:j,tDisabled:b,isError:_,listeners:F,userInput:m,tValue:f,inputRef:p,focus:M,blur:A,handleReduce:P,handleAdd:C,onInnerInputChange:U,isReadonly:y}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Qu(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function ej(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Qu(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Qu(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var nj=H({name:"TInputNumber",props:FE,setup:function(e,t){var r=Ue(),a=at({AddIcon:VP,RemoveIcon:yk,ChevronDownIcon:Vi,ChevronUpIcon:bf}),i=a.AddIcon,l=a.RemoveIcon,o=a.ChevronDownIcon,u=a.ChevronUpIcon,c=QE(e),s=c.inputRef;return t.expose(ej({},c)),function(){var d=e.theme==="column"?h(o,{size:e.size},null):h(l,{size:e.size},null),f=e.theme==="column"?h(u,{size:e.size},null):h(i,{size:e.size},null),v=c.isError.value?"error":e.status,p=c.classPrefix.value,m=r("tips");return h("div",{class:c.wrapClasses.value},[e.theme!=="normal"&&h(Hn,{class:c.reduceClasses.value,disabled:c.tDisabled.value,onClick:c.handleReduce,variant:"outline",shape:"square",icon:function(){return d}},null),h(Qi,je({ref:s,disabled:c.tDisabled.value,readonly:c.isReadonly.value,autocomplete:"off",placeholder:e.placeholder,unselectable:c.isReadonly.value?"on":"off",autoWidth:e.autoWidth,align:e.align||(e.theme==="row"?"center":void 0),status:v,label:e.label,suffix:e.suffix},c.listeners,e.inputProps,{value:c.userInput.value,onChange:c.onInnerInputChange}),t.slots),e.theme!=="normal"&&h(Hn,{class:c.addClasses.value,disabled:c.tDisabled.value,onClick:c.handleAdd,variant:"outline",shape:"square",icon:function(){return f}},null),m&&h("div",{class:"".concat(p,"-input__tips ").concat(p,"-tips ").concat(p,"-is-").concat(v)},[m])])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var tj=Ze(nj);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var rj=Ci,aj=Wt,ij=ca,es=Ee,lj=Gt;function oj(n,e,t,r){if(!es(n))return n;e=aj(e,n);for(var a=-1,i=e.length,l=i-1,o=n;o!=null&&++a<i;){var u=lj(e[a]),c=t;if(u==="__proto__"||u==="constructor"||u==="prototype")return n;if(a!=l){var s=o[u];c=r?r(s,u,o):void 0,c===void 0&&(c=es(s)?s:ij(e[a+1])?[]:{})}rj(o,u,c),o=o[u]}return n}var uj=oj;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var sj=ga,cj=uj,fj=Wt;function dj(n,e,t){for(var r=-1,a=e.length,i={};++r<a;){var l=e[r],o=sj(n,l);t(o,l)&&cj(i,fj(l,n),o)}return i}var vj=dj,pj=vj,gj=Lc;function hj(n,e){return pj(n,e,function(t,r){return gj(n,r)})}var mj=hj,bj=mj,yj=Uf,_j=yj(function(n,e){return n==null?{}:bj(n,e)}),qf=_j;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Oj(n,e,t,r){for(var a=n.length,i=t+(r?1:-1);r?i--:++i<a;)if(e(n[i],i,n))return i;return-1}var Cj=Oj;function wj(n){return n!==n}var Sj=wj;function $j(n,e,t){for(var r=t-1,a=n.length;++r<a;)if(n[r]===e)return r;return-1}var Pj=$j,kj=Cj,xj=Sj,Ij=Pj;function Ej(n,e,t){return e===e?Ij(n,e,t):kj(n,xj,t)}var jj=Ej,Aj=jj;function Tj(n,e){var t=n==null?0:n.length;return!!t&&Aj(n,e,0)>-1}var Mj=Tj;function Nj(n,e,t){for(var r=-1,a=n==null?0:n.length;++r<a;)if(t(e,n[r]))return!0;return!1}var Dj=Nj;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Bj=Tc,Fj=Mj,Lj=Dj,Vj=pa,Rj=oa,ns=Mc,zj=Math.min;function Hj(n,e,t){for(var r=t?Lj:Fj,a=n[0].length,i=n.length,l=i,o=Array(i),u=1/0,c=[];l--;){var s=n[l];l&&e&&(s=Vj(s,Rj(e))),u=zj(s.length,u),o[l]=!t&&(e||a>=120&&s.length>=120)?new Bj(l&&s):void 0}s=n[0];var d=-1,f=o[0];e:for(;++d<a&&c.length<u;){var v=s[d],p=e?e(v):v;if(v=t||v!==0?v:0,!(f?ns(f,p):r(c,p,t))){for(l=i;--l;){var m=o[l];if(!(m?ns(m,p):r(n[l],p,t)))continue e}f&&f.push(p),c.push(v)}}return c}var Kj=Hj,Uj=sc;function Wj(n){return Uj(n)?n:[]}var Gj=Wj,Xj=pa,qj=Kj,Yj=cc,Zj=Gj,Jj=Yj(function(n){var e=Xj(n,Zj);return e.length&&e[0]===n[0]?qj(e):[]}),ci=Jj;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Qj={allowInput:Boolean,autoWidth:Boolean,autofocus:Boolean,borderless:Boolean,clearable:Boolean,collapsedItems:{type:Function},disabled:{type:Boolean,default:void 0},inputProps:{type:Object},inputValue:{type:[String,Number],default:void 0},defaultInputValue:{type:[String,Number]},keys:{type:Object},label:{type:[String,Function]},loading:Boolean,minCollapsedNum:{type:Number,default:0},multiple:Boolean,panel:{type:[String,Function]},placeholder:{type:String,default:""},popupProps:{type:Object},popupVisible:{type:Boolean,default:void 0},defaultPopupVisible:Boolean,prefixIcon:{type:Function},readonly:{type:Boolean,default:void 0},reserveKeyword:Boolean,size:{type:String,default:"medium",validator:function(e){return e?["small","medium","large"].includes(e):!0}},status:{type:String,default:"default",validator:function(e){return e?["default","success","warning","error"].includes(e):!0}},suffix:{type:[String,Function]},suffixIcon:{type:Function},tag:{type:[String,Function]},tagInputProps:{type:Object},tagProps:{type:Object},tips:{type:[String,Function]},value:{type:[String,Number,Boolean,Object,Array,Date],default:void 0},valueDisplay:{type:[String,Function]},onBlur:Function,onClear:Function,onEnter:Function,onFocus:Function,onInputChange:Function,onMouseenter:Function,onMouseleave:Function,onPaste:Function,onPopupVisibleChange:Function,onTagChange:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var eA=["tips"];function ts(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function on(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?ts(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):ts(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var nA=["status","clearable","disabled","label","placeholder","readonly","prefixIcon","suffix","suffixIcon","onPaste","onMouseenter","onMouseleave","size","autofocus"],tA={label:"label",value:"value",children:"children"};function rA(n,e){var t=on(on({},tA),e);return Ee(n)?n[t.label]:n}function aA(n,e,t){var r,a=Xe(n),i=a.value,l=a.keys,o=a.inputValue,u=le(),c=L(n.autofocus),s=L(),d=pt(o,(r=n.defaultInputValue)!==null&&r!==void 0?r:"",n.onInputChange,"inputValue"),f=Se(d,2),v=f[0],p=f[1],m=Ue(),b=$n(),y=Fn(),_=g(function(){return on(on({},qf(n,nA)),{},{disabled:b.value,readonly:y.value})}),O=function(P){var C,U;P==null||(C=P.e)===null||C===void 0||C.stopPropagation(),(U=n.onClear)===null||U===void 0||U.call(n,P),p("",{trigger:"clear"})},w=function(P,C){n.allowInput&&p(P,on(on({},C),{},{trigger:C.trigger||"input"}))},I=function(P){var C,U=m("valueDisplay"),Z=P&&n.allowInput?v.value:rA(i.value,l.value),J=k(U,P),N=on(on({},_.value),{},{value:j(U,Z,P),label:J.length?function(){return J}:void 0,autoWidth:n.autoWidth,readonly:!n.allowInput||y.value,placeholder:S(U),suffixIcon:!b.value&&n.loading?function(){return h(ya,{loading:!0,size:"small"},null)}:n.suffixIcon,showClearIconOnEmpty:!!(n.clearable&&(v.value||Z)&&!b.value&&!y.value)},n.inputProps),z=e.slots;z.tips;var V=wr(z,eA),ne=P?["".concat(u.value,"-input--focused"),"".concat(u.value,"-is-focused"),N==null?void 0:N.inputClass]:N==null?void 0:N.inputClass,M=function(K,B){var T;(T=n.onEnter)===null||T===void 0||T.call(n,i.value,on(on({},B),{},{inputValue:K}))},A=function(K,B){var T,R,x=(T=t.value)===null||T===void 0?void 0:T.getOverlayState();c.value||x!=null&&x.hover||(c.value=!0,(R=n.onFocus)===null||R===void 0||R.call(n,i.value,on(on({},B),{},{inputValue:K})))},F=function(K,B){var T,R,x=(T=t.value)===null||T===void 0?void 0:T.getOverlayState();c.value=!1,!(x!=null&&x.hover)&&((R=n.onBlur)===null||R===void 0||R.call(n,i.value,on(on({},B),{},{inputValue:K})))};return h(Qi,je({ref:s,style:(C=e.attrs)===null||C===void 0?void 0:C.style},on({onChange:w,onClear:O,onEnter:M,onFocus:A,onBlur:F},N),{inputClass:ne}),V)},k=function(P,C){var U=m("label");if(!U&&!P)return[];if(P){var Z,J;if((Z=n.valueDisplayOptions)!==null&&Z!==void 0&&Z.usePlaceholder&&!i.value||(J=n.valueDisplayOptions)!==null&&J!==void 0&&J.useInputDisplay&&C)return[U]}return[U,P]},j=function(P,C,U){if(P){var Z,J;if(!((Z=n.valueDisplayOptions)!==null&&Z!==void 0&&Z.useInputDisplay)||(J=n.valueDisplayOptions)!==null&&J!==void 0&&J.useInputDisplay&&!U)return}return C},S=function(P){if(P){var C,U;if(!((C=n.valueDisplayOptions)!==null&&C!==void 0&&C.usePlaceholder)||(U=n.valueDisplayOptions)!==null&&U!==void 0&&U.usePlaceholder&&i.value)return""}return n.placeholder};return{inputRef:s,isSingleFocus:c,commonInputProps:_,singleInputValue:v,onInnerClear:O,renderSelectSingle:I}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var iA={autoWidth:Boolean,borderless:Boolean,clearable:Boolean,collapsedItems:{type:Function},disabled:{type:Boolean,default:void 0},dragSort:Boolean,excessTagsDisplayType:{type:String,default:"break-line",validator:function(e){return e?["scroll","break-line"].includes(e):!0}},inputProps:{type:Object},inputValue:{type:[String,Number],default:void 0},defaultInputValue:{type:[String,Number],default:""},label:{type:[String,Function]},max:{type:Number},minCollapsedNum:{type:Number,default:0},placeholder:{type:String,default:void 0},prefixIcon:{type:Function},readonly:{type:Boolean,default:void 0},size:{type:String,default:"medium",validator:function(e){return e?["small","medium","large"].includes(e):!0}},status:{type:String,validator:function(e){return e?["default","success","warning","error"].includes(e):!0}},suffix:{type:[String,Function]},suffixIcon:{type:Function},tag:{type:[String,Function]},tagProps:{type:Object},tips:{type:[String,Function]},value:{type:Array,default:void 0},modelValue:{type:Array,default:void 0},defaultValue:{type:Array,default:function(){return[]}},valueDisplay:{type:[String,Function]},onBlur:Function,onChange:Function,onClear:Function,onClick:Function,onDragSort:Function,onEnter:Function,onFocus:Function,onInputChange:Function,onMouseenter:Function,onMouseleave:Function,onPaste:Function,onRemove:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function lA(n){var e=L(),t=Xe(n),r=t.excessTagsDisplayType,a=t.readonly,i=t.disabled,l=L(0),o=L(),u=L(),c=L(!1),s=function(I){var k=I.children[0];o.value=k},d=function(){l.value=o.value.scrollWidth-o.value.clientWidth},f=function(I){var k;qe((k=o.value)===null||k===void 0?void 0:k.scroll)&&o.value.scroll({left:I,behavior:"smooth"})},v=function(){d(),f(l.value),setTimeout(function(){c.value=!0},200)},p=function(){f(0)},m=function(I){var k=I.e;if(!(a.value||i.value)&&o.value)if(k.deltaX>0){var j=Math.min(o.value.scrollLeft+120,l.value);f(j)}else{var S=Math.max(o.value.scrollLeft-120,0);f(S)}},b=function(){r.value==="scroll"&&(u.value=setTimeout(function(){v(),clearTimeout(u.value)},100))},y=function(){r.value==="scroll"&&(c.value=!1,f(0),clearTimeout(u.value))},_=function(){var I,k=(I=e.value)===null||I===void 0?void 0:I.$el;k&&s(k)},O=function(){clearTimeout(u.value)};return Me(_),Dn(O),{tagInputRef:e,scrollElement:o,scrollDistance:l,scrollTo:f,scrollToRight:v,scrollToLeft:p,updateScrollElement:s,updateScrollDistance:d,onWheel:m,scrollToRightOnEnter:b,scrollToLeftOnLeave:y,isScrollable:c}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Yr(n){"@babel/helpers - typeof";return Yr=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Yr(n)}var oA=/^\s+/,uA=/\s+$/;function ue(n,e){if(n=n||"",e=e||{},n instanceof ue)return n;if(!(this instanceof ue))return new ue(n,e);var t=sA(n);this._originalInput=n,this._r=t.r,this._g=t.g,this._b=t.b,this._a=t.a,this._roundA=Math.round(100*this._a)/100,this._format=e.format||t.format,this._gradientType=e.gradientType,this._r<1&&(this._r=Math.round(this._r)),this._g<1&&(this._g=Math.round(this._g)),this._b<1&&(this._b=Math.round(this._b)),this._ok=t.ok}ue.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},getLuminance:function(){var e=this.toRgb(),t,r,a,i,l,o;return t=e.r/255,r=e.g/255,a=e.b/255,t<=.03928?i=t/12.92:i=Math.pow((t+.055)/1.055,2.4),r<=.03928?l=r/12.92:l=Math.pow((r+.055)/1.055,2.4),a<=.03928?o=a/12.92:o=Math.pow((a+.055)/1.055,2.4),.2126*i+.7152*l+.0722*o},setAlpha:function(e){return this._a=Yf(e),this._roundA=Math.round(100*this._a)/100,this},toHsv:function(){var e=as(this._r,this._g,this._b);return{h:e.h*360,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=as(this._r,this._g,this._b),t=Math.round(e.h*360),r=Math.round(e.s*100),a=Math.round(e.v*100);return this._a==1?"hsv("+t+", "+r+"%, "+a+"%)":"hsva("+t+", "+r+"%, "+a+"%, "+this._roundA+")"},toHsl:function(){var e=rs(this._r,this._g,this._b);return{h:e.h*360,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=rs(this._r,this._g,this._b),t=Math.round(e.h*360),r=Math.round(e.s*100),a=Math.round(e.l*100);return this._a==1?"hsl("+t+", "+r+"%, "+a+"%)":"hsla("+t+", "+r+"%, "+a+"%, "+this._roundA+")"},toHex:function(e){return is(this._r,this._g,this._b,e)},toHexString:function(e){return"#"+this.toHex(e)},toHex8:function(e){return vA(this._r,this._g,this._b,this._a,e)},toHex8String:function(e){return"#"+this.toHex8(e)},toRgb:function(){return{r:Math.round(this._r),g:Math.round(this._g),b:Math.round(this._b),a:this._a}},toRgbString:function(){return this._a==1?"rgb("+Math.round(this._r)+", "+Math.round(this._g)+", "+Math.round(this._b)+")":"rgba("+Math.round(this._r)+", "+Math.round(this._g)+", "+Math.round(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:Math.round(Je(this._r,255)*100)+"%",g:Math.round(Je(this._g,255)*100)+"%",b:Math.round(Je(this._b,255)*100)+"%",a:this._a}},toPercentageRgbString:function(){return this._a==1?"rgb("+Math.round(Je(this._r,255)*100)+"%, "+Math.round(Je(this._g,255)*100)+"%, "+Math.round(Je(this._b,255)*100)+"%)":"rgba("+Math.round(Je(this._r,255)*100)+"%, "+Math.round(Je(this._g,255)*100)+"%, "+Math.round(Je(this._b,255)*100)+"%, "+this._roundA+")"},toName:function(){return this._a===0?"transparent":this._a<1?!1:$A[is(this._r,this._g,this._b,!0)]||!1},toFilter:function(e){var t="#"+ls(this._r,this._g,this._b,this._a),r=t,a=this._gradientType?"GradientType = 1, ":"";if(e){var i=ue(e);r="#"+ls(i._r,i._g,i._b,i._a)}return"progid:DXImageTransform.Microsoft.gradient("+a+"startColorstr="+t+",endColorstr="+r+")"},toString:function(e){var t=!!e;e=e||this._format;var r=!1,a=this._a<1&&this._a>=0,i=!t&&a&&(e==="hex"||e==="hex6"||e==="hex3"||e==="hex4"||e==="hex8"||e==="name");return i?e==="name"&&this._a===0?this.toName():this.toRgbString():(e==="rgb"&&(r=this.toRgbString()),e==="prgb"&&(r=this.toPercentageRgbString()),(e==="hex"||e==="hex6")&&(r=this.toHexString()),e==="hex3"&&(r=this.toHexString(!0)),e==="hex4"&&(r=this.toHex8String(!0)),e==="hex8"&&(r=this.toHex8String()),e==="name"&&(r=this.toName()),e==="hsl"&&(r=this.toHslString()),e==="hsv"&&(r=this.toHsvString()),r||this.toHexString())},clone:function(){return ue(this.toString())},_applyModification:function(e,t){var r=e.apply(null,[this].concat([].slice.call(t)));return this._r=r._r,this._g=r._g,this._b=r._b,this.setAlpha(r._a),this},lighten:function(){return this._applyModification(mA,arguments)},brighten:function(){return this._applyModification(bA,arguments)},darken:function(){return this._applyModification(yA,arguments)},desaturate:function(){return this._applyModification(pA,arguments)},saturate:function(){return this._applyModification(gA,arguments)},greyscale:function(){return this._applyModification(hA,arguments)},spin:function(){return this._applyModification(_A,arguments)},_applyCombination:function(e,t){return e.apply(null,[this].concat([].slice.call(t)))},analogous:function(){return this._applyCombination(wA,arguments)},complement:function(){return this._applyCombination(OA,arguments)},monochromatic:function(){return this._applyCombination(SA,arguments)},splitcomplement:functionLine truncated
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var jA={closable:Boolean,color:{type:String,default:""},content:{type:[String,Function]},default:{type:[String,Function]},disabled:Boolean,icon:{type:Function,default:void 0},maxWidth:{type:[String,Number]},shape:{type:String,default:"square",validator:function(e){return e?["square","round","mark"].includes(e):!0}},size:{type:String,default:"medium",validator:function(e){return e?["small","medium","large"].includes(e):!0}},theme:{type:String,default:"default",validator:function(e){return e?["default","primary","warning","danger","success"].includes(e):!0}},title:{type:String,default:""},variant:{type:String,default:"dark",validator:function(e){return e?["dark","light","outline","light-outline"].includes(e):!0}},onClick:Function,onClose:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Jf=H({name:"TTag",props:jA,setup:function(e){var t=cn("tag"),r=t.globalConfig,a=le("tag"),i=at({CloseIcon:_a}),l=i.CloseIcon,o=Ue(),u=Xn(),c=Bn(),s=c.SIZE,d=un(),f=d.vnode,v=g(function(){return["".concat(a.value),"".concat(a.value,"--").concat(e.theme),"".concat(a.value,"--").concat(e.variant),G(G(G(G({},"".concat(a.value,"--ellipsis"),e.maxWidth),"".concat(a.value,"--close"),e.closable),"".concat(a.value,"--disabled"),e.disabled),s.value[e.size],e.size!=="medium"),e.shape!=="square"&&"".concat(a.value,"--").concat(e.shape)]}),p=g(function(){return b()}),m=g(function(){return e.maxWidth?{maxWidth:isNaN(Number(e.maxWidth))?String(e.maxWidth):"".concat(e.maxWidth,"px")}:{}}),b=function(){var I=e.color,k=e.variant;if(!I)return{};var j=ue(I).getLuminance(),S={color:j>.5?"black":"white"};if((k==="outline"||k==="light-outline")&&(S.borderColor=I),k!=="outline"){var $=function(){var C=ue(I).toRgb(),U=C.r,Z=C.g,J=C.b;return"rgba(".concat(U,", ").concat(Z,", ").concat(J,", 0.1)")};S.backgroundColor=k==="dark"?I:$()}return k!=="dark"&&(S.color=I),S},y=function(I){var k;e.disabled||(k=e.onClick)===null||k===void 0||k.call(e,{e:I})},_=function(){if(!e.closable)return null;var I="".concat(a.value,"__icon-close");return r.value.closeIcon?tn(r.value.closeIcon(tn),{class:I}):h(l,{onClick:function(j){var S,$=j.e;$&&$.stopPropagation(),(S=e.onClose)===null||S===void 0||S.call(e,{e:$})},class:I},null)},O=function(I){if(e.maxWidth){var k=f.props||{};if(Reflect.has(k,"title"))return k.title||void 0;if(I)return I}};return function(){var w=_(),I=u("default","content"),k=o("icon"),j=O(Ye(I)?I:"");return h("div",{class:v.value,style:p.value,onClick:y},[k,h("span",{class:e.maxWidth?"".concat(a.value,"--text"):void 0,style:m.value,title:j},[I]),!e.disabled&&w])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var AA={checked:{type:Boolean,default:void 0},modelValue:{type:Boolean,default:void 0},defaultChecked:Boolean,checkedProps:{type:Object},content:{type:[String,Number,Array,Function]},default:{type:[String,Function]},disabled:Boolean,size:{type:String,default:"medium",validator:function(e){return e?["small","medium","large"].includes(e):!0}},uncheckedProps:{type:Object},value:{type:[String,Number]},onChange:Function,onClick:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var TA=/^Space$/i,MA=/^Enter$/i,ss=/^(Enter|Space)$/i;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function cs(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function fs(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?cs(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):cs(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function NA(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!rt(n)}var Qf=H({name:"TCheckTag",props:AA,setup:function(e){var t=le("tag"),r=Bn(),a=r.SIZE,i=Xn(),l=Xe(e),o=l.checked,u=l.modelValue,c=Pn(o,u,e.defaultChecked,e.onChange,"checked"),s=Se(c,2),d=s[0],f=s[1],v=g(function(){return["".concat(t.value),"".concat(t.value,"--check"),a.value[e.size],G(G({},"".concat(t.value,"--checked"),d.value),"".concat(t.value,"--disabled"),e.disabled)]}),p=g(function(){var O=fs({theme:"primary"},e.checkedProps),w=fs({},e.uncheckedProps);return d.value?O:w}),m=function(w){var I=w.e;if(!e.disabled){var k;(k=e.onClick)===null||k===void 0||k.call(e,{e:I}),f(!d.value,{e:I,value:e.value})}},b=function(w){var I,k=w.code||((I=w.key)===null||I===void 0?void 0:I.trim()),j=TA.test(k)||MA.test(k);j&&(w.preventDefault(),f(!d.value,{e:w,value:e.value}))},y=function(w){w.currentTarget.addEventListener("keydown",b)},_=function(w){w.currentTarget.removeEventListener("keydown",b)};return function(){var O=i("default","content");return h(Jf,je({class:v.value,disabled:e.disabled,tabindex:e.disabled?void 0:"0",onFocus:y,onBlur:_},p.value,{onClick:m}),NA(O)?O:{default:function(){return[O]}})}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var DA={checkedProps:{type:Object},multiple:Boolean,options:{type:Array},uncheckedProps:{type:Object},value:{type:Array,default:void 0},modelValue:{type:Array,default:void 0},defaultValue:{type:Array,default:function(){return[]}},onChange:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function BA(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!rt(n)}var FA=H({name:"TCheckTagGroup",props:DA,setup:function(e,t){var r=Xe(e),a=r.value,i=r.modelValue,l=r.options,o=le("check-tag-group"),u=g(function(){return[o.value]}),c=Pn(a,i,e.defaultValue,e.onChange),s=Se(c,2),d=s[0],f=s[1],v=function(b,y){var _=y.value;if(b)e.multiple?f(d.value.concat(_),{e:y.e,type:"check",value:_}):f([_],{e:y.e,type:"check",value:_});else{var O=[];e.multiple&&(O=d.value.filter(function(w){return w!==_})),f(O,{e:y.e,type:"uncheck",value:_})}},p=function(b){return t.slots.option?t.slots.option(b):t.slots.label?t.slots.label(b):b.label?qe(b.label)?b.label(tn):b.label:b.content&&qe(b.content)?b.content(tn):b.default&&qe(b.default)?b.default(tn):b.value};return function(){return h("div",{class:u.value},[(l.value||[]).map(function(m){var b;return h(Qf,{key:m.value,value:m.value,checkedProps:e.checkedProps,uncheckedProps:e.uncheckedProps,checked:d.value.includes(m.value),onChange:v,disabled:m.disabled,size:m.size,"data-value":m.value},BA(b=p(m))?b:{default:function(){return[b]}})})])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var ds=Ze(Jf);Ze(Qf);Ze(FA);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function vs(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Ct(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?vs(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):vs(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function LA(n){var e=Ue(),t=le(),r=Xe(n),a=r.value,i=r.modelValue,l=r.onRemove,o=r.max,u=r.minCollapsedNum,c=r.size,s=r.tagProps,d=r.getDragProps,f=Pn(a,i,n.defaultValue||[],n.onChange),v=Se(f,2),p=v[0],m=v[1],b=L(),y=$n(),_=Fn(),O=function(P){var C,U=On(p.value),Z=U.splice(P.index,1),J=Se(Z,1),N=J[0];m(U,Ct(Ct({trigger:"tag-remove"},P),{},{item:N})),(C=l.value)===null||C===void 0||C.call(l,Ct(Ct({},P),{},{item:N,trigger:"tag-remove",value:U}))},w=function(P){m([],{trigger:"clear",e:P.e})},I=function(P,C){var U,Z,J=P?String(P).trim():"",N=o&&((U=p.value)===null||U===void 0?void 0:U.length)>=o.value,z=p.value;!N&&J&&(z=p.value instanceof Array?p.value.concat(String(J)):[J],m(z,{trigger:"enter",index:z.length-1,item:J,e:C.e})),n==null||(Z=n.onEnter)===null||Z===void 0||Z.call(n,z,Ct(Ct({},C),{},{inputValue:P}))},k=function(P){!p.value||!p.value.length||(b.value=P)},j=function(P,C){var U=C.e;if(!(!p.value||!p.value.length||U.key==="Process"||_.value)){var Z=/(Backspace|NumpadDelete)/i.test(U.code)||/(Backspace|NumpadDelete)/i.test(U.key);if(!P&&Z){var J,N=p.value.length-1,z=p.value[N],V="backspace",ne=p.value.slice(0,-1);m(ne,{e:U,index:N,item:z,trigger:V}),(J=l.value)===null||J===void 0||J.call(l,{e:U,index:N,item:z,trigger:V,value:ne})}b.value=P}},S=function(P){var C,U=P.displayNode,Z=P.label,J=u.value?p.value.slice(0,u.value):p.value,N=U?[U]:(J==null||(C=J.map)===null||C===void 0?void 0:C.call(J,function(ne,M){var A,F=e("tag",{params:{value:ne}});return h(ds,je({key:"".concat(ne).concat(M),size:c.value,disabled:y.value,onClose:function(K){return O({e:K.e,index:M})},closable:!_.value&&!y.value},(A=d.value)===null||A===void 0?void 0:A.call(d,M,ne),s.value),{default:function(){return[F??ne]}})}))||[];if([null,void 0,""].includes(Z)||N.unshift(h("div",{class:"".concat(t.value,"-tag-input__prefix"),key:"label"},[Z])),J.length!==(p.value||[]).length){var z=p.value.length-J.length,V=e("collapsedItems",{params:{value:p.value,count:p.value.length-u.value,collapsedTags:p.value.slice(u.value,p.value.length),collapsedSelectedItems:p.value.slice(u.value,p.value.length),onClose:O}});N.push(V??h(ds,je({key:"more",size:c.value},s.value),{default:function(){return["+",z]}}))}return N};return{tagValue:p,clearAll:w,onClose:O,onInnerEnter:I,onInputBackspaceKeyUp:k,onInputBackspaceKeyDown:j,renderLabel:S}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function VA(n){var e=n.disabled,t=n.readonly,r=n.onMouseenter,a=n.onMouseleave,i=L(!1),l=function(c){t||e||(i.value=!0,r==null||r(c))},o=function(c){t||e||(i.value=!1,a==null||a(c))};return{isHover:i,addHover:l,cancelHover:o}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function RA(n){var e=n.sortOnDraggable,t=n.onDragSort,r=n.onDragOverCheck,a=L(-1),i=L(null),l=L(null),o=pr({nodeX:0,nodeWidth:0,mouseX:0}),u=function(p,m,b){if(p.preventDefault(),!(a.value===m||a.value===-1)){var y=p.target;if(!(r!=null&&r.targetClassNameRegExp&&!(r!=null&&r.targetClassNameRegExp.test(y.className)))){if(r!=null&&r.x&&y){if(!o.nodeWidth)return;var _=y.getBoundingClientRect(),O=_.x,w=_.width,I=O+w/2,k=p.clientX-(o.mouseX-o.nodeX),j=k+o.nodeWidth,S=!1;if(k>O&&k<O+w?S=k<I:S=j>I,!S)return}t==null||t({currentIndex:a.value,current:i,target:b,targetIndex:m}),a.value=m}}};if(!e)return{};function c(v,p,m){a.value=p,i.value=m;var b=v.target;if(r&&b){var y=b.getBoundingClientRect(),_=y.x,O=y.width;o.nodeX=_,o.nodeWidth=O,o.mouseX=v.clientX}}function s(){l.value=!0}function d(){l.value,l.value=!1,a.value=-1,i.value=null}function f(v,p){return e?{draggable:!0,onDragstart:function(b){c(b,v,p)},onDragover:function(b){u(b,v,p)},onDrop:function(){s()},onDragend:function(){d()}}:{}}return{onDragStart:c,onDragOver:u,onDrop:s,onDragEnd:d,getDragProps:f,dragging:a.value!==-1}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function ps(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function ot(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?ps(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):ps(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var zA=function(){return{NAME_CLASS:le("tag-input"),CLEAR_CLASS:le("tag-input__suffix-clear"),BREAK_LINE_CLASS:le("tag-input--break-line")}},HA=H({name:"TTagInput",props:ot({},iA),setup:function(e){var t=zA(),r=t.NAME_CLASS,a=t.CLEAR_CLASS,i=t.BREAK_LINE_CLASS,l=at({CloseCircleFilledIcon:yf}),o=l.CloseCircleFilledIcon,u=$n(),c=Fn(),s=Xe(e),d=s.inputValue,f=s.inputProps,v=pt(d,e.defaultInputValue,e.onInputChange,"inputValue"),p=Se(v,2),m=p[0],b=p[1],y=Xe(e),_=y.excessTagsDisplayType,O=y.clearable,w=y.placeholder,I=VA({readonly:c.value,disabled:u.value,onMouseenter:e.onMouseenter,onMouseleave:e.onMouseleave}),k=I.isHover,j=I.addHover,S=I.cancelHover,$=L(!1),P=cn(),C=P.classPrefix,U=L(!1),Z=RA(ot(ot({},e),{},{sortOnDraggable:e.dragSort,onDragOverCheck:{x:!0,targetClassNameRegExp:new RegExp("^".concat(C.value,"-tag"))}})),J=Z.getDragProps,N=lA(e),z=N.scrollToRight,V=N.onWheel,ne=N.scrollToRightOnEnter,M=N.scrollToLeftOnLeave,A=N.tagInputRef,F=N.isScrollable,W=LA(pr(ot(ot({},Xe(e)),{},{getDragProps:J}))),K=W.tagValue,B=W.onInnerEnter,T=W.onInputBackspaceKeyUp,R=W.onInputBackspaceKeyDown,x=W.clearAll,Y=W.renderLabel,re=W.onClose,ve=g(function(){var be=!(Re(K.value)&&K.value.length);return[r.value,G(G(G({},i.value,_.value==="break-line"),"".concat(C.value,"-is-empty"),be),"".concat(C.value,"-tag-input--with-tag"),!be)]}),we=g(function(){var be;return(be=K.value)!==null&&be!==void 0&&be.length?"":w.value}),$e=g(function(){var be;return!!(!c.value&&!u.value&&O.value&&k.value&&(!((be=K.value)===null||be===void 0)&&be.length||m.value))}),pe=function(ke,Te){var Fe,rn;(Fe=Te.e)===null||Fe===void 0||(rn=Fe.preventDefault)===null||rn===void 0||rn.call(Fe),b("",{e:Te.e,trigger:"enter"}),!$.value&&B(ke,Te),an(function(){z(),$.value=!1})},he=function(ke,Te){var Fe,rn;$.value=!0,(Fe=f.value)===null||Fe===void 0||(rn=Fe.onCompositionstart)===null||rn===void 0||rn.call(Fe,ke,Te)},_e=function(ke,Te){var Fe,rn;$.value=!1,(Fe=f.value)===null||Fe===void 0||(rn=Fe.onCompositionend)===null||rn===void 0||rn.call(Fe,ke,Te)},Ne=function(ke){var Te;u.value||(U.value=!0,A.value.focus(),(Te=e.onClick)===null||Te===void 0||Te.call(e,ke))},Ae=function(ke){var Te;x(ke),b("",{e:ke.e,trigger:"clear"}),(Te=e.onClear)===null||Te===void 0||Te.call(e,ke)},Ie=function(){A.value.focus()},ln=function(){A.value.blur()},ie=function(ke){j(ke),ne()},te=function(ke){S(ke),M()},Oe=function(ke,Te){var Fe;U.value||(U.value=!0,(Fe=e.onFocus)===null||Fe===void 0||Fe.call(e,K.value,{e:Te.e,inputValue:ke}))},me=function(ke,Te){var Fe;U.value=!1,b("",{e:Te.e,trigger:"blur"}),(Fe=e.onBlur)===null||Fe===void 0||Fe.call(e,K.value,{e:Te.e,inputValue:ke})},ye=function(ke,Te){b(ke,ot(ot({},Te),{},{trigger:"input"}))};return fe(function(){return F.value},function(be){if(e.excessTagsDisplayType==="scroll"){var ke="".concat(C.value,"-input__prefix"),Te=A.value.$el.querySelector(".".concat(ke));be?Te.classList.add("".concat(ke,"--scrollable")):Te.classList.remove("".concat(ke,"--scrollable"))}}),{CLEAR_CLASS:a,CloseCircleFilledIcon:o,tagValue:K,tInputValue:m,isHover:k,tagInputPlaceholder:we,showClearIcon:$e,tagInputRef:A,classPrefix:C,isFocused:U,focus:Ie,blur:ln,setTInputValue:b,onMouseEnter:ie,onMouseLeave:te,onInnerFocus:Oe,onInnerBlur:me,onInnerChange:ye,addHover:j,cancelHover:S,onInputEnter:pe,onInnerEnter:B,onInputBackspaceKeyUp:T,onInputBackspaceKeyDown:R,renderLabel:Y,onWheel:V,scrollToRightOnEnter:ne,scrollToLeftOnLeave:M,onClick:Ne,onClearClick:Ae,onClose:re,onInputCompositionstart:he,onInputCompositionend:_e,classes:ve,isDisabled:u,isReadonly:c}},render:function(){var e=this,t,r=this.CloseCircleFilledIcon,a=this.showClearIcon?h(r,{class:this.CLEAR_CLASS,onClick:this.onClearClick},null):Zn(this,"suffixIcon"),i=Zn(this,"prefixIcon"),l="".concat(this.classPrefix,"-tag-input__with-suffix-icon");a&&!this.classes.includes(l)&&this.classes.push(l);var o=Zn(this,"valueDisplay",{params:{value:this.tagValue,onClose:function(f){return e.onClose({index:f})}}}),u=Zn(this,"label",{silent:!0}),c=this.inputProps,s=this.isReadonly||(c==null?void 0:c.readonly);return h(Qi,je({ref:"tagInputRef",borderless:this.borderless,readonly:s,showInput:!s||!this.tagValue||!((t=this.tagValue)!==null&&t!==void 0&&t.length),value:this.tInputValue,autoWidth:!0,size:this.size,disabled:this.isDisabled,label:function(){return e.renderLabel({displayNode:o,label:u})},class:this.classes,tips:this.tips,status:this.status,placeholder:thisLine truncated
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var KA=Ze(HA);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var UA=["tips"];function gs(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function kn(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?gs(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):gs(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var WA={label:"label",key:"key",children:"children"};function GA(n,e,t){var r=Xe(n),a=r.inputValue,i=le(),l=L(),o=L(n.autofocus),u=pt(a,n.defaultInputValue,n.onInputChange,"inputValue"),c=Se(u,2),s=c[0],d=c[1],f=$n(),v=Fn(),p=g(function(){return kn(kn({},WA),n.keys)}),m=g(function(){return n.value instanceof Array?n.value.map(function(j){return Ee(j)?j[p.value.label]:j}):Ee(n.value)?[n.value[p.value.label]]:[n.value]}),b=g(function(){return!m.value||!m.value.length?n.placeholder:""}),y=function(S,$){var P;if($.trigger==="tag-remove"){var C;(C=$.e)===null||C===void 0||C.stopPropagation()}(P=n.onTagChange)===null||P===void 0||P.call(n,S,$)},_=function(S,$){$.trigger==="enter"||$.trigger==="blur"||d(S,{trigger:$.trigger,e:$.e})},O=function(S,$){var P,C,U=(P=t.value)===null||P===void 0?void 0:P.getOverlayState();U!=null&&U.hover||(o.value=!1,(C=n.onBlur)===null||C===void 0||C.call(n,n.value,kn(kn({},$),{},{tagInputValue:S})))},w=function(S,$){var P,C,U=(P=t.value)===null||P===void 0?void 0:P.getOverlayState();if(!(o.value||U!=null&&U.hover)){o.value=!0;var Z=kn(kn({},$),{},{tagInputValue:S});(C=n.onFocus)===null||C===void 0||C.call(n,n.value,Z)}},I=function(S,$){var P,C=kn(kn({},$),{},{tagInputValue:S});(P=n.onEnter)===null||P===void 0||P.call(n,n.value,C)},k=function(S){var $=kn(kn({},S.commonInputProps),{},{tagProps:n.tagProps,label:n.label,autoWidth:n.autoWidth,readonly:v.value,placeholder:b.value,minCollapsedNum:n.minCollapsedNum,collapsedItems:n.collapsedItems,tag:n.tag,value:m.value,valueDisplay:n.valueDisplay,inputValue:S.popupVisible&&S.allowInput?s.value:"",inputProps:kn({readonly:!n.allowInput||v.value,inputClass:G({},"".concat(i.value,"-input--focused"),S.popupVisible)},n.inputProps),suffixIcon:!f.value&&n.loading?function(){return h(ya,{loading:!0,size:"small"},null)}:n.suffixIcon},n.tagInputProps),P=e.slots;P.tips;var C=wr(P,UA);return h(KA,je({ref:l},$,{onInputChange:_,onChange:y,onClear:S.onInnerClear,onBlur:O,onEnter:I,onFocus:w}),C)};return{tags:m,tPlaceholder:b,tagInputRef:l,isMultipleFocus:o,multipleInputValue:s,renderSelectMultiple:k}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function hs(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function ms(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?hs(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):hs(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var XA=1e3,qA=0;function YA(n){var e=Xe(n),t=e.popupProps,r=e.autoWidth,a=L(!1),i=$n(),l=Fn(),o=function(f,v){var p=v.scrollHeight>v.offsetHeight?qA:0,m=v.offsetWidth+p>=f.offsetWidth?v.offsetWidth:f.offsetWidth,b={};return t.value&&nn(t.value.overlayInnerStyle)==="object"&&!t.value.overlayInnerStyle.width&&(b=t.value.overlayInnerStyle),ms({width:"".concat(Math.min(m,XA),"px")},b)},u=function(f,v){if(!(i.value||l.value)){var p=v.trigger==="trigger-element-click"&&n.allowInput?!0:f;if(n.popupVisible!==p){var m;a.value=p,(m=n.onPopupVisibleChange)===null||m===void 0||m.call(n,p,v)}}},c=function(f,v){var p;return ms({width:"".concat(Math.max(f.offsetWidth,v.offsetWidth),"px")},(p=t.value)===null||p===void 0?void 0:p.overlayInnerStyle)},s=g(function(){var d,f={},v=((d=t.value)===null||d===void 0?void 0:d.overlayInnerStyle)||{};return qe(v)||Ee(v)&&v.width?f=v:r.value?f=c:f=o,f});return{tOverlayInnerStyle:s,innerPopupVisible:a,onInnerPopupVisibleChange:u}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function bs(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Vn(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?bs(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):bs(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var ZA=function(){return{NAME_CLASS:le("select-input"),BASE_CLASS_BORDERLESS:le("select-input--borderless"),BASE_CLASS_MULTIPLE:le("select-input--multiple"),BASE_CLASS_POPUP_VISIBLE:le("select-input--popup-visible"),BASE_CLASS_EMPTY:le("select-input--empty")}},JA=H({name:"TSelectInput",props:Vn(Vn({},Qj),{},{valueDisplayOptions:{type:Object}}),setup:function(e,t){var r=ZA(),a=r.NAME_CLASS,i=r.BASE_CLASS_BORDERLESS,l=r.BASE_CLASS_MULTIPLE,o=r.BASE_CLASS_POPUP_VISIBLE,u=r.BASE_CLASS_EMPTY,c=le(),s=Ue(),d=L(),f=L(),v=Xe(e),p=v.multiple,m=v.value,b=v.popupVisible,y=v.borderless,_=YA(e),O=_.tOverlayInnerStyle,w=_.innerPopupVisible,I=_.onInnerPopupVisibleChange,k=aA(e,t,f),j=k.isSingleFocus,S=k.commonInputProps,$=k.onInnerClear,P=k.renderSelectSingle,C=GA(e,t,f),U=C.isMultipleFocus,Z=C.tagInputRef,J=C.renderSelectMultiple,N=g(function(){return e.multiple?U.value:j.value}),z=g(function(){var M;return["".concat(a.value),G(G(G(G({},l.value,p.value),i.value,y.value),o.value,(M=b.value)!==null&&M!==void 0?M:w.value),u.value,m.value instanceof Array?!m.value.length:!m.value)]}),V=function(A){var F,W=A.code||((F=A.key)===null||F===void 0?void 0:F.trim());if(/(ArrowDown|ArrowUp)/.test(W)&&!b.value){var K,B=Vn(Vn({},t),{},{trigger:"trigger-element-focus"});(K=e.onPopupVisibleChange)===null||K===void 0||K.call(e,!0,B)}};fe([N],function(M){var A=Se(M,1),F=A[0];b.value||(F?d.value.addEventListener("keydown",V):d.value.removeEventListener("keydown",V))}),Me(function(){!b.value&&N&&d.value.addEventListener("keydown",V)}),Wn(function(){var M;(M=d.value)===null||M===void 0||M.removeEventListener("keydown",V)});var ne=function(A){var F,W;(F=A.e)===null||F===void 0||F.stopPropagation(),!(A.e.target.tabIndex>=0)&&e.multiple&&((W=Z.value)===null||W===void 0||W.focus())};return{classPrefix:c,NAME_CLASS:a,innerPopupVisible:w,commonInputProps:S,tOverlayInnerStyle:O,selectInputRef:d,popupRef:f,classes:z,onInnerClear:$,renderTNodeJSX:s,renderSelectSingle:P,renderSelectMultiple:J,onOverlayClick:ne,onInnerPopupVisibleChange:I}},render:function(){var e,t,r=this,a={visible:(e=this.popupVisible)!==null&&e!==void 0?e:this.innerPopupVisible},i=h(Hf,je({ref:"popupRef",trigger:((t=this.popupProps)===null||t===void 0?void 0:t.trigger)||"click",placement:"bottom-left"},a,{content:this.panel,hideEmptyPopup:!0},Vn(Vn({onVisibleChange:this.onInnerPopupVisibleChange,onOverlayClick:this.onOverlayClick},this.popupProps),{},{overlayInnerStyle:this.tOverlayInnerStyle})),Vn({default:function(){return[r.multiple?r.renderSelectMultiple({commonInputProps:r.commonInputProps,onInnerClear:r.onInnerClear,popupVisible:a.visible,allowInput:r.allowInput}):r.renderSelectSingle(a.visible)]}},Vn(Vn({},this.$slots),{},{content:this.$slots.panel}))),l=this.renderTNodeJSX("tips"),o=["".concat(this.classPrefix,"-input__tips"),"".concat(this.classPrefix,"-tips"),"".concat(this.classPrefix,"-is-").concat(this.status)];return h("div",{ref:"selectInputRef",class:this.classes},[i,l&&h("div",{class:o},[l])])}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var QA=Ze(JA);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var eT={checkAll:Boolean,content:{type:[String,Function]},default:{type:[String,Function]},disabled:Boolean,label:{type:String,default:""},title:{type:String,default:""},value:{type:[String,Number]}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var nT={checkAll:Boolean,checked:{type:Boolean,default:void 0},modelValue:{type:Boolean,default:void 0},defaultChecked:Boolean,default:{type:[String,Function]},disabled:{type:Boolean,default:void 0},indeterminate:Boolean,label:{type:[String,Function]},lazyLoad:Boolean,name:{type:String,default:""},readonly:{type:Boolean,default:void 0},title:{type:String,default:""},value:{type:[String,Number,Boolean]},onChange:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var ed=Symbol("CheckboxGroupProvide");/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function nd(n,e,t,r){if(typeof window>"u")return null;if(!window||!window.IntersectionObserver)return t(),null;var a=null;try{a=new window.IntersectionObserver(function(i){var l=i[0];l.isIntersecting&&(t(),a.unobserve(n))},{rootMargin:"0px 0px ".concat(r,"px 0px"),root:e}),a.observe(n)}catch(i){console.error(i),t()}return a}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function tT(n,e){var t=L(),r=L(!0),a=function(){if(e.value){r.value=!1;var l=nd(n.value,null,function(){r.value=!0},0);t.value=l}};return Me(a),fe([e,n],a),Wn(function(){e.value&&t.value.unobserve(n.value)}),{showCheckbox:r}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function rT(n){var e=function(i){var l=ss.test(i.key)||ss.test(i.code);if(l){i.preventDefault();var o=i.currentTarget.querySelector("input"),u=o.disabled;!u&&n(i)}},t=function(i){i.currentTarget.addEventListener("keydown",e)},r=function(i){i.currentTarget.removeEventListener("keydown",e)};return{onCheckboxFocus:t,onCheckboxBlur:r}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function ys(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function _s(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?ys(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):ys(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var td=H({name:"TCheckbox",props:_s(_s({},nT),{},{needRipple:Boolean,stopLabelTrigger:Boolean,index:Number,data:Object}),setup:function(e){var t=L();e.needRipple&&Li(t);var r=Bn(),a=r.STATUS,i=Xe(e),l=i.checked,o=i.modelValue,u=i.lazyLoad,c=Pn(l,o,e.defaultChecked,e.onChange,"checked"),s=Se(c,2),d=s[0],f=s[1],v=vn(ed,void 0),p=L();fe(function(){return[e.name,v==null?void 0:v.value.name].join("_")},function(){var V=e.name||(v==null?void 0:v.value.name);V&&(p.value=V)},{immediate:!0});var m=L(!1),b=function(){var ne=e.value,M=e.checkAll;return M?v==null?void 0:v.value.isCheckAll:v!=null&&v.value?v.value.checkedValues.includes(ne):d.value};fe(function(){var V;return[d.value,v==null?void 0:v.value.isCheckAll,v==null||(V=v.value.checkedValues)===null||V===void 0?void 0:V.join(",")]},function(){m.value=b()},{immediate:!0});var y=g(function(){return!e.checkAll&&!m.value&&v!==null&&v!==void 0&&v.value.maxExceeded?!0:null}),_=g(function(){return v==null?void 0:v.value.disabled}),O=$n({beforeDisabled:y,afterDisabled:_}),w=g(function(){return v==null?void 0:v.value.readonly}),I=Fn({afterReadonly:w}),k=L(!1);fe(function(){return[e.checkAll,e.indeterminate,v==null?void 0:v.value.indeterminate]},function(){k.value=e.checkAll?v==null?void 0:v.value.indeterminate:e.indeterminate},{immediate:!0});var j=le("checkbox"),S=L({});fe([m,O,k],function(){S.value=["".concat(j.value),G(G(G({},a.value.checked,m.value),a.value.disabled,O.value),a.value.indeterminate,k.value)]},{immediate:!0});var $=function(ne){if(!I.value){var M=!m.value;f(M,{e:ne}),v!=null&&v.value.handleCheckboxChange&&v.value.onCheckedChange({checked:M,checkAll:e.checkAll,e:ne,option:e})}},P=Xn(),C=function(ne){e.stopLabelTrigger&&ne.preventDefault()},U=tT(t,u),Z=U.showCheckbox,J=rT($),N=J.onCheckboxFocus,z=J.onCheckboxBlur;return function(){var V=Ye(e.title)&&e.title?e.title:null;return h("label",{ref:t,class:S.value,tabindex:O.value?void 0:"0",onFocus:N,onBlur:z,title:V},[Z.value?[h("input",{type:"checkbox",tabindex:"-1",class:"".concat(j.value,"__former"),disabled:O.value,readonly:I.value,indeterminate:k.value,name:p.value,value:e.value?e.value:void 0,checked:m.value,onChange:$,key:"input"},null),h("span",{class:"".concat(j.value,"__input"),key:"input-span"},null),h("span",{class:"".concat(j.value,"__label"),key:"label",onClick:C},[P("default","label")])]:null])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var aT={disabled:{type:Boolean,default:void 0},lazyLoad:Boolean,max:{type:Number,default:void 0},name:{type:String,default:""},options:{type:Array},readonly:{type:Boolean,default:void 0},value:{type:Array,default:void 0},modelValue:{type:Array,default:void 0},defaultValue:{type:Array,default:function(){return[]}},onChange:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var iT=H({name:"TCheckboxGroup",props:aT,setup:function(e){var t=le("checkbox-group"),r=Ue(),a=Array.isArray,i=Xe(e),l=i.value,o=i.modelValue,u=Pn(l,o,e.defaultValue,e.onChange),c=Se(u,2),s=c[0],d=c[1],f=L([]),v=g(function(){if(!a(s.value))return 0;var j=f.value.map(function($){return $.value}),S=ci(s.value,j);return S.length}),p=g(function(){var j=f.value.filter(function($){return!$.disabled&&!$.readonly&&!$.checkAll}).map(function($){return $.value}),S=ci(j,s.value);return S.length===j.length}),m=g(function(){return!p.value&&v.value<f.value.length&&v.value!==0}),b=g(function(){return!ur(e.max)&&s.value.length===e.max});gr(function(){if(!e.options)return[];f.value=e.options.map(function(j){return Ee(j)?j:{label:String(j),value:j}})});var y=function(){for(var S=new Set,$=0,P=f.value.length;$<P;$++){var C=f.value[$];if(!C.checkAll&&!C.disabled&&!C.readonly&&(S.add(C.value),b.value))break}return On(S)},_=function(S,$){var P=S?y():[];d(P,{e:$.e,type:S?"check":"uncheck",current:void 0,option:void 0})},O=function(S){var $=S.option.value;if(!a(s.value)){console.warn("TDesign CheckboxGroup Warn: `value` must be an array, instead of ".concat(nn(s.value)));return}var P=On(s.value);if(S.checked)P.push($);else{var C=P.indexOf($);P.splice(C,1)}d(P,{e:S.e,current:S.option.value,option:S.option,type:S.checked?"check":"uncheck"})},w=function(S){var $=S.checked,P=S.checkAll,C=S.e;P?_($,{e:C}):O(S)},I=Sf(),k=function(){var S=I("Checkbox"),$=[];return S==null||S.forEach(function(P){var C=P.props;C&&((C["check-all"]===""||C["check-all"]===!0)&&(C.checkAll=!0),$.push(C))}),$};return et(ed,g(function(){return{name:e.name,isCheckAll:p.value,checkedValues:s.value||[],maxExceeded:b.value,disabled:e.disabled,readonly:e.readonly,indeterminate:m.value,handleCheckboxChange:O,onCheckedChange:w}})),function(){var j,S=null;if((j=e.options)!==null&&j!==void 0&&j.length){var $;S=($=f.value)===null||$===void 0?void 0:$.map(function(C,U){var Z;return h(td,je({key:"".concat(C.value||"").concat(U),lazyLoad:e.lazyLoad},C,{index:U,checked:(Z=s.value)===null||Z===void 0?void 0:Z.includes(C.value),data:C}),null)})}else{var P=r("default");f.value=k(),S=P}return h("div",{class:t.value,role:"group","aria-label":"checkbox-group"},[S])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var lT=Ze(td);Ze(iT);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function oT(n,e){var t=typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(!t){if(Array.isArray(n)||(t=uT(n))||e){t&&(n=t);var r=0,a=function(){};return{s:a,n:function(){return r>=n.length?{done:!0}:{done:!1,value:n[r++]}},e:function(c){throw c},f:a}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var i,l=!0,o=!1;return{s:function(){t=t.call(n)},n:function(){var c=t.next();return l=c.done,c},e:function(c){o=!0,i=c},f:function(){try{l||t.return==null||t.return()}finally{if(o)throw i}}}}function uT(n,e){if(n){if(typeof n=="string")return Os(n,e);var t={}.toString.call(n).slice(8,-1);return t==="Object"&&n.constructor&&(t=n.constructor.name),t==="Map"||t==="Set"?Array.from(n):t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?Os(n,e):void 0}}function Os(n,e){(e==null||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}var $a=Symbol("selectProvide"),di=function(e,t){var r=t.value.get(e);return(r==null?void 0:r.label)||(e==null?void 0:e.toString())},sT=function(e,t){var r=[],a=oT(e),i;try{for(a.s();!(i=a.n()).done;){var l=i.value,o=di(l,t);o&&r.push(o)}}catch(u){a.e(u)}finally{a.f()}return r},rd=function(e,t){var r=Mi(e),a=r.indexOf(t);return a<0?r.push(t):r.splice(a,1),{value:r,isCheck:a<0}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Cs(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function ws(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Cs(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Cs(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function cT(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!rt(n)}var vi=H({name:"TOption",props:ws(ws({},eT),{},{createAble:Boolean,multiple:Boolean,index:Number,rowIndex:Number,trs:Map,scrollType:String,isVirtual:Boolean,bufferSize:Number,checkAll:Boolean}),emits:["row-mounted"],setup:function(e,t){var r=vn($a),a=$n(),i=un(),l=i.vnode,o=g(function(){return r.value.max!==0&&r.value.max<=r.value.selectValue.length}),u=g(function(){return a.value||e.multiple&&o.value&&!b.value&&!r.value.isCheckAll}),c=Xn(),s=le("select"),d=Bn(),f=d.STATUS,v=d.SIZE,p=L(),m=L(!1),b=g(function(){return r.value.isCheckAll&&!e.disabled?!0:e.multiple?r.value.selectValue.includes(e.value):r.value.selectValue===e.value}),y=g(function(){return e.checkAll?r.value.indeterminate:!1}),_=g(function(){return["".concat(s.value,"-option"),[v.value[r.value.size]],G(G(G({},f.value.disabled,u.value),f.value.selected,b.value),"".concat(s.value,"-option__hover"),(m.value||r.value.hoverIndex===e.index)&&!u.value)]}),O=g(function(){return e.label||e.value}),w=function(S){if(!(e.disabled||u.value)){if(e.multiple){I(!b.value,{e:S}),S.preventDefault();return}if(e.createAble){var $,P;if(($=(P=r.value).handleCreate)===null||$===void 0||$.call(P,e.value),r.value.multiple){r.value.handleValueChange([].concat(On(r.value.selectValue),[e.value]),{selectedOptions:r.value.getSelectedOptions(),trigger:"check",e:S});return}}var C=r.value.getSelectedOptions(e.value);r.value.handleValueChange(e.value,{option:C==null?void 0:C[0],selectedOptions:C,trigger:"check",e:S}),r.value.handlePopupVisibleChange(!1,{e:S}),r.value.emitBlur(S)}},I=function(S,$){if(e.checkAll){r.value.onCheckAllChange(S);return}var P=rd(r.value.selectValue,e.value),C=r.value.getSelectedOptions(P.value);r.value.handleValueChange(P.value,{option:C.find(function(U){return U.value===e.value}),selectedOptions:C,trigger:S?"check":"uncheck",e:$.e})},k=function(){var S=l.props||{};return Reflect.has(S,"title")?e.title:typeof O.value=="string"?O.value:null};return Me(function(){var j=e.trs,S=e.rowIndex,$=e.isVirtual;$&&(j.set(S,p.value),t.emit("row-mounted"))}),Wn(function(){if(e.isVirtual){var j=e.trs,S=e.rowIndex;j.delete(S)}}),Li(p),function(){var j=c("default","content")||O.value;return h("li",{ref:p,class:_.value,title:k(),onMouseenter:function(){return m.value=!0},onMouseleave:function(){return m.value=!1},onClick:w},[r&&e.multiple?h(lT,{checked:b.value,disabled:u.value,onChange:I,indeterminate:y.value},cT(j)?j:{default:function(){return[j]}}):h("span",null,[j])])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var fT={divider:{type:Boolean,default:!0},label:{type:String,default:""}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Ss(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function dT(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Ss(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Ss(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var ad=H({name:"TOptionGroup",props:dT({},fT),setup:function(e){var t=vn($a),r=le("select-option-group"),a=Bn(),i=a.SIZE,l=Ue(),o=g(function(){return[r.value,i.value[t.value.size],G({},"".concat(r.value,"__divider"),e.divider)]});return function(){return h("li",{class:o.value},[h("div",{class:"".concat(r.value,"__header")},[e.label]),l("default")])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var gn={autoWidth:Boolean,autofocus:Boolean,borderless:Boolean,clearable:Boolean,collapsedItems:{type:Function},creatable:Boolean,disabled:{type:Boolean,default:void 0},empty:{type:[String,Function]},filter:{type:Function},filterable:Boolean,inputProps:{type:Object},inputValue:{type:[String,Number],default:void 0},defaultInputValue:{type:[String,Number]},keys:{type:Object},label:{type:[String,Function]},loading:Boolean,loadingText:{type:[String,Function]},max:{type:Number,default:0},minCollapsedNum:{type:Number,default:0},multiple:Boolean,options:{type:Array},panelBottomContent:{type:[String,Function]},panelTopContent:{type:[String,Function]},placeholder:{type:String,default:void 0},popupProps:{type:Object},popupVisible:{type:Boolean,default:void 0},defaultPopupVisible:Boolean,prefixIcon:{type:Function},readonly:{type:Boolean,default:void 0},reserveKeyword:Boolean,scroll:{type:Object},selectInputProps:{type:Object},showArrow:{type:Boolean,default:!0},size:{type:String,default:"medium",validator:function(e){return e?["small","medium","large"].includes(e):!0}},status:{type:String,default:"default",validator:function(e){return e?["default","success","warning","error"].includes(e):!0}},suffix:{type:[String,Function]},suffixIcon:{type:Function},tagInputProps:{type:Object},tagProps:{type:Object},tips:{type:[String,Function]},value:{type:[String,Number,Boolean,Object,Array],default:void 0},modelValue:{type:[String,Number,Boolean,Object,Array],default:void 0},defaultValue:{type:[String,Number,Boolean,Object,Array],default:void 0},valueDisplay:{type:[String,Function]},valueType:{type:String,default:"value",validator:function(e){return e?["value","object"].includes(e):!0}},onBlur:Function,onChange:Function,onClear:Function,onCreate:Function,onEnter:Function,onFocus:Function,onInputChange:Function,onPopupVisibleChange:Function,onRemove:Function,onSearch:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var vT=function(e){var t,r,a,i,l,o=g(function(){var $,P,C;return(($=e.scroll)===null||$===void 0?void 0:$.type)==="virtual"&&((P=e.options.value)===null||P===void 0?void 0:P.length)>(((C=e.scroll)===null||C===void 0?void 0:C.threshold)||100)}),u=((t=e.scroll)===null||t===void 0?void 0:t.type)==="virtual"?wI({container:e.popupContentRef,data:e.options,fixedHeight:((r=e.scroll)===null||r===void 0?void 0:r.isFixedRowHeight)||!1,lineHeight:((a=e.scroll)===null||a===void 0?void 0:a.rowHeight)||28,bufferSize:((i=e.scroll)===null||i===void 0?void 0:i.bufferSize)||20,threshold:((l=e.scroll)===null||l===void 0?void 0:l.threshold)||100}):{},c=u.trs,s=c===void 0?null:c,d=u.visibleData,f=d===void 0?null:d,v=u.handleScroll,p=v===void 0?null:v,m=u.scrollHeight,b=m===void 0?null:m,y=u.translateY,_=y===void 0?null:y,O=u.handleRowMounted,w=O===void 0?null:O,I=-1,k=function(P){if(o.value){var C=P.target,U=C.scrollTop;Math.abs(I-U)>5?(p(),I=U):I=-1}};Me(function(){var $;($=e.popupContentRef.value)===null||$===void 0||$.addEventListener("scroll",k)}),Wn(function(){var $;($=e.popupContentRef.value)===null||$===void 0||$.removeEventListener("scroll",k)});var j=g(function(){return{position:"absolute",width:"1px",height:"1px",transition:"transform 0.2s",transform:"translate(0, ".concat(b.value,"px)"),"-ms-transform":"translate(0, ".concat(b.value,"px)"),"-moz-transform":"translate(0, ".concat(b.value,"px)"),"-webkit-transform":"translate(0, ".concat(b.value,"px)")}}),S=g(function(){return{transform:"translate(0, ".concat(_.value,"px)"),"-ms-transform":"translate(0, ".concat(_.value,"px)"),"-moz-transform":"translate(0, ".concat(_.value,"px)"),"-webkit-transform":"translate(0, ".concat(_.value,"px)")}});return{trs:s,scrollHeight:b,translateY:_,visibleData:f,handleRowMounted:w,isVirtual:o,cursorStyle:j,panelStyle:S}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function pT(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!rt(n)}var gT=H({name:"TSelectPanel",props:{inputValue:gn.inputValue,panelTopContent:gn.panelTopContent,panelBottomContent:gn.panelBottomContent,empty:gn.empty,creatable:gn.creatable,loading:gn.loading,loadingText:gn.loadingText,multiple:gn.multiple,filterable:gn.filterable,filter:gn.filter,scroll:gn.scroll,size:gn.size},setup:function(e,t){var r=t.expose,a=le("select"),i=Ue(),l=gf(),o=cn("select"),u=o.t,c=o.globalConfig,s=vn($a),d=L(null),f=g(function(){return s.value.popupContentRef.value}),v=g(function(){return e.creatable&&e.filterable&&e.inputValue}),p=g(function(){return s.value.displayOptions}),m=vT({scroll:e.scroll,popupContentRef:f,options:p}),b=m.trs,y=m.visibleData,_=m.handleRowMounted,O=m.isVirtual,w=m.panelStyle,I=m.cursorStyle,k=g(function(){return!p.value.length}),j=function(){return h("ul",{class:["".concat(a.value,"__create-option"),"".concat(a.value,"__list")]},[h(vi,{value:e.inputValue,label:"".concat(e.inputValue),createAble:!0,class:"".concat(a.value,"__create-option--special")},null)])},S=function(U){return h("ul",{class:"".concat(a.value,"__list")},[U.map(function(Z,J){var N,z;if(Z.group){var V;return h(ad,{label:Z.group,divider:Z.divider},pT(V=S(Z.children))?V:{default:function(){return[V]}})}return h(vi,je(wa(Z,"index","$index","className","tagName"),O.value?{rowIndex:Z.$index,trs:b,scrollType:(N=e.scroll)===null||N===void 0?void 0:N.type,isVirtual:O.value,bufferSize:(z=e.scroll)===null||z===void 0?void 0:z.bufferSize,key:"".concat(Z.$index||"","_").concat(J,"_").concat(Z.value)}:{key:"".concat(J,"_").concat(Z.value)},{index:J,multiple:e.multiple,onRowMounted:_}),Z.slots)})])},$=g(function(){return{small:"s",medium:"m",large:"l"}[s.value.size]});r({innerRef:d,visibleData:y,isVirtual:O,displayOptions:p});var P=function(U,Z){return h("div",{ref:d,class:["".concat(a.value,"__dropdown-inner"),"".concat(a.value,"__dropdown-inner--size-").concat($.value)],style:Z},[v.value&&j(),e.loading&&l("loadingText",{defaultNode:h("div",{class:"".concat(a.value,"__loading-tips")},[u(c.value.loadingText)])}),!e.loading&&k.value&&!v.value&&l("empty",{defaultNode:h("div",{class:"".concat(a.value,"__empty")},[u(c.value.empty)])}),!k.value&&S(U)])};return{renderPanel:P,panelStyle:w,cursorStyle:I,isVirtual:O,displayOptions:p,visibleData:y,renderTNodeJSX:i}},render:function(){return this.isVirtual?h(xe,null,[this.renderTNodeJSX("panelTopContent"),h("div",null,[h("div",{style:this.cursorStyle},null),this.renderPanel(this.visibleData,this.panelStyle)]),this.renderTNodeJSX("panelBottomContent")]):h(xe,null,[this.renderTNodeJSX("panelTopContent"),this.renderPanel(this.displayOptions),this.renderTNodeJSX("panelBottomContent")])}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Dr(n,e){var t=typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(!t){if(Array.isArray(n)||(t=hT(n))||e){t&&(n=t);var r=0,a=function(){};return{s:a,n:function(){return r>=n.length?{done:!0}:{done:!1,value:n[r++]}},e:function(c){throw c},f:a}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var i,l=!0,o=!1;return{s:function(){t=t.call(n)},n:function(){var c=t.next();return l=c.done,c},e:function(c){o=!0,i=c},f:function(){try{l||t.return==null||t.return()}finally{if(o)throw i}}}}function hT(n,e){if(n){if(typeof n=="string")return $s(n,e);var t={}.toString.call(n).slice(8,-1);return t==="Object"&&n.constructor&&(t=n.constructor.name),t==="Map"||t==="Set"?Array.from(n):t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?$s(n,e):void 0}}function $s(n,e){(e==null||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}function Ps(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function yn(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Ps(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Ps(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var mT=function(e,t,r){var a=Sf(),i=L([]),l=g(function(){var s,d=0,f=((s=e.options)===null||s===void 0?void 0:s.map(function(C){var U=function(J){var N=t.value,z=N.value,V=N.label,ne=N.disabled,M=yn(yn({},J),{},{index:d,label:It(J,V),value:It(J,z),disabled:It(J,ne)||!1});return d++,M};return C.group&&C.children?yn(yn({},C),{},{children:C.children.map(function(Z){return U(Z)})}):U(C)}))||[],v=a("Option"),p=a("OptionGroup");if(Re(p)){var m=Dr(p),b;try{for(m.s();!(b=m.n()).done;){var y,_=b.value,O=yn(yn({group:(y=_.props)===null||y===void 0?void 0:y.label},_.props),{},{children:[]}),w=a("Option",_.children);if(Re(w)){var I=Dr(w),k;try{for(I.s();!(k=I.n()).done;){var j=k.value;O.children.push(yn(yn({},j.props),{},{slots:j.children,index:d})),d++}}catch(C){I.e(C)}finally{I.f()}f.push(O)}}}catch(C){m.e(C)}finally{m.f()}}if(Re(v)){var S=Dr(v),$;try{for(S.s();!($=S.n()).done;){var P=$.value;f.push(yn(yn({},P.props),{},{slots:P.children,index:d})),d++}}catch(C){S.e(C)}finally{S.f()}}return f}),o=g(function(){var s=[],d=function(v){var p=Dr(v),m;try{for(p.s();!(m=p.n()).done;){var b=m.value;b.group?d(b.children):s.push(b)}}catch(y){p.e(y)}finally{p.f()}};return d(l.value),s}),u=g(function(){var s=new Map;return i.value.concat(o.value).forEach(function(d){s.set(d.value,d)}),s}),c=g(function(){if(e.onSearch&&e.filterable||!r.value||!(e.filterable||qe(e.filter)))return l.value;var s=function(v){var p,m;return qe(e.filter)?e.filter("".concat(r.value),v):((p=v.label)===null||p===void 0||(m=p.toLowerCase)===null||m===void 0?void 0:m.call(p).indexOf("".concat(r.value).toLowerCase()))>-1},d=[];return l.value.forEach(function(f){f.group&&f.children&&d.push(yn(yn({},f),{},{children:f.children.filter(s)})),s(f)&&d.push(f)}),d});return{options:l,optionsMap:u,optionsList:o,optionsCache:i,displayOptions:c}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function bT(n){var e=n.displayOptions,t=n.optionsList,r=n.innerPopupVisible,a=n.setInnerPopupVisible,i=n.selectPanelRef,l=n.isFilterable,o=n.isRemoteSearch,u=n.getSelectedOptions,c=n.setInnerValue,s=n.innerValue,d=n.popupContentRef,f=n.multiple,v=n.max,p=L(-1),m=L([]),b=L([]),y=le(),_=function(w){var I,k,j=e.value.length,S=p.value;switch(w.code){case"ArrowUp":w.preventDefault(),p.value===-1?S=0:p.value===0||p.value>e.value.length-1?S=j-1:S--,(I=t.value[S])!==null&&I!==void 0&&I.disabled&&S--,p.value=S;break;case"ArrowDown":w.preventDefault(),p.value===-1||p.value>=j-1?S=0:S++,(k=t.value[S])!==null&&k!==void 0&&k.disabled&&S++,p.value=S;break;case"Enter":if(p.value===-1)break;var $=i.value.isVirtual&&l.value&&b.value.length?b.value:o.value?t.value:m.value;if($.length||($=t.value),!r.value){a(!0,{e:w});break}if(f){var C;if(p.value===-1)return;var U=(C=$[p.value])===null||C===void 0?void 0:C.value;if(!U)return;var Z=rd(s.value,U);if(v>0&&Z.value.length>v)return;var J=u(Z.value);c(Z.value,{option:J.find(function(N){return N.value==U}),selectedOptions:J,trigger:Z.isCheck?"check":"uncheck",e:w}),m.value=[]}else{var P=u($[p.value].value);c($[p.value].value,{option:P==null?void 0:P[0],selectedOptions:u($[p.value].value),trigger:"check",e:w}),a(!1,{e:w})}break;case"Escape":a(!1,{e:w});break}};return fe(r,function(O){O&&(p.value=-1,b.value=[],m.value=[])}),fe(p,function(O){var w,I=(w=i.value)===null||w===void 0||(w=w.innerRef)===null||w===void 0||(w=w.querySelector(".".concat(y.value,"-select-option")))===null||w===void 0?void 0:w.clientHeight,k=I*O;d.value.scrollTo({top:k,behavior:"smooth"})}),{hoverIndex:p,handleKeyDown:_,virtualFilteredOptions:b,filteredOptions:m}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var yT=["overlayClassName"];function _T(n,e){var t=typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(!t){if(Array.isArray(n)||(t=OT(n))||e){t&&(n=t);var r=0,a=function(){};return{s:a,n:function(){return r>=n.length?{done:!0}:{done:!1,value:n[r++]}},e:function(c){throw c},f:a}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var i,l=!0,o=!1;return{s:function(){t=t.call(n)},n:function(){var c=t.next();return l=c.done,c},e:function(c){o=!0,i=c},f:function(){try{l||t.return==null||t.return()}finally{if(o)throw i}}}}function OT(n,e){if(n){if(typeof n=="string")return ks(n,e);var t={}.toString.call(n).slice(8,-1);return t==="Object"&&n.constructor&&(t=n.constructor.name),t==="Map"||t==="Set"?Array.from(n):t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?ks(n,e):void 0}}function ks(n,e){(e==null||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}function xs(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function xn(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?xs(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):xs(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var CT=H({name:"TSelect",props:xn(xn({},gn),{},{valueDisplayOptions:{type:Object}}),setup:function(e,t){var r=t.slots,a=le(),i=$n(),l=Fn(),o=Ue(),u=le("select"),c=cn("select"),s=c.globalConfig,d=c.t,f=Xe(e),v=f.popupVisible,p=f.inputValue,m=f.modelValue,b=f.value,y=pt(p,e.defaultInputValue,e.onInputChange,"inputValue"),_=Se(y,2),O=_[0],w=_[1],I=Pn(b,m,e.defaultValue,e.onChange),k=Se(I,2),j=k[0],S=k[1],$=L(null),P=L(null),C=g(function(){var ge,oe,se;return{label:((ge=e.keys)===null||ge===void 0?void 0:ge.label)||"label",value:((oe=e.keys)===null||oe===void 0?void 0:oe.value)||"value",disabled:((se=e.keys)===null||se===void 0?void 0:se.disabled)||"disabled"}}),U=mT(e,C,O),Z=U.optionsMap,J=U.optionsList,N=U.optionsCache,z=U.displayOptions,V=g(function(){return j.value===void 0?e.multiple?[]:void 0:e.valueType==="object"?e.multiple?j.value.map(function(ge){return ge[C.value.value]}):j.value[C.value.value]:j.value}),ne=function(oe,se){if(e.valueType==="object"){var Ce=C.value,Be=Ce.value,De=Ce.label,Qe=function(yt){if(yt!==void 0){var xr=Z.value.get(yt);return G(G({},Be,It(xr,Be)),De,It(xr,De))}};oe=e.multiple?oe.map(function(en){return Qe(en)}):Qe(oe)}oe!==j.value&&(e.multiple&&!e.reserveKeyword&&w(""),S(oe,xn({selectedOptions:$e(oe)},se)))},M=pt(v,!1,function(ge,oe){var se;(se=e.onPopupVisibleChange)===null||se===void 0||se.call(e,ge,oe)},"popupVisible"),A=Se(M,2),F=A[0],W=A[1],K=g(function(){var ge;return(ge=!e.multiple&&F.value&&di(V.value,Z)||e.placeholder)!==null&&ge!==void 0?ge:d(s.value.placeholder)}),B=g(function(){return e.multiple?sT(V.value,Z):di(V.value,Z)}),T=g(function(){var ge=e.multiple&&Re(V.value)?V.value.map(function(Ce){var Be;return{value:Ce,label:(Be=Z.value.get(Ce))===null||Be===void 0?void 0:Be.label}}):V.value,oe={value:ge,onClose:e.multiple?function(Ce){return Y(Ce)}:function(){}};if(e.multiple||Object.assign(oe,{label:B.value}),e.minCollapsedNum&&e.multiple){var se;return xn(xn({},oe),{},{displayValue:ge==null||(se=ge.slice)===null||se===void 0?void 0:se.call(ge,0,e.minCollapsedNum)})}return oe}),R=g(function(){return!!(e.filterable||s.value.filterable||qe(e.filter))}),x=g(function(){return!!((e.filterable||s.value.filterable)&&qe(e.onSearch))}),Y=function(oe,se){var Ce,Be=Mi(V.value),De=Be[oe];Be.splice(oe,1),ne(Be,{selectedOptions:$e(Be),trigger:"tag-remove",e:se}),(Ce=e.onRemove)===null||Ce===void 0||Ce.call(e,{value:De,data:Z.value.get(De),e:se})},re=function(){var oe;O.value&&((oe=e.onCreate)===null||oe===void 0||oe.call(e,O.value),F.value||w(""))},ve=g(function(){var ge;return(ge=P.value)===null||ge===void 0?void 0:ge.popupRef.getOverlay()}),we=g(function(){return J.value.filter(function(ge){return!ge.disabled&&!ge["check-all"]&&!ge.checkAll})}),$e=function(){var oe=arguments.length>0&&arguments[0]!==void 0?arguments[0]:V.value;return J.value.filter(function(se){if(!se.checkAll)return Re(oe)?oe.includes(se.value):oe===se.value})},pe=bT({displayOptions:z,optionsList:J,innerPopupVisible:F,setInnerPopupVisible:W,selectPanelRef:$,isFilterable:R,isRemoteSearch:x,getSelectedOptions:$e,setInnerValue:ne,innerValue:V,popupContentRef:ve,multiple:e.multiple,max:e.max}),he=pe.hoverIndex,_e=pe.virtualFilteredOptions,Ne=pe.handleKeyDown,Ae=pe.filteredOptions,Ie=function(oe){if(e.multiple){var se=oe?we.value.map(function(Ce){return Ce.value}):[];ne(se,{selectedOptions:$e(se),trigger:oe?"check":"clear"})}},ln=g(function(){var ge=we.value.map(function(se){return se.value}),oe=ci(V.value,ge);return oe.length}),ie=g(function(){return ln.value===we.value.length}),te=g(function(){return!ie.value&&ln.value!==0}),Oe=g(function(){return{max:e.max,multiple:e.multiple,hoverIndex:he.value,selectValue:V.value,reserveKeyword:e.reserveKeyword,handleValueChange:ne,handlerInputChange:w,handlePopupVisibleC
Line truncated
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var wT=Ze(CT);Ze(vi);Ze(ad);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var ST={append:{type:[String,Function]},prepend:{type:[String,Function]}};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var $T=H({name:"TInputAdornment",inheritAttrs:!1,props:ST,setup:function(e,t){var r=t.slots,a=le("input-adornment"),i=Ue(),l=function(u,c,s){var d,f=Ye(s)||Kn(s);return!r[c]&&Ye(s)&&!s?null:(r[c]?r[c](null).length===1&&typeof r[c](null)[0].children=="string"?d=h("span",{class:"".concat(a.value,"__text")},[r[c](null)]):d=r[c](null):qe(s)?d=s(u):d=f?h("span",{class:"".concat(a.value,"__text")},[s]):s,d&&h("span",{class:"".concat(a.value,"__").concat(c)},[d]))};return function(){var o=l(tn,"prepend",e.prepend),u=l(tn,"append",e.append),c=i("default")||[null],s=[a.value,G(G({},"".concat(a.value,"--prepend"),o),"".concat(a.value,"--append"),u)];return!o&&!u?c[0]:h("div",{class:s},[o,c[0],u])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var PT=Ze($T);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var kT={current:{type:Number,default:void 0},modelValue:{type:Number,default:void 0},defaultCurrent:{type:Number,default:1},disabled:Boolean,foldedMaxPageBtn:{type:Number,default:5},maxPageBtn:{type:Number,default:10},pageEllipsisMode:{type:String,default:"mid",validator:function(e){return e?["mid","both-ends"].includes(e):!0}},pageSize:{type:Number,default:void 0},defaultPageSize:{type:Number,default:10},pageSizeOptions:{type:Array,default:function(){return[5,10,20,50]}},selectProps:{type:Object},showFirstAndLastPageBtn:Boolean,showJumper:Boolean,showPageNumber:{type:Boolean,default:!0},showPageSize:{type:Boolean,default:!0},showPreviousAndNextBtn:{type:Boolean,default:!0},size:{type:String,default:"medium",validator:function(e){return e?["small","medium"].includes(e):!0}},theme:{type:String,default:"default",validator:function(e){return e?["default","simple"].includes(e):!0}},total:{type:Number,default:0},totalContent:{type:[Boolean,Function],default:!0},onChange:Function,onCurrentChange:Function,onPageSizeChange:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function xT(n,e,t,r){var a=Bn(),i=a.SIZE,l=a.STATUS,o=g(function(){var O=Math.ceil(n.total/t.value);return O>0?O:1}),u=g(function(){return["".concat(r.value),i.value[n.size],G(G({},l.value.disabled,n.disabled),"".concat(r.value,"-ie"),Ti()<11),n.theme==="simple"?"".concat(r.value,"--simple"):""]}),c=g(function(){return["".concat(r.value,"__total")]}),s=g(function(){return["".concat(r.value,"__select")]}),d=g(function(){return["".concat(r.value,"__btn"),"".concat(r.value,"__btn-prev"),G({},l.value.disabled,n.disabled||e.value===1)]}),f=g(function(){return["".concat(r.value,"__btn"),"".concat(r.value,"__btn-next"),G({},l.value.disabled,n.disabled||e.value===o.value)]}),v=g(function(){return["".concat(r.value,"__pager")]}),p=g(function(){return["".concat(r.value,"__number"),"".concat(r.value,"__number--more"),G({},l.value.disabled,n.disabled)]}),m=g(function(){return["".concat(r.value,"__jump")]}),b=g(function(){return["".concat(r.value,"__input")]}),y=g(function(){return["".concat(r.value,"__select")]}),_=function(w){return["".concat(r.value,"__number"),G(G({},l.value.disabled,n.disabled),l.value.current,e.value===w)]};return{pageCount:o,paginationClass:u,totalClass:c,sizerClass:s,preBtnClass:d,nextBtnClass:f,btnWrapClass:v,btnMoreClass:p,jumperClass:m,jumperInputClass:b,simpleClass:y,getButtonClass:_}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function IT(n,e,t){var r=L(!1),a=L(!1),i=g(function(){return Math.ceil((n.foldedMaxPageBtn-1)/2)}),l=g(function(){return Math.floor((n.foldedMaxPageBtn-1)/2)}),o=g(function(){return 2+i.value<t.value}),u=g(function(){return e.value-1-l.value>t.value});return{prevMore:r,nextMore:a,curPageLeftCount:i,curPageRightCount:l,isPrevMoreShow:o,isNextMoreShow:u}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var ET=Kn;function jT(n){return ET(n)&&n!=+n}var AT=jT,TT=["pageCount"],ut=1,MT=H({name:"TPagination",props:kT,setup:function(e){var t=un(),r=t.emit,a=Xe(e),i=a.modelValue,l=a.pageSize,o=a.current,u=Ue(),c=Pn(o,i,e.defaultCurrent,e.onCurrentChange,"current"),s=Se(c,2),d=s[0],f=s[1],v=pt(l,e.defaultPageSize,e.onPageSizeChange,"pageSize"),p=Se(v,2),m=p[0],b=p[1],y=cn("pagination"),_=y.t,O=y.globalConfig,w=le("pagination"),I=at({PageFirstIcon:gk,PageLastIcon:mk,ChevronLeftIcon:Ri,ChevronRightIcon:mf,ChevronLeftDoubleIcon:XP,ChevronRightDoubleIcon:ZP,EllipsisIcon:ik}),k=I.PageFirstIcon,j=I.PageLastIcon,S=I.ChevronLeftIcon,$=I.ChevronRightIcon,P=I.ChevronLeftDoubleIcon,C=I.ChevronRightDoubleIcon,U=I.EllipsisIcon,Z=xT(e,d,m,w),J=Z.pageCount,N=wr(Z,TT),z=IT(e,J,d),V=z.prevMore,ne=z.isPrevMoreShow,M=z.curPageLeftCount,A=z.nextMore,F=z.isNextMoreShow,W=z.curPageRightCount,K=L(d.value),B=g(function(){return J.value>e.maxPageBtn}),T=g(function(){var $e=e.pageSizeOptions,pe=$e.map(function(he){return Ee(he)?he:{label:_(O.value.itemsPerPage,{size:he}),value:Number(he)}});return pe.sort(function(he,_e){return he.value-_e.value})}),R=g(function(){return e.pageEllipsisMode==="mid"}),x=g(function(){var $e=[],pe,he;if(B.value)if(ne.value&&F.value)pe=d.value-M.value,he=d.value+W.value;else{var _e=R.value?2:1,Ne=R.value?J.value-1:J.value;ne.value?pe=Math.min(d.value-1,J.value-e.foldedMaxPageBtn+1):pe=_e,F.value?he=Math.max(d.value+1,e.foldedMaxPageBtn):he=Ne}else pe=1,he=J.value;for(var Ae=pe;Ae<=he;Ae++)$e.push(Ae);return $e});fe(function(){return J.value},function(){d.value>J.value&&(d.value=1)}),fe(function(){return d.value},function($e){return K.value=$e});var Y=function(pe,he){if(!e.disabled){var _e=pe;if(pe<ut?_e=ut:pe>J.value&&(_e=J.value),d.value!==_e){var Ne=d.value;if(he=he||{current:_e,previous:Ne,pageSize:m.value},he){var Ae;f(_e,he),(Ae=e.onChange)===null||Ae===void 0||Ae.call(e,he)}else r("update:modelValue",_e)}}},re=function(pe){var he={prevPage:function(){return Y(d.value-1)},nextPage:function(){return Y(d.value+1)},prevMorePage:function(){return Y(Math.max(2,d.value-e.foldedMaxPageBtn))},nextMorePage:function(){return Y(Math.min(d.value+e.foldedMaxPageBtn,J.value-1))}};he[pe]()},ve=function(pe){if(!e.disabled){var he=parseInt(pe,10),_e=1;he>0&&(_e=Math.max(Math.ceil(e.total/he),1));var Ne=!1;d.value>_e&&(Ne=!0);var Ae={current:Ne?_e:d.value,previous:d.value,pageSize:he};if(b(he,Ae),Ne)Y(_e,Ae);else{var Ie;(Ie=e.onChange)===null||Ie===void 0||Ie.call(e,Ae)}}},we=function(pe){var he=Math.trunc(+pe);AT(he)||(K.value=he,Y(he))};return function(){var $e=e.total,pe=e.pageSizeOptions,he=e.size,_e=e.disabled,Ne=e.showPageSize;if(J.value<1)return null;var Ae=h("div",{class:N.jumperClass.value},[_(O.value.jumpTo),h(PT,{append:"/ ".concat(J.value," ").concat(_(O.value.page))},{default:function(){return[h(tj,{class:N.jumperInputClass.value,modelValue:K.value,"onUpdate:modelValue":function(ie){return K.value=ie},onBlur:we,onEnter:we,max:J.value,min:ut,size:he,disabled:_e,theme:"normal",placeholder:""},null)]}})]);return h("div",{class:N.paginationClass.value},[u("totalContent",h("div",{class:N.totalClass.value},[_(O.value.total,{total:$e})])),Ne&&pe.length>0&&h(wT,je({size:he,value:m,disabled:_e,class:N.sizerClass.value,autoWidth:!0,onChange:ve,options:T.value},e.selectProps),null),e.showFirstAndLastPageBtn?h("div",{class:N.preBtnClass.value,onClick:function(){return Y(1)},disabled:e.disabled||e.current===ut},[h(k,null,null)]):null,e.showPreviousAndNextBtn?h("div",{class:N.preBtnClass.value,onClick:function(){return re("prevPage")},disabled:_e||d.value===ut},[h(S,null,null)]):null,e.showPageNumber&&e.theme==="default"?h("ul",{class:N.btnWrapClass.value},[B.value&&R.value&&h("li",{class:N.getButtonClass(1),onClick:function(){return Y(ut)}},[ut]),B.value&&ne.value&&R.value?h("li",{class:N.btnMoreClass.value,onClick:function(){return re("prevMorePage")},onMouseOver:function(){return V.value=!0},onMouseOut:function(){return V.value=!1}},[V.value?h(P,null,null):h(U,null,null)]):null,x.value.map(function(Ie){return h("li",{class:N.getButtonClass(Ie),key:Ie,onClick:function(){return Y(Ie)}},[Ie])}),B.value&&F.value&&R.value?h("li",{class:N.btnMoreClass.value,onClick:function(){return re("nextMorePage")},onMouseOver:function(){return A.value=!0},onMouseOut:function(){return A.value=!1}},[A.value?h(C,null,null):h(U,null,null)]):null,B.value&&R.value?h("li",{class:N.getButtonClass(J.value),onClick:function(){return Y(J.value)}},[J.value]):null]):null,e.theme==="simple"&&Ae,e.showPreviousAndNextBtn?h("div",{class:N.nextBtnClass.value,onClick:function(){return re("nextPage")},disabled:_e||d.value===J.value},[h($,null,null)]):null,e.showFirstAndLastPageBtn?h("div",{class:N.nextBtnClass.value,onClick:function(){return Y(J.value)},disabled:_e||d.value===J.value},[h(j,null,null)]):null,e.theme==="default"&&e.showJumper&&Ae])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var NT={disabled:{type:[Boolean,Object]},layout:{type:String,default:"horizontal",validator:function(e){return e?["horizontal","vertical"].includes(e):!0}},showCurrent:{type:Boolean,default:!0},size:{type:String,default:"medium",validator:function(e){return e?["small","medium","large"].includes(e):!0}},tips:{type:Object},variant:{type:String,default:"text",validator:function(e){return e?["text","outline"].includes(e):!0}},onChange:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Is(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function DT(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Is(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Is(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var BT=H({name:"TPaginationMini",props:DT({},NT),setup:function(e){var t=le("pagination-mini"),r=at({ChevronLeftIcon:Ri,RoundIcon:$k,ChevronRightIcon:mf,ChevronUpIcon:bf,ChevronDownIcon:Vi}),a=r.ChevronLeftIcon,i=r.RoundIcon,l=r.ChevronRightIcon,o=r.ChevronUpIcon,u=r.ChevronDownIcon,c=g(function(){return Ee(e.tips)?e.tips:e.tips===!0?{prev:"上一页",current:"当前",next:"下一页"}:{}}),s=g(function(){return Ee(e.disabled)?e.disabled:e.disabled===!0?{prev:!0,current:!0,next:!0}:{prev:!1,current:!1,next:!1}});return function(){var d=[t.value,G({},"".concat(t.value,"--outline"),e.variant==="outline")];return h("div",{class:d},[h(Hn,{title:c.value.prev,variant:e.variant,size:e.size,shape:"square",onClick:function(v){var p;return(p=e.onChange)===null||p===void 0?void 0:p.call(e,{e:v,trigger:"prev"})},icon:e.layout==="horizontal"?function(){return h(a,null,null)}:function(){return h(o,null,null)},class:"".concat(t.value,"__prev"),disabled:s.value.prev},null),e.showCurrent&&h(Hn,{title:c.value.current,variant:e.variant,size:e.size,shape:"square",onClick:function(v){var p;return(p=e.onChange)===null||p===void 0?void 0:p.call(e,{e:v,trigger:"current"})},icon:function(){return h(i,null,null)},class:"".concat(t.value,"__current"),disabled:s.value.current},null),h(Hn,{title:c.value.next,variant:e.variant,size:e.size,shape:"square",onClick:function(v){var p;return(p=e.onChange)===null||p===void 0?void 0:p.call(e,{e:v,trigger:"next"})},icon:e.layout==="horizontal"?function(){return h(l,null,null)}:function(){return h(u,null,null)},class:"".concat(t.value,"__next"),disabled:s.value.next},null)])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var fF=Ze(MT);Ze(BT);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var FT=Yi,LT=Ee,VT="Expected a function";function RT(n,e,t){var r=!0,a=!0;if(typeof n!="function")throw new TypeError(VT);return LT(t)&&(r="leading"in t?!!t.leading:r,a="trailing"in t?!!t.trailing:a),FT(n,e,{leading:r,maxWait:e,trailing:a})}var Es=RT;/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var zT={alt:{type:String,default:""},error:{type:[String,Function]},fallback:{type:String,default:""},fit:{type:String,default:"fill",validator:function(e){return e?["contain","cover","fill","none","scale-down"].includes(e):!0}},gallery:Boolean,lazy:Boolean,loading:{type:[String,Function]},overlayContent:{type:[String,Function]},overlayTrigger:{type:String,default:"always",validator:function(e){return e?["always","hover"].includes(e):!0}},placeholder:{type:[String,Function]},position:{type:String,default:"center"},referrerpolicy:{type:String,default:"strict-origin-when-cross-origin",validator:function(e){return e?["no-referrer","no-referrer-when-downgrade","origin","origin-when-cross-origin","same-origin","strict-origin","strict-origin-when-cross-origin","unsafe-url"].includes(e):!0}},shape:{type:String,default:"square",validator:function(e){return e?["circle","round","square"].includes(e):!0}},src:{type:[String,Object]},srcset:{type:Object},onError:Function,onLoad:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var HT=H({name:"TImage",props:zT,setup:function(e){var t=L(null),r=L(null),a=null,i=Xe(e),l=i.src,o=Ue();Me(function(){var N;if((N=r.value)!==null&&N!==void 0&&N.complete&&!e.lazy&&_(),!(!e.lazy||!t.value)){var z=nd(t.value,null,m,0);a=z}}),Dn(function(){t.value&&a&&a.unobserve(t.value)});var u=cn("image"),c=u.classPrefix,s=u.globalConfig,d=L(l.value);fe([l,s],function(N){var z=Se(N,2),V=z[0],ne=z[1],M=ne||{},A=M.replaceImageSrc,F=qe(A)?A(e):V;F===d.value&&d.value||(d.value=F)},{immediate:!0});var f=Gr(d),v=f.previewUrl;fe([v],function(){O.value=!1,b.value=!1});var p=L(!e.lazy),m=function(){p.value=!0},b=L(!1),y=function(z){var V;b.value=!0,(V=e.onLoad)===null||V===void 0||V.call(e,{e:z})},_=function(){var z=new Event("load");Object.defineProperty(z,"target",{value:r.value,enumerable:!0}),y(z)},O=L(!1),w=function(z){var V;O.value=!0,(V=e.onError)===null||V===void 0||V.call(e,{e:z}),e.fallback&&(d.value=e.fallback,O.value=!1)},I=g(function(){return e.overlayTrigger==="hover"}),k=g(function(){return["".concat(c.value,"-image"),"".concat(c.value,"-image--fit-").concat(e.fit),"".concat(c.value,"-image--position-").concat(e.position)]}),j=L(!I.value),S=function(){I.value&&(j.value=!j.value)},$=function(){var z=o("placeholder");return z?h("div",{class:"".concat(c.value,"-image__placeholder")},[z]):null},P=function(){return e.gallery?h("div",{class:"".concat(c.value,"-image__gallery-shadow")},null):null},C=function(){var z=J("overlayContent");return z?h("div",{class:["".concat(c.value,"-image__overlay-content"),!j.value&&"".concat(c.value,"-image__overlay-content--hidden")]},[z]):null};function U(){return h("picture",null,[Object.entries(e.srcset).map(function(N){var z=Se(N,2),V=z[0],ne=z[1];return h("source",{type:V,srcset:ne},null)}),Z()])}function Z(){var N=Ye(d.value)?d.value:v.value;return h("img",{ref:r,src:N,onError:w,onLoad:y,class:k.value,alt:e.alt,referrerpolicy:e.referrerpolicy},null)}var J=gf();return function(){return h("div",je({ref:t,class:["".concat(c.value,"-image__wrapper"),"".concat(c.value,"-image__wrapper--shape-").concat(e.shape),e.gallery&&"".concat(c.value,"-image__wrapper--gallery"),I.value&&"".concat(c.value,"-image__wrapper--need-hover")],onMouseenter:S,onMouseleave:S},wa(e,["src","alt","fit","position","shape","placeholder","loading","error","overlayTrigger","overlayContent","lazy","gallery","onLoad","onError"])),[$(),P(),(O.value||!p.value)&&h("div",{class:"".concat(c.value,"-image")},null),!(O.value||!p.value)&&(e.srcset&&Object.keys(e.srcset).length?U():Z()),!(O.value||!p.value)&&!b.value&&h("div",{class:"".concat(c.value,"-image__loading")},[o("loading")||h(Ou,{direction:"vertical",size:8,align:"center"},{default:function(){return[h(Cf,{size:"24px"},null),Ye(e.loading)?e.loading:s.value.loadingText]}})]),O.value&&h("div",{class:"".concat(c.value,"-image__error")},[J("error",{defaultNode:h(Ou,{direction:"vertical",size:8,align:"center"},{default:function(){return[h(Of,{size:"24px"},null),Ye(e.error)?e.error:s.value.errorText]}})})]),C()])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var KT=Ze(HT);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var UT=1e3,WT=5e3,GT=1,XT=$E(function n(){var e=this;SE(this,n),G(this,"popupStack",{popup:new Set,dialog:new Set,message:new Set}),G(this,"getNextZIndex",function(t){var r=t==="message"?Array.from(e.popupStack.message).pop()||WT:Array.from(e.popupStack.popup).pop()||UT;return r+GT}),G(this,"add",function(t){var r=e.getNextZIndex(t);return e.popupStack[t].add(r),t==="dialog"&&e.popupStack.popup.add(r),r}),G(this,"delete",function(t,r){e.popupStack[r].delete(t),r==="dialog"&&e.popupStack.popup.delete(t)}),G(this,"isLastDialog",function(t){return e.popupStack.dialog.size>1?t===Array.from(e.popupStack.dialog).pop():!0})}),La=new XT;function id(n){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},t=e.visible,r=e.runOnMounted,a=L(0),i=function(){a.value=La.add(n)},l=function(){La.delete(a.value,n)},o=function(){return La.isLastDialog(a.value)};return fe(function(){return t==null?void 0:t.value},function(u){u?i():l()},{immediate:!0}),r&&(Me(function(){i()}),Wn(function(){l()})),{zIndex:zs(a),open:i,close:l,isLastDialog:o}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function js(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function qT(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?js(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):js(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function YT(n){var e=L(n),t=function(i){var l=i.pageX,o=i.pageY,u=e.value,c=u.translateX,s=u.translateY,d=function(p){var m=p.pageX,b=p.pageY;e.value={translateX:c+m-l,translateY:s+b-o}},f=function(){document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",f)};document.addEventListener("mousemove",d),document.addEventListener("mouseup",f)},r=function(){e.value=qT({},n)};return{transform:e,mouseDownHandler:t,resetTransform:r}}function ZT(){var n=L(1),e=function(){n.value*=-1},t=function(){n.value=1};return{mirror:n,onMirror:e,resetMirror:t}}function JT(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{max:2,min:.5,step:.2},e=n.max,t=n.min,r=n.step,a=n.defaultScale,i=L(a??1),l=Es(function(){var s=dr(i.value,r);c(s)},50),o=Es(function(){var s=vr(i.value,r);c(s)},50),u=function(){i.value=a??1},c=function(d){var f=d;d<t&&(f=t),d>e&&(f=e),i.value=f};return fe(function(){return n},function(){return u()}),{scale:i,onZoomIn:l,onZoomOut:o,resetScale:u}}function QT(){var n=L(0),e=90,t=function(){n.value+=e},r=function(){n.value=0};return{rotate:n,onRotate:t,resetRotate:r}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var ld=H({name:"TImageItem",props:{rotate:Number,scale:Number,mirror:Number,src:[String,Object],placementSrc:[String,Object],isSvg:Boolean},setup:function(e){var t=Xe(e),r=t.src,a=t.placementSrc,i=t.isSvg,l=le(),o=L(!1),u=L(!1),c=YT({translateX:0,translateY:0}),s=c.transform,d=c.mouseDownHandler,f=cn("imageViewer"),v=f.globalConfig,p=v.value.errorText,m=L(),b=g(function(){return{transform:"rotate(".concat(e.rotate,"deg) scale(").concat(e.scale,")"),display:!e.placementSrc||u.value?"block":"none"}}),y=g(function(){return{transform:"rotate(".concat(e.rotate,"deg) scale(").concat(e.scale,")"),display:u.value?"none":"block"}}),_=g(function(){var $=s.value,P=$.translateX,C=$.translateY;return{transform:"translate(".concat(P,"px, ").concat(C,"px) scale(").concat(e.mirror,", 1)")}}),O=function(){o.value=!1,u.value=!1,i.value&&w(k.value)},w=function(){var $=ri(xt.mark(function P(C){var U,Z,J,N,z,V,ne,M,A,F,W,K;return xt.wrap(function(T){for(;;)switch(T.prev=T.next){case 0:return T.next=2,fetch(C);case 2:if(Z=T.sent,Z.ok){T.next=6;break}throw o.value=!0,new Error("Failed to fetch SVG: ".concat(Z.statusText));case 6:return T.next=8,Z.text();case 8:J=T.sent,N=m.value,N.innerHTML="",(U=N.classList)===null||U===void 0||U.add("".concat(l.value,"-image-viewer__modal-image-svg")),z=N.attachShadow({mode:"closed"}),V=document.createElement("div"),V.style.background="var(--td-bg-color-container)",V.style.padding="4px",V.style.borderRadius="4px",V.style.maxHeight="100%",V.style.maxWidth="100%",V.style.boxSizing="border-box",V.style.height="auto",V.innerHTML=J,z.appendChild(V),ne=V.querySelector("svg"),ne&&(M=ne.getAttribute("viewBox"),M?(A=M.split(/[\s\,]/).filter(function(R){return R}).map(parseFloat),F=A[2],V.style.width="".concat(F,"px")):(W=ne.getBBox(),K="".concat(W.x," ").concat(W.y," ").concat(W.width," ").concat(W.height),ne.setAttribute("viewBox",K),V.style.width="".concat(W.width,"px")),ne.style.maxHeight="100%",ne.style.maxWidth="100%",ne.style.height="auto",ne.style.display="block",ne.style.lineHeight="normal"),u.value=!0;case 26:case"end":return T.stop()}},P)}));return function(C){return $.apply(this,arguments)}}(),I=Gr(r),k=I.previewUrl,j=Gr(a),S=j.previewUrl;return fe([k,S],function(){O()}),Me(ri(xt.mark(function $(){return xt.wrap(function(C){for(;;)switch(C.prev=C.next){case 0:if(!i.value){C.next=3;break}return C.next=3,w(k.value);case 3:case"end":return C.stop()}},$)}))),function(){return h("div",{class:"".concat(l.value,"-image-viewer__modal-pic")},[h("div",{class:"".concat(l.value,"-image-viewer__modal-box"),style:_.value},[o.value&&h("div",{class:"".concat(l.value,"-image-viewer__img-error")},[h("div",{class:"".concat(l.value,"-image-viewer__img-error-content")},[h(Of,{size:"4em"},null),h("div",{class:"".concat(l.value,"-image-viewer__img-error-text")},[p])])]),!o.value&&!!e.placementSrc&&S.value&&h("img",{class:"".concat(l.value,"-image-viewer__modal-image"),onMousedown:function(P){P.stopPropagation(),d(P)},src:S.value,style:y.value,alt:"image",draggable:"false"},null),!o.value&&k.value&&!i.value&&h("img",{class:"".concat(l.value,"-image-viewer__modal-image"),onMousedown:function(P){P.stopPropagation(),d(P)},src:k.value,onLoad:function(){return u.value=!0},onError:function(){return o.value=!0},style:b.value,alt:"image",draggable:"false"},null),!o.value&&k.value&&i.value&&h("div",{ref:m,class:"".concat(l.value,"-image-viewer__modal-image"),onMousedown:function(P){P.stopPropagation(),d(P)},"data-alt":"svg",style:b.value,draggable:"false"},null)])])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var Rn=H({name:"TImageModalIcon",props:{disabled:Boolean,onClick:Function,label:String,icon:Function},setup:function(e){var t=le(),r=Ue(),a=g(function(){return["".concat(t.value,"-image-viewer__modal-icon"),G({},"".concat(t.value,"-is-disabled"),e.disabled)]});return function(){return h("div",{class:a.value,onClick:e.onClick},[r("icon"),e.label&&h("span",{class:"".concat(t.value,"-image-viewer__modal-icon-label")},[e.label])])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var eM={attach:{type:[String,Function]},body:{type:[String,Function]},cancelBtn:{type:[String,Object,Function,null]},closeBtn:{type:[String,Boolean,Function],default:!0},closeOnEscKeydown:{type:Boolean,default:void 0},closeOnOverlayClick:{type:Boolean,default:void 0},confirmBtn:{type:[String,Object,Function,null]},confirmLoading:{type:Boolean,default:void 0},confirmOnEnter:Boolean,default:{type:[String,Function]},destroyOnClose:Boolean,dialogClassName:{type:String,default:""},dialogStyle:{type:Object},draggable:Boolean,footer:{type:[Boolean,Function],default:!0},header:{type:[String,Boolean,Function],default:!0},mode:{type:String,default:"modal",validator:function(e){return e?["modal","modeless","normal","full-screen"].includes(e):!0}},placement:{type:String,default:"top",validator:function(e){return e?["top","center"].includes(e):!0}},preventScrollThrough:{type:Boolean,default:!0},showInAttachedElement:Boolean,showOverlay:{type:Boolean,default:!0},theme:{type:String,default:"default",validator:function(e){return e?["default","info","warning","danger","success"].includes(e):!0}},top:{type:[String,Number]},visible:Boolean,width:{type:[String,Number]},zIndex:{type:Number},onBeforeClose:Function,onBeforeOpen:Function,onCancel:Function,onClose:Function,onCloseBtnClick:Function,onClosed:Function,onConfirm:Function,onEscKeydown:Function,onOpened:Function,onOverlayClick:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function As(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function wt(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?As(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):As(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function nM(n){var e=un(),t=Ue(),r=function(c){var s,d=c.globalConfirm,f=c.theme,v=c.globalConfirmBtnTheme,p=((s=wa(v,["info"]))===null||s===void 0?void 0:s[f])||"primary",m={theme:p,size:c.size,onClick:function(y){n.confirmBtnAction(y)}};return Ye(d)?m.content=d:Ee(d)&&(m=wt(wt({},m),d)),m},a=function(c){var s=c.globalCancel,d={theme:"default",size:c.size,onClick:function(v){n.cancelBtnAction(v)}};return Ye(s)?d.content=s:Ee(s)&&(d=wt(wt({},d),s)),d},i=function(c,s){var d=s.defaultButtonProps,f=s.className,v=s.confirmLoading,p=d;return Ye(c)?p.content=c:Ee(c)&&(p=wt(wt({},p),c)),v!==void 0&&(p.loading=v),h(Hn,je({class:f},p),null)},l=function(c){var s=c.confirmBtn,d=c.className,f=c.confirmLoading;if(s===null)return null;s&&e.slots.confirmBtn&&console.warn("Both $props.confirmBtn and $scopedSlots.confirmBtn exist, $props.confirmBtn is preferred.");var v=r(c);return!s&&!e.slots.confirmBtn?h(Hn,je({class:d,loading:f},v),null):s&&["string","object"].includes(nn(s))?i(s,{defaultButtonProps:v,className:d,confirmLoading:f}):t("confirmBtn")},o=function(c){var s=c.cancelBtn,d=c.className;if(s===null)return null;s&&e.slots.cancelBtn&&console.warn("Both $props.cancelBtn and $scopedSlots.cancelBtn exist, $props.cancelBtn is preferred.");var f=a(c);return!s&&!e.slots.cancelBtn?h(Hn,je({class:d},f),null):s&&["string","object"].includes(nn(s))?i(s,{defaultButtonProps:f}):t("cancelBtn")};return{getConfirmBtn:l,getCancelBtn:o}}function tM(n){var e=!1,t=!1,r=function(o){e&&t&&n(o),e=!1,t=!1},a=function(o){e=o.target===o.currentTarget},i=function(o){t=o.target===o.currentTarget};return{onClick:r,onMousedown:a,onMouseup:i}}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function rM(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:document.body;return n===document.body?window.innerWidth-document.documentElement.clientWidth:n.offsetWidth-n.clientWidth}/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Ts(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function Ms(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Ts(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Ts(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}function Ns(n){return Number.isNaN(Number(n))?n:"".concat(Number(n),"px")}var ar,aM=function(e){ar={x:e.clientX,y:e.clientY},setTimeout(function(){ar=null},100)};typeof window<"u"&&window.document&&window.document.documentElement&&document.documentElement.addEventListener("click",aM,!0);function iM(n){var e=n,t=window.innerWidth||document.documentElement.clientWidth,r=window.innerHeight||document.documentElement.clientHeight;e.addEventListener("mousedown",function(a){var i=a.clientX-e.offsetLeft,l=a.clientY-e.offsetTop,o=e.offsetWidth,u=e.offsetHeight;if(o>t||u>r)return;function c(d){var f=d.clientX-i,v=d.clientY-l;f<0&&(f=0),v<0&&(v=0),t-e.offsetWidth-f<0&&(f=t-e.offsetWidth),r-e.offsetHeight-v<0&&(v=r-e.offsetHeight),e.style.position="absolute",e.style.left="".concat(f,"px"),e.style.top="".concat(v,"px")}function s(){document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",s)}document.addEventListener("mousemove",c),document.addEventListener("mouseup",s),document.addEventListener("dragend",s)})}var lM=1,oM=H({name:"TDialog",directives:{draggable:function(e,t){e&&t&&t.value&&iM(e)}},inheritAttrs:!1,props:eM,emits:["update:visible"],setup:function(e,t){var r=this,a=le("dialog"),i=le(),l=Xn(),o=Ue(),u=L(null),c=cn("dialog"),s=c.globalConfig,d=at({CloseIcon:_a,InfoCircleFilledIcon:wf,CheckCircleFilledIcon:hf,ErrorCircleFilledIcon:_f}),f=d.CloseIcon,v=d.InfoCircleFilledIcon,p=d.CheckCircleFilledIcon,m=d.ErrorCircleFilledIcon,b=function(te){var Oe;(Oe=e.onConfirm)===null||Oe===void 0||Oe.call(e,{e:te})},y=function(te){var Oe;(Oe=e.onCancel)===null||Oe===void 0||Oe.call(e,{e:te}),Ne({e:te,trigger:"cancel"})},_=nM({confirmBtnAction:b,cancelBtnAction:y}),O=_.getConfirmBtn,w=_.getCancelBtn,I=Fi(function(){return e.attach});CI();var k=L(),j=L(),S=g(function(){return e.mode==="modal"}),$=g(function(){return e.mode==="modeless"}),P=g(function(){return e.mode==="normal"}),C=g(function(){return e.mode==="full-screen"}),U=g(function(){return e.visible}),Z=g(function(){return["".concat(a.value,"__mask"),!e.showOverlay&&"".concat(i.value,"-is-hidden")]}),J=g(function(){return P.value?[]:C.value?["".concat(a.value,"__position_fullscreen")]:["".concat(a.value,"__position"),!!e.top&&"".concat(a.value,"--top"),"".concat(e.placement&&!e.top?"".concat(a.value,"--").concat(e.placement):"")]}),N=g(function(){return[!P.value&&"".concat(a.value,"__wrap")]}),z=g(function(){if(C.value)return{};var ie=e.top,te={};if(ie!==void 0){var Oe=Ns(ie);te={paddingTop:Oe}}return te}),V=g(function(){var ie=["".concat(a.value),"".concat(a.value,"__modal-").concat(e.theme),$.value&&e.draggable&&"".concat(a.value,"--draggable"),e.dialogClassName];return C.value?ie.push("".concat(a.value,"__fullscreen")):ie.push.apply(ie,["".concat(a.value,"--default"),"".concat(a.value,"--").concat(e.placement)]),ie}),ne=g(function(){return C.value?Ms({},e.dialogStyle):Ms({width:Ns(e.width)},e.dialogStyle)}),M=id("dialog",{visible:U}),A=M.isLastDialog;fe(function(){return e.visible},function(ie){if(ie){var te;(S.value&&!e.showInAttachedElement||C.value)&&(e.preventScrollThrough&&document.body.appendChild(j.value),an(function(){ar&&u.value&&(u.value.style.transformOrigin="".concat(ar.x-u.value.offsetLeft,"px ").concat(ar.y-u.value.offsetTop,"px"))})),(te=document.activeElement)===null||te===void 0||te.blur()}else W();K(ie)});function F(){var ie,te;(ie=j.value.parentNode)===null||ie===void 0||(te=ie.removeChild)===null||te===void 0||te.call(ie,j.value)}function W(){clearTimeout(k.value),k.value=setTimeout(function(){F()},150)}var K=function(te){te?(document.addEventListener("keydown",T),e.confirmOnEnter&&document.addEventListener("keydown",B)):(document.removeEventListener("keydown",T),e.confirmOnEnter&&document.removeEventListener("keydown",B))},B=function(te){var Oe=te.target;if(Oe.tagName.toLowerCase()!=="input"){var me=te.code;if((me==="Enter"||me==="NumpadEnter")&&A()){var ye;(ye=e.onConfirm)===null||ye===void 0||ye.call(e,{e:te})}}},T=function(te){if(te.code==="Escape"&&A()){var Oe,me;(Oe=e.onEscKeydown)===null||Oe===void 0||Oe.call(e,{e:te}),((me=e.closeOnEscKeydown)!==null&&me!==void 0?me:s.value.closeOnEscKeydown)&&Ne({e:te,trigger:"esc"})}},R=function(te){var Oe;if(e.showOverlay&&((Oe=e.closeOnOverlayClick)!==null&&Oe!==void 0?Oe:s.value.closeOnOverlayClick)){var me;(me=e.onOverlayClick)===null||me===void 0||me.call(e,{e:te}),Ne({e:te,trigger:"overlay"})}},x=tM(R),Y=xLine truncated
+        html body {
+          overflow-y: hidden;
+          width: calc(100% - `.concat(te,`px);
+        }
+      `)}),Wn(function(){K(!1),F()}),{COMPONENT_NAME:a,isModal:S,isModeLess:$,isFullScreen:C,maskClass:Z,dialogClass:V,dialogStyle:ne,dialogEle:u,beforeEnter:$e,afterEnter:pe,beforeLeave:he,afterLeave:_e,hasEventOn:Ae,renderDialog:ln,teleportElement:I}},render:function(){var e=this,t=this.COMPONENT_NAME,r=(this.isModal||this.isFullScreen)&&h("div",{key:"mask",class:this.maskClass},null),a=this.renderDialog(),i=[r,a],l={zIndex:this.zIndex},o=["".concat(t,"__ctx"),G(G(G({},"".concat(t,"__ctx--fixed"),this.isModal||this.isFullScreen),"".concat(t,"__ctx--absolute"),this.isModal&&this.showInAttachedElement),"".concat(t,"__ctx--modeless"),this.isModeLess)];return h(ir,{disabled:!this.attach||!this.teleportElement,to:this.teleportElement},{default:function(){return[h(Ft,{duration:300,name:"".concat(t,"-zoom__vue"),onBeforeEnter:e.beforeEnter,onAfterEnter:e.afterEnter,onBeforeLeave:e.beforeLeave,onAfterLeave:e.afterLeave},{default:function(){return[(!e.destroyOnClose||e.visible)&&lr(h("div",je({class:o,style:l},e.$attrs),[i]),[[Jr,e.visible]])]}})]}})}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var uM=Ze(oM);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var nr={attach:{type:[String,Function],default:"body"},closeBtn:{type:[Boolean,Function],default:!0},closeOnEscKeydown:{type:Boolean,default:!0},closeOnOverlay:Boolean,draggable:{type:Boolean,default:void 0},imageScale:{type:Object},images:{type:Array,default:function(){return[]}},index:{type:Number,default:void 0},defaultIndex:{type:Number,default:0},mode:{type:String,default:"modal",validator:function(e){return e?["modal","modeless"].includes(e):!0}},navigationArrow:{type:[Boolean,Function],default:!0},showOverlay:{type:Boolean,default:void 0},title:{type:[String,Function]},trigger:{type:[String,Function]},viewerScale:{type:Object},visible:{type:Boolean,default:void 0},modelValue:{type:Boolean,default:void 0},defaultVisible:Boolean,zIndex:{type:Number},onClose:Function,onIndexChange:Function};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Ds(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function sM(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Ds(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Ds(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var cM=function(e){var t,r,a,i=new Image,l=(e==null||(t=e.split)===null||t===void 0||(t=t.call(e,"?"))===null||t===void 0||(t=t[0])===null||t===void 0||(r=t.split)===null||r===void 0||(r=r.call(t,"#"))===null||r===void 0||(r=r[0])===null||r===void 0||(a=r.split)===null||a===void 0?void 0:a.call(r,"/").pop())||Math.random().toString(32).slice(2);i.setAttribute("crossOrigin","anonymous"),i.onload=function(){var o=document.createElement("canvas");o.width=i.width,o.height=i.height;var u=o.getContext("2d");u.drawImage(i,0,0,i.width,i.height),o.toBlob(function(c){var s=URL.createObjectURL(c),d=document.createElement("a");d.download=l,d.href=s,d.click(),d.remove(),URL.revokeObjectURL(s)})},i.src=e},fM=function(e){return!!e&&!Ye(e)&&!(e instanceof File)},dM=function(e){return Re(e)?e.map(function(t){return fM(t)?sM({download:!0,thumbnail:t.mainImage},t):{mainImage:t,thumbnail:t,download:!0}}):[]},vM=function(e){return e.showOverlay!==void 0?e.showOverlay:e.mode==="modal"};/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var od=H({name:"TImageViewerUtils",props:{scale:Number,onRotate:Function,onZoomIn:Function,onZoomOut:Function,onMirror:Function,onReset:Function,currentImage:{type:Object,default:function(){return{}}}},setup:function(e){var t=le(),r=g(function(){return e.currentImage.mainImage}),a=Gr(r),i=a.previewUrl,l=cn("imageViewer"),o=l.globalConfig;return function(){return h("div",{class:"".concat(t.value,"-image-viewer__utils")},[h("div",{class:"".concat(t.value,"-image-viewer__utils-content")},[h(Da,{overlayClassName:"".concat(t.value,"-image-viewer__utils--tip"),content:o.value.mirrorTipText,destroyOnClose:!0,placement:"top",showArrow:!0,theme:"default"},{default:function(){return[h(Rn,{onClick:e.onMirror,icon:function(){return h(vk,{size:"medium"},null)}},null)]}}),h(Da,{overlayClassName:"".concat(t.value,"-image-viewer__utils--tip"),content:o.value.rotateTipText,destroyOnClose:!0,placement:"top",showArrow:!0,theme:"default"},{default:function(){return[h(Rn,{onClick:e.onRotate,icon:function(){return h(wk,{size:"medium"},null)}},null)]}}),h(Rn,{icon:function(){return h(Ik,{size:"medium"},null)},onClick:e.onZoomOut},null),h(Rn,{class:"".concat(t.value,"-image-viewer__utils-scale"),size:"medium",label:"".concat(qr(String(e.scale*100)),"%")},null),h(Rn,{icon:function(){return h(kk,{size:"medium"},null)},onClick:e.onZoomIn},null),h(Da,{overlayClassName:"".concat(t.value,"-image-viewer__utils--tip"),content:o.value.originalSizeTipText,destroyOnClose:!0,placement:"top",showArrow:!0,theme:"default"},{default:function(){return[h("div",{class:"".concat(t.value,"-image-viewer__modal-icon")},[h(Rn,{icon:function(){return h(Cf,{size:"medium"},null)},onClick:e.onReset},null)])]}}),e.currentImage.download&&h(Rn,{icon:function(){return h(rk,{size:"medium"},null)},onClick:function(){cM(i.value)}},null)])])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var pM=H({name:"TImageViewerModal",props:{zIndex:Number,visible:Boolean,index:Number,images:nr.images,scale:Number,rotate:Number,mirror:Number,title:nr.title,currentImage:{type:Object,default:function(){return{}}},onRotate:Function,onZoomIn:Function,onZoomOut:Function,onMirror:Function,onReset:Function,onClose:nr.onClose,draggable:{type:Boolean,default:!0},viewerScale:{type:Object,default:function(){return{}}},showOverlay:Boolean,closeBtn:nr.closeBtn},setup:function(e){var t=le(),r=Ue(),a=g(function(){return{minWidth:e.viewerScale.minWidth,minHeight:e.viewerScale.minHeight}});return function(){return h(uM,{destroyOnClose:!0,attach:"body",onClose:e.onClose,visible:e.visible,placement:"center",mode:"modeless",width:1e3,cancelBtn:null,confirmBtn:null,draggable:e.draggable,zIndex:e.zIndex,showOverlay:e.showOverlay,class:"".concat(t.value,"-image-viewer__dialog"),header:r("title",""),footer:function(){return h("div",{class:"".concat(t.value,"-image-viewer-mini__footer")},[h(od,{onZoomIn:e.onZoomIn,onZoomOut:e.onZoomOut,scale:e.scale,currentImage:e.currentImage,onRotate:e.onRotate,onMirror:e.onMirror,onReset:e.onReset},null)])}},{default:function(){return[h("div",{class:"".concat(t.value,"-image-viewer-mini__content"),style:a.value},[h(ld,{rotate:e.rotate,scale:e.scale,mirror:e.mirror,src:e.currentImage.mainImage,placementSrc:e.currentImage.thumbnail,isSvg:e.currentImage.isSvg},null)])]}})}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var $t=function(n){return n.left="ArrowLeft",n.up="ArrowUp",n.right="ArrowRight",n.down="ArrowDown",n.esc="Escape",n}($t||{});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */function Bs(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable})),t.push.apply(t,r)}return t}function gM(n){for(var e=1;e<arguments.length;e++){var t=arguments[e]!=null?arguments[e]:{};e%2?Bs(Object(t),!0).forEach(function(r){G(n,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):Bs(Object(t)).forEach(function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(t,r))})}return n}var hM=H({name:"TImageViewer",props:gM({},nr),setup:function(e){var t,r=le(),a=le("image-viewer"),i=Ue(),l=L(!0),o=g(function(){return vM(e)}),u=Xe(e),c=u.index,s=u.visible,d=u.modelValue,f=pt(c,(t=e.defaultIndex)!==null&&t!==void 0?t:0,e.onIndexChange,"index"),v=Se(f,2),p=v[0],m=v[1],b=Pn(s,d,e.defaultVisible,function(){},"visible"),y=Se(b,2),_=y[0],O=y[1],w=L(!0),I=L(),k=Fi(function(){return e.attach}),j=g(function(){return[a.value,"".concat(a.value,"-preview-image"),G({},"".concat(r.value,"-is-hide"),!_.value)]}),S=g(function(){return["".concat(r.value,"-image-viewer__modal-header"),G({},"".concat(r.value,"-is-show"),l.value)]}),$=g(function(){var me;return(me=e.zIndex)!==null&&me!==void 0?me:2600}),P=function(){l.value=!l.value},C=ZT(),U=C.mirror,Z=C.onMirror,J=C.resetMirror,N=JT(e.imageScale),z=N.scale,V=N.onZoomIn,ne=N.onZoomOut,M=N.resetScale,A=QT(),F=A.rotate,W=A.onRotate,K=A.resetRotate,B=function(){J(),M(),K()},T=g(function(){return dM(e.images)}),R=g(function(){var me;return(me=T.value[p.value])!==null&&me!==void 0?me:{mainImage:""}}),x=id("dialog",{visible:_}),Y=x.isLastDialog,re=function(){var ye=p.value-1;B(),m(ye<0?0:ye,{trigger:"prev"})},ve=function(){var ye=p.value+1;B(),m(ye>=T.value.length?p.value:ye,{trigger:"next"})},we=function(ye){m(ye,{trigger:"current"})},$e=function(){O(!0)},pe=function(ye){var be;O(!1),(be=e.onClose)===null||be===void 0||be.call(e,ye)},he=function(ye){pe({e:ye,trigger:"close-btn"})},_e=function(ye){e.closeOnOverlay&&pe({e:ye,trigger:"overlay"})},Ne=function(ye){switch(ye.stopPropagation(),ye.code){case $t.left:re();break;case $t.right:ve();break;case $t.up:V();break;case $t.down:ne();break;case $t.esc:e.closeOnEscKeydown&&Y()&&pe({e:ye,trigger:"esc"});break}},Ae=L();fe(function(){return _.value},function(me){clearTimeout(I.value),me?(w.value=!1,an().then(function(){var ye,be;(ye=Ae.value)===null||ye===void 0||(be=ye.focus)===null||be===void 0||be.call(ye)}),B()):I.value=setTimeout(function(){w.value=!0},200)});var Ie=function(ye){ye.preventDefault();var be=ye.deltaY;be>0?ne():V()},ln=g(function(){return{transform:"translateX(calc(-".concat(p.value," * (40px / 9 * 16 + 4px)))")}}),ie=function(){return h("div",{class:S.value},[h(Rn,{icon:function(){return h(Vi,null,null)},class:"".concat(a.value,"__header-pre-bt"),onClick:P},null),h("div",{class:"".concat(a.value,"__header-prev")},[h("div",{class:"".concat(a.value,"__header-trans"),style:ln.value},[T.value.map(function(ye,be){return h("div",{key:be,class:["".concat(a.value,"__header-box"),G({},"".concat(r.value,"-is-active"),be===p.value)]},[h(KT,{src:ye.thumbnail||ye.mainImage,error:"",className:"".concat(a.value,"__header-img"),onClick:function(){return we(be)}},null)])})])])])},te=function(ye){var be=ye==="prev"?0:180,ke=i("navigationArrow",h(Ri,{style:{transform:"rotate(".concat(be,"deg)")},size:"24px"},null));return h(Rn,{class:"".concat(a.value,"__modal-").concat(ye,"-bt"),onClick:ye==="prev"?re:ve,icon:function(){return ke}},null)},Oe=function(){if(e.closeBtn!==!1)return h("div",{class:["".concat(a.value,"__modal-icon"),"".concat(a.value,"__modal-close-bt")],onClick:he},[i("closeBtn",h(_a,{size:"24px"},null))])};return function(){return e.mode==="modeless"?h(xe,null,[i("trigger",{params:{open:$e}}),h(pM,{zIndex:$.value,visible:_.value,index:p.value,images:T.value,scale:z.value,rotate:F.value,mirror:U.value,currentImage:R.value,onRotate:W,onZoomIn:V,onZoomOut:ne,onMirror:Z,onReset:B,onClose:pe,draggable:e.draggable,showOverlay:o.value,title:e.title},null)]):h(xe,null,[i("trigger",{params:{open:$e}}),h(ir,{disabled:!e.attach||!k.value,to:k.value},{default:function(){return[h(Ft,null,{default:function(){return[(_.value||!w.value)&&lr(h("div",{ref:Ae,class:j.value,style:{zIndex:$.value},onWheel:Ie,tabindex:-1,onKeydown:Ne},[!!o.value&&h("div",{class:"".concat(a.value,"__modal-mask"),onClick:_e},null),T.value.length>1&&h(xe,null,[ie(),h("div",{class:"".concat(a.value,"__modal-index")},[e.title&&i("title"),"".concat(p.value+1,"/").concat(T.value.length)]),te("prev"),te("next")]),Oe(),h(od,{onZoomIn:V,onZoomOut:ne,onMirror:Z,onReset:B,onRotate:W,scale:z.value,currentImage:R.value},null),h(ld,{scale:z.value,rotate:F.value,mirror:U.value,src:R.value.mainImage,placementSrc:R.value.thumbnail,isSvg:R.value.isSvg},null)]),[[Jr,_.value]])]}})]}})])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var mM=Ze(hM);/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var bM={globalConfig:Object},yM=H({name:"TConfigProvider",props:bM,setup:function(e){HC(e);var t=Ue();return function(){return h(xe,null,[t("default")])}}});/**
+ * tdesign v1.10.6
+ * (c) 2024 tdesign
+ * @license MIT
+ */var _M=Ze(yM);const OM=H({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(n){return(e,t)=>(E(),q("span",{class:Ke(["VPBadge",e.type])},[X(e.$slots,"default",{},()=>[nt(He(e.text),1)])],2))}}),CM={key:0,class:"VPBackdrop"},wM=H({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(n){return(e,t)=>(E(),ce(Ft,{name:"fade"},{default:Q(()=>[e.show?(E(),q("div",CM)):ae("",!0)]),_:1}))}}),SM=de(wM,[["__scopeId","data-v-c79a1216"]]),Pe=Qr;function $M(n,e){let t,r=!1;return()=>{t&&clearTimeout(t),r?t=setTimeout(n,e):(n(),(r=!0)&&setTimeout(()=>r=!1,e))}}function pi(n){return/^\//.test(n)?n:`/${n}`}function el(n){const{pathname:e,search:t,hash:r,protocol:a}=new URL(n,"http://a.com");if(hd(n)||n.startsWith("#")||!a.startsWith("http")||!md(e))return n;const{site:i}=Pe(),l=e.endsWith("/")||e.endsWith(".html")?n:n.replace(/(?:(^\.+)\/)?.*$/,`$1${e.replace(/(\.md)?$/,i.value.cleanUrls?"":".html")}${t}${r}`);return yi(l)}function kr({correspondingLink:n=!1}={}){const{site:e,localeIndex:t,page:r,theme:a,hash:i}=Pe(),l=g(()=>{var u,c;return{label:(u=e.value.locales[t.value])==null?void 0:u.label,link:((c=e.value.locales[t.value])==null?void 0:c.link)||(t.value==="root"?"/":`/${t.value}/`)}});return{localeLinks:g(()=>Object.entries(e.value.locales).flatMap(([u,c])=>l.value.label===c.label?[]:{text:c.label,link:PM(c.link||(u==="root"?"/":`/${u}/`),a.value.i18nRouting!==!1&&n,r.value.relativePath.slice(l.value.link.length-1),!e.value.cleanUrls)+i.value})),currentLang:l}}function PM(n,e,t,r){return e?n.replace(/\/$/,"")+pi(t.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,r?".html":"")):n}const kM={class:"NotFound"},xM={class:"code"},IM={class:"title"},EM={class:"quote"},jM={class:"action"},AM=["href","aria-label"],TM=H({__name:"NotFound",setup(n){const{theme:e}=Pe(),{currentLang:t}=kr();return(r,a)=>{var i,l,o,u,c;return E(),q("div",kM,[ee("p",xM,He(((i=D(e).notFound)==null?void 0:i.code)??"404"),1),ee("h1",IM,He(((l=D(e).notFound)==null?void 0:l.title)??"PAGE NOT FOUND"),1),a[0]||(a[0]=ee("div",{class:"divider"},null,-1)),ee("blockquote",EM,He(((o=D(e).notFound)==null?void 0:o.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),ee("div",jM,[ee("a",{class:"link",href:D(yi)(D(t).link),"aria-label":((u=D(e).notFound)==null?void 0:u.linkLabel)??"go to home"},He(((c=D(e).notFound)==null?void 0:c.linkText)??"Take me home"),9,AM)])])}}}),MM=de(TM,[["__scopeId","data-v-d6be1790"]]);function ud(n,e){if(Array.isArray(n))return Rr(n);if(n==null)return[];e=pi(e);const t=Object.keys(n).sort((a,i)=>i.split("/").length-a.split("/").length).find(a=>e.startsWith(pi(a))),r=t?n[t]:[];return Array.isArray(r)?Rr(r):Rr(r.items,r.base)}function NM(n){const e=[];let t=0;for(const r in n){const a=n[r];if(a.items){t=e.push(a);continue}e[t]||e.push({items:[]}),e[t].items.push(a)}return e}function DM(n){const e=[];function t(r){for(const a of r)a.text&&a.link&&e.push({text:a.text,link:a.link,docFooterText:a.docFooterText}),a.items&&t(a.items)}return t(n),e}function gi(n,e){return Array.isArray(e)?e.some(t=>gi(n,t)):dt(n,e.link)?!0:e.items?gi(n,e.items):!1}function Rr(n,e){return[...n].map(t=>{const r={...t},a=r.base||e;return a&&r.link&&(r.link=a+r.link),r.items&&(r.items=Rr(r.items,a)),r})}function qn(){const{frontmatter:n,page:e,theme:t}=Pe(),r=Ra("(min-width: 960px)"),a=L(!1),i=g(()=>{const m=t.value.sidebar,b=e.value.relativePath;return m?ud(m,b):[]}),l=L(i.value);fe(i,(m,b)=>{JSON.stringify(m)!==JSON.stringify(b)&&(l.value=i.value)});const o=g(()=>n.value.sidebar!==!1&&l.value.length>0&&n.value.layout!=="home"),u=g(()=>c?n.value.aside==null?t.value.aside==="left":n.value.aside==="left":!1),c=g(()=>n.value.layout==="home"?!1:n.value.aside!=null?!!n.value.aside:t.value.aside!==!1),s=g(()=>o.value&&r.value),d=g(()=>o.value?NM(l.value):[]);function f(){a.value=!0}function v(){a.value=!1}function p(){a.value?v():f()}return{isOpen:a,sidebar:l,sidebarGroups:d,hasSidebar:o,hasAside:c,leftAside:u,isSidebarEnabled:s,open:f,close:v,toggle:p}}function BM(n,e){let t;gr(()=>{t=n.value?document.activeElement:void 0}),Me(()=>{window.addEventListener("keyup",r)}),Dn(()=>{window.removeEventListener("keyup",r)});function r(a){a.key==="Escape"&&n.value&&(e(),t==null||t.focus())}}function FM(n){const{page:e,hash:t}=Pe(),r=L(!1),a=g(()=>n.value.collapsed!=null),i=g(()=>!!n.value.link),l=L(!1),o=()=>{l.value=dt(e.value.relativePath,n.value.link)};fe([e,n,t],o),Me(o);const u=g(()=>l.value?!0:n.value.items?gi(e.value.relativePath,n.value.items):!1),c=g(()=>!!(n.value.items&&n.value.items.length));gr(()=>{r.value=!!(a.value&&n.value.collapsed)}),_i(()=>{(l.value||u.value)&&(r.value=!1)});function s(){a.value&&(r.value=!r.value)}return{collapsed:r,collapsible:a,isLink:i,isActiveLink:l,hasActiveLink:u,hasChildren:c,toggle:s}}function LM(){const{hasSidebar:n}=qn(),e=Ra("(min-width: 960px)"),t=Ra("(min-width: 1280px)");return{isAsideEnabled:g(()=>!t.value&&!e.value?!1:n.value?t.value:e.value)}}con
Line truncated

docs/.vitepress/dist/assets/index.md.D9HbJL4R.js

@@ -0,0 +1 @@
+import{d as m}from"./chunks/posts.data.DQjUT6HS.js";import{a7 as x,d as S,r as c,c as B,D as s,F as d,Y as h,Q as r,a as k,R as i,B as a,I as u,J as N,L as b,K as L,H as M,_ as V}from"./chunks/framework.BsGVjEHh.js";import{M as y,T as z,P as C}from"./chunks/theme.BT-YIZBO.js";function p(){return x?/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent):!1}const T=["id"],U=["href"],I=["href","aria-label"],J={class:"post-date hollow-text"},D=["innerHTML"],H={class:"pagination-container"},Q=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"doc","editLink":false,"lastUpdated":false,"isNoComment":true,"isNoBackBtn":true},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),O={name:"index.md"},R=S({...O,setup($){const g=window.location.search.slice(1),_=new URLSearchParams(g).get("page")||1,o=c(+_),n=c(10),f=c(m.length),w=B(()=>m.slice((o.value-1)*n.value,o.value*n.value)),v=(l,t)=>{y.success(`转到第${l}页`);const e=new URL(window.location);e.searchParams.set("page",l.toString()),window.history.replaceState({},"",e),window.scrollTo({top:0})};return(l,t)=>(a(),s("div",null,[(a(!0),s(d,null,h(w.value,e=>(a(),s(d,{key:e.url},[r("h2",{id:e.title,class:"post-title"},[r("a",{href:e.url},u(e.title),9,U),r("a",{class:"header-anchor",href:`#${e.title}`,"aria-label":`Permalink to "${e.title}"`},"​",8,I),r("div",J,u(e.date.string),1)],8,T),(a(!0),s(d,null,h(e.tags,P=>(a(),N(i(z),{class:"mr-2",variant:"outline",shape:"round"},{default:L(()=>[M(u(P),1)]),_:2},1024))),256)),e.excerpt?(a(),s("div",{key:0,innerHTML:e.excerpt},null,8,D)):b("",!0)],64))),128)),r("div",H,[k(i(C),{modelValue:o.value,"onUpdate:modelValue":t[0]||(t[0]=e=>o.value=e),pageSize:n.value,"onUpdate:pageSize":t[1]||(t[1]=e=>n.value=e),total:f.value,size:"small",showPageSize:!1,showPageNumber:!i(p)(),showJumper:i(p)(),onCurrentChange:v},null,8,["modelValue","pageSize","total","showPageNumber","showJumper"])])]))}}),Y=V(R,[["__scopeId","data-v-3dd058fc"]]);export{Q as __pageData,Y as default};

docs/.vitepress/dist/assets/index.md.D9HbJL4R.lean.js

@@ -0,0 +1 @@
+import{d as m}from"./chunks/posts.data.DQjUT6HS.js";import{a7 as x,d as S,r as c,c as B,D as s,F as d,Y as h,Q as r,a as k,R as i,B as a,I as u,J as N,L as b,K as L,H as M,_ as V}from"./chunks/framework.BsGVjEHh.js";import{M as y,T as z,P as C}from"./chunks/theme.BT-YIZBO.js";function p(){return x?/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent):!1}const T=["id"],U=["href"],I=["href","aria-label"],J={class:"post-date hollow-text"},D=["innerHTML"],H={class:"pagination-container"},Q=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"doc","editLink":false,"lastUpdated":false,"isNoComment":true,"isNoBackBtn":true},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),O={name:"index.md"},R=S({...O,setup($){const g=window.location.search.slice(1),_=new URLSearchParams(g).get("page")||1,o=c(+_),n=c(10),f=c(m.length),w=B(()=>m.slice((o.value-1)*n.value,o.value*n.value)),v=(l,t)=>{y.success(`转到第${l}页`);const e=new URL(window.location);e.searchParams.set("page",l.toString()),window.history.replaceState({},"",e),window.scrollTo({top:0})};return(l,t)=>(a(),s("div",null,[(a(!0),s(d,null,h(w.value,e=>(a(),s(d,{key:e.url},[r("h2",{id:e.title,class:"post-title"},[r("a",{href:e.url},u(e.title),9,U),r("a",{class:"header-anchor",href:`#${e.title}`,"aria-label":`Permalink to "${e.title}"`},"​",8,I),r("div",J,u(e.date.string),1)],8,T),(a(!0),s(d,null,h(e.tags,P=>(a(),N(i(z),{class:"mr-2",variant:"outline",shape:"round"},{default:L(()=>[M(u(P),1)]),_:2},1024))),256)),e.excerpt?(a(),s("div",{key:0,innerHTML:e.excerpt},null,8,D)):b("",!0)],64))),128)),r("div",H,[k(i(C),{modelValue:o.value,"onUpdate:modelValue":t[0]||(t[0]=e=>o.value=e),pageSize:n.value,"onUpdate:pageSize":t[1]||(t[1]=e=>n.value=e),total:f.value,size:"small",showPageSize:!1,showPageNumber:!i(p)(),showJumper:i(p)(),onCurrentChange:v},null,8,["modelValue","pageSize","total","showPageNumber","showJumper"])])]))}}),Y=V(R,[["__scopeId","data-v-3dd058fc"]]);export{Q as __pageData,Y as default};

docs/.vitepress/dist/assets/posts_2022_06_如何在Vue3的Store中使用i18n.md.CsdC3YlB.js

@@ -0,0 +1 @@
+import{_ as s,D as t,af as i,B as a}from"./chunks/framework.BsGVjEHh.js";const p="/posts/2022/06/img-1.png",o="/posts/2022/06/img-2.png",n="/posts/2022/06/img-3.png",d="/posts/2022/06/img-4.png",l="/posts/2022/06/img-5.png",c="/posts/2022/06/img-6.png",r="/posts/2022/06/img-7.png",y=JSON.parse('{"title":"如何在Vue3的Store中使用i18n","description":"使用的`element-plus`框架时，i18n 的前置初始化","frontmatter":{"layout":"doc","title":"如何在Vue3的Store中使用i18n","date":"2022-06-27T00:00:00.000Z","tags":["编程","工作","学习"],"head":[["meta",{"name":"description","content":"使用的`element-plus`框架时，i18n 的前置初始化"}],["meta",{"name":"keywords","content":"vue vue3 i18n js javascript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/06/如何在Vue3的Store中使用i18n.md","filePath":"posts/2022/06/如何在Vue3的Store中使用i18n.md","lastUpdated":null}'),h={name:"posts/2022/06/如何在Vue3的Store中使用i18n.md"};function u(k,e,m,g,_,E){return a(),t("div",null,e[0]||(e[0]=[i('<blockquote><p>文章摘要</p></blockquote><p>这篇文章讨论了在 Vue3 环境下使用 vue-i18n 和 element-plus 处理多语言提示时遇到的问题及解决方案。具体来说，文章描述了在使用 setup 函数的路由中，因 useI18n() 在加载时未准备好，导致无法直接使用 t、d 等翻译方法的问题。为了绕过这个问题，文章提供了解决方案，通过手动引入已配置的 i18n 方法，而不是依赖 useI18n()。</p><p>总结来说，Vue3 中的 setup 和 ts 环境在路由中使用多语言时会遇到时序性问题，解决方法是手动导入已配置的 i18n 实例，直接调用翻译方法，避免了在路由中使用 useI18n() 时的顺序问题。这种方法可以确保在路由和组件中都能正确地显示多语言提示信息。</p><h2 id="使用环境" tabindex="-1">使用环境 <a class="header-anchor" href="#使用环境" aria-label="Permalink to &quot;使用环境&quot;">​</a></h2><blockquote><p><code>Vue</code>的版本为：<code>3.2.36</code>，</p><p><code>vue-router</code>的版本为：<code>4.0.16</code></p><p><code>vue-i18n</code>的版本为：<code>9.2.0-beta.40</code></p></blockquote><p>几乎都最新版本了</p><p><img src="'+p+'" alt="在这里插入图片描述"></p><h2 id="问题复现" tabindex="-1">问题复现 <a class="header-anchor" href="#问题复现" aria-label="Permalink to &quot;问题复现&quot;">​</a></h2><p>使用的<code>element-plus</code>框架进行项目的搭建，在登陆的时候在全局路由中进行密码的校验，如果密码错误或正确使用<code>element-plus</code> 中的提示组件登录的提示，但是提示的内容要根据选择的语言进行分别的提示</p><p>这个似乎很正常的需求，但是因为使用的<code>vue3</code>中的<code>setup</code>，并且在路由中是使用的<code>ts</code>，所以不能使用this，并且像<code>vue</code>文件中使用的引入方式：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">locale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useI18n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><p>这种方式也是不行的，因为执行顺序的前后问题，在路由加载时<code>useI18n()</code>还没有引入执行，所以这种方式的引入会直接报错的</p><h2 id="问题解决" tabindex="-1">问题解决 <a class="header-anchor" href="#问题解决" aria-label="Permalink to &quot;问题解决&quot;">​</a></h2><p>因为在<code>.vue</code>文件中会使用对应的方法将对应的内容引入，但是当执行路由时这个内容并没有加载，但是这个代码一定是存在并且可以直接运行的，所以可以通过其他方式直接手动将对应需要的代码引入，而不使用提供的方法</p><p>当在创建对应的i18n时，会先将对应的内容进行创建和导出：</p><p><img src="'+o+'" alt="在这里插入图片描述"></p><p>在这个文件中创建了Line truncated

docs/.vitepress/dist/assets/posts_2022_06_如何在Vue3的Store中使用i18n.md.CsdC3YlB.lean.js

@@ -0,0 +1 @@
+import{_ as s,D as t,af as i,B as a}from"./chunks/framework.BsGVjEHh.js";const p="/posts/2022/06/img-1.png",o="/posts/2022/06/img-2.png",n="/posts/2022/06/img-3.png",d="/posts/2022/06/img-4.png",l="/posts/2022/06/img-5.png",c="/posts/2022/06/img-6.png",r="/posts/2022/06/img-7.png",y=JSON.parse('{"title":"如何在Vue3的Store中使用i18n","description":"使用的`element-plus`框架时，i18n 的前置初始化","frontmatter":{"layout":"doc","title":"如何在Vue3的Store中使用i18n","date":"2022-06-27T00:00:00.000Z","tags":["编程","工作","学习"],"head":[["meta",{"name":"description","content":"使用的`element-plus`框架时，i18n 的前置初始化"}],["meta",{"name":"keywords","content":"vue vue3 i18n js javascript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/06/如何在Vue3的Store中使用i18n.md","filePath":"posts/2022/06/如何在Vue3的Store中使用i18n.md","lastUpdated":null}'),h={name:"posts/2022/06/如何在Vue3的Store中使用i18n.md"};function u(k,e,m,g,_,E){return a(),t("div",null,e[0]||(e[0]=[i('<blockquote><p>文章摘要</p></blockquote><p>这篇文章讨论了在 Vue3 环境下使用 vue-i18n 和 element-plus 处理多语言提示时遇到的问题及解决方案。具体来说，文章描述了在使用 setup 函数的路由中，因 useI18n() 在加载时未准备好，导致无法直接使用 t、d 等翻译方法的问题。为了绕过这个问题，文章提供了解决方案，通过手动引入已配置的 i18n 方法，而不是依赖 useI18n()。</p><p>总结来说，Vue3 中的 setup 和 ts 环境在路由中使用多语言时会遇到时序性问题，解决方法是手动导入已配置的 i18n 实例，直接调用翻译方法，避免了在路由中使用 useI18n() 时的顺序问题。这种方法可以确保在路由和组件中都能正确地显示多语言提示信息。</p><h2 id="使用环境" tabindex="-1">使用环境 <a class="header-anchor" href="#使用环境" aria-label="Permalink to &quot;使用环境&quot;">​</a></h2><blockquote><p><code>Vue</code>的版本为：<code>3.2.36</code>，</p><p><code>vue-router</code>的版本为：<code>4.0.16</code></p><p><code>vue-i18n</code>的版本为：<code>9.2.0-beta.40</code></p></blockquote><p>几乎都最新版本了</p><p><img src="'+p+'" alt="在这里插入图片描述"></p><h2 id="问题复现" tabindex="-1">问题复现 <a class="header-anchor" href="#问题复现" aria-label="Permalink to &quot;问题复现&quot;">​</a></h2><p>使用的<code>element-plus</code>框架进行项目的搭建，在登陆的时候在全局路由中进行密码的校验，如果密码错误或正确使用<code>element-plus</code> 中的提示组件登录的提示，但是提示的内容要根据选择的语言进行分别的提示</p><p>这个似乎很正常的需求，但是因为使用的<code>vue3</code>中的<code>setup</code>，并且在路由中是使用的<code>ts</code>，所以不能使用this，并且像<code>vue</code>文件中使用的引入方式：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">locale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useI18n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><p>这种方式也是不行的，因为执行顺序的前后问题，在路由加载时<code>useI18n()</code>还没有引入执行，所以这种方式的引入会直接报错的</p><h2 id="问题解决" tabindex="-1">问题解决 <a class="header-anchor" href="#问题解决" aria-label="Permalink to &quot;问题解决&quot;">​</a></h2><p>因为在<code>.vue</code>文件中会使用对应的方法将对应的内容引入，但是当执行路由时这个内容并没有加载，但是这个代码一定是存在并且可以直接运行的，所以可以通过其他方式直接手动将对应需要的代码引入，而不使用提供的方法</p><p>当在创建对应的i18n时，会先将对应的内容进行创建和导出：</p><p><img src="'+o+'" alt="在这里插入图片描述"></p><p>在这个文件中创建了Line truncated

docs/.vitepress/dist/assets/posts_2022_08_JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.md.gIYgXCj5.js

@@ -0,0 +1,414 @@
+import{_ as i,D as a,af as n,B as h}from"./chunks/framework.BsGVjEHh.js";const t="/posts/2022/08/img-1.gif",y=JSON.parse('{"title":"JavaScript和Vue中实现表格(table)固定表头和首列","description":"本文主要介绍关于`JS`或`Vue`中如何进行表头，列固定，可以根据实际应用场景应用于`原生`，`Vue`，`移动端`，`小程序`中","frontmatter":{"layout":"doc","title":"JavaScript和Vue中实现表格(table)固定表头和首列","date":"2022-08-26T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"description","content":"本文主要介绍关于`JS`或`Vue`中如何进行表头，列固定，可以根据实际应用场景应用于`原生`，`Vue`，`移动端`，`小程序`中"}],["meta",{"name":"keywords","content":"vue vue3 js javascript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.md","filePath":"posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.md","lastUpdated":null}'),k={name:"posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.md"};function l(p,s,E,e,d,r){return h(),a("div",null,s[0]||(s[0]=[n('<blockquote><p>文章摘要</p></blockquote><p>这篇文章介绍了如何在 JS 或 Vue 中实现表格的列和表头固定功能，适用于不同的开发环境（如原生 JavaScript、Vue、React、小程序等）。文章详细展示了实现这一功能的思路和具体步骤，包括使用 Vue3 和 TypeScript 结合 Less 来完成样式和功能的实现。</p><h2 id="写在前面" tabindex="-1">写在前面 <a class="header-anchor" href="#写在前面" aria-label="Permalink to &quot;写在前面&quot;">​</a></h2><p>本文主要介绍关于<code>JS</code>或<code>Vue</code>中如何进行表头，列固定，可以根据实际应用场景应用于<code>原生</code>，<code>Vue</code>，<code>移动端</code>，<code>小程序</code>中</p><p>实际效果展示：</p><p><img src="'+t+`" alt="在这里插入图片描述"></p><h2 id="思路概述" tabindex="-1">思路概述 <a class="header-anchor" href="#思路概述" aria-label="Permalink to &quot;思路概述&quot;">​</a></h2><p><code>表头，列头，表格本身，这三个内容被分为了三块元素，将这三个内容进行抽离，并且通过定位和大盒子的包裹进行样式管理。</code></p><p>【当要进行滚动时，只要对滚动事件进行绑定，让<code>表头和列头显示对应的内容就完成了滚动的操作</code>】</p><p>下面有<code>Vue</code>组件的和<code>JavaScript</code>原生的代码，可以直接运行查看逻辑和效果</p><h2 id="具体实现" tabindex="-1">具体实现 <a class="header-anchor" href="#具体实现" aria-label="Permalink to &quot;具体实现&quot;">​</a></h2><p>整体代码，<code>可以直接创建组件，将代码复制到组件中使用</code>，在<code>App</code>中引用运行【基于<code>vue3+ts+less</code>实现，其他版本会在后面给出修改思路】 <code>【最下面也提供了原生写法】</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Time:2022/8/9 13:06 29</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Name:fixmeTable.vue</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Path:src/components/table</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ ProjectName:element-plus</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Author:charlatan</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~  Il n&#39;ya qu&#39;un héroïsme au monde :</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~     c&#39;est de voir le monde tel qu&#39;il est et de l&#39;aimer.</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  --&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> column</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Scroll</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		top.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		left.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		列头表头固定table</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--  表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		&lt;!--    表头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">						{{ item }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		&lt;!--    列头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">						{{ String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		&lt;!--    表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @scroll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Scroll($event)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">							class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">						{{ item + String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;less&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">	.table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	/ / 表头 . </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">260</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	} / / 列头 . columnHeader {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		max-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">columnHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	} / / 表格本体 . tableBody {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">265</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">55</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	} / / 表格元素 </span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		white-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><ol><li><p><code>html</code>部分：主要进行框架的设计，这里表头，列头，表格本体分为三份</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    列头表头固定table</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!--  表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    &lt;!--    表头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{ item }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    &lt;!--    列头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{ String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    &lt;!--    表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @scroll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Scroll($event)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">              class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{ item + String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></li></ol><p>内容分为了三部分，这三部分将相互独立，通过样式的调节将三部分内容进行统一的管理。</p><p>这里使用的是<code>table</code>进行了内容的填充，因为表头和列头是单独的元素，所以可以使用其他内容如<code>div</code>等，通过样式上的和交互上的进行协调统一，这里不在赘述</p><ol start="2"><li><p>样式上的内容，因为主要是功能，这里样式使用<code>less</code>进行简单绘制</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;less&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 表头</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">260</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 列头</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .columnHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    max-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">columnHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 表格本体</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .tableBody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">265</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">55</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 表格元素</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    white-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>内容上和定义的结构进行统一调节，这里需要主要的是：<span style="color:red;font-weight:900;"> 因为表格的宽度和表头的宽度对应，表格的高度和列头的高度固定，所以建议在定义时考虑好对应的宽高对应关系，方便调节</span></p><p>在定义好表头和列头时，对与展示的部分通过外部的<code>div</code>进行定位的调节进行展示，内部的表格部分通过宽度的固定来达到样式统一，使用相对定位来完成展示内容的切换</p><p>内部使用了Vue3提供的<code>v-bind</code>，如果你使用的时vue2或其他内容请更换为内联样式或其他方式</p><p><code>v-bind</code> 为Vue3中提供，主要是将绑定的内容转换为自定义标签使用，具体介绍可以看我的另一篇文章：<a href="https://blog.csdn.net/weixin_52235488/article/details/126290046?spm=1001.2014.3001.5502" target="_blank" rel="noreferrer">Vue3新属性 — v-bind in css</a> ，里面有用法和原理的详细介绍</p></li><li><p>逻辑部分：主要为内部的真正的表格绑定了滚动的监听，</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义行和列</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> column</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 将内容进行响应式定义</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 绑定对应的监听事件</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Scroll</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  top.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  left.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>这里使用的动态数据在<code>v-bind</code>中进行，这里直接修改即可</p></li></ol><h2 id="其他环境中要修改的内容" tabindex="-1">其他环境中要修改的内容 <a class="header-anchor" href="#其他环境中要修改的内容" aria-label="Permalink to &quot;其他环境中要修改的内容&quot;">​</a></h2><p>这里对常见问题进行解决，如果没有匹配，请评论或找其他方式解决</p><ol><li><p><code>原生JavaScript中使用</code>：如果你完全没有使用过<code>Vue</code>，上面的代码我也改成了原生的版本，逻辑一样，这里就只放代码不做介绍了 <code>直接创建文件复制使用</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Time:2022/8/12 9:02 36</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Name:test1.html</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Path:</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ ProjectName:element-plus</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Author:charlatan</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~  Il n&#39;ya qu&#39;un héroïsme au monde :</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~     c&#39;est de voir le monde tel qu&#39;il est et de l&#39;aimer.</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  --&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;en&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;UTF-8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;IE=edge&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> http-equiv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;X-UA-Compatible&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;viewport&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Title&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">		*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			list-style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			font</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> YouYuan;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			text-decoration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">		li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			cursor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">pointer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		/*-------以上为默认设置（The above is the default setting）--------*/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.rowHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">260</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.rowHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.columnHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			max-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">270</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.columnHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.tableBody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">265</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">270</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">55</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">		tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			white-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--    表头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table-tr&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--    列头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table-tr&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--    表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scroll&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table-tr&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 定义行和列</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> column</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 获取表头</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rowHeard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rowHeader-table-tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建表头元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> row; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 获取元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> td </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 添加样式</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 添加内容</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> testNode </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createTextNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(testNode)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 将表头放置到指定位置</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		rowHeard.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(td)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建表头元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> columnHeard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;columnHeader-table-tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tr </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> td </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createTextNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(String.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fromCharCode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 64</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)))</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		tr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(td)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		columnHeard.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tr)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建表格元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> table </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tableBody-table-tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tr </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> row; j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; j</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">			let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> td </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			td.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			td.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createTextNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> String.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fromCharCode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 64</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)))</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			tr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(td)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		table.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tr)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 获取表头和列头滚动元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> row_heard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementsByClassName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rowHeader-table&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column_heard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementsByClassName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;columnHeader-table&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 绑定滚动时间</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scroll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;scroll&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	scroll.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onscroll</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		row_heard.style.left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		column_heard.style.top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>主要通过的是JS的元素创建然后将元素添加至对应的内容中，然后进行事件的绑定，从而完成整体逻辑</p></li><li><p><code>React</code>和<code>小程序中</code>，二者都是可以进行数据的绑定，元素的循环处理更加方法，小程序中没有鼠标，可能要更换为手指滑动操作，对于这个逻辑相同， <code>绑定元素的移动距离</code>，从而让表头和列头跟随移动从而达到同步的效果和目的</p></li></ol>`,20)]))}const F=i(k,[["render",l]]);export{y as __pageData,F as default};

docs/.vitepress/dist/assets/posts_2022_08_JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.md.gIYgXCj5.lean.js

@@ -0,0 +1,414 @@
+import{_ as i,D as a,af as n,B as h}from"./chunks/framework.BsGVjEHh.js";const t="/posts/2022/08/img-1.gif",y=JSON.parse('{"title":"JavaScript和Vue中实现表格(table)固定表头和首列","description":"本文主要介绍关于`JS`或`Vue`中如何进行表头，列固定，可以根据实际应用场景应用于`原生`，`Vue`，`移动端`，`小程序`中","frontmatter":{"layout":"doc","title":"JavaScript和Vue中实现表格(table)固定表头和首列","date":"2022-08-26T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"description","content":"本文主要介绍关于`JS`或`Vue`中如何进行表头，列固定，可以根据实际应用场景应用于`原生`，`Vue`，`移动端`，`小程序`中"}],["meta",{"name":"keywords","content":"vue vue3 js javascript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.md","filePath":"posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.md","lastUpdated":null}'),k={name:"posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.md"};function l(p,s,E,e,d,r){return h(),a("div",null,s[0]||(s[0]=[n('<blockquote><p>文章摘要</p></blockquote><p>这篇文章介绍了如何在 JS 或 Vue 中实现表格的列和表头固定功能，适用于不同的开发环境（如原生 JavaScript、Vue、React、小程序等）。文章详细展示了实现这一功能的思路和具体步骤，包括使用 Vue3 和 TypeScript 结合 Less 来完成样式和功能的实现。</p><h2 id="写在前面" tabindex="-1">写在前面 <a class="header-anchor" href="#写在前面" aria-label="Permalink to &quot;写在前面&quot;">​</a></h2><p>本文主要介绍关于<code>JS</code>或<code>Vue</code>中如何进行表头，列固定，可以根据实际应用场景应用于<code>原生</code>，<code>Vue</code>，<code>移动端</code>，<code>小程序</code>中</p><p>实际效果展示：</p><p><img src="'+t+`" alt="在这里插入图片描述"></p><h2 id="思路概述" tabindex="-1">思路概述 <a class="header-anchor" href="#思路概述" aria-label="Permalink to &quot;思路概述&quot;">​</a></h2><p><code>表头，列头，表格本身，这三个内容被分为了三块元素，将这三个内容进行抽离，并且通过定位和大盒子的包裹进行样式管理。</code></p><p>【当要进行滚动时，只要对滚动事件进行绑定，让<code>表头和列头显示对应的内容就完成了滚动的操作</code>】</p><p>下面有<code>Vue</code>组件的和<code>JavaScript</code>原生的代码，可以直接运行查看逻辑和效果</p><h2 id="具体实现" tabindex="-1">具体实现 <a class="header-anchor" href="#具体实现" aria-label="Permalink to &quot;具体实现&quot;">​</a></h2><p>整体代码，<code>可以直接创建组件，将代码复制到组件中使用</code>，在<code>App</code>中引用运行【基于<code>vue3+ts+less</code>实现，其他版本会在后面给出修改思路】 <code>【最下面也提供了原生写法】</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Time:2022/8/9 13:06 29</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Name:fixmeTable.vue</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Path:src/components/table</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ ProjectName:element-plus</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Author:charlatan</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~  Il n&#39;ya qu&#39;un héroïsme au monde :</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~     c&#39;est de voir le monde tel qu&#39;il est et de l&#39;aimer.</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  --&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> column</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Scroll</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		top.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		left.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		列头表头固定table</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--  表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		&lt;!--    表头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">						{{ item }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		&lt;!--    列头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">						{{ String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		&lt;!--    表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @scroll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Scroll($event)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">							class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">						{{ item + String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;less&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">	.table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	/ / 表头 . </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">260</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	} / / 列头 . columnHeader {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		max-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">columnHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	} / / 表格本体 . tableBody {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">265</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">55</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	} / / 表格元素 </span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		white-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><ol><li><p><code>html</code>部分：主要进行框架的设计，这里表头，列头，表格本体分为三份</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    列头表头固定table</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!--  表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    &lt;!--    表头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{ item }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    &lt;!--    列头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{ String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    &lt;!--    表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @scroll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Scroll($event)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">              class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{ item + String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></li></ol><p>内容分为了三部分，这三部分将相互独立，通过样式的调节将三部分内容进行统一的管理。</p><p>这里使用的是<code>table</code>进行了内容的填充，因为表头和列头是单独的元素，所以可以使用其他内容如<code>div</code>等，通过样式上的和交互上的进行协调统一，这里不在赘述</p><ol start="2"><li><p>样式上的内容，因为主要是功能，这里样式使用<code>less</code>进行简单绘制</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;less&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 表头</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">260</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 列头</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .columnHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    max-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">columnHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 表格本体</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .tableBody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">265</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">55</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 表格元素</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    white-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>内容上和定义的结构进行统一调节，这里需要主要的是：<span style="color:red;font-weight:900;"> 因为表格的宽度和表头的宽度对应，表格的高度和列头的高度固定，所以建议在定义时考虑好对应的宽高对应关系，方便调节</span></p><p>在定义好表头和列头时，对与展示的部分通过外部的<code>div</code>进行定位的调节进行展示，内部的表格部分通过宽度的固定来达到样式统一，使用相对定位来完成展示内容的切换</p><p>内部使用了Vue3提供的<code>v-bind</code>，如果你使用的时vue2或其他内容请更换为内联样式或其他方式</p><p><code>v-bind</code> 为Vue3中提供，主要是将绑定的内容转换为自定义标签使用，具体介绍可以看我的另一篇文章：<a href="https://blog.csdn.net/weixin_52235488/article/details/126290046?spm=1001.2014.3001.5502" target="_blank" rel="noreferrer">Vue3新属性 — v-bind in css</a> ，里面有用法和原理的详细介绍</p></li><li><p>逻辑部分：主要为内部的真正的表格绑定了滚动的监听，</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义行和列</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> column</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 将内容进行响应式定义</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 绑定对应的监听事件</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Scroll</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  top.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  left.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>这里使用的动态数据在<code>v-bind</code>中进行，这里直接修改即可</p></li></ol><h2 id="其他环境中要修改的内容" tabindex="-1">其他环境中要修改的内容 <a class="header-anchor" href="#其他环境中要修改的内容" aria-label="Permalink to &quot;其他环境中要修改的内容&quot;">​</a></h2><p>这里对常见问题进行解决，如果没有匹配，请评论或找其他方式解决</p><ol><li><p><code>原生JavaScript中使用</code>：如果你完全没有使用过<code>Vue</code>，上面的代码我也改成了原生的版本，逻辑一样，这里就只放代码不做介绍了 <code>直接创建文件复制使用</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Time:2022/8/12 9:02 36</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Name:test1.html</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Path:</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ ProjectName:element-plus</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Author:charlatan</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~  Il n&#39;ya qu&#39;un héroïsme au monde :</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~     c&#39;est de voir le monde tel qu&#39;il est et de l&#39;aimer.</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  --&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;en&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;UTF-8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;IE=edge&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> http-equiv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;X-UA-Compatible&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;viewport&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Title&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">		*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			list-style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			font</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> YouYuan;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			text-decoration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">		li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			cursor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">pointer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		/*-------以上为默认设置（The above is the default setting）--------*/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.rowHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">260</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.rowHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.columnHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			max-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">270</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.columnHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.tableBody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">265</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">270</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">55</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">		tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			white-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--    表头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table-tr&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--    列头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table-tr&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--    表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scroll&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table-tr&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 定义行和列</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> column</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 获取表头</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rowHeard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rowHeader-table-tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建表头元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> row; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 获取元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> td </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 添加样式</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 添加内容</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> testNode </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createTextNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(testNode)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 将表头放置到指定位置</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		rowHeard.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(td)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建表头元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> columnHeard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;columnHeader-table-tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tr </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> td </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createTextNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(String.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fromCharCode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 64</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)))</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		tr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(td)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		columnHeard.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tr)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建表格元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> table </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tableBody-table-tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tr </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> row; j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; j</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">			let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> td </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			td.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			td.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createTextNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> String.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fromCharCode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 64</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)))</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			tr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(td)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		table.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tr)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 获取表头和列头滚动元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> row_heard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementsByClassName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rowHeader-table&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column_heard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementsByClassName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;columnHeader-table&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 绑定滚动时间</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scroll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;scroll&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	scroll.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onscroll</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		row_heard.style.left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		column_heard.style.top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>主要通过的是JS的元素创建然后将元素添加至对应的内容中，然后进行事件的绑定，从而完成整体逻辑</p></li><li><p><code>React</code>和<code>小程序中</code>，二者都是可以进行数据的绑定，元素的循环处理更加方法，小程序中没有鼠标，可能要更换为手指滑动操作，对于这个逻辑相同， <code>绑定元素的移动距离</code>，从而让表头和列头跟随移动从而达到同步的效果和目的</p></li></ol>`,20)]))}const F=i(k,[["render",l]]);export{y as __pageData,F as default};

docs/.vitepress/dist/assets/posts_2022_08_Vue3中的ref为何要用.value进行值的调用？.md.CZC63h3V.js

@@ -0,0 +1,52 @@
+import{_ as i,D as a,af as t,B as n}from"./chunks/framework.BsGVjEHh.js";const g=JSON.parse('{"title":"Vue3中的ref为何要用.value进行值的调用？","description":"在`Vue2`中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的","frontmatter":{"layout":"doc","title":"Vue3中的ref为何要用.value进行值的调用？","date":"2022-08-25T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"description","content":"在`Vue2`中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的"}],["meta",{"name":"keywords","content":"vue vue3 js javascript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/08/Vue3中的ref为何要用.value进行值的调用？.md","filePath":"posts/2022/08/Vue3中的ref为何要用.value进行值的调用？.md","lastUpdated":null}'),p={name:"posts/2022/08/Vue3中的ref为何要用.value进行值的调用？.md"};function l(h,s,k,e,E,d){return n(),a("div",null,s[0]||(s[0]=[t(`<blockquote><p>文章摘要</p></blockquote><p>这篇文章对比了 Vue2 和 Vue3 中的数据响应式处理方式，特别是如何定义和代理数据。在 Vue2 中，所有数据都通过一个统一的 data 对象进行管理，使用 Object.defineProperty 来实现响应式绑定。而在 Vue3 中，数据定义变得更加灵活，允许直接使用单一的数据类型，通过 ref 和 reactive 来创建响应式数据。虽然 ref 看似代理了普通数据，但实际上 Vue3 使用了 Proxy 技术对数据进行处理，这使得响应式机制变得更加高效和灵活。</p><p>总结来说，Vue3 引入了更强大的数据代理机制，通过 Proxy 改善了响应式数据的管理，允许更复杂的数据类型和更加灵活的数据操作，而 Vue2 依赖于传统的对象代理方式。这些变化使得 Vue3 在处理响应式数据时更具优势，尤其是在开发大型项目时。</p><p>如果你对 Vue3 中的响应式机制和数据代理的工作原理感兴趣，这篇文章会带你深入了解背后的技术细节。</p><p>在<code>Vue2</code>中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">todos</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :Obj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tos&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :removeObj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;removeObj&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">todos</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> search </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/components/search&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> todos </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/components/todos&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> all </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/components/all&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;App&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">			return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				tos: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;001&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第一个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;002&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第二个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;003&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第三个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;004&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第四个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		computed: {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		components: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			search, todos, all,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		methods: {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">			removeObj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">obj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj.id)</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">				this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.tos </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.tos.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj.id)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.tos)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	/</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	/</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	样式</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>可以看出来这里定义的内容都在一个数组中进行，或者是一个函数，将要使用的数据返回出来，这里无论怎么进行操作处理，最终进行数据代理的时候得到的都是一个对象，Vue2中直接通过 <code>defineProperty</code>进行处理，并绑定对应的监听事件进行响应式的处理。</p><p>而Vue3中，数据的定义可以是单独的，Vue可以让我们随时需要随时定义，这也就带来了另一个问题，我需要的一个数据可能不是对象</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    let str = ref(&#39;响应式字符串&#39;)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    let obj = reactive({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;张三&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>如果要定义的数据不是对象，还需要代理会怎么样？</p><p>在Vue2中数据的定义都在对象中统一进行，也就不会出现这种情况，如果一定要代理一个单独的数据呢？</p><p>Vue2中的数据代理通过<code>defineProperty</code>进行实现，也就是说我们要让<code>defineProperty</code>代理一个普通的数据，而不是一个对象，在 <code>defineProperty</code>的MDN的文档中是这样定义的：</p><blockquote><p><strong><code>Object.defineProperty()</code></strong> 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。</p></blockquote><p>通过这个可以明确看出，只能进行对象的代理，不能进行普通数据的代理，如果使用普通数据类型会直接报以下错误[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p1Lm0OSJ-1661407967498)(Vue3中的ref为何要用.value进行值的调用？.assets/image-20220825094409254.png)]</p><pre><code>在Vue3中数据代理可以使用单一数据了，并且也改进了数据代理的方式，使用的是\`Peoxy\`完成了数据代理，而MDN中对\`Proxy\`也进行了定义：
+</code></pre><blockquote><p><strong>Proxy</strong> 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。</p></blockquote><p>可以看出，<code>Proxy</code>依然是为对象服务，而不是普通的内容，这样问题似乎就解决了</p><p>本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。</p><p>可以看出，<code>Proxy</code>依然是为对象服务，而不是普通的内容，这样问题似乎就解决了</p><blockquote><p>即使是Vue3中使用的<code>Proxy</code>的代理方式也不能进行普通数据的代理，所以当调用<code>Ref</code>的时候其实仍然创建了一个<code>Proxy</code> 对象，并且Vue帮你给这个对象了一个<code>value</code>属性，属性值就是你定义的内容，改变的时候监视的改变依然是通过<code>Proxy</code> 的数据劫持来进行响应式的处理，而模板中使用的时候<code>Vue</code>会默认调用对应的<code>value</code>属性，从而完成模板中的内容的直接调用</p></blockquote>`,20)]))}const y=i(p,[["render",l]]);export{g as __pageData,y as default};

docs/.vitepress/dist/assets/posts_2022_08_Vue3中的ref为何要用.value进行值的调用？.md.CZC63h3V.lean.js

@@ -0,0 +1,52 @@
+import{_ as i,D as a,af as t,B as n}from"./chunks/framework.BsGVjEHh.js";const g=JSON.parse('{"title":"Vue3中的ref为何要用.value进行值的调用？","description":"在`Vue2`中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的","frontmatter":{"layout":"doc","title":"Vue3中的ref为何要用.value进行值的调用？","date":"2022-08-25T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"description","content":"在`Vue2`中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的"}],["meta",{"name":"keywords","content":"vue vue3 js javascript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/08/Vue3中的ref为何要用.value进行值的调用？.md","filePath":"posts/2022/08/Vue3中的ref为何要用.value进行值的调用？.md","lastUpdated":null}'),p={name:"posts/2022/08/Vue3中的ref为何要用.value进行值的调用？.md"};function l(h,s,k,e,E,d){return n(),a("div",null,s[0]||(s[0]=[t(`<blockquote><p>文章摘要</p></blockquote><p>这篇文章对比了 Vue2 和 Vue3 中的数据响应式处理方式，特别是如何定义和代理数据。在 Vue2 中，所有数据都通过一个统一的 data 对象进行管理，使用 Object.defineProperty 来实现响应式绑定。而在 Vue3 中，数据定义变得更加灵活，允许直接使用单一的数据类型，通过 ref 和 reactive 来创建响应式数据。虽然 ref 看似代理了普通数据，但实际上 Vue3 使用了 Proxy 技术对数据进行处理，这使得响应式机制变得更加高效和灵活。</p><p>总结来说，Vue3 引入了更强大的数据代理机制，通过 Proxy 改善了响应式数据的管理，允许更复杂的数据类型和更加灵活的数据操作，而 Vue2 依赖于传统的对象代理方式。这些变化使得 Vue3 在处理响应式数据时更具优势，尤其是在开发大型项目时。</p><p>如果你对 Vue3 中的响应式机制和数据代理的工作原理感兴趣，这篇文章会带你深入了解背后的技术细节。</p><p>在<code>Vue2</code>中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">todos</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :Obj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tos&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :removeObj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;removeObj&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">todos</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> search </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/components/search&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> todos </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/components/todos&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> all </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/components/all&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;App&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">			return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				tos: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;001&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第一个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;002&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第二个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;003&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第三个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;004&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第四个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		computed: {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		components: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			search, todos, all,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		methods: {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">			removeObj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">obj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj.id)</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">				this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.tos </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.tos.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj.id)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.tos)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	/</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	/</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	样式</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>可以看出来这里定义的内容都在一个数组中进行，或者是一个函数，将要使用的数据返回出来，这里无论怎么进行操作处理，最终进行数据代理的时候得到的都是一个对象，Vue2中直接通过 <code>defineProperty</code>进行处理，并绑定对应的监听事件进行响应式的处理。</p><p>而Vue3中，数据的定义可以是单独的，Vue可以让我们随时需要随时定义，这也就带来了另一个问题，我需要的一个数据可能不是对象</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    let str = ref(&#39;响应式字符串&#39;)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    let obj = reactive({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;张三&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>如果要定义的数据不是对象，还需要代理会怎么样？</p><p>在Vue2中数据的定义都在对象中统一进行，也就不会出现这种情况，如果一定要代理一个单独的数据呢？</p><p>Vue2中的数据代理通过<code>defineProperty</code>进行实现，也就是说我们要让<code>defineProperty</code>代理一个普通的数据，而不是一个对象，在 <code>defineProperty</code>的MDN的文档中是这样定义的：</p><blockquote><p><strong><code>Object.defineProperty()</code></strong> 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。</p></blockquote><p>通过这个可以明确看出，只能进行对象的代理，不能进行普通数据的代理，如果使用普通数据类型会直接报以下错误[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p1Lm0OSJ-1661407967498)(Vue3中的ref为何要用.value进行值的调用？.assets/image-20220825094409254.png)]</p><pre><code>在Vue3中数据代理可以使用单一数据了，并且也改进了数据代理的方式，使用的是\`Peoxy\`完成了数据代理，而MDN中对\`Proxy\`也进行了定义：
+</code></pre><blockquote><p><strong>Proxy</strong> 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。</p></blockquote><p>可以看出，<code>Proxy</code>依然是为对象服务，而不是普通的内容，这样问题似乎就解决了</p><p>本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。</p><p>可以看出，<code>Proxy</code>依然是为对象服务，而不是普通的内容，这样问题似乎就解决了</p><blockquote><p>即使是Vue3中使用的<code>Proxy</code>的代理方式也不能进行普通数据的代理，所以当调用<code>Ref</code>的时候其实仍然创建了一个<code>Proxy</code> 对象，并且Vue帮你给这个对象了一个<code>value</code>属性，属性值就是你定义的内容，改变的时候监视的改变依然是通过<code>Proxy</code> 的数据劫持来进行响应式的处理，而模板中使用的时候<code>Vue</code>会默认调用对应的<code>value</code>属性，从而完成模板中的内容的直接调用</p></blockquote>`,20)]))}const y=i(p,[["render",l]]);export{g as __pageData,y as default};

docs/.vitepress/dist/assets/posts_2022_08_Vue3新属性 — css中使用v-bind（v-bind in css）.md.D7pEpzPC.js

@@ -0,0 +1,178 @@
+import{_ as i,D as a,af as n,B as h}from"./chunks/framework.BsGVjEHh.js";const p="/posts/2022/08/img-1.png",l="/posts/2022/08/img-2.png",k="/posts/2022/08/img-3.png",t="/posts/2022/08/img-4.png",e="/posts/2022/08/img-5.png",E="/posts/2022/08/img-6.png",d="/posts/2022/08/img-7.png",g="/posts/2022/08/img-8.png",b=JSON.parse('{"title":"Vue3新属性 — css中使用v-bind（v-bind in css）","description":"本文主要介绍Vue3中的新增的`v-bind()`的常用使用方式，主要包括在`css`,`less`,`scss`中的使用，本文将主要通过一个demo中的使用来展示","frontmatter":{"layout":"doc","title":"Vue3新属性 — css中使用v-bind（v-bind in css）","date":"2022-08-11T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"description","content":"本文主要介绍Vue3中的新增的`v-bind()`的常用使用方式，主要包括在`css`,`less`,`scss`中的使用，本文将主要通过一个demo中的使用来展示"}],["meta",{"name":"keywords","content":"vue vue3 js javascript v-bind"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）.md","filePath":"posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）.md","lastUpdated":null}'),r={name:"posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）.md"};function c(y,s,F,o,C,B){return h(),a("div",null,s[0]||(s[0]=[n(`<blockquote><p>文章摘要</p></blockquote><p>这篇文章介绍了在 Vue3 中如何使用 v-bind() 来动态绑定 CSS 样式，尤其是在 CSS、LESS 和 SCSS 文件中的应用。</p><p>关键内容总结： 背景：文章解释了 Vue3 中 v-bind() 在样式绑定中的新用法，展示了在不同样式表语言（CSS、LESS、SCSS）中的常见应用场景。 实际示例： CSS：展示了通过 v-bind() 绑定直接使用的值、拼接值、对象调用和组合使用四种方式。 LESS：与 CSS 类似，使用变量和 v-bind() 绑定数据，但在 LESS 中出现了拼接使用的问题。 问题分析： 拼接使用问题：在 LESS 中，某些拼接方式无法正常工作，导致变量无法正确转换为带单位的值，甚至会导致错误。 错误提示：解释了因 LESS 在拼接操作时报错，导致绑定失败的问题。</p><h1 id="vue3新属性-css-中的-v-bind" tabindex="-1">Vue3新属性：CSS 中的 <code>v-bind()</code> <a class="header-anchor" href="#vue3新属性-css-中的-v-bind" aria-label="Permalink to &quot;Vue3新属性：CSS 中的 \`v-bind()\`&quot;">​</a></h1><h2 id="写在前面" tabindex="-1">写在前面： <a class="header-anchor" href="#写在前面" aria-label="Permalink to &quot;写在前面：&quot;">​</a></h2><p>本文主要介绍Vue3中的新增的<code>v-bind()</code>的常用使用方式，主要包括在<code>css</code>,<code>less</code>,<code>scss</code>中的使用，可以参考官方文档查看：<a href="https://cn.vuejs.org/api/sfc-css-features.html#v-bind-in-css" target="_blank" rel="noreferrer">Vue3官方文档</a>，本文将主要通过一个demo中的使用来展示</p><h2 id="实际使用" tabindex="-1">实际使用： <a class="header-anchor" href="#实际使用" aria-label="Permalink to &quot;实际使用：&quot;">​</a></h2><p>先创建一个通过的页面结构，因为是结构是通用内容，所以这里在直接进行简单的定义</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span_title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      这是测试文字</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><ul><li><p>在<code>css</code>中：</p><p>在<code>css</code>中主要通过直接进行绑定，主要包括几种使用方式（我自己编的名词）：<code>直接使用</code>、<code>拼接使用</code>、<code>对象调用</code>、<code>组合使用</code>【这是我想到的几种常见方式，如果有特殊需求，可以评论区沟通】</p><p>在JS中先对需要用的数据进行定义：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 进行拼接调用测试的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 直接调用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> div_height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;400px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> div_color </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;#e89393&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 对象调用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> span </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;200px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;200px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;green&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 组合调用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> transition </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;cubic-bezier(0, 1.5, .6, 1)&#39;</span></span></code></pre></div><p>然后这些数据直接在<code>css</code>中进行使用，使用<code>v-bind()</code>进行绑定</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;css&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 拼接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(width + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_height);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_color);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 对象调用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.color&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 组合使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">all</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> .9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> v-bind(transition);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.span:hover</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#a5f5b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>在对应的四个方式的调用中：</p><p><code>直接使用</code>：完全没有问题</p><p><code>拼接使用</code>：这个在<code>css</code>中没有问题，不过在<code>scss</code>中会出现错误，这个在下面的<code>scss</code>中会有详细介绍</p><p><code>对象调用</code>：对象的调用和直接使用类似，不过不同的是，需要使用引号的包裹才能正常使用，如果直接书写会报错</p><p><code>组合使用</code>：完全没问题</p></li><li><p>在<code>less</code>中：</p><p>使用的数据同样是上面给出的数据，这里直接改样式的内容了</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;less&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 使用变量承接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_height);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: @height;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_color);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    /* 对象调用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: @width;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.color&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">_</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      @</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(transition);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      /* 组合使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">all</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> .9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @transition;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#a5f5b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p><code>直接使用</code>：没有问题</p><p><code>拼接使用</code>：<strong>存在问题</strong>，在下面尝试进行了解决</p><p><code>对象调用</code>：没问题</p><p><code>组合使用</code>：没问题</p><h3>问题：</h3><blockquote><p>在拼接使用有几种方式：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义使用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 直接拼接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind( width + &#39;px&#39;);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 拿到内容后拼接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(width) + &#39;px&#39;;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 使用时拼接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(width);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + &#39;px&#39;;</span></span></code></pre></div><p>常用的拼接方法一般为这几种（如果有欠缺还请补充），这几种方式都进行了尝试，其中第二种第三种会没有效果，第一种会直接报错</p></blockquote><h3>问题分析（尝试解决）：【这部分会很长，如果不想看，可以直接跳到解决方法】</h3><p>首先是第一种，如果使用的话会直接报错，报错内容为：</p></li></ul><p><img src="`+p+'" alt="在这里插入图片描述"></p><p>因为<code>less</code>的直接报错，导致定义的变量压根就没有被编译出来，从而报错</p><p>第二种和第三种错误一样：</p><p><img src="'+l+'" alt="在这里插入图片描述"></p><p>在这种使用方式中，变量可以正确承接，但是不能完成拼接的操作，导致只有变量而没有单位，并且可以看出最终都被翻译为<code>var(--变量名)</code>来执行，所以顺便也对<code>var()</code>进行了拼接测试</p><p><img src="'+k+`" alt="在这里插入图片描述"></p><p>这里进行调用内容的定义，并且模仿编译后的内容，进行使用，在这种情况下尝试使用拼接</p><blockquote><p>尝试的拼接方式：</p><p><code>直接拼接</code>：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: var(--test);</span></span></code></pre></div><p><code>接受变量后拼接</code>：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: var(--test</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &#39;px&#39;);</span></span></code></pre></div><p><code>继承后拼接</code>：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: var(--test) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &#39;px&#39;;</span></span></code></pre></div></blockquote><p>结果也非常让不出意外的都不行，并且在第二种方式也是直接报错的，在寻找问题的过程中，发现了更加<code>amazing</code>的事情：</p><p><img src="`+t+'" alt="在这里插入图片描述"></p><p>这个变量压根就没定义，或者说没被识别到，所以重新模仿<code>Vue</code>直接定义行内样式，并且使用拼接尝试：</p><p><img src="'+e+'" alt="在这里插入图片描述"></p><p>这种直接的拼接方式直接将所有内容都进行了拼接，再换一种思路：使用<code>V-bind</code>这个V-bind指的是数据的而不是样式：</p><p><img src="'+E+`" alt="在这里插入图片描述"></p><p>这次问题得到了解决，并且样式数据也是响应式的单个数据，并且也是在<code>less</code>中正确使用，应该也算解决问题吧</p><h3>解决方式（思路）：</h3><p>将变量的内容在<code>行内样式</code>使用拼接的方式进行定义，然后在定义的<code>less或scss</code>中进行使用，因为定义的样式是行内样式，所以优先级和变量出现的位置，都是在使用之前，所以可以正常使用</p><h3>完整代码：</h3><blockquote><p>使用数据的定义：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 大部分数据和预先提供的数据一样（这里只写了新增数据）</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> test </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span></span></code></pre></div><p>页面结构：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--	改变的内容为下面这行（其他内容和原来内容保持一致）--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--	【在这里对要使用的数据进行单位的绑定】--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{&#39;--test&#39; :test + &#39;px&#39;}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">   &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span_title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">     这是测试文字</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">   &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>样式的使用：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;less&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 承接使用</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: var(--test);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: @width;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 或者直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div></blockquote><p>在<code>css</code>的测试中几种方式也都能完美运行，并且在<code>less</code>的特有的数据绑定中也都没有问题，对于<code>拼接使用</code>是可以正常使用的。</p><p>我用的工具是<code>webstorm</code>less也是唯一一个没有报错的提示的（工具内的报错提示，可能不认识新内容把）</p><ul><li><p>在<code>scss</code>中：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;scss&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 使用变量承接</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$width: v-bind(width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &#39;px&#39;);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$height: v-bind(div_height);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 拼接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: $width;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: $height;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_color);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    $</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    /* 对象调用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: $width;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.color&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">_</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      $</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(transition);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      /* 组合使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">all</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> .9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $transition;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#a5f5b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p><code>scss</code>相对<code>less</code>一些方法更加灵活，在<code>v-bind()</code>的使用中，拼接使用会出现错误，这个暂时按下不表，在原理中会详细阐述</p></li><li><p>执行原理：</p><p><code>v-bind() in css</code>并没有进行劫持或者其他操作，他主要完成的任务是将<code>v-bind()</code>中的内容通过自定义属性的方式进行了重新定义，在编译后代码中可以看到</p><p><img src="`+d+'" alt="在这里插入图片描述"></p><p>所有的数据直接在自定义属性中进行，并且直接对应引用，自定义属性的内容的改变影响视图的效果，从而达到数据影响视图的效果，这个在使用中<code>less</code>,<code>css</code>中完全没有问题</p><p>但是，在<code>scss</code>中，因为编译之后<code>名字无法进行匹配</code>从而造成样式的丢失</p><p><img src="'+g+'" alt="在这里插入图片描述"></p><p>可以看到，使用的名字和编译的名字并不匹配，从而出错，这个使用时需要注意</p></li></ul>',32)]))}const u=i(r,[["render",c]]);export{b as __pageData,u as default};

docs/.vitepress/dist/assets/posts_2022_08_Vue3新属性 — css中使用v-bind（v-bind in css）.md.D7pEpzPC.lean.js

@@ -0,0 +1,178 @@
+import{_ as i,D as a,af as n,B as h}from"./chunks/framework.BsGVjEHh.js";const p="/posts/2022/08/img-1.png",l="/posts/2022/08/img-2.png",k="/posts/2022/08/img-3.png",t="/posts/2022/08/img-4.png",e="/posts/2022/08/img-5.png",E="/posts/2022/08/img-6.png",d="/posts/2022/08/img-7.png",g="/posts/2022/08/img-8.png",b=JSON.parse('{"title":"Vue3新属性 — css中使用v-bind（v-bind in css）","description":"本文主要介绍Vue3中的新增的`v-bind()`的常用使用方式，主要包括在`css`,`less`,`scss`中的使用，本文将主要通过一个demo中的使用来展示","frontmatter":{"layout":"doc","title":"Vue3新属性 — css中使用v-bind（v-bind in css）","date":"2022-08-11T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"description","content":"本文主要介绍Vue3中的新增的`v-bind()`的常用使用方式，主要包括在`css`,`less`,`scss`中的使用，本文将主要通过一个demo中的使用来展示"}],["meta",{"name":"keywords","content":"vue vue3 js javascript v-bind"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）.md","filePath":"posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）.md","lastUpdated":null}'),r={name:"posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）.md"};function c(y,s,F,o,C,B){return h(),a("div",null,s[0]||(s[0]=[n(`<blockquote><p>文章摘要</p></blockquote><p>这篇文章介绍了在 Vue3 中如何使用 v-bind() 来动态绑定 CSS 样式，尤其是在 CSS、LESS 和 SCSS 文件中的应用。</p><p>关键内容总结： 背景：文章解释了 Vue3 中 v-bind() 在样式绑定中的新用法，展示了在不同样式表语言（CSS、LESS、SCSS）中的常见应用场景。 实际示例： CSS：展示了通过 v-bind() 绑定直接使用的值、拼接值、对象调用和组合使用四种方式。 LESS：与 CSS 类似，使用变量和 v-bind() 绑定数据，但在 LESS 中出现了拼接使用的问题。 问题分析： 拼接使用问题：在 LESS 中，某些拼接方式无法正常工作，导致变量无法正确转换为带单位的值，甚至会导致错误。 错误提示：解释了因 LESS 在拼接操作时报错，导致绑定失败的问题。</p><h1 id="vue3新属性-css-中的-v-bind" tabindex="-1">Vue3新属性：CSS 中的 <code>v-bind()</code> <a class="header-anchor" href="#vue3新属性-css-中的-v-bind" aria-label="Permalink to &quot;Vue3新属性：CSS 中的 \`v-bind()\`&quot;">​</a></h1><h2 id="写在前面" tabindex="-1">写在前面： <a class="header-anchor" href="#写在前面" aria-label="Permalink to &quot;写在前面：&quot;">​</a></h2><p>本文主要介绍Vue3中的新增的<code>v-bind()</code>的常用使用方式，主要包括在<code>css</code>,<code>less</code>,<code>scss</code>中的使用，可以参考官方文档查看：<a href="https://cn.vuejs.org/api/sfc-css-features.html#v-bind-in-css" target="_blank" rel="noreferrer">Vue3官方文档</a>，本文将主要通过一个demo中的使用来展示</p><h2 id="实际使用" tabindex="-1">实际使用： <a class="header-anchor" href="#实际使用" aria-label="Permalink to &quot;实际使用：&quot;">​</a></h2><p>先创建一个通过的页面结构，因为是结构是通用内容，所以这里在直接进行简单的定义</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span_title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      这是测试文字</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><ul><li><p>在<code>css</code>中：</p><p>在<code>css</code>中主要通过直接进行绑定，主要包括几种使用方式（我自己编的名词）：<code>直接使用</code>、<code>拼接使用</code>、<code>对象调用</code>、<code>组合使用</code>【这是我想到的几种常见方式，如果有特殊需求，可以评论区沟通】</p><p>在JS中先对需要用的数据进行定义：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 进行拼接调用测试的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 直接调用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> div_height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;400px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> div_color </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;#e89393&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 对象调用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> span </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;200px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;200px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;green&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 组合调用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> transition </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;cubic-bezier(0, 1.5, .6, 1)&#39;</span></span></code></pre></div><p>然后这些数据直接在<code>css</code>中进行使用，使用<code>v-bind()</code>进行绑定</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;css&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 拼接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(width + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_height);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_color);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 对象调用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.color&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 组合使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">all</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> .9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> v-bind(transition);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.span:hover</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#a5f5b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>在对应的四个方式的调用中：</p><p><code>直接使用</code>：完全没有问题</p><p><code>拼接使用</code>：这个在<code>css</code>中没有问题，不过在<code>scss</code>中会出现错误，这个在下面的<code>scss</code>中会有详细介绍</p><p><code>对象调用</code>：对象的调用和直接使用类似，不过不同的是，需要使用引号的包裹才能正常使用，如果直接书写会报错</p><p><code>组合使用</code>：完全没问题</p></li><li><p>在<code>less</code>中：</p><p>使用的数据同样是上面给出的数据，这里直接改样式的内容了</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;less&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 使用变量承接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_height);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: @height;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_color);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    /* 对象调用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: @width;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.color&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">_</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      @</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(transition);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      /* 组合使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">all</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> .9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @transition;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#a5f5b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p><code>直接使用</code>：没有问题</p><p><code>拼接使用</code>：<strong>存在问题</strong>，在下面尝试进行了解决</p><p><code>对象调用</code>：没问题</p><p><code>组合使用</code>：没问题</p><h3>问题：</h3><blockquote><p>在拼接使用有几种方式：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义使用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 直接拼接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind( width + &#39;px&#39;);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 拿到内容后拼接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(width) + &#39;px&#39;;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 使用时拼接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(width);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + &#39;px&#39;;</span></span></code></pre></div><p>常用的拼接方法一般为这几种（如果有欠缺还请补充），这几种方式都进行了尝试，其中第二种第三种会没有效果，第一种会直接报错</p></blockquote><h3>问题分析（尝试解决）：【这部分会很长，如果不想看，可以直接跳到解决方法】</h3><p>首先是第一种，如果使用的话会直接报错，报错内容为：</p></li></ul><p><img src="`+p+'" alt="在这里插入图片描述"></p><p>因为<code>less</code>的直接报错，导致定义的变量压根就没有被编译出来，从而报错</p><p>第二种和第三种错误一样：</p><p><img src="'+l+'" alt="在这里插入图片描述"></p><p>在这种使用方式中，变量可以正确承接，但是不能完成拼接的操作，导致只有变量而没有单位，并且可以看出最终都被翻译为<code>var(--变量名)</code>来执行，所以顺便也对<code>var()</code>进行了拼接测试</p><p><img src="'+k+`" alt="在这里插入图片描述"></p><p>这里进行调用内容的定义，并且模仿编译后的内容，进行使用，在这种情况下尝试使用拼接</p><blockquote><p>尝试的拼接方式：</p><p><code>直接拼接</code>：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: var(--test);</span></span></code></pre></div><p><code>接受变量后拼接</code>：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: var(--test</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &#39;px&#39;);</span></span></code></pre></div><p><code>继承后拼接</code>：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: var(--test) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &#39;px&#39;;</span></span></code></pre></div></blockquote><p>结果也非常让不出意外的都不行，并且在第二种方式也是直接报错的，在寻找问题的过程中，发现了更加<code>amazing</code>的事情：</p><p><img src="`+t+'" alt="在这里插入图片描述"></p><p>这个变量压根就没定义，或者说没被识别到，所以重新模仿<code>Vue</code>直接定义行内样式，并且使用拼接尝试：</p><p><img src="'+e+'" alt="在这里插入图片描述"></p><p>这种直接的拼接方式直接将所有内容都进行了拼接，再换一种思路：使用<code>V-bind</code>这个V-bind指的是数据的而不是样式：</p><p><img src="'+E+`" alt="在这里插入图片描述"></p><p>这次问题得到了解决，并且样式数据也是响应式的单个数据，并且也是在<code>less</code>中正确使用，应该也算解决问题吧</p><h3>解决方式（思路）：</h3><p>将变量的内容在<code>行内样式</code>使用拼接的方式进行定义，然后在定义的<code>less或scss</code>中进行使用，因为定义的样式是行内样式，所以优先级和变量出现的位置，都是在使用之前，所以可以正常使用</p><h3>完整代码：</h3><blockquote><p>使用数据的定义：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 大部分数据和预先提供的数据一样（这里只写了新增数据）</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> test </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span></span></code></pre></div><p>页面结构：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--	改变的内容为下面这行（其他内容和原来内容保持一致）--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--	【在这里对要使用的数据进行单位的绑定】--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{&#39;--test&#39; :test + &#39;px&#39;}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">   &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span_title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">     这是测试文字</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">   &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>样式的使用：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;less&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 承接使用</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: var(--test);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: @width;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 或者直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div></blockquote><p>在<code>css</code>的测试中几种方式也都能完美运行，并且在<code>less</code>的特有的数据绑定中也都没有问题，对于<code>拼接使用</code>是可以正常使用的。</p><p>我用的工具是<code>webstorm</code>less也是唯一一个没有报错的提示的（工具内的报错提示，可能不认识新内容把）</p><ul><li><p>在<code>scss</code>中：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;scss&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 使用变量承接</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$width: v-bind(width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &#39;px&#39;);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$height: v-bind(div_height);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 拼接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: $width;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: $height;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_color);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    $</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    /* 对象调用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: $width;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.color&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">_</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      $</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(transition);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      /* 组合使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">all</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> .9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $transition;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#a5f5b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p><code>scss</code>相对<code>less</code>一些方法更加灵活，在<code>v-bind()</code>的使用中，拼接使用会出现错误，这个暂时按下不表，在原理中会详细阐述</p></li><li><p>执行原理：</p><p><code>v-bind() in css</code>并没有进行劫持或者其他操作，他主要完成的任务是将<code>v-bind()</code>中的内容通过自定义属性的方式进行了重新定义，在编译后代码中可以看到</p><p><img src="`+d+'" alt="在这里插入图片描述"></p><p>所有的数据直接在自定义属性中进行，并且直接对应引用，自定义属性的内容的改变影响视图的效果，从而达到数据影响视图的效果，这个在使用中<code>less</code>,<code>css</code>中完全没有问题</p><p>但是，在<code>scss</code>中，因为编译之后<code>名字无法进行匹配</code>从而造成样式的丢失</p><p><img src="'+g+'" alt="在这里插入图片描述"></p><p>可以看到，使用的名字和编译的名字并不匹配，从而出错，这个使用时需要注意</p></li></ul>',32)]))}const u=i(r,[["render",c]]);export{b as __pageData,u as default};

docs/.vitepress/dist/assets/posts_2022_08_在JavaScript获取Promise的状态.md.DwsppogZ.js

@@ -0,0 +1,39 @@
+import{_ as i,D as a,af as e,B as n}from"./chunks/framework.BsGVjEHh.js";const E=JSON.parse('{"title":"在JavaScript获取Promise的状态","description":"","frontmatter":{"layout":"doc","title":"在JavaScript获取Promise的状态","date":"2022-08-09T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"keywords","content":"js javascript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/08/在JavaScript获取Promise的状态.md","filePath":"posts/2022/08/在JavaScript获取Promise的状态.md","lastUpdated":null}'),t={name:"posts/2022/08/在JavaScript获取Promise的状态.md"};function l(h,s,p,k,r,d){return n(),a("div",null,s[0]||(s[0]=[e(`<blockquote><p>文章摘要</p></blockquote><p>这篇文章讨论了如何同步地获取 JavaScript Promise 对象的状态。通过一个 Stack Overflow 上的解决方案，文章介绍了如何使用 Promise.race() 方法判断 Promise 的状态。</p><p>关键内容总结： 问题：如何在执行过程中同步地检查一个 Promise 的状态？ 解决方案：文章通过 Promise.race() 方法对 Promise 和一个额外的 target 对象进行竞赛（race）。根据返回的对象，判断 Promise 是否处于 pending（待定）、fulfilled（已完成）或 rejected（已拒绝）状态。 代码分析： 通过创建一个 target 对象，Promise.race() 在 Promise 和 target 中最先完成的会决定返回值。 如果 Promise 未完成，则返回 pending；如果已完成且无错误，则返回 fulfilled；如果发生错误，则返回 rejected。 注意事项：Promise.race() 中的顺序很重要，确保 promise 在前，否则可能会影响结果。 这个方法利用了 Promise.race() 的特性，巧妙地判断了 Promise 的状态。</p><h1 id="写在前面" tabindex="-1">写在前面 <a class="header-anchor" href="#写在前面" aria-label="Permalink to &quot;写在前面&quot;">​</a></h1><p>本文属于对<code>stackoverflow</code>中写法的解析，原文链接：<a href="https://stackoverflow.com/questions/30564053/how-can-i-synchronously-determine-a-javascript-promises-state" target="_blank" rel="noreferrer">**Stack Overflow ** </a></p><p>如果你在其他环境下遇到同样问题，这个<a href="https://blog.csdn.net/Lee_01/article/details/124892590" target="_blank" rel="noreferrer">文章</a>可能也会有帮助</p><h1 id="问题复现" tabindex="-1">问题复现 <a class="header-anchor" href="#问题复现" aria-label="Permalink to &quot;问题复现&quot;">​</a></h1><p>如何在代码执行过程中获取到<code>promise</code>的状态？</p><p>如果你想寻找或尝试通过原生的属性，或者指定API进行访问，基本可以放弃了，我也是看了很多博客的确没找到，如果您找了其他方式，还望指教</p><h1 id="解决方式" tabindex="-1">解决方式 <a class="header-anchor" href="#解决方式" aria-label="Permalink to &quot;解决方式&quot;">​</a></h1><p>本文中提到的解决方式主要是继续<code>stackoverflow</code>中提供的解决方式【完整代码】</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* 传入需要测试的 Promise 对象，将对应结果返回</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> promise</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 需要测试的 Promise 对象</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {Promise&lt;string&gt;}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">*/</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> promiseState</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> promise</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">race</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([promise, target]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">          value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pending&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;fulfilled&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rejected&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      )</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 测试代码</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {});</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">promiseState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(a).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// fulfilled</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">promiseState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(b).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// rejected</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">promiseState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(c).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// pending</span></span></code></pre></div><p>这种方式通过<code>promise</code>中的<code>race()</code>方法来进行了状态的判断，非常奇妙的一种方式</p><h1 id="代码分析" tabindex="-1">代码分析 <a class="header-anchor" href="#代码分析" aria-label="Permalink to &quot;代码分析&quot;">​</a></h1><ol><li><p>在方法中会接收一个<code>promise</code>对象，开始了整个方法</p></li><li><p>进入方法后会先创建一个<code>target</code>对象，这个对象只用于后续的匹配，没有其他含义</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span></code></pre></div></li><li><p>然后开始最核心的部分，因为<code>stackoverflow</code>中对代码进行简写，可以先进行代码的还原</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">race</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([promise, target]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">                // 成功回调</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">                value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">                    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pending&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;fulfilled&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">                // 失败回调</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">                    return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rejected&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        )</span></span></code></pre></div><p>可以复现出这种结构，<code>promise</code>的<code>race</code>开始后，接收两个对象，一个为刚刚创建的<code>target</code>对象，还有一个是接收到的<code>promise</code> 对象，当两个其中一个状态结束时，整个<code>Promise.race()</code>结束，这时分为三种情况</p><ol><li>当传入的<code>promise</code>为<code>pending</code>状态时，<code>Promise.race</code>会找到最先有确定状态的元素，并将其返回，因为<code>promise</code> 没有结束，那么返回值对象会接收到定义的<code>target</code>，因为<code>target</code>的状态是确定的，这时<code>value</code>接收到的值就是已经确定状态的 <code>target</code>，如果进行对比，那么他们两个一定是相等的，这时也就是返回<code>pending</code></li><li>当传入的<code>promise</code>为<code>fulfilled</code>状态时，相当于<code>promise</code>已经有确定的值了，<code>Promise.race</code> 匹配到第一个直接结束，并将匹配到的内容返回，返回的内容因为是一个全新的对象，对象的内存地址不可能相等，所以判断结果是 <code>false</code>，也就返回<code>fulfilled</code></li><li>当传入的<code>promise</code>为<code>rejected</code>状态时，<code>promise</code>状态确定，那么因为状态报错，直接进入<code>catch</code>中，走失败回调，这个回调一旦执行，就可以判定 <code>promsie</code>结束，并且内容出现报错，直接返回<code>rejected</code>即可</li><li>在调用的时候，因为返回的时会将对应的状态通过<code>promise</code>返回，所以直接通过调用方法之后的<code>then</code>中指定回调来完成状态的获取</li></ol><ul><li><p><strong>值得注意的是</strong>：<code>Promise.race()</code>在匹配的过程中，一定保证要判断的<code>promise</code>在前，因为只有当<code>promise</code> 状态不确定时才会判断第二个内容的状态，如果将状态已经确定的<code>target</code>放在第一个，那么将不会再进行<code>promise</code>的判断，返回结果永远为 <code>fulfilled</code></p></li><li><p>并且因为<code>catch</code>有两种形式，可以进行变形，这种形式可能更常见（根据个人习惯了）</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> promiseState</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> promise</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">race</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([promise, target]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">            value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">                return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pending&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;fulfilled&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rejected&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    })</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li></ul></li></ol>`,15)]))}const c=i(t,[["render",l]]);export{E as __pageData,c as default};

docs/.vitepress/dist/assets/posts_2022_08_在JavaScript获取Promise的状态.md.DwsppogZ.lean.js

@@ -0,0 +1,39 @@
+import{_ as i,D as a,af as e,B as n}from"./chunks/framework.BsGVjEHh.js";const E=JSON.parse('{"title":"在JavaScript获取Promise的状态","description":"","frontmatter":{"layout":"doc","title":"在JavaScript获取Promise的状态","date":"2022-08-09T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"keywords","content":"js javascript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2022/08/在JavaScript获取Promise的状态.md","filePath":"posts/2022/08/在JavaScript获取Promise的状态.md","lastUpdated":null}'),t={name:"posts/2022/08/在JavaScript获取Promise的状态.md"};function l(h,s,p,k,r,d){return n(),a("div",null,s[0]||(s[0]=[e(`<blockquote><p>文章摘要</p></blockquote><p>这篇文章讨论了如何同步地获取 JavaScript Promise 对象的状态。通过一个 Stack Overflow 上的解决方案，文章介绍了如何使用 Promise.race() 方法判断 Promise 的状态。</p><p>关键内容总结： 问题：如何在执行过程中同步地检查一个 Promise 的状态？ 解决方案：文章通过 Promise.race() 方法对 Promise 和一个额外的 target 对象进行竞赛（race）。根据返回的对象，判断 Promise 是否处于 pending（待定）、fulfilled（已完成）或 rejected（已拒绝）状态。 代码分析： 通过创建一个 target 对象，Promise.race() 在 Promise 和 target 中最先完成的会决定返回值。 如果 Promise 未完成，则返回 pending；如果已完成且无错误，则返回 fulfilled；如果发生错误，则返回 rejected。 注意事项：Promise.race() 中的顺序很重要，确保 promise 在前，否则可能会影响结果。 这个方法利用了 Promise.race() 的特性，巧妙地判断了 Promise 的状态。</p><h1 id="写在前面" tabindex="-1">写在前面 <a class="header-anchor" href="#写在前面" aria-label="Permalink to &quot;写在前面&quot;">​</a></h1><p>本文属于对<code>stackoverflow</code>中写法的解析，原文链接：<a href="https://stackoverflow.com/questions/30564053/how-can-i-synchronously-determine-a-javascript-promises-state" target="_blank" rel="noreferrer">**Stack Overflow ** </a></p><p>如果你在其他环境下遇到同样问题，这个<a href="https://blog.csdn.net/Lee_01/article/details/124892590" target="_blank" rel="noreferrer">文章</a>可能也会有帮助</p><h1 id="问题复现" tabindex="-1">问题复现 <a class="header-anchor" href="#问题复现" aria-label="Permalink to &quot;问题复现&quot;">​</a></h1><p>如何在代码执行过程中获取到<code>promise</code>的状态？</p><p>如果你想寻找或尝试通过原生的属性，或者指定API进行访问，基本可以放弃了，我也是看了很多博客的确没找到，如果您找了其他方式，还望指教</p><h1 id="解决方式" tabindex="-1">解决方式 <a class="header-anchor" href="#解决方式" aria-label="Permalink to &quot;解决方式&quot;">​</a></h1><p>本文中提到的解决方式主要是继续<code>stackoverflow</code>中提供的解决方式【完整代码】</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/**</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* 传入需要测试的 Promise 对象，将对应结果返回</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> promise</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 需要测试的 Promise 对象</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {Promise&lt;string&gt;}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">*/</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> promiseState</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> promise</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">race</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([promise, target]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">          value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pending&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;fulfilled&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rejected&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      )</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 测试代码</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {});</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">promiseState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(a).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// fulfilled</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">promiseState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(b).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// rejected</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">promiseState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(c).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// pending</span></span></code></pre></div><p>这种方式通过<code>promise</code>中的<code>race()</code>方法来进行了状态的判断，非常奇妙的一种方式</p><h1 id="代码分析" tabindex="-1">代码分析 <a class="header-anchor" href="#代码分析" aria-label="Permalink to &quot;代码分析&quot;">​</a></h1><ol><li><p>在方法中会接收一个<code>promise</code>对象，开始了整个方法</p></li><li><p>进入方法后会先创建一个<code>target</code>对象，这个对象只用于后续的匹配，没有其他含义</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span></code></pre></div></li><li><p>然后开始最核心的部分，因为<code>stackoverflow</code>中对代码进行简写，可以先进行代码的还原</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">race</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([promise, target]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">                // 成功回调</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">                value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">                    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pending&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;fulfilled&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">                // 失败回调</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">                    return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rejected&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        )</span></span></code></pre></div><p>可以复现出这种结构，<code>promise</code>的<code>race</code>开始后，接收两个对象，一个为刚刚创建的<code>target</code>对象，还有一个是接收到的<code>promise</code> 对象，当两个其中一个状态结束时，整个<code>Promise.race()</code>结束，这时分为三种情况</p><ol><li>当传入的<code>promise</code>为<code>pending</code>状态时，<code>Promise.race</code>会找到最先有确定状态的元素，并将其返回，因为<code>promise</code> 没有结束，那么返回值对象会接收到定义的<code>target</code>，因为<code>target</code>的状态是确定的，这时<code>value</code>接收到的值就是已经确定状态的 <code>target</code>，如果进行对比，那么他们两个一定是相等的，这时也就是返回<code>pending</code></li><li>当传入的<code>promise</code>为<code>fulfilled</code>状态时，相当于<code>promise</code>已经有确定的值了，<code>Promise.race</code> 匹配到第一个直接结束，并将匹配到的内容返回，返回的内容因为是一个全新的对象，对象的内存地址不可能相等，所以判断结果是 <code>false</code>，也就返回<code>fulfilled</code></li><li>当传入的<code>promise</code>为<code>rejected</code>状态时，<code>promise</code>状态确定，那么因为状态报错，直接进入<code>catch</code>中，走失败回调，这个回调一旦执行，就可以判定 <code>promsie</code>结束，并且内容出现报错，直接返回<code>rejected</code>即可</li><li>在调用的时候，因为返回的时会将对应的状态通过<code>promise</code>返回，所以直接通过调用方法之后的<code>then</code>中指定回调来完成状态的获取</li></ol><ul><li><p><strong>值得注意的是</strong>：<code>Promise.race()</code>在匹配的过程中，一定保证要判断的<code>promise</code>在前，因为只有当<code>promise</code> 状态不确定时才会判断第二个内容的状态，如果将状态已经确定的<code>target</code>放在第一个，那么将不会再进行<code>promise</code>的判断，返回结果永远为 <code>fulfilled</code></p></li><li><p>并且因为<code>catch</code>有两种形式，可以进行变形，这种形式可能更常见（根据个人习惯了）</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> promiseState</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> promise</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">race</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([promise, target]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">            value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">                return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pending&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;fulfilled&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rejected&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    })</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li></ul></li></ol>`,15)]))}const c=i(t,[["render",l]]);export{E as __pageData,c as default};

docs/.vitepress/dist/assets/posts_2024_08_TypeScript 应该被放弃吗.md.70Va1UEl.js

@@ -0,0 +1 @@
+import{_ as t,D as e,af as r,B as o}from"./chunks/framework.BsGVjEHh.js";const c="/posts/2024/08/10003/up-58c4155f83bbd826f4bb0ec1ab8d1e32ccd-1719469395020-15-1719469397190-17.png",i="/posts/2024/08/10003/eed5a2dd0f71b8b4790a1b20c708416c-1719469475131-21.png",a="/posts/2024/08/10003/image-20240627144850640.png",s="/posts/2024/08/10003/image-20240627143223214.png",g=JSON.parse('{"title":"TypeScript 应该被放弃吗","description":"","frontmatter":{"layout":"doc","title":"TypeScript 应该被放弃吗","date":"2024-08-04T00:00:00.000Z","tags":["编程","学习","思考"],"head":[["meta",{"name":"keywords","content":"vue vue3 js javascript react ts typescript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/TypeScript 应该被放弃吗.md","filePath":"posts/2024/08/TypeScript 应该被放弃吗.md","lastUpdated":null}'),l={name:"posts/2024/08/TypeScript 应该被放弃吗.md"};function n(y,p,S,d,T,u){return o(),e("div",null,p[0]||(p[0]=[r('<blockquote><p>文章摘要</p></blockquote><p>文章讨论了关于是否放弃 TypeScript 的问题，尤其是在一些大牛和社区项目的选择上。重点聚焦于两篇文章的观点：</p><p>Turbo 8 放弃 TypeScript：作者认为 TypeScript 的类型检查反而增加了开发中的负担，并且声明类型复杂化代码，减少了开发效率。这个观点在 Reddit 和知乎引发了激烈讨论，部分评论指出 Turbo 8 并不具备广泛影响力，且作者习惯发表反向意见。</p><p>TypeScript 的额外成本：第二篇文章提到，在某些场景下，TypeScript 的类型体操带来不必要的复杂度，尤其是对于小型项目，编写精确的类型定义可能比核心逻辑代码更为冗长。然而，TypeScript 相比于 JavaScript 在维护性和可扩展性上具有优势，尤其是对于框架和类库的开发者而言，尽管带来一些额外的维护成本。</p><p>总体来看，放弃 TypeScript 的选择多见于小型或开源项目的维护者，而对于大多数开发者来说，TypeScript 提供的类型系统和可维护性仍然是更受欢迎的选择。</p><h3 id="typescript-应该放弃吗" tabindex="-1">TypeScript 应该放弃吗 <a class="header-anchor" href="#typescript-应该放弃吗" aria-label="Permalink to &quot;TypeScript 应该放弃吗&quot;">​</a></h3><hr><p>抛出这个问题主要基于22年和23年发生的一些事件：</p><p><img src="'+c+'" alt="image-20240627143223214"></p><p><img src="'+i+'" alt="image-20240627143223214"></p><p>并且Svelte 不是第一个放弃 TypeScript 的前端框架。早在 2020 年，Deno 就迁移了一部分內部 TypeScript 代码到 JavaScript，以减少构建时间。</p><p>并且这些大牛放弃 TypeScript 似乎还加快了工作进度，但这个选择是否应该被普通开发者所选择？</p><p>搜了很多文章，但是大部分都在将一些很正确的废话，目前来看只有下面两片有参考价值。</p><h5 id="第一篇-turbo-8-正在放弃-typescript-hey-com" tabindex="-1">第一篇：<a href="https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01" target="_blank" rel="noreferrer">Turbo 8 正在放弃 TypeScript (hey.com)</a> <a class="header-anchor" href="#第一篇-turbo-8-正在放弃-typescript-hey-com" aria-label="Permalink to &quot;第一篇：[Turbo 8 正在放弃 TypeScript (hey.com)](https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01)&quot;">​</a></h5><blockquote><p>这是原文，正式这篇文章，引来了众多讨论</p></blockquote><p>文章的主要观点如下：</p><blockquote><p>TypeScript 只是妨碍了我。不仅因为它需要显式的编译步骤，还因为它用类型体操污染了代码</p></blockquote><p>—— 多余类型判断只会降低效率</p><p>文章没有多长，几乎没有太多参考价值，但毕竟是原文，还是搬过来比较好。</p><p>并且对于这篇文章，Reddit的评论区也是活力十足</p><p><img src="'+a+'" alt="image-20240627144850640"></p><p>并且在知乎对于这个问题的评价更加激进：</p><p><img src="'+s+'" alt="image-20240627143223214"></p><p>以下是文字版本：</p><blockquote><p>前端届盛产大牛，整点别人看不懂的代码，硬说函数式然后猛劲宣传就能当大牛。</p><p>搞计算机其实有一点不好，就是你以为有些应该不在世的大师他都活着呢。</p><p>算法分析之父高德纳还在呢。</p><p>WindowsNT内核之父David Cuttler也还在呢。</p><p>Linux内核之父Linus还到处喷人呢。</p><p>GUI和面向对象之父Allen Kay也还在呢。</p><p>Pascal总架构师，Delphi和C#之父，编程语言届的传奇<strong>Anders Hejlsberg</strong>也还在努力工作呢。</p><p>我不明白某些在社区当网红的不入流货色是怎么敢被封为大牛还大放厥词的。</p><p>对了，TypeScript就是Anders搞的。</p></blockquote><p>无论是知乎还是Reddit的讨论都是相对激进，并拳拳到肉那Line truncated

docs/.vitepress/dist/assets/posts_2024_08_TypeScript 应该被放弃吗.md.70Va1UEl.lean.js

@@ -0,0 +1 @@
+import{_ as t,D as e,af as r,B as o}from"./chunks/framework.BsGVjEHh.js";const c="/posts/2024/08/10003/up-58c4155f83bbd826f4bb0ec1ab8d1e32ccd-1719469395020-15-1719469397190-17.png",i="/posts/2024/08/10003/eed5a2dd0f71b8b4790a1b20c708416c-1719469475131-21.png",a="/posts/2024/08/10003/image-20240627144850640.png",s="/posts/2024/08/10003/image-20240627143223214.png",g=JSON.parse('{"title":"TypeScript 应该被放弃吗","description":"","frontmatter":{"layout":"doc","title":"TypeScript 应该被放弃吗","date":"2024-08-04T00:00:00.000Z","tags":["编程","学习","思考"],"head":[["meta",{"name":"keywords","content":"vue vue3 js javascript react ts typescript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/TypeScript 应该被放弃吗.md","filePath":"posts/2024/08/TypeScript 应该被放弃吗.md","lastUpdated":null}'),l={name:"posts/2024/08/TypeScript 应该被放弃吗.md"};function n(y,p,S,d,T,u){return o(),e("div",null,p[0]||(p[0]=[r('<blockquote><p>文章摘要</p></blockquote><p>文章讨论了关于是否放弃 TypeScript 的问题，尤其是在一些大牛和社区项目的选择上。重点聚焦于两篇文章的观点：</p><p>Turbo 8 放弃 TypeScript：作者认为 TypeScript 的类型检查反而增加了开发中的负担，并且声明类型复杂化代码，减少了开发效率。这个观点在 Reddit 和知乎引发了激烈讨论，部分评论指出 Turbo 8 并不具备广泛影响力，且作者习惯发表反向意见。</p><p>TypeScript 的额外成本：第二篇文章提到，在某些场景下，TypeScript 的类型体操带来不必要的复杂度，尤其是对于小型项目，编写精确的类型定义可能比核心逻辑代码更为冗长。然而，TypeScript 相比于 JavaScript 在维护性和可扩展性上具有优势，尤其是对于框架和类库的开发者而言，尽管带来一些额外的维护成本。</p><p>总体来看，放弃 TypeScript 的选择多见于小型或开源项目的维护者，而对于大多数开发者来说，TypeScript 提供的类型系统和可维护性仍然是更受欢迎的选择。</p><h3 id="typescript-应该放弃吗" tabindex="-1">TypeScript 应该放弃吗 <a class="header-anchor" href="#typescript-应该放弃吗" aria-label="Permalink to &quot;TypeScript 应该放弃吗&quot;">​</a></h3><hr><p>抛出这个问题主要基于22年和23年发生的一些事件：</p><p><img src="'+c+'" alt="image-20240627143223214"></p><p><img src="'+i+'" alt="image-20240627143223214"></p><p>并且Svelte 不是第一个放弃 TypeScript 的前端框架。早在 2020 年，Deno 就迁移了一部分內部 TypeScript 代码到 JavaScript，以减少构建时间。</p><p>并且这些大牛放弃 TypeScript 似乎还加快了工作进度，但这个选择是否应该被普通开发者所选择？</p><p>搜了很多文章，但是大部分都在将一些很正确的废话，目前来看只有下面两片有参考价值。</p><h5 id="第一篇-turbo-8-正在放弃-typescript-hey-com" tabindex="-1">第一篇：<a href="https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01" target="_blank" rel="noreferrer">Turbo 8 正在放弃 TypeScript (hey.com)</a> <a class="header-anchor" href="#第一篇-turbo-8-正在放弃-typescript-hey-com" aria-label="Permalink to &quot;第一篇：[Turbo 8 正在放弃 TypeScript (hey.com)](https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01)&quot;">​</a></h5><blockquote><p>这是原文，正式这篇文章，引来了众多讨论</p></blockquote><p>文章的主要观点如下：</p><blockquote><p>TypeScript 只是妨碍了我。不仅因为它需要显式的编译步骤，还因为它用类型体操污染了代码</p></blockquote><p>—— 多余类型判断只会降低效率</p><p>文章没有多长，几乎没有太多参考价值，但毕竟是原文，还是搬过来比较好。</p><p>并且对于这篇文章，Reddit的评论区也是活力十足</p><p><img src="'+a+'" alt="image-20240627144850640"></p><p>并且在知乎对于这个问题的评价更加激进：</p><p><img src="'+s+'" alt="image-20240627143223214"></p><p>以下是文字版本：</p><blockquote><p>前端届盛产大牛，整点别人看不懂的代码，硬说函数式然后猛劲宣传就能当大牛。</p><p>搞计算机其实有一点不好，就是你以为有些应该不在世的大师他都活着呢。</p><p>算法分析之父高德纳还在呢。</p><p>WindowsNT内核之父David Cuttler也还在呢。</p><p>Linux内核之父Linus还到处喷人呢。</p><p>GUI和面向对象之父Allen Kay也还在呢。</p><p>Pascal总架构师，Delphi和C#之父，编程语言届的传奇<strong>Anders Hejlsberg</strong>也还在努力工作呢。</p><p>我不明白某些在社区当网红的不入流货色是怎么敢被封为大牛还大放厥词的。</p><p>对了，TypeScript就是Anders搞的。</p></blockquote><p>无论是知乎还是Reddit的讨论都是相对激进，并拳拳到肉那Line truncated

docs/.vitepress/dist/assets/posts_2024_08_Vue还是React.md.c9EUtKit.js

@@ -0,0 +1 @@
+import{_ as a,D as t,af as o,B as r}from"./chunks/framework.BsGVjEHh.js";const c="/posts/2024/08/10003/image-20240626141050935-1719382253511-9.png",l="/posts/2024/08/10003/image-20240626141144499.png",i="/posts/2024/08/10003/image-20240626143412891.png",s="/posts/2024/08/10003/image-20240627133055166-1719466257222-11.png",f=JSON.parse('{"title":"Vue还是React?","description":"Vue和React、Nextjs如何选择","frontmatter":{"layout":"doc","title":"Vue还是React?","date":"2024-08-04T00:00:00.000Z","tags":["编程","学习","思考"],"head":[["meta",{"name":"description","content":"Vue和React、Nextjs如何选择"}],["meta",{"name":"keywords","content":"vue vue3 js javascript react ts typescript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/Vue还是React.md","filePath":"posts/2024/08/Vue还是React.md","lastUpdated":null}'),h={name:"posts/2024/08/Vue还是React.md"};function n(p,e,u,b,d,k){return r(),t("div",null,e[0]||(e[0]=[o('<blockquote><p>文章摘要</p></blockquote><p>这篇文章探讨了 Vue、React 和 Next.js 之间的选择，并深入分析了 React 的一些优缺点。作者指出，虽然 Vue 在国内市场占据主导地位，React 在国外仍然保持强大的活力。但与此同时，React 面临不少批评，特别是其逐渐显现的技术债务和性能问题。文章引用了一些反对 React 的观点，强调 React 已显老化，且与其他框架相比，存在着难以兼容和过度依赖自定义模块的问题。同时，文章还提到其他框架如 Svelte 的优越性，认为它能提供类似 React 的功能，但更加简洁和高效。</p><p>如果你对前端框架的选择和 React 未来的方向感兴趣，这篇文章将为你提供一些新的视角，帮助你做出更明智的决策。</p><h3 id="vue和react、nextjs如何选择" tabindex="-1">Vue和React、Nextjs如何选择 <a class="header-anchor" href="#vue和react、nextjs如何选择" aria-label="Permalink to &quot;Vue和React、Nextjs如何选择&quot;">​</a></h3><hr><p><code>Vue</code> 在大前端时代，在国内市场可谓是大杀特杀，几乎以压倒性的优势占领着国内市场，并且随着 2020 年<code>Vue3</code>的发布，以及<code>Vite</code>的推出，其生态更加完善，基本是国内市场做前端的首选语言。</p><p>但和国内相悖的是，在<code>JetBrains</code>与<code>StackOverflow</code>在2023年的数据报告中，在前端方面数据，<code>Node</code>和<code>React</code>以压倒性优势领先其他语言</p><p><img src="'+c+'" alt="2023 JetBrains开发者调查报告"></p><p><img src="'+l+'" alt="StackOverflow 2023调查报告"></p><p>2023JavaScript趋势报告：</p><p><img src="'+i+'" alt="image-20240626143412891"></p><p>和国内不同的是，<code>React</code>在国外保持着惊人的活力</p><p>但也有很多反对<code>React</code>的声音，以及关于<code>React</code>辩论的文章，如：</p><p><a href="https://joshcollinsworth.com/blog/antiquated-react" target="_blank" rel="noreferrer">你因为 React 而忘记（或从来不知道）的事情 - Josh Collinsworth 博客</a></p><p><a href="https://joshcollinsworth.com/blog/self-fulfilling-prophecy-of-react" target="_blank" rel="noreferrer">React 的自我实现预言 - Josh Collinsworth 博客</a></p><p><a href="https://changelog.com/jsparty/244" target="_blank" rel="noreferrer">辛辣的 React 辩论秀 🌶️ （JS Party #244） (changelog.com)</a></p><p>如果各位有兴趣可以读原文，我这里为每篇文章简单的总结。</p><h4 id="第一篇-你因为-react-而忘记-或从来不知道-的事情-josh-collinsworth-博客" tabindex="-1">第一篇：<a href="https://joshcollinsworth.com/blog/antiquated-react" target="_blank" rel="noreferrer">你因为 React 而忘记（或从来不知道）的事情 - Josh Collinsworth 博客</a> <a class="header-anchor" href="#第一篇-你因为-react-而忘记-或从来不知道-的事情-josh-collinsworth-博客" aria-label="Permalink to &quot;第一篇：[你因为 React 而忘记（或从来不知道）的事情 - Josh Collinsworth 博客](https://joshcollinsworth.com/blog/antiquated-react)&quot;">​</a></h4><blockquote><p>该文章也是被 <code>2023 JavaScript 行业调研报告</code> 所提到的文章，并且一些观点的确值得思考，但有的就一般了，为了准确传达原作者的意思，我这里会尽量中立的概括，也会引用部分原文进行对应部分内容的解释。</p></blockquote><ol><li><h5 id="并不是所有好的事物都会流行。" tabindex="-1">并不是所有好的事物都会流行。 <a class="header-anchor" href="#并不是所有好的事物都会流行。" aria-label="Permalink to &quot;并不是所有好的事物都会流行。&quot;">​</a></h5><blockquote><p>回首往事，我意识到：我天真地相信，任何好东西都不可避免地会流行起来——因此，任何值得了解的东西最终都会自己出
Line truncated

docs/.vitepress/dist/assets/posts_2024_08_Vue还是React.md.c9EUtKit.lean.js

@@ -0,0 +1 @@
+import{_ as a,D as t,af as o,B as r}from"./chunks/framework.BsGVjEHh.js";const c="/posts/2024/08/10003/image-20240626141050935-1719382253511-9.png",l="/posts/2024/08/10003/image-20240626141144499.png",i="/posts/2024/08/10003/image-20240626143412891.png",s="/posts/2024/08/10003/image-20240627133055166-1719466257222-11.png",f=JSON.parse('{"title":"Vue还是React?","description":"Vue和React、Nextjs如何选择","frontmatter":{"layout":"doc","title":"Vue还是React?","date":"2024-08-04T00:00:00.000Z","tags":["编程","学习","思考"],"head":[["meta",{"name":"description","content":"Vue和React、Nextjs如何选择"}],["meta",{"name":"keywords","content":"vue vue3 js javascript react ts typescript"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/Vue还是React.md","filePath":"posts/2024/08/Vue还是React.md","lastUpdated":null}'),h={name:"posts/2024/08/Vue还是React.md"};function n(p,e,u,b,d,k){return r(),t("div",null,e[0]||(e[0]=[o('<blockquote><p>文章摘要</p></blockquote><p>这篇文章探讨了 Vue、React 和 Next.js 之间的选择，并深入分析了 React 的一些优缺点。作者指出，虽然 Vue 在国内市场占据主导地位，React 在国外仍然保持强大的活力。但与此同时，React 面临不少批评，特别是其逐渐显现的技术债务和性能问题。文章引用了一些反对 React 的观点，强调 React 已显老化，且与其他框架相比，存在着难以兼容和过度依赖自定义模块的问题。同时，文章还提到其他框架如 Svelte 的优越性，认为它能提供类似 React 的功能，但更加简洁和高效。</p><p>如果你对前端框架的选择和 React 未来的方向感兴趣，这篇文章将为你提供一些新的视角，帮助你做出更明智的决策。</p><h3 id="vue和react、nextjs如何选择" tabindex="-1">Vue和React、Nextjs如何选择 <a class="header-anchor" href="#vue和react、nextjs如何选择" aria-label="Permalink to &quot;Vue和React、Nextjs如何选择&quot;">​</a></h3><hr><p><code>Vue</code> 在大前端时代，在国内市场可谓是大杀特杀，几乎以压倒性的优势占领着国内市场，并且随着 2020 年<code>Vue3</code>的发布，以及<code>Vite</code>的推出，其生态更加完善，基本是国内市场做前端的首选语言。</p><p>但和国内相悖的是，在<code>JetBrains</code>与<code>StackOverflow</code>在2023年的数据报告中，在前端方面数据，<code>Node</code>和<code>React</code>以压倒性优势领先其他语言</p><p><img src="'+c+'" alt="2023 JetBrains开发者调查报告"></p><p><img src="'+l+'" alt="StackOverflow 2023调查报告"></p><p>2023JavaScript趋势报告：</p><p><img src="'+i+'" alt="image-20240626143412891"></p><p>和国内不同的是，<code>React</code>在国外保持着惊人的活力</p><p>但也有很多反对<code>React</code>的声音，以及关于<code>React</code>辩论的文章，如：</p><p><a href="https://joshcollinsworth.com/blog/antiquated-react" target="_blank" rel="noreferrer">你因为 React 而忘记（或从来不知道）的事情 - Josh Collinsworth 博客</a></p><p><a href="https://joshcollinsworth.com/blog/self-fulfilling-prophecy-of-react" target="_blank" rel="noreferrer">React 的自我实现预言 - Josh Collinsworth 博客</a></p><p><a href="https://changelog.com/jsparty/244" target="_blank" rel="noreferrer">辛辣的 React 辩论秀 🌶️ （JS Party #244） (changelog.com)</a></p><p>如果各位有兴趣可以读原文，我这里为每篇文章简单的总结。</p><h4 id="第一篇-你因为-react-而忘记-或从来不知道-的事情-josh-collinsworth-博客" tabindex="-1">第一篇：<a href="https://joshcollinsworth.com/blog/antiquated-react" target="_blank" rel="noreferrer">你因为 React 而忘记（或从来不知道）的事情 - Josh Collinsworth 博客</a> <a class="header-anchor" href="#第一篇-你因为-react-而忘记-或从来不知道-的事情-josh-collinsworth-博客" aria-label="Permalink to &quot;第一篇：[你因为 React 而忘记（或从来不知道）的事情 - Josh Collinsworth 博客](https://joshcollinsworth.com/blog/antiquated-react)&quot;">​</a></h4><blockquote><p>该文章也是被 <code>2023 JavaScript 行业调研报告</code> 所提到的文章，并且一些观点的确值得思考，但有的就一般了，为了准确传达原作者的意思，我这里会尽量中立的概括，也会引用部分原文进行对应部分内容的解释。</p></blockquote><ol><li><h5 id="并不是所有好的事物都会流行。" tabindex="-1">并不是所有好的事物都会流行。 <a class="header-anchor" href="#并不是所有好的事物都会流行。" aria-label="Permalink to &quot;并不是所有好的事物都会流行。&quot;">​</a></h5><blockquote><p>回首往事，我意识到：我天真地相信，任何好东西都不可避免地会流行起来——因此，任何值得了解的东西最终都会自己出
Line truncated

docs/.vitepress/dist/assets/posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md.C3N1Beeh.js

@@ -0,0 +1 @@
+import{_ as a,D as r,af as o,B as t}from"./chunks/framework.BsGVjEHh.js";const b=JSON.parse('{"title":"中西文混排时汉字与拉丁字母之间差异","description":"有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。与大家共勉之。","frontmatter":{"layout":"doc","title":"中西文混排时汉字与拉丁字母之间差异","date":"2024-08-07T00:00:00.000Z","tags":["编程","学习","设计"],"head":[["meta",{"name":"description","content":"有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。与大家共勉之。"}],["meta",{"name":"keywords","content":"文字排版 布局"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/中西文混排时汉字与拉丁字母之间差异.md","filePath":"posts/2024/08/中西文混排时汉字与拉丁字母之间差异.md","lastUpdated":null}'),p={name:"posts/2024/08/中西文混排时汉字与拉丁字母之间差异.md"};function c(i,e,h,l,s,u){return t(),r("div",null,e[0]||(e[0]=[o('<blockquote><p>文章摘要</p></blockquote><p>这篇文章讨论了中英文混排时，是否应在汉字与拉丁字母之间加入空格的争议。研究和实践表明，虽然专业排版软件如Adobe InDesign通常会自动调整汉字与西文之间的间距，但许多普通用户常常手动插入半角空格以保证文本的可读性和美观。文章介绍了“空格派”在排版中的一些习惯，阐述了何时应该加空格、何时不加空格，并引用了刘昕等人关于中英文混排的标准，最后强调了空格的使用对提高文本阅读体验的重要性。</p><blockquote><p>有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。与大家共勉之。</p><p>​ ——<a href="https://github.com/vinta/pangu.js" target="_blank" rel="noreferrer">vinta/paranoid-auto-spacing</a></p></blockquote><h3 id="参考1" tabindex="-1">参考1 <a class="header-anchor" href="#参考1" aria-label="Permalink to &quot;参考1&quot;">​</a></h3><blockquote><p><a href="https://www.zhihu.com/question/19587406/answer/12298128" target="_blank" rel="noreferrer">中西文混排时汉字与拉丁字母之间是否要有空格？ - 知乎 (zhihu.com)</a></p></blockquote><p>Adobe InDesign、Microsoft Word 等对中文与西文（这里用「西文」来泛指用空格分词的外文）混合排版支持较好的软件，都默认增大汉字和西文的间距。InDesign 的默认设置是 1/4 的<a href="https://www.zhihu.com/search?q=%E5%85%A8%E8%A7%92%E7%A9%BA%E6%A0%BC&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A12298128%7D" target="_blank" rel="noreferrer">全角空格</a>宽度（遵从 JIS），也就是约等于一个半角空格。</p><p>但大多数情况下我们没有这样专业<a href="https://www.zhihu.com/search?q=%E6%8E%92%E7%89%88%E8%BD%AF%E4%BB%B6&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A12298128%7D" target="_blank" rel="noreferrer">排版软件</a>的支持，只能手动控制。这种时候，比较在意文字设计（typography，又译「字体排印」）的团队或个人往往都在操作系统界面或网站中的汉字和西文之间插入一个半角空格。</p><p>包括许多的</p><ul><li>公司：苹果、微软、Google、Adobe……</li><li>团队：Apple4us、Type is Beautiful、<a href="https://www.zhihu.com/search?q=%E7%88%B1%E8%8C%83%E5%84%BF&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A12298128%7D" target="_blank" rel="noreferrer">爱范儿</a>……</li><li>个人：@刘昕、@江疆……</li></ul><p>但这些确实是绝对的少数。大多数人都不/不喜欢/不愿意在汉字和<a href="https://www.zhihu.com/search?q=%E8%A5%BF%E6%96%87&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A12298128%7D" target="_blank" rel="noreferrer">西文</a>之间加空格。毕竟加空格要考虑的东西太多了，而且加空格也会带来一些问题（见后面给出的在 <a href="mailto:public-html-ig-zh@w3.org" target="_blank" Line truncated

docs/.vitepress/dist/assets/posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md.C3N1Beeh.lean.js

@@ -0,0 +1 @@
+import{_ as a,D as r,af as o,B as t}from"./chunks/framework.BsGVjEHh.js";const b=JSON.parse('{"title":"中西文混排时汉字与拉丁字母之间差异","description":"有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。与大家共勉之。","frontmatter":{"layout":"doc","title":"中西文混排时汉字与拉丁字母之间差异","date":"2024-08-07T00:00:00.000Z","tags":["编程","学习","设计"],"head":[["meta",{"name":"description","content":"有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。与大家共勉之。"}],["meta",{"name":"keywords","content":"文字排版 布局"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/中西文混排时汉字与拉丁字母之间差异.md","filePath":"posts/2024/08/中西文混排时汉字与拉丁字母之间差异.md","lastUpdated":null}'),p={name:"posts/2024/08/中西文混排时汉字与拉丁字母之间差异.md"};function c(i,e,h,l,s,u){return t(),r("div",null,e[0]||(e[0]=[o('<blockquote><p>文章摘要</p></blockquote><p>这篇文章讨论了中英文混排时，是否应在汉字与拉丁字母之间加入空格的争议。研究和实践表明，虽然专业排版软件如Adobe InDesign通常会自动调整汉字与西文之间的间距，但许多普通用户常常手动插入半角空格以保证文本的可读性和美观。文章介绍了“空格派”在排版中的一些习惯，阐述了何时应该加空格、何时不加空格，并引用了刘昕等人关于中英文混排的标准，最后强调了空格的使用对提高文本阅读体验的重要性。</p><blockquote><p>有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。与大家共勉之。</p><p>​ ——<a href="https://github.com/vinta/pangu.js" target="_blank" rel="noreferrer">vinta/paranoid-auto-spacing</a></p></blockquote><h3 id="参考1" tabindex="-1">参考1 <a class="header-anchor" href="#参考1" aria-label="Permalink to &quot;参考1&quot;">​</a></h3><blockquote><p><a href="https://www.zhihu.com/question/19587406/answer/12298128" target="_blank" rel="noreferrer">中西文混排时汉字与拉丁字母之间是否要有空格？ - 知乎 (zhihu.com)</a></p></blockquote><p>Adobe InDesign、Microsoft Word 等对中文与西文（这里用「西文」来泛指用空格分词的外文）混合排版支持较好的软件，都默认增大汉字和西文的间距。InDesign 的默认设置是 1/4 的<a href="https://www.zhihu.com/search?q=%E5%85%A8%E8%A7%92%E7%A9%BA%E6%A0%BC&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A12298128%7D" target="_blank" rel="noreferrer">全角空格</a>宽度（遵从 JIS），也就是约等于一个半角空格。</p><p>但大多数情况下我们没有这样专业<a href="https://www.zhihu.com/search?q=%E6%8E%92%E7%89%88%E8%BD%AF%E4%BB%B6&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A12298128%7D" target="_blank" rel="noreferrer">排版软件</a>的支持，只能手动控制。这种时候，比较在意文字设计（typography，又译「字体排印」）的团队或个人往往都在操作系统界面或网站中的汉字和西文之间插入一个半角空格。</p><p>包括许多的</p><ul><li>公司：苹果、微软、Google、Adobe……</li><li>团队：Apple4us、Type is Beautiful、<a href="https://www.zhihu.com/search?q=%E7%88%B1%E8%8C%83%E5%84%BF&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A12298128%7D" target="_blank" rel="noreferrer">爱范儿</a>……</li><li>个人：@刘昕、@江疆……</li></ul><p>但这些确实是绝对的少数。大多数人都不/不喜欢/不愿意在汉字和<a href="https://www.zhihu.com/search?q=%E8%A5%BF%E6%96%87&amp;search_source=Entity&amp;hybrid_search_source=Entity&amp;hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A12298128%7D" target="_blank" rel="noreferrer">西文</a>之间加空格。毕竟加空格要考虑的东西太多了，而且加空格也会带来一些问题（见后面给出的在 <a href="mailto:public-html-ig-zh@w3.org" target="_blank" Line truncated

docs/.vitepress/dist/assets/posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md.DP17vSOm.js

@@ -0,0 +1 @@
+import{_ as t,D as r,af as a,B as i}from"./chunks/framework.BsGVjEHh.js";const s="/posts/2024/08/10002/image-20240709144917869.png",o="/posts/2024/08/10002/image-20240709145013421.png",l="/posts/2024/08/10002/image-20240709145115262.png",p="/posts/2024/08/10002/image-20240709150825480.png",n="/posts/2024/08/10002/image-20240709151217902.png",g="/posts/2024/08/10002/image-20240709151251709.png",c="/posts/2024/08/10002/image-20240709151345083.png",h="/posts/2024/08/10002/image-20240709151437319.png",m="/posts/2024/08/10002/image-20240709151552809.png",d="/posts/2024/08/10002/image-20240709151640633.png",_="/posts/2024/08/10002/image-20240709151839807.png",f="/posts/2024/08/10002/image-20240709151858347.png",b="/posts/2024/08/10002/image-20240709151925258.png",w="/posts/2024/08/10002/image-20240709151949506.png",k="/posts/2024/08/10002/image-20240709152145202.png",u="/posts/2024/08/10002/image-20240709152228527.png",y="/posts/2024/08/10002/image-20240709152344199.png",q="/posts/2024/08/10002/image-20240709153709220.png",P="/posts/2024/08/10002/image-20240709153737574.png",x="/posts/2024/08/10002/image-20240709153808702.png",S="/posts/2024/08/10002/image-20240709153845136.png",v="/posts/2024/08/10002/image-20240709153901153.png",D="/posts/2024/08/10002/image-20240709153924475.png",j="/posts/2024/08/10002/image-20240709171101927.png",N="/posts/2024/08/10002/image-20240709171148293.png",A="/posts/2024/08/10002/image-20240709171249182.png",I="/posts/2024/08/10002/image-20240709171310667.png",T="/posts/2024/08/10002/image-20240709171406819.png",C="/posts/2024/08/10002/image-20240709171423701.png",O="/posts/2024/08/10002/image-20240709171439358.png",z="/posts/2024/08/10002/image-20240709171502006.png",G="/posts/2024/08/10002/image-20240709171529013.png",B="/posts/2024/08/10002/image-20240709171610508.png",L="/posts/2024/08/10002/image-20240709172705194.png",R="/posts/2024/08/10002/image-20240709172741964.png",U="/posts/2024/08/10002/image-20240709182327709.png",E="/posts/2024/08/10002/image-20240709182940316.png",H="/posts/2024/08/10002/image-20240709183028747.png",J="/posts/2024/08/10002/image-20240709183038648.png",M="/posts/2024/08/10002/image-20240709183047905.png",W="/posts/2024/08/10002/image-20240709183111554.png",$="/posts/2024/08/10002/image-20240709183434347.png",F="/posts/2024/08/10002/image-20240709183450074.png",K="/posts/2024/08/10002/image-20240709183221209.png",V="/posts/2024/08/10002/image-20240709183238714.png",Z="/posts/2024/08/10002/image-20240709183253255.png",Q="/posts/2024/08/10002/image-20240709183308255.png",X="/posts/2024/08/10002/image-20240709183338467.png",Y="/posts/2024/08/10002/image-20240709183348910.png",ee="/posts/2024/08/10002/image-20240709183409479.png",te="/posts/2024/08/10002/image-20240709183321435.png",re="/posts/2024/08/10002/image-20240709183144841.png",ae="/posts/2024/08/10002/image-20240709183507358.png",he=JSON.parse('{"title":"主流网站主页布局展示内容及渲染方式调研","description":"","frontmatter":{"layout":"doc","title":"主流网站主页布局展示内容及渲染方式调研","date":"2024-08-03T00:00:00.000Z","tags":["设计"],"head":[["meta",{"name":"keywords","content":"设计 html 布局"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/主流网站主页布局展示内容及渲染方式调研.md","filePath":"posts/2024/08/主流网站主页布局展示内容及渲染方式调研.md","lastUpdated":null}'),ie={name:"posts/2024/08/主流网站主页布局展示内容及渲染方式调研.md"};function se(oe,e,le,pe,ne,ge){return i(),r("div",null,e[0]||(e[0]=[a('<p>对于大部分信息展示网站中都是通过大块的区域内容展示来展现更多信息，并且国内的对应的网站相对较老，所以UI设计以及UI风格上更加的质朴</p><p>如：</p><img src="'+s+'" alt="/posts/2024/08/10002/image-20240709144917869.png"><p><img src="'+o+'" alt="image-20240709145013421"></p><p><img src="'+l+'" alt="image-20240709145115262"></p><p>根据几个常见的网址论坛可以看出，对于信息的展示主要通过以下几种方式：</p><h2 id="标签-板块" tabindex="-1"><strong>标签（板块）</strong> <a class="header-anchor" href="#标签-板块" aria-label="Permalink to &quot;**标签（板块）**&quot;">​</a></h2><p><img src="'+p+'" alt="image-20240709150825480"></p><p><img src="'+n+'" alt="image-20240709151217902"></p><p><img src="'+g+'" alt="image-20240709151251709"></p><p><img src="'+c+'" alt="image-20240709151345083"></p><p><img src="'+h+'" alt="image-20240709151437319"></p><p><img src="'+m+'" alt="image-20240709151552809"></p><p><img src="'+d+'" alt="image-20240709151640633"></p><p><img src="'+_+'" alt="image-20240709151839807"></p><p><img src="'+f+'" alt="image-20240709151858347"></p><p><img src="'+b+'" alt="image-20240709151925258"></p><p><img src="'+w+'" alt="image-20240709151949506"></p><p><img src="'+k+'" alt="image-20240709152145202"></p><p><img src="'+u+'" alt="image-2024070Line truncated

docs/.vitepress/dist/assets/posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md.DP17vSOm.lean.js

@@ -0,0 +1 @@
+import{_ as t,D as r,af as a,B as i}from"./chunks/framework.BsGVjEHh.js";const s="/posts/2024/08/10002/image-20240709144917869.png",o="/posts/2024/08/10002/image-20240709145013421.png",l="/posts/2024/08/10002/image-20240709145115262.png",p="/posts/2024/08/10002/image-20240709150825480.png",n="/posts/2024/08/10002/image-20240709151217902.png",g="/posts/2024/08/10002/image-20240709151251709.png",c="/posts/2024/08/10002/image-20240709151345083.png",h="/posts/2024/08/10002/image-20240709151437319.png",m="/posts/2024/08/10002/image-20240709151552809.png",d="/posts/2024/08/10002/image-20240709151640633.png",_="/posts/2024/08/10002/image-20240709151839807.png",f="/posts/2024/08/10002/image-20240709151858347.png",b="/posts/2024/08/10002/image-20240709151925258.png",w="/posts/2024/08/10002/image-20240709151949506.png",k="/posts/2024/08/10002/image-20240709152145202.png",u="/posts/2024/08/10002/image-20240709152228527.png",y="/posts/2024/08/10002/image-20240709152344199.png",q="/posts/2024/08/10002/image-20240709153709220.png",P="/posts/2024/08/10002/image-20240709153737574.png",x="/posts/2024/08/10002/image-20240709153808702.png",S="/posts/2024/08/10002/image-20240709153845136.png",v="/posts/2024/08/10002/image-20240709153901153.png",D="/posts/2024/08/10002/image-20240709153924475.png",j="/posts/2024/08/10002/image-20240709171101927.png",N="/posts/2024/08/10002/image-20240709171148293.png",A="/posts/2024/08/10002/image-20240709171249182.png",I="/posts/2024/08/10002/image-20240709171310667.png",T="/posts/2024/08/10002/image-20240709171406819.png",C="/posts/2024/08/10002/image-20240709171423701.png",O="/posts/2024/08/10002/image-20240709171439358.png",z="/posts/2024/08/10002/image-20240709171502006.png",G="/posts/2024/08/10002/image-20240709171529013.png",B="/posts/2024/08/10002/image-20240709171610508.png",L="/posts/2024/08/10002/image-20240709172705194.png",R="/posts/2024/08/10002/image-20240709172741964.png",U="/posts/2024/08/10002/image-20240709182327709.png",E="/posts/2024/08/10002/image-20240709182940316.png",H="/posts/2024/08/10002/image-20240709183028747.png",J="/posts/2024/08/10002/image-20240709183038648.png",M="/posts/2024/08/10002/image-20240709183047905.png",W="/posts/2024/08/10002/image-20240709183111554.png",$="/posts/2024/08/10002/image-20240709183434347.png",F="/posts/2024/08/10002/image-20240709183450074.png",K="/posts/2024/08/10002/image-20240709183221209.png",V="/posts/2024/08/10002/image-20240709183238714.png",Z="/posts/2024/08/10002/image-20240709183253255.png",Q="/posts/2024/08/10002/image-20240709183308255.png",X="/posts/2024/08/10002/image-20240709183338467.png",Y="/posts/2024/08/10002/image-20240709183348910.png",ee="/posts/2024/08/10002/image-20240709183409479.png",te="/posts/2024/08/10002/image-20240709183321435.png",re="/posts/2024/08/10002/image-20240709183144841.png",ae="/posts/2024/08/10002/image-20240709183507358.png",he=JSON.parse('{"title":"主流网站主页布局展示内容及渲染方式调研","description":"","frontmatter":{"layout":"doc","title":"主流网站主页布局展示内容及渲染方式调研","date":"2024-08-03T00:00:00.000Z","tags":["设计"],"head":[["meta",{"name":"keywords","content":"设计 html 布局"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/主流网站主页布局展示内容及渲染方式调研.md","filePath":"posts/2024/08/主流网站主页布局展示内容及渲染方式调研.md","lastUpdated":null}'),ie={name:"posts/2024/08/主流网站主页布局展示内容及渲染方式调研.md"};function se(oe,e,le,pe,ne,ge){return i(),r("div",null,e[0]||(e[0]=[a('<p>对于大部分信息展示网站中都是通过大块的区域内容展示来展现更多信息，并且国内的对应的网站相对较老，所以UI设计以及UI风格上更加的质朴</p><p>如：</p><img src="'+s+'" alt="/posts/2024/08/10002/image-20240709144917869.png"><p><img src="'+o+'" alt="image-20240709145013421"></p><p><img src="'+l+'" alt="image-20240709145115262"></p><p>根据几个常见的网址论坛可以看出，对于信息的展示主要通过以下几种方式：</p><h2 id="标签-板块" tabindex="-1"><strong>标签（板块）</strong> <a class="header-anchor" href="#标签-板块" aria-label="Permalink to &quot;**标签（板块）**&quot;">​</a></h2><p><img src="'+p+'" alt="image-20240709150825480"></p><p><img src="'+n+'" alt="image-20240709151217902"></p><p><img src="'+g+'" alt="image-20240709151251709"></p><p><img src="'+c+'" alt="image-20240709151345083"></p><p><img src="'+h+'" alt="image-20240709151437319"></p><p><img src="'+m+'" alt="image-20240709151552809"></p><p><img src="'+d+'" alt="image-20240709151640633"></p><p><img src="'+_+'" alt="image-20240709151839807"></p><p><img src="'+f+'" alt="image-20240709151858347"></p><p><img src="'+b+'" alt="image-20240709151925258"></p><p><img src="'+w+'" alt="image-20240709151949506"></p><p><img src="'+k+'" alt="image-20240709152145202"></p><p><img src="'+u+'" alt="image-2024070Line truncated

docs/.vitepress/dist/assets/posts_2024_08_登录功能的思考.md.N6H68BWZ.js

@@ -0,0 +1,19 @@
+import{_ as i,D as t,af as a,B as l}from"./chunks/framework.BsGVjEHh.js";const n="/posts/2024/08/img-1.webp",c=JSON.parse('{"title":"登录功能的思考","description":"","frontmatter":{"layout":"doc","title":"登录功能的思考","date":"2024-08-05T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"keywords","content":"登录 架构"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/登录功能的思考.md","filePath":"posts/2024/08/登录功能的思考.md","lastUpdated":null}'),o={name:"posts/2024/08/登录功能的思考.md"};function r(e,s,h,p,k,g){return l(),t("div",null,s[0]||(s[0]=[a('<blockquote><p>文章摘要</p></blockquote><p>这篇文章介绍了如何安全地存储用户数据，包括用户名、密码哈希、邮箱等，强调使用 bcrypt 加密密码和唯一盐来提升安全性。它还详细解释了 HTTPS 如何通过加密、身份验证和数据完整性保护来确保通信安全，并探讨了前端加密与 HTTPS 的配合使用。此外，文章还讨论了如何管理 SSL/TLS 证书、Token 存储和安全性防护策略，如防止 XSS 和 CSRF 攻击。</p><h2 id="用户信息应该保存什么数据" tabindex="-1">用户信息应该保存什么数据 <a class="header-anchor" href="#用户信息应该保存什么数据" aria-label="Permalink to &quot;用户信息应该保存什么数据&quot;">​</a></h2><ul><li><code>username</code>：唯一的用户名。</li><li><code>password_hash</code>：使用加密算法（如 bcrypt）对密码加密后的结果。</li><li><code>email</code>：用户的邮箱，作为额外的联系方式和用户名的验证。</li><li><code>created_at</code> 和 <code>updated_at</code>：记录用户的创建时间和最后一次更新时间。</li></ul><p>其他：</p><ul><li><strong>Email</strong>：用于账户验证和找回密码。</li><li><strong>创建时间（created_at）</strong>：记录账户创建时间。</li><li><strong>更新时间（updated_at）</strong>：记录账户信息的最后更新时间。</li><li><strong>用户角色（role）</strong>：标识用户身份，如普通用户、管理员等，用于权限管理。</li><li><strong>状态（status）</strong>：标识用户状态，如活跃、锁定、禁用等，用于账户管理。</li><li><strong>最后登录时间（last_login_at）</strong>：记录用户最后一次登录时间。</li><li><strong>安全问题及答案</strong>（可选）：用于找回密码。</li><li><strong>登录失败次数（login_attempts）</strong>：记录用户登录失败次数，用于防止暴力破解。</li><li>注册时间</li><li>注册IP</li><li>上次登录时间</li><li>登录地址</li><li>用户权限</li><li>手机号</li></ul><h2 id="密码如何保存" tabindex="-1">密码如何保存 <a class="header-anchor" href="#密码如何保存" aria-label="Permalink to &quot;密码如何保存&quot;">​</a></h2><p><code>bcrypt</code>是由<code>Niels Provos</code>和<code>David Mazières</code>设计的密码哈希函数，他是基于Blowfish密码而来的，并于1999年在USENIX上提出。</p><p>除了加盐来抵御<code>rainbow table</code> 攻击之外，<code>bcrypt</code> 的一个非常重要的特征就是自适应性，可以保证加密的速度在一个特定的范围内，即使计算机的运算能力非常高，可以通过增加迭代次数的方式，使得加密速度变慢，从而可以抵御暴力搜索攻击。</p><p><code>bcrypt</code>函数是<code>OpenBSD</code>和其他系统包括一些Linux发行版（如SUSE Linux）的默认密码哈希算法。</p><p><strong>推荐使用</strong>每个用户都拥有一个独立的、唯一的盐。这种方式可以显著提高安全性，因为即使两个用户使用相同的密码，由于盐不同，生成的哈希值也会完全不同。</p><h4 id="生成盐" tabindex="-1">生成盐 <a class="header-anchor" href="#生成盐" aria-label="Permalink to &quot;生成盐&quot;">​</a></h4><ul><li><strong>随机生成</strong>：使用密码学安全的随机数生成器生成盐，例如使用 <code>java.security.SecureRandom</code> 生成盐。</li><li><strong>长度建议</strong>：一般来说，盐的长度至少为 16 字节，以增加其随机性和安全性。</li></ul><h4 id="盐的存储" tabindex="-1"><strong>盐的存储</strong> <a class="header-anchor" href="#盐的存储" aria-label="Permalink to &quot;**盐的存储**&quot;">​</a></h4><ul><li><strong>单独存储</strong>：将每个用户的盐单独存储在数据库中，与用户的其他信息（例如 <code>user_id</code>、<code>hashed_password</code>）一起存储。</li></ul><h4 id="处理已有用户的密码" tabindex="-1"><strong>处理已有用户的密码</strong> <a class="header-anchor" href="#处理已有用户的密码" aria-label="Permalink to &quot;**处理已有用户的密码**&quot;">​</a></h4><p>如果需要为已有用户的密码增加盐，可以采取以下Line truncated
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">...</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">-----END PUBLIC KEY-----\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div></li></ul><p><strong>动态获取</strong></p><ul><li><strong>通过 HTTPS 获取</strong>：从服务器动态获取公钥，并通过 HTTPS 确保传输安全。</li><li><strong>防止缓存攻击</strong>：设置合适的缓存策略，防止恶意缓存替换公钥。</li></ul><p><strong>加密存储</strong></p><ul><li><strong>加密存储</strong>：将公钥加密存储在前端，启动时解密使用。</li><li><strong>密钥管理</strong>：需要安全管理用于解密公钥的密钥。</li></ul><p><strong>使用 CDN</strong>：将公钥存储在可信的 CDN 上，并通过 HTTPS 获取，确保前端的公钥安全更新。</p><h2 id="如何保证后端私钥的安全存储" tabindex="-1">如何保证后端私钥的安全存储？ <a class="header-anchor" href="#如何保证后端私钥的安全存储" aria-label="Permalink to &quot;如何保证后端私钥的安全存储？&quot;">​</a></h2><p><strong>私钥存储位置</strong></p><ul><li><strong>硬编码的风险</strong>：将密钥直接硬编码在代码中非常危险，攻击者可以通过反编译或分析代码轻松获取密钥。</li><li><strong>硬件安全模块（HSM）</strong>：HSM 是专门设计用于存储密钥的设备，具有极高的安全性和防篡改特性。它能生成和存储密钥，并执行加密运算，极大减少私钥泄露的风险。</li><li><strong>云密钥管理服务</strong>：如 AWS KMS、Azure Key Vault、Google Cloud KMS 等，提供安全的密钥管理和加密服务，可以将密钥存储在云端，避免密钥管理的复杂性和潜在的安全风险。</li><li><strong>安全文件存储</strong>：如果无法使用 HSM 或云服务，可以将私钥存储在服务器的安全文件系统中，严格控制访问权限（如仅允许特定用户和进程访问）。</li><li><strong>环境变量</strong>： <ul><li><strong>安全存储</strong>：将密钥或密钥文件路径存储在环境变量中，避免硬编码在代码中。</li><li><strong>安全读取</strong>：通过环境变量读取密钥，并确保环境变量的访问权限受控。</li></ul></li><li><strong>加密密钥管理库</strong>： <ul><li><strong>专用库</strong>：如 JCE（Java Cryptography Extension）、OpenSSL、bcrypt 等，可以提供密钥加密、解密和存储功能。</li><li><strong>加密和解密流程</strong>：利用这些库，密钥可以在需要时解密使用，避免直接暴露在代码中。</li></ul></li><li><strong>密钥保护库</strong>： <ul><li><strong>使用库和框架</strong>：使用像 HashiCorp Vault、Azure Key Vault 等专用库和框架来管理和保护密钥。</li><li><strong>密钥存储服务</strong>：利用操作系统或平台提供的密钥存储服务，如 macOS 的钥匙串、Windows 的 DPAPI（数据保护 API）等。</li></ul></li></ul><p><strong>安全更新和备份</strong></p><ul><li><strong>定期更新</strong>：定期更换私钥，并确保旧密钥不再使用，减少长期使用同一密钥的风险。</li><li><strong>安全备份</strong>：将私钥备份在安全的地方，并确保备份数据的加密和访问控制。</li></ul><h2 id="如何保证公钥和私钥的安全更新" tabindex="-1">如何保证公钥和私钥的安全更新？ <a class="header-anchor" href="#如何保证公钥和私钥的安全更新" aria-label="Permalink to &quot;如何保证公钥和私钥的安全更新？&quot;">​</a></h2><p><strong>使用可信工具</strong>:使用 OpenSSL、Java KeyTool 等工具生成密钥，确保密钥生成过程的安全性</p><p><strong>密钥替换周期</strong></p><ul><li><strong>定期轮换</strong>：根据安全需求和行业标准，定期更换密钥。通常建议每 1-2 年更换一次，但对于高风险的应用，可以更频繁地更换。</li><li><strong>紧急更换</strong>：在检测到潜在的安全威胁或密钥泄露时，立即更换密钥。</li></ul><p><strong>自动化密钥管理</strong></p><ul><li><strong>自动化工具</strong>：使用工具和脚本自动化密钥生成、分发和更新流程，减少人为错误。</li><li><strong>密钥版本管理</strong>：实现密钥版本控制，每次更新都生成一个新版本，逐步替换旧版本，并确保新旧密钥的兼容性。</li></ul><p><strong>密钥更新通知</strong></p><ul><li><strong>前端同步更新</strong>：后端密钥更新后，通过安全的通知机制将新公钥分发到前端，前端在下一次更新时使用新公钥。</li><li><strong>密钥有效期</strong>：使用密钥的有效期管理机制，确保在旧密钥失效前及时更换新密钥。</li></ul><h2 id="登录标志-token" tabindex="-1">登录标志（Token） <a class="header-anchor" href="#登录标志-token" aria-label="
Line truncated
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;cf2_emc&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;cf2_email&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hacker@hakermail.com&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .....</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;irf&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;on&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;nvp_bu_cftb&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Create Filter&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    document.forms[0].submit();</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><blockquote><p>这个页面只要打开，就会向Gmail发送一个post请求。请求中，执行了“Create Filter”命令，将所有的邮件，转发到“hacker@hackermail.com”。</p><p>小明由于刚刚就登陆了Gmail，所以这个请求发送时，携带着小明的登录凭证（Cookie），Gmail的后台接收到请求，验证了确实有小明的登录凭证，于是成功给小明配置了过滤器。</p><p>黑客可以查看小明的所有邮件，包括邮件里的域名验证码等隐私信息。拿到验证码之后，黑客就可以要求域名服务商把域名重置给自己。</p></blockquote><p>小明很快打开Gmail，找到了那条过滤器，将其删除。然而，已经泄露的邮件，已经被转让的域名，再也无法挽回了……</p><p>以上就是小明的悲惨遭遇。而“点开一个黑客的链接，所有邮件都被窃取”这种事情并不是杜撰的，此事件原型是2007年Gmail的CSRF漏洞：</p><p><a href="https://www.davidairey.com/google-gmail-security-hijack/" target="_blank" rel="noreferrer">https://www.davidairey.com/google-Gmail-security-hijack/</a></p><p>当然，目前此漏洞已被Gmail修复</p></blockquote></li><li><p><strong>结合使用 LocalStorage 和内存</strong></p><ul><li><strong>LocalStorage</strong>：用于存储 Token 的加密副本，用于持久化和恢复。</li><li><strong>内存</strong>：在运行时将 Token 加载到内存中，减少对 LocalStorage 的访问。</li></ul></li></ol><h4 id="token-存储时机" tabindex="-1">Token 存储时机 <a class="header-anchor" href="#token-存储时机" aria-label="Permalink to &quot;Token 存储时机&quot;">​</a></h4><ol><li><strong>登录成功后</strong>： <ul><li>在用户成功登录后，从服务器接收到 Token，并在前端存储。</li></ul></li><li><strong>Token 刷新时</strong>： <ul><li>在 Token 即将过期时，通过刷新 Token API 获取新的 Token，并更新存储。</li></ul></li></ol><h4 id="携带-token-的时机" tabindex="-1">携带 Token 的时机 <a class="header-anchor" href="#携带-token-的时机" aria-label="Permalink to &quot;携带 Token 的时机&quot;">​</a></h4><ol><li><strong>自动登录</strong>： <ul><li>在页面加载时检查 Token 是否存在并有效。</li><li>如果有效，自动发送 Token 进行身份验证。</li></ul></li><li><strong>每次 API 请求</strong>： <ul><li>每次向受保护的 API 发送请求时，携带 Token 进行身份验证。</li></ul></li><li><strong>页面重载</strong>： <ul><li>当页面重载或导航时，从存储中读取 Token 并加载到内存中。</li></ul></li></ol><h4 id="token-的携带方式" tabindex="-1">Token 的携带方式 <a class="header-anchor" href="#token-的携带方式" aria-label="Permalink to &quot;Token 的携带方式&quot;">​</a></h4><ol><li><p><strong>HTTP Header</strong></p><ul><li><p>最常用的方法是在请求头中携带 Token，通常使用 <code>Authorization</code> 头。</p></li><li><p>示例代码：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">javascript复制代码</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 使用 Fetch API 发送请求</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://api.example.com/data&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    method: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;GET&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    headers: {</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">        &#39;Authorization&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Bearer &#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> token</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">response</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> response.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">json</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data));</span></span></code></pre></div></li></ul></li><li><p><strong>URL 参数</strong></p><ul><li>一般不推荐，因为 URL 参数容易泄露和被篡改。</li></ul></li><li><p><strong>Cookie</strong></p><ul><li>在请求时，浏览器会自动携带符合条件的 Cookie。</li><li>需要确保 Cookie 设置了 Secure、HttpOnly 和 SameSite 属性。</li></ul></li></ol><h3 id="安全性考虑" tabindex="-1">安全性考虑 <a class="header-anchor" href="#安全性考虑" aria-label="Permalink to &quot;安全性考虑&quot;">​</a></h3><h4 id="防范-xss-攻击" tabindex="-1">防范 XSS 攻击 <a class="header-anchor" href="#防范-xss-攻击" aria-label="Permalink to &quot;防范 XSS 攻击&quot;">​</a></h4><ul><li><strong>内容安全策略（CSP）</strong>：通过 CSP 限制加载的脚本和资源来源，减少 XSS 攻击的风险。</li><li><strong>输入验证</strong>：对所有用户输入进行严格的验证和过滤，防止恶意代码注入。</li></ul><h4 id="防范-csrf-攻击" tabindex="-1">防范 CSRF 攻击 <a class="header-anchor" href="#防范-csrf-攻击" aria-label="Permalink to &quot;防范 CSRF 攻击&quot;">​</a></h4><ul><li><strong>SameSite Cookie 属性</strong>：设置为 <code>Strict</code> 或 <code>Lax</code>，限制跨站请求。</li><li><strong>CSRF Token</strong>：为每个请求生成一个唯一的 CSRF Token，并验证 Token 的有效性。</li></ul><h4 id="防止-token-泄露" tabindex="-1">防止 Token 泄露 <a class="header-anchor" href="#防止-token-泄露" aria-label="Permalink to &quot;防止 Token 泄露&quot;">​</a></h4><ul><li><strong>HTTPS 加密</strong>：确保所有 Token 传输都通过 HTTPS，加密传输的数据。</li><li><strong>限制 Token 使用</strong>：设置 Token 的作用域和权限，最小化 Token 被滥用的风险。</li><li><strong>定期更新 Token</strong>：定期刷新和更新 Token，减少长期暴露的风险。</li></ul><h2 id="ssl-tls-证书的设置和申请" tabindex="-1">SSL/TLS 证书的设置和申请 <a class="header-anchor" href="#ssl-tls-证书的设置和申请" aria-label="Permalink to &quot;SSL/TLS 证书的设置和申请&quot;">​</a></h2><p><strong>什么是 SSL/TLS 证书</strong></p><ul><li><strong>SSL/TLS 证书</strong>：是一种数字证书，用于验证服务器的身份，并在客户端和服务器之间建立安全的加密连接。</li><li><strong>证书内容</strong>：包括服务器的公钥、服务器身份信息、证书签发机构（CA）的签名等。</li></ul><p><strong>SSL/TLS 证书的类型</strong></p><ul><li><strong>自签名证书</strong>：由自己签发的证书，适合测试或内部使用，但不适合公众访问的站点，因为它不受信任的 CA 机构的签名。</li><li><strong>由可信 CA 签发的证书</strong>：由公共信任的证书颁发机构（如 Let&#39;s Encrypt、DigiCert 等）签发，适合公开访问的站点。</li></ul><p><strong>如何申请 SSL/TLS 证书</strong></p><p><strong>申请免费证书（例如 Let&#39;s Encrypt）</strong>：</p><ol><li><strong>选择证书颁发机构（CA）</strong>：例如 Let&#39;s Encrypt，它提供免费的 SSL/TLS 证书。</li><li><strong>安装证书管理工具</strong>：例如 Certbot，这是一个常用的自动化工具，用于申请和管理 Let&#39;s Encrypt 证书。</li><li><strong>生成和配置证书</strong>： <ul><li>运行 Certbot 并按照指示生成证书。</li><li>配置 Web 服务器（如 Apache 或 Nginx）使用生成的证书。</li></ul></li></ol>`,110)]))}const u=i(o,[["render",r]]);export{c as __pageData,u as default};

docs/.vitepress/dist/assets/posts_2024_08_登录功能的思考.md.N6H68BWZ.lean.js

@@ -0,0 +1,19 @@
+import{_ as i,D as t,af as a,B as l}from"./chunks/framework.BsGVjEHh.js";const n="/posts/2024/08/img-1.webp",c=JSON.parse('{"title":"登录功能的思考","description":"","frontmatter":{"layout":"doc","title":"登录功能的思考","date":"2024-08-05T00:00:00.000Z","tags":["编程","学习"],"head":[["meta",{"name":"keywords","content":"登录 架构"}]],"editLink":false,"lastUpdated":true},"headers":[],"relativePath":"posts/2024/08/登录功能的思考.md","filePath":"posts/2024/08/登录功能的思考.md","lastUpdated":null}'),o={name:"posts/2024/08/登录功能的思考.md"};function r(e,s,h,p,k,g){return l(),t("div",null,s[0]||(s[0]=[a('<blockquote><p>文章摘要</p></blockquote><p>这篇文章介绍了如何安全地存储用户数据，包括用户名、密码哈希、邮箱等，强调使用 bcrypt 加密密码和唯一盐来提升安全性。它还详细解释了 HTTPS 如何通过加密、身份验证和数据完整性保护来确保通信安全，并探讨了前端加密与 HTTPS 的配合使用。此外，文章还讨论了如何管理 SSL/TLS 证书、Token 存储和安全性防护策略，如防止 XSS 和 CSRF 攻击。</p><h2 id="用户信息应该保存什么数据" tabindex="-1">用户信息应该保存什么数据 <a class="header-anchor" href="#用户信息应该保存什么数据" aria-label="Permalink to &quot;用户信息应该保存什么数据&quot;">​</a></h2><ul><li><code>username</code>：唯一的用户名。</li><li><code>password_hash</code>：使用加密算法（如 bcrypt）对密码加密后的结果。</li><li><code>email</code>：用户的邮箱，作为额外的联系方式和用户名的验证。</li><li><code>created_at</code> 和 <code>updated_at</code>：记录用户的创建时间和最后一次更新时间。</li></ul><p>其他：</p><ul><li><strong>Email</strong>：用于账户验证和找回密码。</li><li><strong>创建时间（created_at）</strong>：记录账户创建时间。</li><li><strong>更新时间（updated_at）</strong>：记录账户信息的最后更新时间。</li><li><strong>用户角色（role）</strong>：标识用户身份，如普通用户、管理员等，用于权限管理。</li><li><strong>状态（status）</strong>：标识用户状态，如活跃、锁定、禁用等，用于账户管理。</li><li><strong>最后登录时间（last_login_at）</strong>：记录用户最后一次登录时间。</li><li><strong>安全问题及答案</strong>（可选）：用于找回密码。</li><li><strong>登录失败次数（login_attempts）</strong>：记录用户登录失败次数，用于防止暴力破解。</li><li>注册时间</li><li>注册IP</li><li>上次登录时间</li><li>登录地址</li><li>用户权限</li><li>手机号</li></ul><h2 id="密码如何保存" tabindex="-1">密码如何保存 <a class="header-anchor" href="#密码如何保存" aria-label="Permalink to &quot;密码如何保存&quot;">​</a></h2><p><code>bcrypt</code>是由<code>Niels Provos</code>和<code>David Mazières</code>设计的密码哈希函数，他是基于Blowfish密码而来的，并于1999年在USENIX上提出。</p><p>除了加盐来抵御<code>rainbow table</code> 攻击之外，<code>bcrypt</code> 的一个非常重要的特征就是自适应性，可以保证加密的速度在一个特定的范围内，即使计算机的运算能力非常高，可以通过增加迭代次数的方式，使得加密速度变慢，从而可以抵御暴力搜索攻击。</p><p><code>bcrypt</code>函数是<code>OpenBSD</code>和其他系统包括一些Linux发行版（如SUSE Linux）的默认密码哈希算法。</p><p><strong>推荐使用</strong>每个用户都拥有一个独立的、唯一的盐。这种方式可以显著提高安全性，因为即使两个用户使用相同的密码，由于盐不同，生成的哈希值也会完全不同。</p><h4 id="生成盐" tabindex="-1">生成盐 <a class="header-anchor" href="#生成盐" aria-label="Permalink to &quot;生成盐&quot;">​</a></h4><ul><li><strong>随机生成</strong>：使用密码学安全的随机数生成器生成盐，例如使用 <code>java.security.SecureRandom</code> 生成盐。</li><li><strong>长度建议</strong>：一般来说，盐的长度至少为 16 字节，以增加其随机性和安全性。</li></ul><h4 id="盐的存储" tabindex="-1"><strong>盐的存储</strong> <a class="header-anchor" href="#盐的存储" aria-label="Permalink to &quot;**盐的存储**&quot;">​</a></h4><ul><li><strong>单独存储</strong>：将每个用户的盐单独存储在数据库中，与用户的其他信息（例如 <code>user_id</code>、<code>hashed_password</code>）一起存储。</li></ul><h4 id="处理已有用户的密码" tabindex="-1"><strong>处理已有用户的密码</strong> <a class="header-anchor" href="#处理已有用户的密码" aria-label="Permalink to &quot;**处理已有用户的密码**&quot;">​</a></h4><p>如果需要为已有用户的密码增加盐，可以采取以下Line truncated
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">...</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">-----END PUBLIC KEY-----\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div></li></ul><p><strong>动态获取</strong></p><ul><li><strong>通过 HTTPS 获取</strong>：从服务器动态获取公钥，并通过 HTTPS 确保传输安全。</li><li><strong>防止缓存攻击</strong>：设置合适的缓存策略，防止恶意缓存替换公钥。</li></ul><p><strong>加密存储</strong></p><ul><li><strong>加密存储</strong>：将公钥加密存储在前端，启动时解密使用。</li><li><strong>密钥管理</strong>：需要安全管理用于解密公钥的密钥。</li></ul><p><strong>使用 CDN</strong>：将公钥存储在可信的 CDN 上，并通过 HTTPS 获取，确保前端的公钥安全更新。</p><h2 id="如何保证后端私钥的安全存储" tabindex="-1">如何保证后端私钥的安全存储？ <a class="header-anchor" href="#如何保证后端私钥的安全存储" aria-label="Permalink to &quot;如何保证后端私钥的安全存储？&quot;">​</a></h2><p><strong>私钥存储位置</strong></p><ul><li><strong>硬编码的风险</strong>：将密钥直接硬编码在代码中非常危险，攻击者可以通过反编译或分析代码轻松获取密钥。</li><li><strong>硬件安全模块（HSM）</strong>：HSM 是专门设计用于存储密钥的设备，具有极高的安全性和防篡改特性。它能生成和存储密钥，并执行加密运算，极大减少私钥泄露的风险。</li><li><strong>云密钥管理服务</strong>：如 AWS KMS、Azure Key Vault、Google Cloud KMS 等，提供安全的密钥管理和加密服务，可以将密钥存储在云端，避免密钥管理的复杂性和潜在的安全风险。</li><li><strong>安全文件存储</strong>：如果无法使用 HSM 或云服务，可以将私钥存储在服务器的安全文件系统中，严格控制访问权限（如仅允许特定用户和进程访问）。</li><li><strong>环境变量</strong>： <ul><li><strong>安全存储</strong>：将密钥或密钥文件路径存储在环境变量中，避免硬编码在代码中。</li><li><strong>安全读取</strong>：通过环境变量读取密钥，并确保环境变量的访问权限受控。</li></ul></li><li><strong>加密密钥管理库</strong>： <ul><li><strong>专用库</strong>：如 JCE（Java Cryptography Extension）、OpenSSL、bcrypt 等，可以提供密钥加密、解密和存储功能。</li><li><strong>加密和解密流程</strong>：利用这些库，密钥可以在需要时解密使用，避免直接暴露在代码中。</li></ul></li><li><strong>密钥保护库</strong>： <ul><li><strong>使用库和框架</strong>：使用像 HashiCorp Vault、Azure Key Vault 等专用库和框架来管理和保护密钥。</li><li><strong>密钥存储服务</strong>：利用操作系统或平台提供的密钥存储服务，如 macOS 的钥匙串、Windows 的 DPAPI（数据保护 API）等。</li></ul></li></ul><p><strong>安全更新和备份</strong></p><ul><li><strong>定期更新</strong>：定期更换私钥，并确保旧密钥不再使用，减少长期使用同一密钥的风险。</li><li><strong>安全备份</strong>：将私钥备份在安全的地方，并确保备份数据的加密和访问控制。</li></ul><h2 id="如何保证公钥和私钥的安全更新" tabindex="-1">如何保证公钥和私钥的安全更新？ <a class="header-anchor" href="#如何保证公钥和私钥的安全更新" aria-label="Permalink to &quot;如何保证公钥和私钥的安全更新？&quot;">​</a></h2><p><strong>使用可信工具</strong>:使用 OpenSSL、Java KeyTool 等工具生成密钥，确保密钥生成过程的安全性</p><p><strong>密钥替换周期</strong></p><ul><li><strong>定期轮换</strong>：根据安全需求和行业标准，定期更换密钥。通常建议每 1-2 年更换一次，但对于高风险的应用，可以更频繁地更换。</li><li><strong>紧急更换</strong>：在检测到潜在的安全威胁或密钥泄露时，立即更换密钥。</li></ul><p><strong>自动化密钥管理</strong></p><ul><li><strong>自动化工具</strong>：使用工具和脚本自动化密钥生成、分发和更新流程，减少人为错误。</li><li><strong>密钥版本管理</strong>：实现密钥版本控制，每次更新都生成一个新版本，逐步替换旧版本，并确保新旧密钥的兼容性。</li></ul><p><strong>密钥更新通知</strong></p><ul><li><strong>前端同步更新</strong>：后端密钥更新后，通过安全的通知机制将新公钥分发到前端，前端在下一次更新时使用新公钥。</li><li><strong>密钥有效期</strong>：使用密钥的有效期管理机制，确保在旧密钥失效前及时更换新密钥。</li></ul><h2 id="登录标志-token" tabindex="-1">登录标志（Token） <a class="header-anchor" href="#登录标志-token" aria-label="
Line truncated
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;cf2_emc&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;cf2_email&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hacker@hakermail.com&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .....</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;irf&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;on&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;nvp_bu_cftb&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Create Filter&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    document.forms[0].submit();</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><blockquote><p>这个页面只要打开，就会向Gmail发送一个post请求。请求中，执行了“Create Filter”命令，将所有的邮件，转发到“hacker@hackermail.com”。</p><p>小明由于刚刚就登陆了Gmail，所以这个请求发送时，携带着小明的登录凭证（Cookie），Gmail的后台接收到请求，验证了确实有小明的登录凭证，于是成功给小明配置了过滤器。</p><p>黑客可以查看小明的所有邮件，包括邮件里的域名验证码等隐私信息。拿到验证码之后，黑客就可以要求域名服务商把域名重置给自己。</p></blockquote><p>小明很快打开Gmail，找到了那条过滤器，将其删除。然而，已经泄露的邮件，已经被转让的域名，再也无法挽回了……</p><p>以上就是小明的悲惨遭遇。而“点开一个黑客的链接，所有邮件都被窃取”这种事情并不是杜撰的，此事件原型是2007年Gmail的CSRF漏洞：</p><p><a href="https://www.davidairey.com/google-gmail-security-hijack/" target="_blank" rel="noreferrer">https://www.davidairey.com/google-Gmail-security-hijack/</a></p><p>当然，目前此漏洞已被Gmail修复</p></blockquote></li><li><p><strong>结合使用 LocalStorage 和内存</strong></p><ul><li><strong>LocalStorage</strong>：用于存储 Token 的加密副本，用于持久化和恢复。</li><li><strong>内存</strong>：在运行时将 Token 加载到内存中，减少对 LocalStorage 的访问。</li></ul></li></ol><h4 id="token-存储时机" tabindex="-1">Token 存储时机 <a class="header-anchor" href="#token-存储时机" aria-label="Permalink to &quot;Token 存储时机&quot;">​</a></h4><ol><li><strong>登录成功后</strong>： <ul><li>在用户成功登录后，从服务器接收到 Token，并在前端存储。</li></ul></li><li><strong>Token 刷新时</strong>： <ul><li>在 Token 即将过期时，通过刷新 Token API 获取新的 Token，并更新存储。</li></ul></li></ol><h4 id="携带-token-的时机" tabindex="-1">携带 Token 的时机 <a class="header-anchor" href="#携带-token-的时机" aria-label="Permalink to &quot;携带 Token 的时机&quot;">​</a></h4><ol><li><strong>自动登录</strong>： <ul><li>在页面加载时检查 Token 是否存在并有效。</li><li>如果有效，自动发送 Token 进行身份验证。</li></ul></li><li><strong>每次 API 请求</strong>： <ul><li>每次向受保护的 API 发送请求时，携带 Token 进行身份验证。</li></ul></li><li><strong>页面重载</strong>： <ul><li>当页面重载或导航时，从存储中读取 Token 并加载到内存中。</li></ul></li></ol><h4 id="token-的携带方式" tabindex="-1">Token 的携带方式 <a class="header-anchor" href="#token-的携带方式" aria-label="Permalink to &quot;Token 的携带方式&quot;">​</a></h4><ol><li><p><strong>HTTP Header</strong></p><ul><li><p>最常用的方法是在请求头中携带 Token，通常使用 <code>Authorization</code> 头。</p></li><li><p>示例代码：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">javascript复制代码</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 使用 Fetch API 发送请求</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://api.example.com/data&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    method: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;GET&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    headers: {</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">        &#39;Authorization&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Bearer &#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> token</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">response</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> response.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">json</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">())</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data));</span></span></code></pre></div></li></ul></li><li><p><strong>URL 参数</strong></p><ul><li>一般不推荐，因为 URL 参数容易泄露和被篡改。</li></ul></li><li><p><strong>Cookie</strong></p><ul><li>在请求时，浏览器会自动携带符合条件的 Cookie。</li><li>需要确保 Cookie 设置了 Secure、HttpOnly 和 SameSite 属性。</li></ul></li></ol><h3 id="安全性考虑" tabindex="-1">安全性考虑 <a class="header-anchor" href="#安全性考虑" aria-label="Permalink to &quot;安全性考虑&quot;">​</a></h3><h4 id="防范-xss-攻击" tabindex="-1">防范 XSS 攻击 <a class="header-anchor" href="#防范-xss-攻击" aria-label="Permalink to &quot;防范 XSS 攻击&quot;">​</a></h4><ul><li><strong>内容安全策略（CSP）</strong>：通过 CSP 限制加载的脚本和资源来源，减少 XSS 攻击的风险。</li><li><strong>输入验证</strong>：对所有用户输入进行严格的验证和过滤，防止恶意代码注入。</li></ul><h4 id="防范-csrf-攻击" tabindex="-1">防范 CSRF 攻击 <a class="header-anchor" href="#防范-csrf-攻击" aria-label="Permalink to &quot;防范 CSRF 攻击&quot;">​</a></h4><ul><li><strong>SameSite Cookie 属性</strong>：设置为 <code>Strict</code> 或 <code>Lax</code>，限制跨站请求。</li><li><strong>CSRF Token</strong>：为每个请求生成一个唯一的 CSRF Token，并验证 Token 的有效性。</li></ul><h4 id="防止-token-泄露" tabindex="-1">防止 Token 泄露 <a class="header-anchor" href="#防止-token-泄露" aria-label="Permalink to &quot;防止 Token 泄露&quot;">​</a></h4><ul><li><strong>HTTPS 加密</strong>：确保所有 Token 传输都通过 HTTPS，加密传输的数据。</li><li><strong>限制 Token 使用</strong>：设置 Token 的作用域和权限，最小化 Token 被滥用的风险。</li><li><strong>定期更新 Token</strong>：定期刷新和更新 Token，减少长期暴露的风险。</li></ul><h2 id="ssl-tls-证书的设置和申请" tabindex="-1">SSL/TLS 证书的设置和申请 <a class="header-anchor" href="#ssl-tls-证书的设置和申请" aria-label="Permalink to &quot;SSL/TLS 证书的设置和申请&quot;">​</a></h2><p><strong>什么是 SSL/TLS 证书</strong></p><ul><li><strong>SSL/TLS 证书</strong>：是一种数字证书，用于验证服务器的身份，并在客户端和服务器之间建立安全的加密连接。</li><li><strong>证书内容</strong>：包括服务器的公钥、服务器身份信息、证书签发机构（CA）的签名等。</li></ul><p><strong>SSL/TLS 证书的类型</strong></p><ul><li><strong>自签名证书</strong>：由自己签发的证书，适合测试或内部使用，但不适合公众访问的站点，因为它不受信任的 CA 机构的签名。</li><li><strong>由可信 CA 签发的证书</strong>：由公共信任的证书颁发机构（如 Let&#39;s Encrypt、DigiCert 等）签发，适合公开访问的站点。</li></ul><p><strong>如何申请 SSL/TLS 证书</strong></p><p><strong>申请免费证书（例如 Let&#39;s Encrypt）</strong>：</p><ol><li><strong>选择证书颁发机构（CA）</strong>：例如 Let&#39;s Encrypt，它提供免费的 SSL/TLS 证书。</li><li><strong>安装证书管理工具</strong>：例如 Certbot，这是一个常用的自动化工具，用于申请和管理 Let&#39;s Encrypt 证书。</li><li><strong>生成和配置证书</strong>： <ul><li>运行 Certbot 并按照指示生成证书。</li><li>配置 Web 服务器（如 Apache 或 Nginx）使用生成的证书。</li></ul></li></ol>`,110)]))}const u=i(o,[["render",r]]);export{c as __pageData,u as default};

docs/.vitepress/dist/assets/style.sUY7YFPl.css

@@ -0,0 +1 @@
+@charset "UTF-8";.mr-2[data-v-69cf8f88]{margin-right:2px}.post-title[data-v-69cf8f88]{margin-bottom:6px;border-top:0px;position:relative;top:0;left:0}.post-title .post-year[data-v-69cf8f88]{position:absolute;top:-6px;left:-10px;z-index:-1;opacity:.12;font-size:86px;font-weight:900}.post-container[data-v-69cf8f88]{display:flex;justify-content:space-between;margin:12px 0}.post-container .post-date[data-v-69cf8f88]{opacity:.6}.hollow-text[data-v-69cf8f88]{color:var(--vp-c-bg);-webkit-text-stroke:1px var(--vp-c-text-1)}.t-loading{font:var(--td-font-body-medium);color:var(--td-text-color-primary);box-sizing:border-box;margin:0;padding:0;list-style:none;position:relative;color:var(--td-brand-color);font-size:var(--td-comp-size-l)}.t-loading--lock{overflow:hidden}.t-loading.t-size-s{font-size:var(--td-comp-size-xxxs)}.t-loading.t-size-l{font-size:var(--td-comp-size-xxxl)}.t-loading__parent--relative{position:relative!important}.t-loading__fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3500}.t-loading--center{display:inline-flex;align-items:center;vertical-align:middle;justify-content:center}.t-loading__content{position:absolute;left:48%;top:20%}.t-loading--inherit-color{color:inherit}.t-loading__parent{position:relative}.t-loading__overlay{background-color:var(--td-mask-disabled)}.t-loading--full{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3500}.t-loading--hidden{visibility:hidden}.t-loading--visible{visibility:visible}.t-loading__text{width:auto;display:inline-block;vertical-align:middle;font:var(--td-font-body-medium);margin-left:var(--td-comp-margin-xs)}.t-loading__gradient{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.t-loading__gradient-conic{width:100%;height:100%;border-radius:var(--td-radius-circle);background:conic-gradient(from 90deg at 50% 50%,#fff 0deg,currentcolor 360deg);-webkit-mask:radial-gradient(transparent calc(50% - .5px),#fff 50%);mask:radial-gradient(transparent calc(50% - .5px),#fff 50%)}.t-button{font:var(--td-font-body-medium);color:var(--td-text-color-primary);box-sizing:border-box;margin:0;padding:0;list-style:none;position:relative;z-index:0;overflow:hidden;font-size:var(--td-font-body-medium);outline:none;border-width:1px;border-style:solid;border-color:transparent;background-color:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;border-radius:var(--td-radius-default);transition:all .2s linear;touch-action:manipulation;text-decoration:none}.t-button .t-button__text,.t-button .t-icon{position:relative;z-index:1;display:inline-flex}.t-button .t-icon,.t-button .t-loading{font-size:var(--td-font-size-body-large)}.t-button .t-icon+.t-button__text:not(:empty){margin-left:8px}.t-button .t-loading+.t-button__text:not(:empty){margin-left:8px}.t-button .t-button__suffix:not(:empty){display:inline-flex;margin-left:8px}.t-button--variant-base{color:var(--td-text-color-anti);height:var(--td-comp-size-m);font:var(--td-font-body-medium);padding-left:calc(var(--td-comp-paddingLR-l) - 1px);padding-right:calc(var(--td-comp-paddingLR-l) - 1px);background-color:var(--td-bg-color-component);border-color:var(--td-bg-color-component);color:var(--td-text-color-primary)}.t-button--variant-base .t-icon,.t-button--variant-base .t-loading{font-size:var(--td-font-size-body-large)}.t-button--variant-base:hover,.t-button--variant-base:focus-visible{background-color:var(--td-bg-color-component-hover)}.t-button--variant-base.t-is-loading{background-color:var(--td-bg-color-component)}.t-button--variant-base.t-is-disabled{background-color:var(--td-bg-color-component-disabled)}.t-button--variant-base:hover,.t-button--variant-base:focus-visible{border-color:var(--td-bg-color-component-hover)}.t-button--variant-base.t-is-loading{border-color:var(--td-bg-color-component)}.t-button--variant-base.t-is-disabled{border-color:var(--td-bg-color-component-disabled)}.t-button--variant-base:hover,.t-button--variant-base:focus-visible{color:var(--td-text-color-primary)}.t-button--variant-base.t-is-loading{color:var(--td-text-color-primary)}.t-button--variant-base.t-is-disabled{color:var(--td-text-color-disabled)}.t-button--variant-base.t-button--theme-primary{color:var(--td-text-color-anti);background-color:var(--td-brand-color);border-color:var(--td-brand-color)}.t-button--variant-base.t-button--theme-primary:hover,.t-button--variant-base.t-button--theme-primary:focus-visible{background-color:var(--td-brand-color-hover)}.t-button--variant-base.t-button--theme-primary.t-is-loading{background-color:var(--td-brand-color)}.t-button--variant-base.t-button--theme-primary.t-is-disabled{background-color:var(--td-brand-color-disabled)}.t-button--variant-base.t-button--theme-primary:hover,.t-button--variant-base.t-button--theme-primary:focus-visible{border-color:var(--td-brand-color-hover)}.t-button--variant-base.t-button--theme-primary.t-is-loading{border-color:var(--td-brand-color)Line truncated

docs/.vitepress/dist/hashmap.json

@@ -0,0 +1 @@
+{"about.md":"DYCliHn9","archive.md":"BJNl5FZS","index.md":"D9HbJL4R","posts_2022_06_如何在vue3的store中使用i18n.md":"CsdC3YlB","posts_2022_08_javascript和vue中实现表格(table)固定表头和首列【提供vue和原生代码】.md":"gIYgXCj5","posts_2022_08_vue3中的ref为何要用.value进行值的调用？.md":"CZC63h3V","posts_2022_08_vue3新属性 — css中使用v-bind（v-bind in css）.md":"D7pEpzPC","posts_2022_08_在javascript获取promise的状态.md":"DwsppogZ","posts_2024_08_typescript 应该被放弃吗.md":"70Va1UEl","posts_2024_08_vue还是react.md":"c9EUtKit","posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md":"C3N1Beeh","posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md":"DP17vSOm","posts_2024_08_登录功能的思考.md":"N6H68BWZ"}

docs/.vitepress/dist/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh-Hans" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>duyl328</title>
+    <meta name="description" content="广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust">
+    <meta name="generator" content="VitePress v1.5.0">
+    <link rel="preload stylesheet" href="/assets/style.sUY7YFPl.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    
+    <script type="module" src="/assets/app.l-had4l0.js"></script>
+    <link rel="modulepreload" href="/assets/chunks/theme.BT-YIZBO.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.BsGVjEHh.js">
+    <link rel="modulepreload" href="/assets/chunks/posts.data.DQjUT6HS.js">
+    <link rel="modulepreload" href="/assets/index.md.D9HbJL4R.lean.js">
+    <link rel="icon">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <link rel="preload" href="/assets/Niconne-Regular.A5U3m2m8.ttf" as="font" type="font/woff2" crossorigin="">
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>duyl328</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>博客</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/archive" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>归档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/notes/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>笔记</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/about" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>关于</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>深色模式</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62Line truncated
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"about.md\":\"DYCliHn9\",\"archive.md\":\"BJNl5FZS\",\"index.md\":\"D9HbJL4R\",\"posts_2022_06_如何在vue3的store中使用i18n.md\":\"CsdC3YlB\",\"posts_2022_08_javascript和vue中实现表格(table)固定表头和首列【提供vue和原生代码】.md\":\"gIYgXCj5\",\"posts_2022_08_vue3中的ref为何要用.value进行值的调用？.md\":\"CZC63h3V\",\"posts_2022_08_vue3新属性 — css中使用v-bind（v-bind in css）.md\":\"D7pEpzPC\",\"posts_2022_08_在javascript获取promise的状态.md\":\"DwsppogZ\",\"posts_2024_08_typescript 应该被放弃吗.md\":\"70Va1UEl\",\"posts_2024_08_vue还是react.md\":\"c9EUtKit\",\"posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md\":\"C3N1Beeh\",\"posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md\":\"DP17vSOm\",\"posts_2024_08_登录功能的思考.md\":\"N6H68BWZ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":[2,4],\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"searchBox\":{\"resetButtonTitle\":\"清除查询条件\",\"resetButtonAriaLabel\":\"清除查询条件\",\"cancelButtonText\":\"取消\",\"cancelButtonAriaLabel\":\"取消\"},\"startScreen\":{\"recentSearchesTitle\":\"搜索历史\",\"noRecentSearchesText\":\"没有搜索历史\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"favoriteSearchesTitle\":\"收藏\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\"},\"errorScreen\":{\"titleText\":\"无法获取结果\",\"helpText\":\"你可能需要检查你的网络连接\"},\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\",\"searchByText\":\"搜索提供者\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"suggestedQueryText\":\"你可以尝试查询\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"reportMissingResultsLinkText\":\"点击反馈\"}}}}}}},\"externalLinkIcon\":true},\"locales\":{\"root\":{\"label\":\"简体中文\",\"title\":\"duyl328\",\"description\":\"广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust\",\"lang\":\"zh-Hans\",\"themeConfig\":{\"nav\":[{\"text\":\"博客\",\"link\":\"/\"},{\"text\":\"归档\",\"link\":\"/archive\",\"activeMatch\":\"/archive\"},{\"text\":\"笔记\",\"link\":\"/notes/\",\"activeMatch\":\"/notes/\"},{\"text\":\"关于\",\"link\":\"/about\",\"activeMatch\":\"/about\"}],\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"outline\":{\"label\":\"当前页面\"},\"lastUpdated\":{\"text\":\"最近更新时间\"},\"sidebar\":{\"/notes/\":[{\"text\":\"Python基础\",\"collapsed\":false,\"items\":[{\"text\":\"01python数据模型\",\"link\":\"/notes/Python基础/01python数据模型\"},{\"text\":\"02序列构成的数组\",\"link\":\"/notes/Python基础/02序列构成的数组\"},{\"text\":\"03字典与集合\",\"link\":\"/notes/Python基础/03字典与集合\"},{\"text\":\"04文本与字节序列\",\"link\":\"/notes/Python基础/04文本与字节序列\"},{\"text\":\"05一等函数\",\"link\":\"/notes/Python基础/05一等函数\"},{\"text\":\"06使用一等函数实现设计模式\",\"link\":\"/notes/Python基础/06使用一等函数实现设计模式\"},{\"text\":\"07函数装饰器与闭包\",\"link\":\"/notes/Python基础/07函数装饰器与闭包\"},{\"text\":\"08对象引用、可变性和垃圾回收\",\"link\":\"/notes/Python基础/08对象引用、可变性和垃圾回收\"},{\"text\":\"09符合python风格的对象\",\"link\":\"/notes/Python基础/09符合python风格的对象\"},{\"text\":\"10序列的修改、散列和切片\",\"link\":\"/notes/Python基础/10序列的修改、散列和切片\"},{\"text\":\"11接口：从协议到抽象基类\",\"link\":\"/notes/Python基础/11接口：从协议到抽象基类\"},{\"text\":\"12继承的优缺点\",\"link\":\"/notes/Python基础/12继承的优缺点\"},{\"text\":\"13正确重载运算符\",\"link\":\"/notes/Python基础/13正确重载运算符\"},{\"text\":\"14可迭代的对象、迭代器和生成器\",\"link\":\"/notes/Python基础/14可迭代的对象、迭代器和生成器\"},{\"text\":\"15上下文管理和else块\",\"link\":\"/notes/Python基础/15上下文管理和else块\"},{\"text\":\"16协程\",\"link\":\"/notes/Python基础/16协程\"},{\"text\":\"17使用future处理并发\",\"link\":\"/notes/Python基础/17使用future处理并发\"},{\"text\":\"18使用asyncio包处理并发\",\"link\":\"/notes/Python基础/18使用asyncio包处理并发\"},{\"text\":\"19元编程\",Line truncated
+    
+  </body>
+</html>

docs/.vitepress/dist/posts/2022/06/如何在Vue3的Store中使用i18n.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="zh-Hans" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>如何在Vue3的Store中使用i18n | duyl328</title>
+    <meta name="description" content="使用的`element-plus`框架时，i18n 的前置初始化">
+    <meta name="generator" content="VitePress v1.5.0">
+    <link rel="preload stylesheet" href="/assets/style.sUY7YFPl.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    
+    <script type="module" src="/assets/app.l-had4l0.js"></script>
+    <link rel="modulepreload" href="/assets/chunks/theme.BT-YIZBO.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.BsGVjEHh.js">
+    <link rel="modulepreload" href="/assets/posts_2022_06_如何在Vue3的Store中使用i18n.md.CsdC3YlB.lean.js">
+    <link rel="icon">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <meta name="keywords" content="vue vue3 i18n js javascript">
+    <link rel="preload" href="/assets/Niconne-Regular.A5U3m2m8.ttf" as="font" type="font/woff2" crossorigin="">
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>duyl328</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>博客</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/archive" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>归档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/notes/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>笔记</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/about" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>关于</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>深色模式</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>回Line truncated
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"about.md\":\"DYCliHn9\",\"archive.md\":\"BJNl5FZS\",\"index.md\":\"D9HbJL4R\",\"posts_2022_06_如何在vue3的store中使用i18n.md\":\"CsdC3YlB\",\"posts_2022_08_javascript和vue中实现表格(table)固定表头和首列【提供vue和原生代码】.md\":\"gIYgXCj5\",\"posts_2022_08_vue3中的ref为何要用.value进行值的调用？.md\":\"CZC63h3V\",\"posts_2022_08_vue3新属性 — css中使用v-bind（v-bind in css）.md\":\"D7pEpzPC\",\"posts_2022_08_在javascript获取promise的状态.md\":\"DwsppogZ\",\"posts_2024_08_typescript 应该被放弃吗.md\":\"70Va1UEl\",\"posts_2024_08_vue还是react.md\":\"c9EUtKit\",\"posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md\":\"C3N1Beeh\",\"posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md\":\"DP17vSOm\",\"posts_2024_08_登录功能的思考.md\":\"N6H68BWZ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":[2,4],\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"searchBox\":{\"resetButtonTitle\":\"清除查询条件\",\"resetButtonAriaLabel\":\"清除查询条件\",\"cancelButtonText\":\"取消\",\"cancelButtonAriaLabel\":\"取消\"},\"startScreen\":{\"recentSearchesTitle\":\"搜索历史\",\"noRecentSearchesText\":\"没有搜索历史\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"favoriteSearchesTitle\":\"收藏\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\"},\"errorScreen\":{\"titleText\":\"无法获取结果\",\"helpText\":\"你可能需要检查你的网络连接\"},\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\",\"searchByText\":\"搜索提供者\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"suggestedQueryText\":\"你可以尝试查询\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"reportMissingResultsLinkText\":\"点击反馈\"}}}}}}},\"externalLinkIcon\":true},\"locales\":{\"root\":{\"label\":\"简体中文\",\"title\":\"duyl328\",\"description\":\"广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust\",\"lang\":\"zh-Hans\",\"themeConfig\":{\"nav\":[{\"text\":\"博客\",\"link\":\"/\"},{\"text\":\"归档\",\"link\":\"/archive\",\"activeMatch\":\"/archive\"},{\"text\":\"笔记\",\"link\":\"/notes/\",\"activeMatch\":\"/notes/\"},{\"text\":\"关于\",\"link\":\"/about\",\"activeMatch\":\"/about\"}],\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"outline\":{\"label\":\"当前页面\"},\"lastUpdated\":{\"text\":\"最近更新时间\"},\"sidebar\":{\"/notes/\":[{\"text\":\"Python基础\",\"collapsed\":false,\"items\":[{\"text\":\"01python数据模型\",\"link\":\"/notes/Python基础/01python数据模型\"},{\"text\":\"02序列构成的数组\",\"link\":\"/notes/Python基础/02序列构成的数组\"},{\"text\":\"03字典与集合\",\"link\":\"/notes/Python基础/03字典与集合\"},{\"text\":\"04文本与字节序列\",\"link\":\"/notes/Python基础/04文本与字节序列\"},{\"text\":\"05一等函数\",\"link\":\"/notes/Python基础/05一等函数\"},{\"text\":\"06使用一等函数实现设计模式\",\"link\":\"/notes/Python基础/06使用一等函数实现设计模式\"},{\"text\":\"07函数装饰器与闭包\",\"link\":\"/notes/Python基础/07函数装饰器与闭包\"},{\"text\":\"08对象引用、可变性和垃圾回收\",\"link\":\"/notes/Python基础/08对象引用、可变性和垃圾回收\"},{\"text\":\"09符合python风格的对象\",\"link\":\"/notes/Python基础/09符合python风格的对象\"},{\"text\":\"10序列的修改、散列和切片\",\"link\":\"/notes/Python基础/10序列的修改、散列和切片\"},{\"text\":\"11接口：从协议到抽象基类\",\"link\":\"/notes/Python基础/11接口：从协议到抽象基类\"},{\"text\":\"12继承的优缺点\",\"link\":\"/notes/Python基础/12继承的优缺点\"},{\"text\":\"13正确重载运算符\",\"link\":\"/notes/Python基础/13正确重载运算符\"},{\"text\":\"14可迭代的对象、迭代器和生成器\",\"link\":\"/notes/Python基础/14可迭代的对象、迭代器和生成器\"},{\"text\":\"15上下文管理和else块\",\"link\":\"/notes/Python基础/15上下文管理和else块\"},{\"text\":\"16协程\",\"link\":\"/notes/Python基础/16协程\"},{\"text\":\"17使用future处理并发\",\"link\":\"/notes/Python基础/17使用future处理并发\"},{\"text\":\"18使用asyncio包处理并发\",\"link\":\"/notes/Python基础/18使用asyncio包处理并发\"},{\"text\":\"19元编程\",Line truncated
+    
+  </body>
+</html>

docs/.vitepress/dist/posts/2022/08/JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.html

@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html lang="zh-Hans" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>JavaScript和Vue中实现表格(table)固定表头和首列 | duyl328</title>
+    <meta name="description" content="本文主要介绍关于`JS`或`Vue`中如何进行表头，列固定，可以根据实际应用场景应用于`原生`，`Vue`，`移动端`，`小程序`中">
+    <meta name="generator" content="VitePress v1.5.0">
+    <link rel="preload stylesheet" href="/assets/style.sUY7YFPl.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    
+    <script type="module" src="/assets/app.l-had4l0.js"></script>
+    <link rel="modulepreload" href="/assets/chunks/theme.BT-YIZBO.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.BsGVjEHh.js">
+    <link rel="modulepreload" href="/assets/posts_2022_08_JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】.md.gIYgXCj5.lean.js">
+    <link rel="icon">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <meta name="keywords" content="vue vue3 js javascript">
+    <link rel="preload" href="/assets/Niconne-Regular.A5U3m2m8.ttf" as="font" type="font/woff2" crossorigin="">
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>duyl328</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>博客</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/archive" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>归档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/notes/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>笔记</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/about" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>关于</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>深色模式</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>回Line truncated
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Time:2022/8/9 13:06 29</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Name:fixmeTable.vue</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Path:src/components/table</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ ProjectName:element-plus</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Author:charlatan</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~  Il n&#39;ya qu&#39;un héroïsme au monde :</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~     c&#39;est de voir le monde tel qu&#39;il est et de l&#39;aimer.</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  --&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> column</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Scroll</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		top.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		left.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		列头表头固定table</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--  表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		&lt;!--    表头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">						{{ item }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		&lt;!--    列头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">						{{ String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		&lt;!--    表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @scroll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Scroll($event)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">							class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">						{{ item + String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;less&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">	.table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	/ / 表头 . </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">260</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	} / / 列头 . columnHeader {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		max-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">columnHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	} / / 表格本体 . tableBody {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">265</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">55</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	} / / 表格元素 </span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		white-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">		display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><ol><li><p><code>html</code>部分：主要进行框架的设计，这里表头，列头，表格本体分为三份</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    列头表头固定table</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!--  表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    &lt;!--    表头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{ item }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    &lt;!--    列头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{ String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      </span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    &lt;!--    表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @scroll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Scroll($event)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(RootItem,index) in column&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">              class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;td&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(item,index) in row&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;index&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{ item + String.fromCharCode(RootItem + 64) }}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div></li></ol><p>内容分为了三部分，这三部分将相互独立，通过样式的调节将三部分内容进行统一的管理。</p><p>这里使用的是<code>table</code>进行了内容的填充，因为表头和列头是单独的元素，所以可以使用其他内容如<code>div</code>等，通过样式上的和交互上的进行协调统一，这里不在赘述</p><ol start="2"><li><p>样式上的内容，因为主要是功能，这里样式使用<code>less</code>进行简单绘制</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;less&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 表头</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">260</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rowHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 列头</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .columnHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    max-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">columnHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 表格本体</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .tableBody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">265</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">55</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  // 表格元素</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    white-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>内容上和定义的结构进行统一调节，这里需要主要的是：<span style="color:red;font-weight:900;"> 因为表格的宽度和表头的宽度对应，表格的高度和列头的高度固定，所以建议在定义时考虑好对应的宽高对应关系，方便调节</span></p><p>在定义好表头和列头时，对与展示的部分通过外部的<code>div</code>进行定位的调节进行展示，内部的表格部分通过宽度的固定来达到样式统一，使用相对定位来完成展示内容的切换</p><p>内部使用了Vue3提供的<code>v-bind</code>，如果你使用的时vue2或其他内容请更换为内联样式或其他方式</p><p><code>v-bind</code> 为Vue3中提供，主要是将绑定的内容转换为自定义标签使用，具体介绍可以看我的另一篇文章：<a href="https://blog.csdn.net/weixin_52235488/article/details/126290046?spm=1001.2014.3001.5502" target="_blank" rel="noreferrer">Vue3新属性 — v-bind in css</a> ，里面有用法和原理的详细介绍</p></li><li><p>逻辑部分：主要为内部的真正的表格绑定了滚动的监听，</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义行和列</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> column</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 将内容进行响应式定义</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;0px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 绑定对应的监听事件</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Scroll</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  top.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  left.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>这里使用的动态数据在<code>v-bind</code>中进行，这里直接修改即可</p></li></ol><h2 id="其他环境中要修改的内容" tabindex="-1">其他环境中要修改的内容 <a class="header-anchor" href="#其他环境中要修改的内容" aria-label="Permalink to &quot;其他环境中要修改的内容&quot;">​</a></h2><p>这里对常见问题进行解决，如果没有匹配，请评论或找其他方式解决</p><ol><li><p><code>原生JavaScript中使用</code>：如果你完全没有使用过<code>Vue</code>，上面的代码我也改成了原生的版本，逻辑一样，这里就只放代码不做介绍了 <code>直接创建文件复制使用</code></p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Time:2022/8/12 9:02 36</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Name:test1.html</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Path:</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ ProjectName:element-plus</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~ Author:charlatan</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~  Il n&#39;ya qu&#39;un héroïsme au monde :</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  ~     c&#39;est de voir le monde tel qu&#39;il est et de l&#39;aimer.</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  --&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;en&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> charset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;UTF-8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;IE=edge&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> http-equiv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;X-UA-Compatible&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">meta</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;viewport&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Title&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">		*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			list-style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			font</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> YouYuan;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			text-decoration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">		li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			cursor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">pointer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		/*-------以上为默认设置（The above is the default setting）--------*/</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.rowHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">260</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.rowHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.columnHeader</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			max-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">270</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">hidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.columnHeader-table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.tableBody</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">265</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">270</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">55</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			overflow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">		tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fit-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			white-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		.td</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			text-align</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">			line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--    表头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rowHeader-table-tr&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">tr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--    列头--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columnHeader-table-tr&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	&lt;!--    表格--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scroll&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tableBody-table-tr&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">table</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 定义行和列</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> row</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> column</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 获取表头</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rowHeard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rowHeader-table-tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建表头元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> row; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 获取元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> td </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 添加样式</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 添加内容</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> testNode </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createTextNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(testNode)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">		// 将表头放置到指定位置</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		rowHeard.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(td)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建表头元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> columnHeard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;columnHeader-table-tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tr </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> td </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		td.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createTextNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(String.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fromCharCode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 64</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)))</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		tr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(td)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		columnHeard.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tr)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 创建表格元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> table </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tableBody-table-tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tr </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tr&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">		for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, len </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> row; j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> len; j</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">			let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> td </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			td.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;td&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			td.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createTextNode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> String.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fromCharCode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 64</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)))</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			tr.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(td)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		table.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(tr)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 获取表头和列头滚动元素</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> row_heard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementsByClassName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rowHeader-table&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column_heard </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementsByClassName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;columnHeader-table&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">	// 绑定滚动时间</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scroll </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;scroll&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	scroll.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onscroll</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		row_heard.style.left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollLeft </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		column_heard.style.top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">event.target.scrollTop </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>主要通过的是JS的元素创建然后将元素添加至对应的内容中，然后进行事件的绑定，从而完成整体逻辑</p></li><li><p><code>React</code>和<code>小程序中</code>，二者都是可以进行数据的绑定，元素的循环处理更加方法，小程序中没有鼠标，可能要更换为手指滑动操作，对于这个逻辑相同， <code>绑定元素的移动距离</code>，从而让表头和列头跟随移动从而达到同步的效果和目的</p></li></ol></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><!----></footer><!--[--><!--[--><!--[--><div class="comments" data-v-932ee5e8><!----></div><!--]--><!--]--><!--]--></div></div></div><!--[--><!--[--><!--[--><div class="image-viewer"><!--[--><!--[--><!--[--><!----><!--]--><!--]--><!--]--></div><!--]--><!--]--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"about.md\":\"DYCliHn9\",\"archive.md\":\"BJNl5FZS\",\"index.md\":\"D9HbJL4R\",\"posts_2022_06_如何在vue3的store中使用i18n.md\":\"CsdC3YlB\",\"posts_2022_08_javascript和vue中实现表格(table)固定表头和首列【提供vue和原生代码】.md\":\"gIYgXCj5\",\"posts_2022_08_vue3中的ref为何要用.value进行值的调用？.md\":\"CZC63h3V\",\"posts_2022_08_vue3新属性 — css中使用v-bind（v-bind in css）.md\":\"D7pEpzPC\",\"posts_2022_08_在javascript获取promise的状态.md\":\"DwsppogZ\",\"posts_2024_08_typescript 应该被放弃吗.md\":\"70Va1UEl\",\"posts_2024_08_vue还是react.md\":\"c9EUtKit\",\"posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md\":\"C3N1Beeh\",\"posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md\":\"DP17vSOm\",\"posts_2024_08_登录功能的思考.md\":\"N6H68BWZ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":[2,4],\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"searchBox\":{\"resetButtonTitle\":\"清除查询条件\",\"resetButtonAriaLabel\":\"清除查询条件\",\"cancelButtonText\":\"取消\",\"cancelButtonAriaLabel\":\"取消\"},\"startScreen\":{\"recentSearchesTitle\":\"搜索历史\",\"noRecentSearchesText\":\"没有搜索历史\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"favoriteSearchesTitle\":\"收藏\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\"},\"errorScreen\":{\"titleText\":\"无法获取结果\",\"helpText\":\"你可能需要检查你的网络连接\"},\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\",\"searchByText\":\"搜索提供者\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"suggestedQueryText\":\"你可以尝试查询\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"reportMissingResultsLinkText\":\"点击反馈\"}}}}}}},\"externalLinkIcon\":true},\"locales\":{\"root\":{\"label\":\"简体中文\",\"title\":\"duyl328\",\"description\":\"广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust\",\"lang\":\"zh-Hans\",\"themeConfig\":{\"nav\":[{\"text\":\"博客\",\"link\":\"/\"},{\"text\":\"归档\",\"link\":\"/archive\",\"activeMatch\":\"/archive\"},{\"text\":\"笔记\",\"link\":\"/notes/\",\"activeMatch\":\"/notes/\"},{\"text\":\"关于\",\"link\":\"/about\",\"activeMatch\":\"/about\"}],\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"outline\":{\"label\":\"当前页面\"},\"lastUpdated\":{\"text\":\"最近更新时间\"},\"sidebar\":{\"/notes/\":[{\"text\":\"Python基础\",\"collapsed\":false,\"items\":[{\"text\":\"01python数据模型\",\"link\":\"/notes/Python基础/01python数据模型\"},{\"text\":\"02序列构成的数组\",\"link\":\"/notes/Python基础/02序列构成的数组\"},{\"text\":\"03字典与集合\",\"link\":\"/notes/Python基础/03字典与集合\"},{\"text\":\"04文本与字节序列\",\"link\":\"/notes/Python基础/04文本与字节序列\"},{\"text\":\"05一等函数\",\"link\":\"/notes/Python基础/05一等函数\"},{\"text\":\"06使用一等函数实现设计模式\",\"link\":\"/notes/Python基础/06使用一等函数实现设计模式\"},{\"text\":\"07函数装饰器与闭包\",\"link\":\"/notes/Python基础/07函数装饰器与闭包\"},{\"text\":\"08对象引用、可变性和垃圾回收\",\"link\":\"/notes/Python基础/08对象引用、可变性和垃圾回收\"},{\"text\":\"09符合python风格的对象\",\"link\":\"/notes/Python基础/09符合python风格的对象\"},{\"text\":\"10序列的修改、散列和切片\",\"link\":\"/notes/Python基础/10序列的修改、散列和切片\"},{\"text\":\"11接口：从协议到抽象基类\",\"link\":\"/notes/Python基础/11接口：从协议到抽象基类\"},{\"text\":\"12继承的优缺点\",\"link\":\"/notes/Python基础/12继承的优缺点\"},{\"text\":\"13正确重载运算符\",\"link\":\"/notes/Python基础/13正确重载运算符\"},{\"text\":\"14可迭代的对象、迭代器和生成器\",\"link\":\"/notes/Python基础/14可迭代的对象、迭代器和生成器\"},{\"text\":\"15上下文管理和else块\",\"link\":\"/notes/Python基础/15上下文管理和else块\"},{\"text\":\"16协程\",\"link\":\"/notes/Python基础/16协程\"},{\"text\":\"17使用future处理并发\",\"link\":\"/notes/Python基础/17使用future处理并发\"},{\"text\":\"18使用asyncio包处理并发\",\"link\":\"/notes/Python基础/18使用asyncio包处理并发\"},{\"text\":\"19元编程\",Line truncated
+    
+  </body>
+</html>

docs/.vitepress/dist/posts/2022/08/Vue3中的ref为何要用.value进行值的调用？.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="zh-Hans" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Vue3中的ref为何要用.value进行值的调用？ | duyl328</title>
+    <meta name="description" content="在`Vue2`中，所有的数据都通过一个Data进行统一的返回，并且在data中对某个组件要用的数据进行统一的管理，常见的使用形式是这样的">
+    <meta name="generator" content="VitePress v1.5.0">
+    <link rel="preload stylesheet" href="/assets/style.sUY7YFPl.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    
+    <script type="module" src="/assets/app.l-had4l0.js"></script>
+    <link rel="modulepreload" href="/assets/chunks/theme.BT-YIZBO.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.BsGVjEHh.js">
+    <link rel="modulepreload" href="/assets/posts_2022_08_Vue3中的ref为何要用.value进行值的调用？.md.CZC63h3V.lean.js">
+    <link rel="icon">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <meta name="keywords" content="vue vue3 js javascript">
+    <link rel="preload" href="/assets/Niconne-Regular.A5U3m2m8.ttf" as="font" type="font/woff2" crossorigin="">
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>duyl328</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>博客</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/archive" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>归档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/notes/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>笔记</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/about" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>关于</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>深色模式</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>回Line truncated
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">todos</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :Obj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;tos&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :removeObj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;removeObj&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">todos</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> search </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/components/search&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> todos </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/components/todos&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> all </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/components/all&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">	export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;App&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">		data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">			return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				tos: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;001&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第一个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;002&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第二个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;003&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第三个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">					{ id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;004&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;第四个&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, done: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		computed: {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		components: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			search, todos, all,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		methods: {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">			removeObj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">obj</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(obj.id)</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">				this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.tos </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.tos.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obj.id)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">				console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.tos)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">			},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">		},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	/</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	/</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">	样式</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>可以看出来这里定义的内容都在一个数组中进行，或者是一个函数，将要使用的数据返回出来，这里无论怎么进行操作处理，最终进行数据代理的时候得到的都是一个对象，Vue2中直接通过 <code>defineProperty</code>进行处理，并绑定对应的监听事件进行响应式的处理。</p><p>而Vue3中，数据的定义可以是单独的，Vue可以让我们随时需要随时定义，这也就带来了另一个问题，我需要的一个数据可能不是对象</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    let str = ref(&#39;响应式字符串&#39;)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    let obj = reactive({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;张三&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>如果要定义的数据不是对象，还需要代理会怎么样？</p><p>在Vue2中数据的定义都在对象中统一进行，也就不会出现这种情况，如果一定要代理一个单独的数据呢？</p><p>Vue2中的数据代理通过<code>defineProperty</code>进行实现，也就是说我们要让<code>defineProperty</code>代理一个普通的数据，而不是一个对象，在 <code>defineProperty</code>的MDN的文档中是这样定义的：</p><blockquote><p><strong><code>Object.defineProperty()</code></strong> 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。</p></blockquote><p>通过这个可以明确看出，只能进行对象的代理，不能进行普通数据的代理，如果使用普通数据类型会直接报以下错误[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p1Lm0OSJ-1661407967498)(Vue3中的ref为何要用.value进行值的调用？.assets/image-20220825094409254.png)]</p><pre><code>在Vue3中数据代理可以使用单一数据了，并且也改进了数据代理的方式，使用的是`Peoxy`完成了数据代理，而MDN中对`Proxy`也进行了定义：
+</code></pre><blockquote><p><strong>Proxy</strong> 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。</p></blockquote><p>可以看出，<code>Proxy</code>依然是为对象服务，而不是普通的内容，这样问题似乎就解决了</p><p>本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。</p><p>可以看出，<code>Proxy</code>依然是为对象服务，而不是普通的内容，这样问题似乎就解决了</p><blockquote><p>即使是Vue3中使用的<code>Proxy</code>的代理方式也不能进行普通数据的代理，所以当调用<code>Ref</code>的时候其实仍然创建了一个<code>Proxy</code> 对象，并且Vue帮你给这个对象了一个<code>value</code>属性，属性值就是你定义的内容，改变的时候监视的改变依然是通过<code>Proxy</code> 的数据劫持来进行响应式的处理，而模板中使用的时候<code>Vue</code>会默认调用对应的<code>value</code>属性，从而完成模板中的内容的直接调用</p></blockquote></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><!----></footer><!--[--><!--[--><!--[--><div class="comments" data-v-932ee5e8><!----></div><!--]--><!--]--><!--]--></div></div></div><!--[--><!--[--><!--[--><div class="image-viewer"><!--[--><!--[--><!--[--><!----><!--]--><!--]--><!--]--></div><!--]--><!--]--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"about.md\":\"DYCliHn9\",\"archive.md\":\"BJNl5FZS\",\"index.md\":\"D9HbJL4R\",\"posts_2022_06_如何在vue3的store中使用i18n.md\":\"CsdC3YlB\",\"posts_2022_08_javascript和vue中实现表格(table)固定表头和首列【提供vue和原生代码】.md\":\"gIYgXCj5\",\"posts_2022_08_vue3中的ref为何要用.value进行值的调用？.md\":\"CZC63h3V\",\"posts_2022_08_vue3新属性 — css中使用v-bind（v-bind in css）.md\":\"D7pEpzPC\",\"posts_2022_08_在javascript获取promise的状态.md\":\"DwsppogZ\",\"posts_2024_08_typescript 应该被放弃吗.md\":\"70Va1UEl\",\"posts_2024_08_vue还是react.md\":\"c9EUtKit\",\"posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md\":\"C3N1Beeh\",\"posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md\":\"DP17vSOm\",\"posts_2024_08_登录功能的思考.md\":\"N6H68BWZ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":[2,4],\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"searchBox\":{\"resetButtonTitle\":\"清除查询条件\",\"resetButtonAriaLabel\":\"清除查询条件\",\"cancelButtonText\":\"取消\",\"cancelButtonAriaLabel\":\"取消\"},\"startScreen\":{\"recentSearchesTitle\":\"搜索历史\",\"noRecentSearchesText\":\"没有搜索历史\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"favoriteSearchesTitle\":\"收藏\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\"},\"errorScreen\":{\"titleText\":\"无法获取结果\",\"helpText\":\"你可能需要检查你的网络连接\"},\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\",\"searchByText\":\"搜索提供者\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"suggestedQueryText\":\"你可以尝试查询\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"reportMissingResultsLinkText\":\"点击反馈\"}}}}}}},\"externalLinkIcon\":true},\"locales\":{\"root\":{\"label\":\"简体中文\",\"title\":\"duyl328\",\"description\":\"广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust\",\"lang\":\"zh-Hans\",\"themeConfig\":{\"nav\":[{\"text\":\"博客\",\"link\":\"/\"},{\"text\":\"归档\",\"link\":\"/archive\",\"activeMatch\":\"/archive\"},{\"text\":\"笔记\",\"link\":\"/notes/\",\"activeMatch\":\"/notes/\"},{\"text\":\"关于\",\"link\":\"/about\",\"activeMatch\":\"/about\"}],\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"outline\":{\"label\":\"当前页面\"},\"lastUpdated\":{\"text\":\"最近更新时间\"},\"sidebar\":{\"/notes/\":[{\"text\":\"Python基础\",\"collapsed\":false,\"items\":[{\"text\":\"01python数据模型\",\"link\":\"/notes/Python基础/01python数据模型\"},{\"text\":\"02序列构成的数组\",\"link\":\"/notes/Python基础/02序列构成的数组\"},{\"text\":\"03字典与集合\",\"link\":\"/notes/Python基础/03字典与集合\"},{\"text\":\"04文本与字节序列\",\"link\":\"/notes/Python基础/04文本与字节序列\"},{\"text\":\"05一等函数\",\"link\":\"/notes/Python基础/05一等函数\"},{\"text\":\"06使用一等函数实现设计模式\",\"link\":\"/notes/Python基础/06使用一等函数实现设计模式\"},{\"text\":\"07函数装饰器与闭包\",\"link\":\"/notes/Python基础/07函数装饰器与闭包\"},{\"text\":\"08对象引用、可变性和垃圾回收\",\"link\":\"/notes/Python基础/08对象引用、可变性和垃圾回收\"},{\"text\":\"09符合python风格的对象\",\"link\":\"/notes/Python基础/09符合python风格的对象\"},{\"text\":\"10序列的修改、散列和切片\",\"link\":\"/notes/Python基础/10序列的修改、散列和切片\"},{\"text\":\"11接口：从协议到抽象基类\",\"link\":\"/notes/Python基础/11接口：从协议到抽象基类\"},{\"text\":\"12继承的优缺点\",\"link\":\"/notes/Python基础/12继承的优缺点\"},{\"text\":\"13正确重载运算符\",\"link\":\"/notes/Python基础/13正确重载运算符\"},{\"text\":\"14可迭代的对象、迭代器和生成器\",\"link\":\"/notes/Python基础/14可迭代的对象、迭代器和生成器\"},{\"text\":\"15上下文管理和else块\",\"link\":\"/notes/Python基础/15上下文管理和else块\"},{\"text\":\"16协程\",\"link\":\"/notes/Python基础/16协程\"},{\"text\":\"17使用future处理并发\",\"link\":\"/notes/Python基础/17使用future处理并发\"},{\"text\":\"18使用asyncio包处理并发\",\"link\":\"/notes/Python基础/18使用asyncio包处理并发\"},{\"text\":\"19元编程\",Line truncated
+    
+  </body>
+</html>

docs/.vitepress/dist/posts/2022/08/Vue3新属性 — css中使用v-bind（v-bind in css）.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="zh-Hans" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Vue3新属性 — css中使用v-bind（v-bind in css） | duyl328</title>
+    <meta name="description" content="本文主要介绍Vue3中的新增的`v-bind()`的常用使用方式，主要包括在`css`,`less`,`scss`中的使用，本文将主要通过一个demo中的使用来展示">
+    <meta name="generator" content="VitePress v1.5.0">
+    <link rel="preload stylesheet" href="/assets/style.sUY7YFPl.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    
+    <script type="module" src="/assets/app.l-had4l0.js"></script>
+    <link rel="modulepreload" href="/assets/chunks/theme.BT-YIZBO.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.BsGVjEHh.js">
+    <link rel="modulepreload" href="/assets/posts_2022_08_Vue3新属性 — css中使用v-bind（v-bind in css）.md.D7pEpzPC.lean.js">
+    <link rel="icon">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <meta name="keywords" content="vue vue3 js javascript v-bind">
+    <link rel="preload" href="/assets/Niconne-Regular.A5U3m2m8.ttf" as="font" type="font/woff2" crossorigin="">
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>duyl328</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>博客</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/archive" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>归档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/notes/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>笔记</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/about" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>关于</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>深色模式</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>回Line truncated
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span_title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      这是测试文字</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><ul><li><p>在<code>css</code>中：</p><p>在<code>css</code>中主要通过直接进行绑定，主要包括几种使用方式（我自己编的名词）：<code>直接使用</code>、<code>拼接使用</code>、<code>对象调用</code>、<code>组合使用</code>【这是我想到的几种常见方式，如果有特殊需求，可以评论区沟通】</p><p>在JS中先对需要用的数据进行定义：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 进行拼接调用测试的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 直接调用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> div_height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;400px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> div_color </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;#e89393&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 对象调用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> span </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;200px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;200px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;green&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 组合调用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> transition </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;cubic-bezier(0, 1.5, .6, 1)&#39;</span></span></code></pre></div><p>然后这些数据直接在<code>css</code>中进行使用，使用<code>v-bind()</code>进行绑定</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;css&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 拼接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(width + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_height);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_color);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 对象调用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.color&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 组合使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">all</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> .9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> v-bind(transition);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.span:hover</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#a5f5b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p>在对应的四个方式的调用中：</p><p><code>直接使用</code>：完全没有问题</p><p><code>拼接使用</code>：这个在<code>css</code>中没有问题，不过在<code>scss</code>中会出现错误，这个在下面的<code>scss</code>中会有详细介绍</p><p><code>对象调用</code>：对象的调用和直接使用类似，不过不同的是，需要使用引号的包裹才能正常使用，如果直接书写会报错</p><p><code>组合使用</code>：完全没问题</p></li><li><p>在<code>less</code>中：</p><p>使用的数据同样是上面给出的数据，这里直接改样式的内容了</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;less&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 使用变量承接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_height);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: @height;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_color);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    /* 对象调用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: @width;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.color&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">_</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      @</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(transition);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      /* 组合使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">all</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> .9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @transition;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#a5f5b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p><code>直接使用</code>：没有问题</p><p><code>拼接使用</code>：<strong>存在问题</strong>，在下面尝试进行了解决</p><p><code>对象调用</code>：没问题</p><p><code>组合使用</code>：没问题</p><h3>问题：</h3><blockquote><p>在拼接使用有几种方式：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义使用的数据</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span></span></code></pre></div><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 直接拼接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind( width + &#39;px&#39;);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 拿到内容后拼接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(width) + &#39;px&#39;;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 使用时拼接</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(width);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + &#39;px&#39;;</span></span></code></pre></div><p>常用的拼接方法一般为这几种（如果有欠缺还请补充），这几种方式都进行了尝试，其中第二种第三种会没有效果，第一种会直接报错</p></blockquote><h3>问题分析（尝试解决）：【这部分会很长，如果不想看，可以直接跳到解决方法】</h3><p>首先是第一种，如果使用的话会直接报错，报错内容为：</p></li></ul><p><img src="/posts/2022/08/img-1.png" alt="在这里插入图片描述"></p><p>因为<code>less</code>的直接报错，导致定义的变量压根就没有被编译出来，从而报错</p><p>第二种和第三种错误一样：</p><p><img src="/posts/2022/08/img-2.png" alt="在这里插入图片描述"></p><p>在这种使用方式中，变量可以正确承接，但是不能完成拼接的操作，导致只有变量而没有单位，并且可以看出最终都被翻译为<code>var(--变量名)</code>来执行，所以顺便也对<code>var()</code>进行了拼接测试</p><p><img src="/posts/2022/08/img-3.png" alt="在这里插入图片描述"></p><p>这里进行调用内容的定义，并且模仿编译后的内容，进行使用，在这种情况下尝试使用拼接</p><blockquote><p>尝试的拼接方式：</p><p><code>直接拼接</code>：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: var(--test);</span></span></code></pre></div><p><code>接受变量后拼接</code>：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: var(--test</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &#39;px&#39;);</span></span></code></pre></div><p><code>继承后拼接</code>：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">width: var(--test) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &#39;px&#39;;</span></span></code></pre></div></blockquote><p>结果也非常让不出意外的都不行，并且在第二种方式也是直接报错的，在寻找问题的过程中，发现了更加<code>amazing</code>的事情：</p><p><img src="/posts/2022/08/img-4.png" alt="在这里插入图片描述"></p><p>这个变量压根就没定义，或者说没被识别到，所以重新模仿<code>Vue</code>直接定义行内样式，并且使用拼接尝试：</p><p><img src="/posts/2022/08/img-5.png" alt="在这里插入图片描述"></p><p>这种直接的拼接方式直接将所有内容都进行了拼接，再换一种思路：使用<code>V-bind</code>这个V-bind指的是数据的而不是样式：</p><p><img src="/posts/2022/08/img-6.png" alt="在这里插入图片描述"></p><p>这次问题得到了解决，并且样式数据也是响应式的单个数据，并且也是在<code>less</code>中正确使用，应该也算解决问题吧</p><h3>解决方式（思路）：</h3><p>将变量的内容在<code>行内样式</code>使用拼接的方式进行定义，然后在定义的<code>less或scss</code>中进行使用，因为定义的样式是行内样式，所以优先级和变量出现的位置，都是在使用之前，所以可以正常使用</p><h3>完整代码：</h3><blockquote><p>使用数据的定义：</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 大部分数据和预先提供的数据一样（这里只写了新增数据）</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> test </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 400</span></span></code></pre></div><p>页面结构：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--	改变的内容为下面这行（其他内容和原来内容保持一致）--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--	【在这里对要使用的数据进行单位的绑定】--&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;div&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{&#39;--test&#39; :test + &#39;px&#39;}&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">   &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;span_title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">     这是测试文字</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">   &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>样式的使用：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;less&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 承接使用</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: var(--test);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: @width;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* 或者直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">400</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div></blockquote><p>在<code>css</code>的测试中几种方式也都能完美运行，并且在<code>less</code>的特有的数据绑定中也都没有问题，对于<code>拼接使用</code>是可以正常使用的。</p><p>我用的工具是<code>webstorm</code>less也是唯一一个没有报错的提示的（工具内的报错提示，可能不认识新内容把）</p><ul><li><p>在<code>scss</code>中：</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> scoped lang=&quot;scss&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">// 使用变量承接</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$width: v-bind(width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &#39;px&#39;);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$height: v-bind(div_height);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 拼接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: $width;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /* 直接使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: $height;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(div_color);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    $</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    /* 对象调用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: $width;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.height&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span.color&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    .</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">_</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      $</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: v-bind(transition);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      /* 组合使用 */</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">all</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> .9</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $transition;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .span_title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#a5f5b8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><p><code>scss</code>相对<code>less</code>一些方法更加灵活，在<code>v-bind()</code>的使用中，拼接使用会出现错误，这个暂时按下不表，在原理中会详细阐述</p></li><li><p>执行原理：</p><p><code>v-bind() in css</code>并没有进行劫持或者其他操作，他主要完成的任务是将<code>v-bind()</code>中的内容通过自定义属性的方式进行了重新定义，在编译后代码中可以看到</p><p><img src="/posts/2022/08/img-7.png" alt="在这里插入图片描述"></p><p>所有的数据直接在自定义属性中进行，并且直接对应引用，自定义属性的内容的改变影响视图的效果，从而达到数据影响视图的效果，这个在使用中<code>less</code>,<code>css</code>中完全没有问题</p><p>但是，在<code>scss</code>中，因为编译之后<code>名字无法进行匹配</code>从而造成样式的丢失</p><p><img src="/posts/2022/08/img-8.png" alt="在这里插入图片描述"></p><p>可以看到，使用的名字和编译的名字并不匹配，从而出错，这个使用时需要注意</p></li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><!----></footer><!--[--><!--[--><!--[--><div class="comments" data-v-932ee5e8><!----></div><!--]--><!--]--><!--]--></div></div></div><!--[--><!--[--><!--[--><div class="image-viewer"><!--[--><!--[--><!--[--><!----><!--]--><!--]--><!--]--></div><!--]--><!--]--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"about.md\":\"DYCliHn9\",\"archive.md\":\"BJNl5FZS\",\"index.md\":\"D9HbJL4R\",\"posts_2022_06_如何在vue3的store中使用i18n.md\":\"CsdC3YlB\",\"posts_2022_08_javascript和vue中实现表格(table)固定表头和首列【提供vue和原生代码】.md\":\"gIYgXCj5\",\"posts_2022_08_vue3中的ref为何要用.value进行值的调用？.md\":\"CZC63h3V\",\"posts_2022_08_vue3新属性 — css中使用v-bind（v-bind in css）.md\":\"D7pEpzPC\",\"posts_2022_08_在javascript获取promise的状态.md\":\"DwsppogZ\",\"posts_2024_08_typescript 应该被放弃吗.md\":\"70Va1UEl\",\"posts_2024_08_vue还是react.md\":\"c9EUtKit\",\"posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md\":\"C3N1Beeh\",\"posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md\":\"DP17vSOm\",\"posts_2024_08_登录功能的思考.md\":\"N6H68BWZ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":[2,4],\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"searchBox\":{\"resetButtonTitle\":\"清除查询条件\",\"resetButtonAriaLabel\":\"清除查询条件\",\"cancelButtonText\":\"取消\",\"cancelButtonAriaLabel\":\"取消\"},\"startScreen\":{\"recentSearchesTitle\":\"搜索历史\",\"noRecentSearchesText\":\"没有搜索历史\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"favoriteSearchesTitle\":\"收藏\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\"},\"errorScreen\":{\"titleText\":\"无法获取结果\",\"helpText\":\"你可能需要检查你的网络连接\"},\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\",\"searchByText\":\"搜索提供者\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"suggestedQueryText\":\"你可以尝试查询\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"reportMissingResultsLinkText\":\"点击反馈\"}}}}}}},\"externalLinkIcon\":true},\"locales\":{\"root\":{\"label\":\"简体中文\",\"title\":\"duyl328\",\"description\":\"广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust\",\"lang\":\"zh-Hans\",\"themeConfig\":{\"nav\":[{\"text\":\"博客\",\"link\":\"/\"},{\"text\":\"归档\",\"link\":\"/archive\",\"activeMatch\":\"/archive\"},{\"text\":\"笔记\",\"link\":\"/notes/\",\"activeMatch\":\"/notes/\"},{\"text\":\"关于\",\"link\":\"/about\",\"activeMatch\":\"/about\"}],\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"outline\":{\"label\":\"当前页面\"},\"lastUpdated\":{\"text\":\"最近更新时间\"},\"sidebar\":{\"/notes/\":[{\"text\":\"Python基础\",\"collapsed\":false,\"items\":[{\"text\":\"01python数据模型\",\"link\":\"/notes/Python基础/01python数据模型\"},{\"text\":\"02序列构成的数组\",\"link\":\"/notes/Python基础/02序列构成的数组\"},{\"text\":\"03字典与集合\",\"link\":\"/notes/Python基础/03字典与集合\"},{\"text\":\"04文本与字节序列\",\"link\":\"/notes/Python基础/04文本与字节序列\"},{\"text\":\"05一等函数\",\"link\":\"/notes/Python基础/05一等函数\"},{\"text\":\"06使用一等函数实现设计模式\",\"link\":\"/notes/Python基础/06使用一等函数实现设计模式\"},{\"text\":\"07函数装饰器与闭包\",\"link\":\"/notes/Python基础/07函数装饰器与闭包\"},{\"text\":\"08对象引用、可变性和垃圾回收\",\"link\":\"/notes/Python基础/08对象引用、可变性和垃圾回收\"},{\"text\":\"09符合python风格的对象\",\"link\":\"/notes/Python基础/09符合python风格的对象\"},{\"text\":\"10序列的修改、散列和切片\",\"link\":\"/notes/Python基础/10序列的修改、散列和切片\"},{\"text\":\"11接口：从协议到抽象基类\",\"link\":\"/notes/Python基础/11接口：从协议到抽象基类\"},{\"text\":\"12继承的优缺点\",\"link\":\"/notes/Python基础/12继承的优缺点\"},{\"text\":\"13正确重载运算符\",\"link\":\"/notes/Python基础/13正确重载运算符\"},{\"text\":\"14可迭代的对象、迭代器和生成器\",\"link\":\"/notes/Python基础/14可迭代的对象、迭代器和生成器\"},{\"text\":\"15上下文管理和else块\",\"link\":\"/notes/Python基础/15上下文管理和else块\"},{\"text\":\"16协程\",\"link\":\"/notes/Python基础/16协程\"},{\"text\":\"17使用future处理并发\",\"link\":\"/notes/Python基础/17使用future处理并发\"},{\"text\":\"18使用asyncio包处理并发\",\"link\":\"/notes/Python基础/18使用asyncio包处理并发\"},{\"text\":\"19元编程\",Line truncated
+    
+  </body>
+</html>

docs/.vitepress/dist/posts/2022/08/在JavaScript获取Promise的状态.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="zh-Hans" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>在JavaScript获取Promise的状态 | duyl328</title>
+    <meta name="description" content="广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust">
+    <meta name="generator" content="VitePress v1.5.0">
+    <link rel="preload stylesheet" href="/assets/style.sUY7YFPl.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    
+    <script type="module" src="/assets/app.l-had4l0.js"></script>
+    <link rel="modulepreload" href="/assets/chunks/theme.BT-YIZBO.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.BsGVjEHh.js">
+    <link rel="modulepreload" href="/assets/posts_2022_08_在JavaScript获取Promise的状态.md.DwsppogZ.lean.js">
+    <link rel="icon">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+    <meta name="keywords" content="js javascript">
+    <link rel="preload" href="/assets/Niconne-Regular.A5U3m2m8.ttf" as="font" type="font/woff2" crossorigin="">
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>duyl328</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>博客</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/archive" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>归档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/notes/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>笔记</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/about" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>关于</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>深色模式</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://duyl328.github.io" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>回Line truncated
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* 传入需要测试的 Promise 对象，将对应结果返回</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@param</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> promise</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> 需要测试的 Promise 对象</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">* </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {Promise&lt;string&gt;}</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">*/</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> promiseState</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> promise</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">      return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">race</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([promise, target]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">          value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pending&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;fulfilled&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rejected&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      )</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 测试代码</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> c </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {});</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">promiseState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(a).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// fulfilled</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">promiseState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(b).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// rejected</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">promiseState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(c).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">state</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(state)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// pending</span></span></code></pre></div><p>这种方式通过<code>promise</code>中的<code>race()</code>方法来进行了状态的判断，非常奇妙的一种方式</p><h1 id="代码分析" tabindex="-1">代码分析 <a class="header-anchor" href="#代码分析" aria-label="Permalink to &quot;代码分析&quot;">​</a></h1><ol><li><p>在方法中会接收一个<code>promise</code>对象，开始了整个方法</p></li><li><p>进入方法后会先创建一个<code>target</code>对象，这个对象只用于后续的匹配，没有其他含义</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span></code></pre></div></li><li><p>然后开始最核心的部分，因为<code>stackoverflow</code>中对代码进行简写，可以先进行代码的还原</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">race</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([promise, target]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">                // 成功回调</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">                value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">                    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pending&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;fulfilled&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">                // 失败回调</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">                    return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rejected&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        )</span></span></code></pre></div><p>可以复现出这种结构，<code>promise</code>的<code>race</code>开始后，接收两个对象，一个为刚刚创建的<code>target</code>对象，还有一个是接收到的<code>promise</code> 对象，当两个其中一个状态结束时，整个<code>Promise.race()</code>结束，这时分为三种情况</p><ol><li>当传入的<code>promise</code>为<code>pending</code>状态时，<code>Promise.race</code>会找到最先有确定状态的元素，并将其返回，因为<code>promise</code> 没有结束，那么返回值对象会接收到定义的<code>target</code>，因为<code>target</code>的状态是确定的，这时<code>value</code>接收到的值就是已经确定状态的 <code>target</code>，如果进行对比，那么他们两个一定是相等的，这时也就是返回<code>pending</code></li><li>当传入的<code>promise</code>为<code>fulfilled</code>状态时，相当于<code>promise</code>已经有确定的值了，<code>Promise.race</code> 匹配到第一个直接结束，并将匹配到的内容返回，返回的内容因为是一个全新的对象，对象的内存地址不可能相等，所以判断结果是 <code>false</code>，也就返回<code>fulfilled</code></li><li>当传入的<code>promise</code>为<code>rejected</code>状态时，<code>promise</code>状态确定，那么因为状态报错，直接进入<code>catch</code>中，走失败回调，这个回调一旦执行，就可以判定 <code>promsie</code>结束，并且内容出现报错，直接返回<code>rejected</code>即可</li><li>在调用的时候，因为返回的时会将对应的状态通过<code>promise</code>返回，所以直接通过调用方法之后的<code>then</code>中指定回调来完成状态的获取</li></ol><ul><li><p><strong>值得注意的是</strong>：<code>Promise.race()</code>在匹配的过程中，一定保证要判断的<code>promise</code>在前，因为只有当<code>promise</code> 状态不确定时才会判断第二个内容的状态，如果将状态已经确定的<code>target</code>放在第一个，那么将不会再进行<code>promise</code>的判断，返回结果永远为 <code>fulfilled</code></p></li><li><p>并且因为<code>catch</code>有两种形式，可以进行变形，这种形式可能更常见（根据个人习惯了）</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> promiseState</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> promise</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> target</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {}</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">race</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([promise, target]).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">            value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">                return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pending&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;fulfilled&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">catch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rejected&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    })</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li></ul></li></ol></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><!----></footer><!--[--><!--[--><!--[--><div class="comments" data-v-932ee5e8><!----></div><!--]--><!--]--><!--]--></div></div></div><!--[--><!--[--><!--[--><div class="image-viewer"><!--[--><!--[--><!--[--><!----><!--]--><!--]--><!--]--></div><!--]--><!--]--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"about.md\":\"DYCliHn9\",\"archive.md\":\"BJNl5FZS\",\"index.md\":\"D9HbJL4R\",\"posts_2022_06_如何在vue3的store中使用i18n.md\":\"CsdC3YlB\",\"posts_2022_08_javascript和vue中实现表格(table)固定表头和首列【提供vue和原生代码】.md\":\"gIYgXCj5\",\"posts_2022_08_vue3中的ref为何要用.value进行值的调用？.md\":\"CZC63h3V\",\"posts_2022_08_vue3新属性 — css中使用v-bind（v-bind in css）.md\":\"D7pEpzPC\",\"posts_2022_08_在javascript获取promise的状态.md\":\"DwsppogZ\",\"posts_2024_08_typescript 应该被放弃吗.md\":\"70Va1UEl\",\"posts_2024_08_vue还是react.md\":\"c9EUtKit\",\"posts_2024_08_中西文混排时汉字与拉丁字母之间差异.md\":\"C3N1Beeh\",\"posts_2024_08_主流网站主页布局展示内容及渲染方式调研.md\":\"DP17vSOm\",\"posts_2024_08_登录功能的思考.md\":\"N6H68BWZ\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"outline\":[2,4],\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"searchBox\":{\"resetButtonTitle\":\"清除查询条件\",\"resetButtonAriaLabel\":\"清除查询条件\",\"cancelButtonText\":\"取消\",\"cancelButtonAriaLabel\":\"取消\"},\"startScreen\":{\"recentSearchesTitle\":\"搜索历史\",\"noRecentSearchesText\":\"没有搜索历史\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"favoriteSearchesTitle\":\"收藏\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\"},\"errorScreen\":{\"titleText\":\"无法获取结果\",\"helpText\":\"你可能需要检查你的网络连接\"},\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\",\"searchByText\":\"搜索提供者\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"suggestedQueryText\":\"你可以尝试查询\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"reportMissingResultsLinkText\":\"点击反馈\"}}}}}}},\"externalLinkIcon\":true},\"locales\":{\"root\":{\"label\":\"简体中文\",\"title\":\"duyl328\",\"description\":\"广泛涉猎的开发者, 主要使用：kotlin、vue, 还会点 Python、c#、java、rust\",\"lang\":\"zh-Hans\",\"themeConfig\":{\"nav\":[{\"text\":\"博客\",\"link\":\"/\"},{\"text\":\"归档\",\"link\":\"/archive\",\"activeMatch\":\"/archive\"},{\"text\":\"笔记\",\"link\":\"/notes/\",\"activeMatch\":\"/notes/\"},{\"text\":\"关于\",\"link\":\"/about\",\"activeMatch\":\"/about\"}],\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"outline\":{\"label\":\"当前页面\"},\"lastUpdated\":{\"text\":\"最近更新时间\"},\"sidebar\":{\"/notes/\":[{\"text\":\"Python基础\",\"collapsed\":false,\"items\":[{\"text\":\"01python数据模型\",\"link\":\"/notes/Python基础/01python数据模型\"},{\"text\":\"02序列构成的数组\",\"link\":\"/notes/Python基础/02序列构成的数组\"},{\"text\":\"03字典与集合\",\"link\":\"/notes/Python基础/03字典与集合\"},{\"text\":\"04文本与字节序列\",\"link\":\"/notes/Python基础/04文本与字节序列\"},{\"text\":\"05一等函数\",\"link\":\"/notes/Python基础/05一等函数\"},{\"text\":\"06使用一等函数实现设计模式\",\"link\":\"/notes/Python基础/06使用一等函数实现设计模式\"},{\"text\":\"07函数装饰器与闭包\",\"link\":\"/notes/Python基础/07函数装饰器与闭包\"},{\"text\":\"08对象引用、可变性和垃圾回收\",\"link\":\"/notes/Python基础/08对象引用、可变性和垃圾回收\"},{\"text\":\"09符合python风格的对象\",\"link\":\"/notes/Python基础/09符合python风格的对象\"},{\"text\":\"10序列的修改、散列和切片\",\"link\":\"/notes/Python基础/10序列的修改、散列和切片\"},{\"text\":\"11接口：从协议到抽象基类\",\"link\":\"/notes/Python基础/11接口：从协议到抽象基类\"},{\"text\":\"12继承的优缺点\",\"link\":\"/notes/Python基础/12继承的优缺点\"},{\"text\":\"13正确重载运算符\",\"link\":\"/notes/Python基础/13正确重载运算符\"},{\"text\":\"14可迭代的对象、迭代器和生成器\",\"link\":\"/notes/Python基础/14可迭代的对象、迭代器和生成器\"},{\"text\":\"15上下文管理和else块\",\"link\":\"/notes/Python基础/15上下文管理和else块\"},{\"text\":\"16协程\",\"link\":\"/notes/Python基础/16协程\"},{\"text\":\"17使用future处理并发\",\"link\":\"/notes/Python基础/17使用future处理并发\"},{\"text\":\"18使用asyncio包处理并发\",\"link\":\"/notes/Python基础/18使用asyncio包处理并发\"},{\"text\":\"19元编程\",Line truncated
+    
+  </body>
+</html>