PageSourceSearch

https://one-step-admin.pages.dev/components/

html one-step-admin.pages.dev collected 2026-10-03 05:28:06 UTC 40,214 bytes, 45 lines download raw bytes

1<!DOCTYPE html>
2<html lang="zh-CN" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>介绍 | One-step-admin 官方文档</title>
7    <meta name="description" content="一款开箱即用的 Vue 中后台管理系统框架,采用 Vue3 + Vite2 技术栈。">
8    <meta name="generator" content="VitePress v1.6.4">
9    <link rel="preload stylesheet" href="/assets/style.CXLsWHJ1.css" as="style">
10    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
11    
12    
12<script type="module" src="/assets/app.CvPTG03p.js"></script>
12
13    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14    <link rel="modulepreload" href="/assets/chunks/theme.Dz4GdzLk.js">
15    <link rel="modulepreload" href="/assets/chunks/framework.dPlIwmsl.js">
16    <link rel="modulepreload" href="/assets/components_index.md.bnvBpUUm.lean.js">
17    <link rel="icon" href="./favicon.ico">
18    <meta http-equiv="Expires" content="0">
19    <meta http-equiv="Pragma" content="no-cache">
20    <meta http-equiv="Cache-control" content="no-cache">
21    <meta http-equiv="Cache" content="no-cache">
22    <meta name="keywords" content="one-step-admin,后台系统,管理后台,后台模版,vue后台,vue-admin,vue-element-admin,vue-admin-template">
23    <keywords content="one-step-admin,后台系统,管理后台,后台模版,vue后台,vue-admin,vue-element-admin,vue-admin-template"></keywords>
24    <description content="一款开箱即用的 Vue 中后台管理系统框架,采用 Vue3 + Vite2 技术栈。"></description>
25    
25<script>var _hmt=_hmt||[];_hmt.push(["_requirePlugin","UrlChangeTracker",{shouldTrackUrlChange:function(e,r){return e&&r}}]),function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?d023f22d3c7fd011aed5f4499aebfabe";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(e,r)}();</script>
25
26    
26<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>
26
27    
27<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
27
28  </head>
29  <body>
30    <div id="app"><div class="Layout" data-v-14b655d7><!--[--><!----><!--]--><!--[--><span tabindex="-1" data-v-dcdd6590></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-dcdd6590>Skip to content</a><!--]--><!----><header class="VPNav" data-v-14b655d7 data-v-6ba94a92><div class="VPNavBar" data-v-6ba94a92 data-v-9637a4dc><div class="wrapper" data-v-9637a4dc><div class="container" data-v-9637a4dc><div class="title" data-v-9637a4dc><div class="VPNavBarTitle has-sidebar" data-v-9637a4dc data-v-d932dfe4><a class="title" href="/" data-v-d932dfe4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-cc3f3dab><!--]--><span data-v-d932dfe4>One-step-admin 官方文档</span><!--[--><!--]--></a></div></div><div class="content" data-v-9637a4dc><div class="content-body" data-v-9637a4dc><!--[--><!--]--><div class="VPNavBarSearch search" data-v-9637a4dc><!--[--><!----><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-9637a4dc data-v-d6ae7a6a><span id="main-nav-aria-label" class="visually-hidden" data-v-d6ae7a6a> Main Navigation </span><!--[--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-d6ae7a6a data-v-6495674b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6495674b><span class="text" data-v-6495674b><!----><span data-v-6495674b>文档 <img src="https://img.shields.io/github/v/release/one-step-admin/basic?style=flat-square&label=%20&color=%2367C23B" style="display: inline-block; margin-top: -2px; margin-left: 4px; vertical-align: middle;" /></span><span class="vpi-chevron-down text-icon" data-v-6495674b></span></span></button><div class="menu" data-v-6495674b><div class="VPMenu" data-v-6495674b data-v-3785f74a><div class="items" data-v-3785f74a><!--[--><!--[--><div class="VPMenuLink" data-v-3785f74a data-v-70a3d9ad><a class="VPLink link" href="/guide/intro.html" data-v-70a3d9ad><!--[--><span data-v-70a3d9ad>指南</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-3785f74a data-v-70a3d9ad><a class="VPLink link" href="/components/index.html" data-v-70a3d9ad><!--[--><span data-v-70a3d9ad>组件</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-d6ae7a6a data-v-6495674b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6495674b><span class="text" data-v-6495674b><!----><span data-v-6495674b>在线演示</span><span class="vpi-chevron-down text-icon" data-v-6495674b></span></span></button><div class="menu" data-v-6495674b><div class="VPMenu" data-v-6495674b data-v-3785f74a><div class="items" data-v-3785f74a><!--[--><!--[--><div class="VPMenuGroup" data-v-3785f74a data-v-05e30797><p class="title" data-v-05e30797>Github</p><!--[--><!--[--><div class="VPMenuLink" data-v-05e30797 data-v-70a3d9ad><a class="VPLink link vp-external-link-icon" href="https://one-step-admin.hurui.me/basic-example" target="_blank" rel="noreferrer" data-v-70a3d9ad><!--[--><span data-v-70a3d9ad>基础版</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-05e30797 data-v-70a3d9ad><a class="VPLink link vp-external-link-icon" href="https://one-step-admin.hurui.me/pro-example" target="_blank" rel="noreferrer" data-v-70a3d9ad><!--[--><span data-v-70a3d9ad>专业版</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--[--><div class="VPMenuGroup" data-v-3785f74a data-v-05e30797><p class="title" data-v-05e30797>Cloudflare</p><!--[--><!--[--><div class="VPMenuLink" data-v-05e30797 data-v-70a3d9ad><a class="VPLink link vp-external-link-icon" href="https://one-step-admin.pages.dev/basic-example" target="_blank" rel="noreferrer" data-v-70a3d9ad><!--[--><span data-v-70a3d9ad>基础版</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-05e30797 data-v-70a3d9ad><a class="VPLink link vp-external-link-icon" href="https://one-step-admin.pages.dev/pro-example" target="_blank" rel="noreferrer" data-v-70a3d9ad><!--[--><span data-v-70a3d9ad>专业版</span><!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/support.html" tabindex="0" data-v-d6ae7a6a data-v-b8ddfcb7><!--[--><span data-v-b8ddfcb7>技术支持</span><!--]--></a>
30<!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-d6ae7a6a data-v-6495674b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6495674b><span class="text" data-v-6495674b><!----><span data-v-6495674b>下载 / 购买</span><span class="vpi-chevron-down text-icon" data-v-6495674b></span></span></button><div class="menu" data-v-6495674b><div class="VPMenu" data-v-6495674b data-v-3785f74a><div class="items" data-v-3785f74a><!--[--><!--[--><div class="VPMenuLink" data-v-3785f74a data-v-70a3d9ad><a class="VPLink link vp-external-link-icon" href="https://github.com/one-step-admin/basic/releases" target="_blank" rel="noreferrer" data-v-70a3d9ad><!--[--><span data-v-70a3d9ad>下载基础版</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-3785f74a data-v-70a3d9ad><a class="VPLink link" href="/buy.html" data-v-70a3d9ad><!--[--><span data-v-70a3d9ad>购买专业版 ⭐</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9637a4dc data-v-fead9133><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-fead9133 data-v-b5ae2ab0 data-v-a55aafb4><span class="check" data-v-a55aafb4><span class="icon" data-v-a55aafb4><!--[--><span class="vpi-sun sun" data-v-b5ae2ab0></span><span class="vpi-moon moon" data-v-b5ae2ab0></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9637a4dc data-v-8a9687cd data-v-251bb760><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/one-step-admin/basic" aria-label target="_blank" rel="noopener" data-v-251bb760 data-v-32bfa07e><svg t="1663266323098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2880" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" p-id="2881"></path></svg></a><a class="VPSocialLink no-icon" href="https://github.com/one-step-admin/basic" aria-label="github" target="_blank" rel="noopener" data-v-251bb760 data-v-32bfa07e><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9637a4dc data-v-1aa535bc data-v-6495674b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6495674b><span class="vpi-more-horizontal icon" data-v-6495674b></span></button><div class="menu" data-v-6495674b><div class="VPMenu" data-v-6495674b data-v-3785f74a><!----><!--[--><!--[--><!----><div class="group" data-v-1aa535bc><div class="item appearance" data-v-1aa535bc><p class="label" data-v-1aa535bc>Appearance</p><div class="appearance-action" data-v-1aa535bc><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-1aa535bc data-v-b5ae2ab0 data-v-a55aafb4><span class="check" data-v-a55aafb4><span class="icon" data-v-a55aafb4><!--[--><span class="vpi-sun sun" data-v-b5ae2ab0></span><span class="vpi-moon moon" data-v-b5ae2ab0></span><!--]--></span></span></button></div></div></div><div class="group" data-v-1aa535bc><div class="item social-links" data-v-1aa535bc><div class="VPSocialLinks social-links-list" data-v-1aa535bc data-v-251bb760><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/one-step-admin/basic" aria-label target="_blank" rel="noopener" data-v-251bb760 data-v-32bfa07e><svg t="1663266323098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2880" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" p-id="2881"></path></svg></a><a class="VPSocialLink no-icon" href="https://github.com/one-step-admin/basic" aria-label="github" target="_blank" rel="noopener" data-v-251bb760 data-v-32bfa07e><span class="vpi-social-github"></span></a>
30<!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9637a4dc data-v-644d74fa><span class="container" data-v-644d74fa><span class="top" data-v-644d74fa></span><span class="middle" data-v-644d74fa></span><span class="bottom" data-v-644d74fa></span></span></button></div></div></div></div><div class="divider" data-v-9637a4dc><div class="divider-line" data-v-9637a4dc></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-14b655d7 data-v-e9056efd><div class="container" data-v-e9056efd><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-e9056efd><span class="vpi-align-left menu-icon" data-v-e9056efd></span><span class="menu-text" data-v-e9056efd>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-e9056efd data-v-67f0cfe0><button data-v-67f0cfe0>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-14b655d7 data-v-49901d50><div class="curtain" data-v-49901d50></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-49901d50><span class="visually-hidden" id="sidebar-aria-label" data-v-49901d50> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-34fafd4d><section class="VPSidebarItem level-0 has-active" data-v-34fafd4d data-v-3829ed84><div class="item" role="button" tabindex="0" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><h2 class="text" data-v-3829ed84>组件</h2><!----></div><div class="items" data-v-3829ed84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>介绍</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-34fafd4d><section class="VPSidebarItem level-0" data-v-34fafd4d data-v-3829ed84><div class="item" role="button" tabindex="0" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><h2 class="text" data-v-3829ed84>扩展组件</h2><!----></div><div class="items" data-v-3829ed84><!--[--><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/auth.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>Auth 鉴权</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/page-header.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>PageHeader 页头</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/page-main.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>PageMain 内容块</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/action-container.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>ActionContainer 固定底部操作栏</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/search-bar.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>SearchBar 搜索面板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/image-upload.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>ImageUpload 单图上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/images-upload.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>ImagesUpload 多图上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/file-upload.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>FileUpload 文件上传</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/image-preview.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>ImagePreview 图片预览</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/svg-icon.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>SvgIcon SVG图标</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/trend.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>Trend 趋势标记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/pcas-cascader.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>PcasCascader 省市区街道联动</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/chip.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>Chip 纸片</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/colorful-card.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>ColorfulCard 多彩渐变卡片</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/icon-picker.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>IconPicker 图标选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/sparkline.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>Sparkline 迷你图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/i18n-selector.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>I18nSelector 国际化选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3829ed84 data-v-3829ed84><div class="item" data-v-3829ed84><div class="indicator" data-v-3829ed84></div><a class="VPLink link link" href="/components/storage-box.html" data-v-3829ed84><!--[--><p class="text" data-v-3829ed84>StorageBox 储存箱</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-14b655d7 data-v-cb4b9fa9><div class="VPDoc has-sidebar has-aside" data-v-cb4b9fa9 data-v-6e5ed6ee><!--[--><!--]--><div class="container" data-v-6e5ed6ee><div class="aside" data-v-6e5ed6ee><div class="aside-curtain" data-v-6e5ed6ee></div><div class="aside-container" data-v-6e5ed6ee><div class="aside-content" data-v-6e5ed6ee><div class="VPDocAside" data-v-6e5ed6ee data-v-6ac0fb15><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-6ac0fb15 data-v-173ae6cd><div class="content" data-v-173ae6cd><div class="outline-marker" data-v-173ae6cd></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-173ae6cd>On this page</div><ul class="VPDocOutlineItem root" data-v-173ae6cd data-v-fdb10160><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-6ac0fb15></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--[--><!--[--><!--[--><div data-v-dfa2197a><div class="sponsors-aside-text" data-v-dfa2197a> 作者其他作品 </div><div class="sponsor-container special" data-v-dfa2197a><a href="https://hooray.github.io/fantastic-startkit/" target="_blank" class="sponsor-item" data-v-dfa2197a><div class="info" data-v-dfa2197a><div class="main" data-v-dfa2197a>Fantastic-startkit</div><div class="sub" data-v-dfa2197a>简单好用的 Vue3 项目启动套件</div></div></a><a href="https://fantastic-admin.hurui.me/" target="_blank" class="sponsor-item" data-v-dfa2197a><img src="https://fantastic-admin.hurui.me/logo.svg" data-v-dfa2197a><div class="info" data-v-dfa2197a><div class="main" data-v-dfa2197a>Fantastic-admin</div><div class="sub" data-v-dfa2197a>杰出的管理系统框架</div></div></a><a href="https://fantastic-mobile.hurui.me/" target="_blank" class="sponsor-item" data-v-dfa2197a><img src="https://fantastic-mobile.hurui.me/logo.png" data-v-dfa2197a><div class="info" data-v-dfa2197a><div class="main" data-v-dfa2197a>Fantastic-mobile</div><div class="sub" data-v-dfa2197a>自成一派的 H5 框架</div></div></a></div></div><!--]--><!--]--><!--]--><!--]--></div></div></div></div><div class="content" data-v-6e5ed6ee><div class="content-container" data-v-6e5ed6ee><!--[--><!--]--><main class="main" data-v-6e5ed6ee><div style="position:relative;" class="vp-doc _components_" data-v-6e5ed6ee><div>
30<h1 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to &quot;介绍&quot;">​</a></h1><p>框架提供一系列的组件方便快速开发。</p><h2 id="基础组件" tabindex="-1">基础组件 <a class="header-anchor" href="#基础组件" aria-label="Permalink to &quot;基础组件&quot;">​</a></h2><p>基础组件由 <a href="https://element-plus.org/#/zh-CN" target="_blank" rel="noreferrer">Element Plus</a> 提供,其中包含<strong>按钮</strong>、<strong>文字链接</strong>、<strong>单选框</strong>、<strong>多选框</strong>、<strong>输入框</strong>、<strong>计数器</strong>、<strong>级联选择器</strong>、<strong>开关</strong>、<strong>滑块</strong>等 <strong>50+</strong> 个组件。</p><p>阅读并学习请查看 <a href="https://element-plus.org/#/zh-CN" target="_blank" rel="noreferrer">Element Plus 官方文档</a>。</p><div class="tip custom-block"><p class="custom-block-title">说明</p><p>为了统一图标的使用,框架没有采用 Element Plus 官方图标的使用方式,这意味着部分 Element Plus 组件的 icon 属性将无法使用,例如 Button 按钮组件。</p><div class="language-template vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">template</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>
31<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;el-icon-edit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;编辑&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
32<span class="line"></span>
33<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- 可以使用插槽代替 --&gt;</span></span>
34<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
35<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;"> #</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
36<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">svg-icon</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;ep:edit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
38<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39<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>
40<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  编辑</span></span>
41<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">el-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>如果你习惯 Element Plus 官方图标的使用方式,需执行 <code>pnpm install @element-plus/icons-vue</code> 安装依赖,并按照官方的使用方式引入图标,点击<a href="http://element-plus.org/zh-CN/component/icon.html" target="_blank" rel="noreferrer">查看</a>详细介绍。</p></div><div class="warning custom-block"><p class="custom-block-title">替换组件库</p><p>如果你不喜欢 Element Plus ,或者你想要将老项目迁移到 One-step-admin 上,但老项目里使用的组件库并不是 Element Plus ,框架也提供了组件库替换移方案:</p><ul><li>《<a href="/guide/replace-to-antd.html">替换为 Ant Design Vue</a>》</li><li>《<a href="/guide/replace-to-arco.html">替换为 Arco Design Vue</a>》</li><li>《<a href="/guide/replace-to-naive.html">替换为 Naive UI</a>》</li><li>《<a href="/guide/replace-to-tdesign.html">替换为 TDesign</a>》</li><li>《<a href="/guide/replace-to-vexip.html">替换为 Vexip UI</a>》</li><li>《<a href="/guide/replace-to-idux.html">替换为 iDux</a>》</li></ul><p>如果你想使用的组件库不在上述方案中,可以通过参考任何一份方案,理解替换的整理思路,并自行替换,别担心会很复杂,我们已经将大部分工作做好了。</p></div><h2 id="内建组件" tabindex="-1">内建组件 <a class="header-anchor" href="#内建组件" aria-label="Permalink to &quot;内建组件&quot;">​</a></h2><p>为了实现 UI 组件库可替换,框架内建了一些组件,这些组件仅服务于框架自身,所以不建议在业务页面内使用。但如果你需要对框架进行二次开发,并保证视觉上的一致性,这时候你就会需要用到它们。</p><p>内建组件存放在 <code>
41/src/layouts/ui-kit/</code> 目录下,并配置了使用时自动引入。</p><h2 id="扩展组件" tabindex="-1">扩展组件 <a class="header-anchor" href="#扩展组件" aria-label="Permalink to &quot;扩展组件&quot;">​</a></h2><p>扩展组件为框架封装的组件,有全新开发的组件,也有在 Element Plus 组件上二次封装的组件,还有一些则是封装了第三方的插件。</p><p>组件源码完全开放,如果觉得用着不顺手,可以到 <code>/src/components/</code> 目录下找到对应组件自行修改。</p></div></div></main><footer class="VPDocFooter" data-v-6e5ed6ee data-v-f680eca5><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-f680eca5><span class="visually-hidden" id="doc-footer-aria-label" data-v-f680eca5>Pager</span><div class="pager" data-v-f680eca5><!----></div><div class="pager" data-v-f680eca5><a class="VPLink link pager-link next" href="/components/auth.html" data-v-f680eca5><!--[--><span class="desc" data-v-f680eca5>Next page</span><span class="title" data-v-f680eca5>Auth 鉴权</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-14b655d7 data-v-f2dffe0e><div class="container" data-v-f2dffe0e><!----><p class="copyright" data-v-f2dffe0e>Copyright © 2021-present One-step-admin</p></div></footer><!--[--><!--]--></div></div>
42    
42<script>window.__VP_HASH_MAP__=JSON.parse("{\"buy.md\":\"DlLUNGHj\",\"components_action-container.md\":\"Bd8Di1l1\",\"components_auth.md\":\"iNgtduNO\",\"components_chip.md\":\"D5USZdbE\",\"components_colorful-card.md\":\"CovShG6v\",\"components_file-upload.md\":\"Cm6PCr0D\",\"components_i18n-selector.md\":\"DQefcJvo\",\"components_icon-picker.md\":\"BoYQGDnV\",\"components_image-preview.md\":\"C-9iPacW\",\"components_image-upload.md\":\"B4tPM7Jh\",\"components_images-upload.md\":\"DHcC_c-A\",\"components_index.md\":\"bnvBpUUm\",\"components_page-header.md\":\"wtzY6BM6\",\"components_page-main.md\":\"CdzfbmDn\",\"components_pcas-cascader.md\":\"BOGYPnf_\",\"components_search-bar.md\":\"DEDAth2B\",\"components_sparkline.md\":\"BdODyf4d\",\"components_storage-box.md\":\"BVGiu87L\",\"components_svg-icon.md\":\"Bqoo5qb-\",\"components_trend.md\":\"DX39Gj4W\",\"guide_api.md\":\"Bya5mJ0G\",\"guide_axios.md\":\"BIXcnTlg\",\"guide_build.md\":\"BXkDVgTs\",\"guide_changelog.md\":\"C9WQ0Wwi\",\"guide_coding-standard.md\":\"CExrIaSk\",\"guide_components.md\":\"Dp73hcbC\",\"guide_configure.md\":\"CJz_Esbr\",\"guide_copyright.md\":\"DDMimkMu\",\"guide_error-log.md\":\"DtTZt4mz\",\"guide_favorites.md\":\"Dr5nFHLh\",\"guide_font.md\":\"fIC5ZFl8\",\"guide_i18n.md\":\"D3t1tx5Y\",\"guide_intro.md\":\"BQCMWZTm\",\"guide_layout.md\":\"BG_6OJC8\",\"guide_loading.md\":\"CFGbmB9Q\",\"guide_login.md\":\"_7WiRDfx\",\"guide_menu.md\":\"BWMIGvEY\",\"guide_permission.md\":\"BIRcpr7c\",\"guide_plop-module.md\":\"CN9t1yhG\",\"guide_plop.md\":\"CMB2vis4\",\"guide_preferences.md\":\"CldRPHT_\",\"guide_q-a.md\":\"jfNUPCX-\",\"guide_ready.md\":\"DxMS7pek\",\"guide_replace-to-antd.md\":\"lWJYcSvg\",\"guide_replace-to-arco.md\":\"D1W0Dbsy\",\"guide_replace-to-idux.md\":\"CQB9Kwhw\",\"guide_replace-to-naive.md\":\"DznF62LT\",\"guide_replace-to-tdesign.md\":\"Y2ecmWQf\",\"guide_replace-to-vexip.md\":\"CzCJARER\",\"guide_resources.md\":\"CneXUUEE\",\"guide_router.md\":\"sp4K2s-B\",\"guide_rtl.md\":\"AC27H5LC\",\"guide_start.md\":\"DpbBC51g\",\"guide_storage.md\":\"BSHuidD_\",\"guide_store.md\":\"DkY2S-QW\",\"guide_svg-icon.md\":\"BuqfykPn\",\"guide_theme.md\":\"BIFk7_tY\",\"guide_toolbar.md\":\"8Jj8wAr8\",\"guide_upgrade.md\":\"B6n2TzgB\",\"guide_vue3-composition-api.md\":\"C97YsW1P\",\"guide_watermark.md\":\"3rYBdnyQ\",\"guide_why.md\":\"C0hJKQGF\",\"guide_window.md\":\"yrgVxj5-\",\"index.md\":\"CF2Caz2B\",\"support.md\":\"GvMWrx3o\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"One-step-admin 官方文档\",\"description\":\"一款开箱即用的 Vue 中后台管理系统框架,采用 Vue3 + Vite2 技术栈。\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"footer\":{\"copyright\":\"Copyright © 2021-present One-step-admin\"},\"nav\":[{\"text\":\"文档 <img src=\\\"https://img.shields.io/github/v/release/one-step-admin/basic?style=flat-square&label=%20&color=%2367C23B\\\" style=\\\"display: inline-block; margin-top: -2px; margin-left: 4px; vertical-align: middle;\\\" />\",\"items\":[{\"text\":\"指南\",\"link\":\"/guide/intro\"},{\"text\":\"组件\",\"link\":\"/components/index\"}]},{\"text\":\"在线演示\",\"items\":[{\"text\":\"Github\",\"items\":[{\"text\":\"基础版\",\"link\":\"https://one-step-admin.hurui.me/basic-example\"},{\"text\":\"专业版\",\"link\":\"https://one-step-admin.hurui.me/pro-example\"}]},{\"text\":\"Cloudflare\",\"items\":[{\"text\":\"基础版\",\"link\":\"https://one-step-admin.pages.dev/basic-example\"},{\"text\":\"专业版\",\"link\":\"https://one-step-admin.pages.dev/pro-example\"}]}]},{\"text\":\"技术支持\",\"link\":\"/support\"},{\"text\":\"下载 / 购买\",\"items\":[{\"text\":\"下载基础版\",\"link\":\"https://github.com/one-step-admin/basic/releases\"},{\"text\":\"购买专业版 ⭐\",\"link\":\"/buy\"}]}],\"socialLinks\":[{\"icon\":{\"svg\":\"<svg t=\\\"1663266323098\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"2880\\\" width=\\\"200\\\" height=\\\"200\\\">
42<path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" p-id=\\\"2881\\\"></path></svg>\"},\"link\":\"https://gitee.com/one-step-admin/basic\"},{\"icon\":\"github\",\"link\":\"https://github.com/one-step-admin/basic\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"指引\",\"items\":[{\"text\":\"文档说明\",\"link\":\"/guide/intro\"},{\"text\":\"为什么选择我们 ?\",\"link\":\"/guide/why\"},{\"text\":\"更新日志\",\"link\":\"/guide/changelog\"}],\"collapsed\":false},{\"text\":\"入门\",\"items\":[{\"text\":\"准备工作\",\"link\":\"/guide/ready\"},{\"text\":\"开始\",\"link\":\"/guide/start\"},{\"text\":\"代码规范\",\"link\":\"/guide/coding-standard\"},{\"text\":\"配置\",\"link\":\"/guide/configure\"},{\"text\":\"导航\",\"link\":\"/guide/menu\"},{\"text\":\"窗口\",\"link\":\"/guide/window\"},{\"text\":\"路由\",\"link\":\"/guide/router\"},{\"text\":\"与服务端交互\",\"link\":\"/guide/axios\"},{\"text\":\"全局状态管理\",\"link\":\"/guide/store\"},{\"text\":\"资源\",\"link\":\"/guide/resources\"},{\"text\":\"图标\",\"link\":\"/guide/svg-icon\"},{\"text\":\"构建与预览\",\"link\":\"/guide/build\"}],\"collapsed\":false},{\"text\":\"进阶\",\"items\":[{\"text\":\"登录\",\"link\":\"/guide/login\"},{\"text\":\"权限\",\"link\":\"/guide/permission\"},{\"text\":\"布局\",\"link\":\"/guide/layout\"},{\"text\":\"主题\",\"link\":\"/guide/theme\"},{\"text\":\"工具栏\",\"link\":\"/guide/toolbar\"},{\"text\":\"收藏夹\",\"link\":\"/guide/favorites\"},{\"text\":\"版权信息\",\"link\":\"/guide/copyright\"}]},{\"text\":\"高级\",\"items\":[{\"text\":\"国际化\",\"link\":\"/guide/i18n\"},{\"text\":\"RTL 模式\",\"link\":\"/guide/rtl\"},{\"text\":\"代码文件自动生成\",\"link\":\"/guide/plop\"},{\"text\":\"标准模块\",\"link\":\"/guide/plop-module\"},{\"text\":\"常用 API\",\"link\":\"/guide/api\"},{\"text\":\"私有 Storage 数据\",\"link\":\"/guide/storage\"},{\"text\":\"首屏 Loading\",\"link\":\"/guide/loading\"},{\"text\":\"页面水印\",\"link\":\"/guide/watermark\"},{\"text\":\"错误日志\",\"link\":\"/guide/error-log\"},{\"text\":\"自定义字体\",\"link\":\"/guide/font\"},{\"text\":\"用户偏好设置\",\"link\":\"/guide/preferences\"},{\"text\":\"使用 Composition API 开发\",\"link\":\"/guide/vue3-composition-api\"},{\"text\":\"替换 UI 组件库\",\"items\":[{\"text\":\"替换为 Ant Design Vue\",\"link\":\"/guide/replace-to-antd\"},{\"text\":\"替换为 Arco Design Vue\",\"link\":\"/guide/replace-to-arco\"},{\"text\":\"替换为 Naive UI\",\"link\":\"/guide/replace-to-naive\"},{\"text\":\"替换为 TDesign\",\"link\":\"/guide/replace-to-tdesign\"},{\"text\":\"替换为 Vexip UI\",\"link\":\"/guide/replace-to-vexip\"},{\"text\":\"替换为 iDux\",\"link\":\"/guide/replace-to-idux\"}],\"collapsed\":true}],\"collapsed\":false},{\"text\":\"其它\",\"items\":[{\"text\":\"框架更新\",\"link\":\"/guide/upgrade\"},{\"text\":\"常见问题\",\"link\":\"/guide/q-a\"}],\"collapsed\":false}],\"/components/\":[{\"text\":\"组件\",\"items\":[{\"text\":\"介绍\",\"link\":\"/components/\"}]},{\"text\":\"扩展组件\",\"items\":[{\"text\":\"Auth 鉴权\",\"link\":\"/components/auth\"},{\"text\":\"PageHeader 页头\",\"link\":\"/components/page-header\"},{\"text\":\"PageMain 内容块\",\"link\":\"/components/page-main\"},{\"text\":\"ActionContainer 固定底部操作栏\",\"link\":\"/components/action-container\"},{\"text\":\"SearchBar 搜索面板\",\"link\":\"/components/search-bar\"},{\"text\":\"ImageUpload 单图上传\",\"link\":\"/components/image-upload\"},{\"text\":\"ImagesUpload 多图上传\",\"link\":\"/components/images-upload\"},{\"text\":\"FileUpload 文件上传\",\"link\":\"/components/file-upload\"},{\"text\":\"ImagePreview 图片预览\",\"link\":\"/components/image-preview\"},{\"text\":\"SvgIcon SVG图标\",\"link\":\"/components/svg-icon\"},{\"text\":\"Trend 趋势标记\",\"link\":\"/components/trend\"},{\"text\":\"PcasCascader 省市区街道联动\",\"link\":\"/components/pcas-cascader\"},{\"text\":\"Chip 纸片\",\"link\":\"/components/chip\"},{\"text\":\"ColorfulCard 多彩渐变卡片\",\"link\":\"/components/colorful-card\"},{\"text\":\"IconPicker 图标选择器\",\"link\":\"/components/icon-picker\"},{\"text\":\"Sparkline 迷你图\",\"link\":\"/components/sparkline\"},{\"text\":\"I18nSelector 国际化选择器\",\"link\":\"/components/i18n-selector\"},{\"text\":\"StorageBox 储存箱\",\"link\":\"/components/storage-box\"}]}],\"/\":[{\"text\":\"\",\"items\":[{\"text\":\"购买专业版\",\"link\":\"/buy\"},{\"text\":\"技术支持\",\"link\":\"/support\"}]}]},\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\",\"closeText\":\"关闭\"}}}}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
42
43    
44  </body>
45</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.