mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
148 lines
52 KiB
HTML
148 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>主题定制 | Vue Antd Admin</title>
|
||
<meta name="generator" content="VuePress 1.5.2">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<meta name="description" content="Vue Antd Admin">
|
||
<link rel="preload" href="/assets/css/0.styles.566e6543.css" as="style"><link rel="preload" href="/assets/js/app.4044373b.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/6.53f712d2.js" as="script"><link rel="preload" href="/assets/js/4.a8d32d40.js" as="script"><link rel="preload" href="/assets/js/8.a6aa3458.js" as="script"><link rel="prefetch" href="/assets/js/10.b3af0ac4.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.9a3bd7bf.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.cf783558.js"><link rel="prefetch" href="/assets/js/16.8cd2d550.js"><link rel="prefetch" href="/assets/js/17.a194e1da.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.58b681da.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.94de0f4c.js"><link rel="prefetch" href="/assets/js/22.be24120c.js"><link rel="prefetch" href="/assets/js/23.e2e4171a.js"><link rel="prefetch" href="/assets/js/24.d3dad329.js"><link rel="prefetch" href="/assets/js/25.936cbc18.js"><link rel="prefetch" href="/assets/js/26.bf7fa383.js"><link rel="prefetch" href="/assets/js/27.4a757523.js"><link rel="prefetch" href="/assets/js/28.fbeefcef.js"><link rel="prefetch" href="/assets/js/29.baa62900.js"><link rel="prefetch" href="/assets/js/3.ed8a83eb.js"><link rel="prefetch" href="/assets/js/30.6397ca35.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.40c5e0e5.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/5.2d98be03.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||
<link rel="stylesheet" href="/assets/css/0.styles.566e6543.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||
配置
|
||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||
主题
|
||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||
配置
|
||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||
主题
|
||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" aria-current="page" class="active sidebar-link">主题定制</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/develop/theme.html#主题颜色" class="sidebar-link">主题颜色</a></li><li class="sidebar-sub-header"><a href="/develop/theme.html#主题模式" class="sidebar-link">主题模式</a></li><li class="sidebar-sub-header"><a href="/develop/theme.html#导航布局" class="sidebar-link">导航布局</a></li><li class="sidebar-sub-header"><a href="/develop/theme.html#动画" class="sidebar-link">动画</a></li><li class="sidebar-sub-header"><a href="/develop/theme.html#其它" class="sidebar-link">其它</a></li></ul></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="主题定制"><a href="#主题定制" class="header-anchor">#</a> 主题定制</h1> <h2 id="主题颜色"><a href="#主题颜色" class="header-anchor">#</a> 主题颜色</h2> <h3 id="主题色"><a href="#主题色" class="header-anchor">#</a> 主题色</h3> <p>我们内置了一个色盘供您选择</p> <div data-clipboard-text="#fa541c" class="color" style="background-color:#fa541c;" data-v-4d7d65d2></div> <div data-clipboard-text="#fadb14" class="color" style="background-color:#fadb14;" data-v-4d7d65d2></div> <div data-clipboard-text="#3eaf7c" class="color" style="background-color:#3eaf7c;" data-v-4d7d65d2></div> <div data-clipboard-text="#13c2c2" class="color" style="background-color:#13c2c2;" data-v-4d7d65d2></div> <div data-clipboard-text="#1890ff" class="color" style="background-color:#1890ff;" data-v-4d7d65d2></div> <div data-clipboard-text="#722ed1" class="color" style="background-color:#722ed1;" data-v-4d7d65d2></div> <div data-clipboard-text="#eb2f96" class="color" style="background-color:#eb2f96;" data-v-4d7d65d2></div> <p>如果这不能满足你的需求，你也可以使用任何你喜欢的颜色，只需要在 src/config/config.js 文件中配置你的主题色即可。如：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span> <span class="token comment">//换成任何你喜欢的颜色，支持 hex 色值</span>
|
||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>当你设置好主题色后，系统会根据这个主题色为你生成一系列配套的颜色，并应用到vue组件中。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>你可以在你的样式文件中直接使用 less 变量 <code>@theme-color</code>。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>主题色目前只支持 <code>hex</code> 模式的色值。如果设置为 <code>rgb</code> 或其它模式的色值，可能会导致配套颜色无法生成。</p></div> <h3 id="功能色"><a href="#功能色" class="header-anchor">#</a> 功能色</h3> <p>除了主题色，系统还有一些功能性颜色，分别为：成功色、警告色和错误色。默认色值分别为：</p> <table><thead><tr><th style="text-align:center;">名称</th> <th style="text-align:center;">success</th> <th style="text-align:center;">warning</th> <th style="text-align:center;">error</th></tr></thead> <tbody><tr><td style="text-align:center;">色值</td> <td style="text-align:center;"><code>#52c41a</code></td> <td style="text-align:center;"><code>#faad14</code></td> <td style="text-align:center;"><code>#f5222d</code></td></tr> <tr><td style="text-align:center;">颜色</td> <td style="text-align:center;"><div data-clipboard-text="#52c41a" class="color" style="background-color:#52c41a;" data-v-4d7d65d2></div></td> <td style="text-align:center;"><div data-clipboard-text="#faad14" class="color" style="background-color:#faad14;" data-v-4d7d65d2></div></td> <td style="text-align:center;"><div data-clipboard-text="#f5222d" class="color" style="background-color:#f5222d;" data-v-4d7d65d2></div></td></tr> <tr><td style="text-align:center;">less变量</td> <td style="text-align:center;">@success-color</td> <td style="text-align:center;">@warning-color</td> <td style="text-align:center;">@error-color</td></tr></tbody></table> <p>你也可以在 src/config/config.js 重新定义这些功能色</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||
mode<span class="token operator">:</span> <span class="token string">'night'</span><span class="token punctuation">,</span>
|
||
success<span class="token operator">:</span> <span class="token string">'#52c41a'</span><span class="token punctuation">,</span> <span class="token comment">//定义成功色，支持 hex 色值</span>
|
||
warning<span class="token operator">:</span> <span class="token string">'#faad14'</span><span class="token punctuation">,</span> <span class="token comment">//定义警告色，支持 hex 色值</span>
|
||
error<span class="token operator">:</span> <span class="token string">'#f5222d'</span> <span class="token comment">//定义错误色，支持 hex 色值</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>想在在你的样式文件中使用以上各功能色，引用各功能色对应的 less 变量即可。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>功能色目前也只支持 <code>hex</code> 模式的色值。如果设置为 <code>rgb</code> 或其它模式的色值，可能会导致配套颜色无法生成。</p></div> <h3 id="文本色"><a href="#文本色" class="header-anchor">#</a> 文本色</h3> <table style="text-align:center;"><tr><th>主题模式</th> <th>标题色</th> <th>文本色</th> <th>次级文本色</th></tr> <tr><td rowspan="2">light/dark</td> <td><div data-clipboard-text="rgba(0,0,0,0.85)" class="color" style="background-color:rgba(0,0,0,0.85);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(0,0,0,0.65)" class="color" style="background-color:rgba(0,0,0,0.65);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(0,0,0,0.45)" class="color" style="background-color:rgba(0,0,0,0.45);" data-v-4d7d65d2></div></td></tr> <tr><td><code>rgba(0,0,0,0.85)</code></td> <td><code>rgba(0,0,0,0.65)</code></td> <td><code>rgba(0,0,0,0.45)</code></td></tr> <tr><td rowspan="2">night</td> <td><div data-clipboard-text="rgba(255,255,255,0.85)" class="color" style="background-color:rgba(255,255,255,0.85);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(255,255,255,0.65)" class="color" style="background-color:rgba(255,255,255,0.65);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(255,255,255,0.45)" class="color" style="background-color:rgba(255,255,255,0.45);" data-v-4d7d65d2></div></td></tr> <tr><td><code>rgba(255,255,255,0.85)</code></td> <td><code>rgba(255,255,255,0.65)</code></td> <td><code>rgba(255,255,255,0.45)</code></td></tr> <tr><td>less变量</td> <td>@title-color</td> <td>@text-color</td> <td>@text-color-second</td></tr></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>想在在你的样式文件中使用以上文本色，引用各文本色对应的 less 变量即可。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>目前不支持自定义文本色，因为涉及到主题模式切换时文本色的置换问题。如强行修改，可能会导致主题模式切换时出现样式异常。
|
||
如果你的项目不需要主题模式切换，可自行替换以上文本色。</p></div> <h3 id="背景色"><a href="#背景色" class="header-anchor">#</a> 背景色</h3> <table style="text-align:center;"><tr><th>主题模式</th> <th>布局背景色</th> <th>基础背景色</th> <th>hover背景色</th> <th>边框颜色</th> <th>阴影颜色</th></tr> <tr><td rowspan="2">light/dark</td> <td><div data-clipboard-text="#f0f2f5" class="color" style="background-color:#f0f2f5;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="#fff" class="color" style="background-color:#fff;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(0,0,0,0.025)" class="color" style="background-color:rgba(0,0,0,0.025);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="#f0f0f0" class="color" style="background-color:#f0f0f0;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(0,0,0,0.15)" class="color" style="background-color:rgba(0,0,0,0.15);" data-v-4d7d65d2></div></td></tr> <tr><td><code>#f0f2f5</code></td> <td><code>#fff</code></td> <td><code>rgba(0,0,0,0.025)</code></td> <td><code>#f0f0f0</code></td> <td><code>rgba(0,0,0,0.15)</code></td></tr> <tr><td rowspan="2">night</td> <td><div data-clipboard-text="#000" class="color" style="background-color:#000;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="#141414" class="color" style="background-color:#141414;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(255,255,255,0.025)" class="color" style="background-color:rgba(255,255,255,0.025);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="#303030" class="color" style="background-color:#303030;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(255,255,255,0.15)" class="color" style="background-color:rgba(255,255,255,0.15);" data-v-4d7d65d2></div></td></tr> <tr><td><code>#000</code></td> <td><code>#141414</code></td> <td><code>rgba(255,255,255,0.025)</code></td> <td><code>#303030</code></td> <td><code>rgba(255,255,255,0.15)</code></td></tr> <tr><td>less变量</td> <td>@layout-bg-color</td> <td>@base-bg-color</td> <td>@hover-bg-color</td> <td>@border-color</td> <td>@shadow-color</td></tr></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>想在在你的样式文件中使用以上背景色，引用各背景色对应的 less 变量即可。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>目前也不支持自定义背景色，因为涉及到主题模式切换时背景色的置换问题。如强行修改，可能会导致主题模式切换时出现样式异常。
|
||
如果你的项目不需要主题模式切换，可自行替换以上背景色。</p></div> <h3 id="antd-的色系"><a href="#antd-的色系" class="header-anchor">#</a> antd 的色系</h3> <p>除了以上颜色，我们还引入了 ant-design 内置的色系。如下：</p> <table style="text-align:center;"><tr><th>色系</th> <th>类型</th> <th>颜色</th></tr> <tr><td rowspan="2">blue/拂晓蓝</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#e6f7ff" class="color color" style="background-color:#e6f7ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#bae7ff" class="color color" style="background-color:#bae7ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#91d5ff" class="color color" style="background-color:#91d5ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#69c0ff" class="color color" style="background-color:#69c0ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#40a9ff" class="color color" style="background-color:#40a9ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#1890ff" class="color color" style="background-color:#1890ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#096dd9" class="color color" style="background-color:#096dd9;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#0050b3" class="color color" style="background-color:#0050b3;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#003a8c" class="color color" style="background-color:#003a8c;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#002766" class="color color" style="background-color:#002766;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@blue-1</code>、
|
||
<code>@blue-2</code> <code>...</code> <code>@blue-10</code></td></tr> <tr><td rowspan="2">purple/酱紫</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#f9f0ff" class="color color" style="background-color:#f9f0ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#efdbff" class="color color" style="background-color:#efdbff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d3adf7" class="color color" style="background-color:#d3adf7;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#b37feb" class="color color" style="background-color:#b37feb;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#9254de" class="color color" style="background-color:#9254de;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#722ed1" class="color color" style="background-color:#722ed1;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#531dab" class="color color" style="background-color:#531dab;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#391085" class="color color" style="background-color:#391085;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#22075e" class="color color" style="background-color:#22075e;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#120338" class="color color" style="background-color:#120338;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@purple-1</code>、
|
||
<code>@purple-2</code> <code>...</code> <code>@purple-10</code></td></tr> <tr><td rowspan="2">cyan/明青</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#e6fffb" class="color color" style="background-color:#e6fffb;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#b5f5ec" class="color color" style="background-color:#b5f5ec;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#87e8de" class="color color" style="background-color:#87e8de;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#5cdbd3" class="color color" style="background-color:#5cdbd3;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#36cfc9" class="color color" style="background-color:#36cfc9;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#13c2c2" class="color color" style="background-color:#13c2c2;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#08979c" class="color color" style="background-color:#08979c;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#006d75" class="color color" style="background-color:#006d75;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#00474f" class="color color" style="background-color:#00474f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#002329" class="color color" style="background-color:#002329;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@cyan-1</code>、
|
||
<code>@cyan-2</code> <code>...</code> <code>@cyan-10</code></td></tr> <tr><td rowspan="2">green/极光绿</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#f6ffed" class="color color" style="background-color:#f6ffed;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d9f7be" class="color color" style="background-color:#d9f7be;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#b7eb8f" class="color color" style="background-color:#b7eb8f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#95de64" class="color color" style="background-color:#95de64;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#73d13d" class="color color" style="background-color:#73d13d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#52c41a" class="color color" style="background-color:#52c41a;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#389e0d" class="color color" style="background-color:#389e0d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#237804" class="color color" style="background-color:#237804;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#135200" class="color color" style="background-color:#135200;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#092b00" class="color color" style="background-color:#092b00;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@green-1</code>、
|
||
<code>@green-2</code> <code>...</code> <code>@green-10</code></td></tr> <tr><td rowspan="2">magenta/法式洋红</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fff0f6" class="color color" style="background-color:#fff0f6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffd6e7" class="color color" style="background-color:#ffd6e7;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffadd2" class="color color" style="background-color:#ffadd2;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff85c0" class="color color" style="background-color:#ff85c0;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#f759ab" class="color color" style="background-color:#f759ab;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#eb2f96" class="color color" style="background-color:#eb2f96;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#c41d7f" class="color color" style="background-color:#c41d7f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#9e1068" class="color color" style="background-color:#9e1068;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#780650" class="color color" style="background-color:#780650;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#520339" class="color color" style="background-color:#520339;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@magenta-1</code>、
|
||
<code>@magenta-2</code> <code>...</code> <code>@magenta-10</code></td></tr> <tr><td rowspan="2">red/薄暮</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fff1f0" class="color color" style="background-color:#fff1f0;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffccc7" class="color color" style="background-color:#ffccc7;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffa39e" class="color color" style="background-color:#ffa39e;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff7875" class="color color" style="background-color:#ff7875;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff4d4f" class="color color" style="background-color:#ff4d4f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#f5222d" class="color color" style="background-color:#f5222d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#cf1322" class="color color" style="background-color:#cf1322;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#a8071a" class="color color" style="background-color:#a8071a;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#820014" class="color color" style="background-color:#820014;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#5c0011" class="color color" style="background-color:#5c0011;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@red-1</code>、
|
||
<code>@red-2</code> <code>...</code> <code>@red-10</code></td></tr> <tr><td rowspan="2">orange/日暮</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fff7e6" class="color color" style="background-color:#fff7e6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffe7ba" class="color color" style="background-color:#ffe7ba;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffd591" class="color color" style="background-color:#ffd591;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffc069" class="color color" style="background-color:#ffc069;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffa940" class="color color" style="background-color:#ffa940;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fa8c16" class="color color" style="background-color:#fa8c16;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d46b08" class="color color" style="background-color:#d46b08;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ad4e00" class="color color" style="background-color:#ad4e00;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#873800" class="color color" style="background-color:#873800;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#612500" class="color color" style="background-color:#612500;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@orange-1</code>、
|
||
<code>@orange-2</code> <code>...</code> <code>@orange-10</code></td></tr> <tr><td rowspan="2">yellow/日出</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#feffe6" class="color color" style="background-color:#feffe6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffffb8" class="color color" style="background-color:#ffffb8;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fffb8f" class="color color" style="background-color:#fffb8f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fff566" class="color color" style="background-color:#fff566;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffec3d" class="color color" style="background-color:#ffec3d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fadb14" class="color color" style="background-color:#fadb14;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d4b106" class="color color" style="background-color:#d4b106;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ad8b00" class="color color" style="background-color:#ad8b00;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#876800" class="color color" style="background-color:#876800;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#614700" class="color color" style="background-color:#614700;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@yellow-1</code>、
|
||
<code>@yellow-2</code> <code>...</code> <code>@yellow-10</code></td></tr> <tr><td rowspan="2">volcano/火山</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fff2e8" class="color color" style="background-color:#fff2e8;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffd8bf" class="color color" style="background-color:#ffd8bf;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffbb96" class="color color" style="background-color:#ffbb96;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff9c6e" class="color color" style="background-color:#ff9c6e;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff7a45" class="color color" style="background-color:#ff7a45;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fa541c" class="color color" style="background-color:#fa541c;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d4380d" class="color color" style="background-color:#d4380d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ad2102" class="color color" style="background-color:#ad2102;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#871400" class="color color" style="background-color:#871400;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#610b00" class="color color" style="background-color:#610b00;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@volcano-1</code>、
|
||
<code>@volcano-2</code> <code>...</code> <code>@volcano-10</code></td></tr> <tr><td rowspan="2">geekblue/极客蓝</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#f0f5ff" class="color color" style="background-color:#f0f5ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d6e4ff" class="color color" style="background-color:#d6e4ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#adc6ff" class="color color" style="background-color:#adc6ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#85a5ff" class="color color" style="background-color:#85a5ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#597ef7" class="color color" style="background-color:#597ef7;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#2f54eb" class="color color" style="background-color:#2f54eb;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#1d39c4" class="color color" style="background-color:#1d39c4;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#10239e" class="color color" style="background-color:#10239e;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#061178" class="color color" style="background-color:#061178;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#030852" class="color color" style="background-color:#030852;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@geekblue-1</code>、
|
||
<code>@geekblue-2</code> <code>...</code> <code>@geekblue-10</code></td></tr> <tr><td rowspan="2">lime/青柠</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fcffe6" class="color color" style="background-color:#fcffe6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#f4ffb8" class="color color" style="background-color:#f4ffb8;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#eaff8f" class="color color" style="background-color:#eaff8f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d3f261" class="color color" style="background-color:#d3f261;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#bae637" class="color color" style="background-color:#bae637;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#a0d911" class="color color" style="background-color:#a0d911;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#7cb305" class="color color" style="background-color:#7cb305;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#5b8c00" class="color color" style="background-color:#5b8c00;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#3f6600" class="color color" style="background-color:#3f6600;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#254000" class="color color" style="background-color:#254000;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@lime-1</code>、
|
||
<code>@lime-2</code> <code>...</code> <code>@lime-10</code></td></tr> <tr><td rowspan="2">gold/金盏花</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fffbe6" class="color color" style="background-color:#fffbe6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fff1b8" class="color color" style="background-color:#fff1b8;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffe58f" class="color color" style="background-color:#ffe58f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffd666" class="color color" style="background-color:#ffd666;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffc53d" class="color color" style="background-color:#ffc53d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#faad14" class="color color" style="background-color:#faad14;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d48806" class="color color" style="background-color:#d48806;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ad6800" class="color color" style="background-color:#ad6800;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#874d00" class="color color" style="background-color:#874d00;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#613400" class="color color" style="background-color:#613400;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@gold-1</code>、
|
||
<code>@gold-2</code> <code>...</code> <code>@gold-10</code></td></tr></table>
|
||
以上色系对应的less变量均可以在你的样式代码中直接使用。
|
||
<div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>我们建议在开发中使用 <code>less变量</code> 而不是直接使用 <code>颜色值</code> 来设置颜色。这样做对主题色和主题模式切换很有帮助。</p></div> <h2 id="主题模式"><a href="#主题模式" class="header-anchor">#</a> 主题模式</h2> <p>Vue Antd Admin 有三种主题模式，分别为：<code>light/亮色菜单模式</code>、<code>dark/暗色菜单模式</code> 和 <code>night/黑夜模式</code>。</p> <p>light / 亮色菜单模式:
|
||
<img src="/assets/img/mode-light.e460a721.png" alt="light">
|
||
dark / 暗色菜单模式:
|
||
<img src="/assets/img/mode-dark.178ff571.png" alt="dark">
|
||
night / 黑夜模式:
|
||
<img src="/assets/img/mode-night.16c831f4.png" alt="night"></p> <p>你可以在这三种模式之间随意切换，也可以在 src/config/config.js 中设置默认的主题模式。</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||
mode<span class="token operator">:</span> <span class="token string">'night'</span> <span class="token comment">//设置你的默认主题模式，可选 light、dark 和 night</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="导航布局"><a href="#导航布局" class="header-anchor">#</a> 导航布局</h2> <p>Vue Antd Admin 有两种导航布局，<code>side/侧边导航</code> 和 <code>head/顶部导航</code>。<br>
|
||
默认为侧边导航，你可以在 src/config/config.js 中修改导航布局</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
layout<span class="token operator">:</span> <span class="token string">'side'</span><span class="token punctuation">,</span> <span class="token comment">//设置你的默认导航布局，有 side 和 head 可选</span>
|
||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="动画"><a href="#动画" class="header-anchor">#</a> 动画</h2> <p>Vue Antd Admin 内置了 <a href="https://animate.style" target="_blank" rel="noopener noreferrer">animate.css<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 动画库，在页面切换时会应用动画效果。你可以在 src/config/config.js 中配置动画效果或者禁用动画。</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
disabled<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//禁用动画，true:禁用，false:启用</span>
|
||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span> <span class="token comment">//动画效果，支持的动画效果可参考 src/config/default/animate.config.js</span>
|
||
direction<span class="token operator">:</span> <span class="token string">'default'</span> <span class="token comment">//动画方向，切换页面时动画的方向，参考 src/config/default/animate.config.js</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>支持的动画特效种类，可以参考 src/config/default/animate.config.js 文件。</p> <h2 id="其它"><a href="#其它" class="header-anchor">#</a> 其它</h2> <h3 id="色弱模式"><a href="#色弱模式" class="header-anchor">#</a> 色弱模式</h3> <p>对于有视觉障碍的群体，我们提供了色弱模式，你可以通过配置 src/config/config.js 启用色弱模式</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
weekMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//色弱模式，true:开启，false:不开启</span>
|
||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="多页签"><a href="#多页签" class="header-anchor">#</a> 多页签</h3> <p>在 src/config/config.js 设置 multiPage 来启用或关闭多页签模式</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//多页签模式，true:开启，false:不开启</span>
|
||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>完整的系统设置参考 src/config/default/setting.config.js</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>以上所有主题设置项，均已映射到 vuex/setting 模块的 state 中，你可以通过提交 setting/mutations 实时修改设置项。<br>
|
||
如何使用 <a href="https://vuex.vuejs.org/zh/guide/mutations.html" target="_blank" rel="noopener noreferrer">mutations<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> ？</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/develop/theme.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/7/23 14:42:10</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||
←
|
||
<a href="/develop/page.html" class="prev">
|
||
页面
|
||
</a></span> <span class="next"><a href="/develop/service.html">
|
||
服务端交互
|
||
</a>
|
||
→
|
||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||
<script src="/assets/js/app.4044373b.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/6.53f712d2.js" defer></script><script src="/assets/js/4.a8d32d40.js" defer></script><script src="/assets/js/8.a6aa3458.js" defer></script>
|
||
</body>
|
||
</html>
|