mjz update

This commit is contained in:
mjz
2024-03-28 22:48:05 +08:00
parent 1fdc7f8831
commit 71491b751d
64 changed files with 375 additions and 245 deletions

View File

@@ -18,6 +18,7 @@ module.exports = {
themeConfig: {
nav: [
{ text: '文档', link: '/pages/base/' },
{ text: '风华迷', link: 'https://zib.lovemi.ren' },
],
sidebarDepth: 1, // 侧边栏显示深度默认1最大2显示到h3标题
logo: '/img/colorui-logo.png', // 导航栏logo

View File

@@ -17,4 +17,9 @@
* ①注:在.md文件front matter配置`article: false`的页面是自定义页,未配置的默认是文章页(首页除外)。
* ②注windowLB 和 windowRB1.展示区块最大宽高200px*400px。2.请给自定义元素定一个不超过200px*400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。
*/
module.exports = {}
const fhmView = `<div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div>`;
module.exports = {
pageT: fhmView
};

View File

@@ -10,11 +10,11 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/5.ec11d5fb.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/2.8cc7ee55.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/3.f24eb86a.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/5.ec11d5fb.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/2.8cc7ee55.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/3.f24eb86a.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container" data-v-08abdc17><div class="theme-vdoing-content" data-v-08abdc17><span data-v-08abdc17>404</span> <blockquote data-v-08abdc17>看来我们的链接坏掉了~</blockquote> <a href="/colorui-document/" class="router-link-active" data-v-08abdc17>返回首页</a></div></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/5.ec11d5fb.js" defer></script>
<div id="app" data-server-rendered="true"><div class="theme-container" data-v-08abdc17><div class="theme-vdoing-content" data-v-08abdc17><span data-v-08abdc17>404</span> <blockquote data-v-08abdc17>我是谁?我在哪?</blockquote> <a href="/colorui-document/" class="router-link-active" data-v-08abdc17>返回首页</a></div></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/5.ec11d5fb.js" defer></script>
</body>
</html>

View File

@@ -10,22 +10,26 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open no-sidebar"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open no-sidebar"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <div class="custom-page archives-page"><div class="theme-vdoing-wrapper"><h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <div class="custom-page archives-page"><div class="theme-vdoing-wrapper"><h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">
归档
</h1> <div class="count">
总共 <i>0</i> 篇文章
</div> <ul></ul></div></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -35,6 +39,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{341:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("温馨提示")]),t._v(" "),s("p",[t._v("点击右侧图标页面,对应的图标,即可复制类名:"),s("code",[t._v("cuIcon-图标名称")])])]),t._v(" "),s("h2",{attrs:{id:"引入样式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#引入样式"}},[t._v("#")]),t._v(" 引入样式")]),t._v(" "),s("p",[t._v("编辑 "),s("code",[t._v("App.vue")]),t._v("文件在"),s("code",[t._v("<style>")]),t._v(" 项引入 "),s("code",[t._v("icon.css")])]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"colorui/main.css"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"colorui/icon.css"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"使用语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用语法"}},[t._v("#")]),t._v(" 使用语法")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("标签")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cuIcon-图标名称"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("标签")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{338:function(t,s,a){"use strict";a.r(s);var n=a(7),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("温馨提示")]),t._v(" "),s("p",[t._v("点击右侧图标页面,对应的图标,即可复制类名:"),s("code",[t._v("cuIcon-图标名称")])])]),t._v(" "),s("h2",{attrs:{id:"引入样式"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#引入样式"}},[t._v("#")]),t._v(" 引入样式")]),t._v(" "),s("p",[t._v("编辑 "),s("code",[t._v("App.vue")]),t._v("文件在"),s("code",[t._v("<style>")]),t._v(" 项引入 "),s("code",[t._v("icon.css")])]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"colorui/main.css"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token atrule"}},[s("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@import")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"colorui/icon.css"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h2",{attrs:{id:"使用语法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用语法"}},[t._v("#")]),t._v(" 使用语法")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("标签")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("cuIcon-图标名称"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("标签")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{364:function(t,n,s){"use strict";s.r(n);var e=s(7),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{365:function(t,n,s){"use strict";s.r(n);var e=s(7),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]);

View File

@@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{363:function(t,n,s){"use strict";s.r(n);var e=s(7),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{362:function(t,n,s){"use strict";s.r(n);var e=s(7),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]);

View File

@@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{337:function(t,r,o){"use strict";o.r(r);var e=o(7),s=Object(e.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("div",{staticClass:"custom-block tip"},[r("p",{staticClass:"custom-block-title"},[t._v("温馨提示")]),t._v(" "),r("p",[t._v("本文档并非是官方文档,而是本人自己经常使用 Color UI但是又找不到一个满意的文档不如自己搭建一个文档自己使用方便的同时也方便大家使用。")])]),t._v(" "),r("h2",{attrs:{id:"基本介绍"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#基本介绍"}},[t._v("#")]),t._v(" 基本介绍")]),t._v(" "),r("p",[t._v("Color UI 我想大家都知晓吧,我就不过多阐述了,是 "),r("strong",[t._v("文晓港")]),t._v(" 大佬开发的一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值高度自定义的 Css 组件库.,属于出道即巅峰的史诗级大作,众所周知,万物皆可 Color UI很多人用 Color UI 做了不少精美的项目,我也一样,在此再次感谢作者。")]),t._v(" "),r("p",[r("a",{attrs:{href:"https://github.com/weilanwl/ColorUI",target:"_blank",rel:"noopener noreferrer"}},[t._v("ColorUI Github地址"),r("OutboundLink")],1)]),t._v(" "),r("p",[r("a",{attrs:{href:"https://ext.dcloud.net.cn/plugin?id=239",target:"_blank",rel:"noopener noreferrer"}},[t._v("ColorUI 插件市场"),r("OutboundLink")],1)]),t._v(" "),r("p",[r("a",{attrs:{href:"https://miren123.gitee.io/colorui-h5/#/",target:"_blank",rel:"noopener noreferrer"}},[t._v("ColorUI 在线展示"),r("OutboundLink")],1),t._v(" 因为右侧的h5是用iframe来嵌入的因此字体和极小一部分的样式会有出入文档里只做展示比较完整的样式点这里查看。")]),t._v(" "),r("p",[r("strong",[t._v("微信扫码预览h5")]),t._v(" "),r("img",{staticStyle:{zoom:"25%"},attrs:{src:"https://miren123.gitee.io/colorui-document/img/colorui-h5-code.png"}})]),t._v(" "),r("h2",{attrs:{id:"文档说明"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#文档说明"}},[t._v("#")]),t._v(" 文档说明")]),t._v(" "),r("p",[t._v("文档左侧目录基础元素、交互组件、插件扩展分别对应Color UI 底部对应的三个大模块,而三个模块下二级目录,也分别对应三个页面里的模块,点击目录右侧会跳转到对应的页面。")]),t._v(" "),r("p",[t._v("在查看文档的同时,可以根据右侧预览图对比当前查看模块的预览效果")]),t._v(" "),r("h3",{attrs:{id:"视图-目录-切换"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#视图-目录-切换"}},[t._v("#")]),t._v(" 视图/目录 切换")]),t._v(" "),r("p",[t._v("点击h5预览模板左上角的切换视图可以随心所欲切换目录/视图,方便快速定位需要查找的内容")])])}),[],!1,null,null,null);r.default=s.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{336:function(t,r,o){"use strict";o.r(r);var e=o(7),s=Object(e.a)({},(function(){var t=this,r=t._self._c;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("div",{staticClass:"custom-block tip"},[r("p",{staticClass:"custom-block-title"},[t._v("温馨提示")]),t._v(" "),r("p",[t._v("本文档并非是官方文档,而是本人自己经常使用 Color UI但是又找不到一个满意的文档不如自己搭建一个文档自己使用方便的同时也方便大家使用。")])]),t._v(" "),r("h2",{attrs:{id:"基本介绍"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#基本介绍"}},[t._v("#")]),t._v(" 基本介绍")]),t._v(" "),r("p",[t._v("Color UI 我想大家都知晓吧,我就不过多阐述了,是 "),r("strong",[t._v("文晓港")]),t._v(" 大佬开发的一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值高度自定义的 Css 组件库.,属于出道即巅峰的史诗级大作,众所周知,万物皆可 Color UI很多人用 Color UI 做了不少精美的项目,我也一样,在此再次感谢作者。")]),t._v(" "),r("p",[r("a",{attrs:{href:"https://github.com/weilanwl/ColorUI",target:"_blank",rel:"noopener noreferrer"}},[t._v("ColorUI Github地址"),r("OutboundLink")],1)]),t._v(" "),r("p",[r("a",{attrs:{href:"https://ext.dcloud.net.cn/plugin?id=239",target:"_blank",rel:"noopener noreferrer"}},[t._v("ColorUI 插件市场"),r("OutboundLink")],1)]),t._v(" "),r("p",[r("a",{attrs:{href:"https://miren123.gitee.io/colorui-h5/#/",target:"_blank",rel:"noopener noreferrer"}},[t._v("ColorUI 在线展示"),r("OutboundLink")],1),t._v(" 因为右侧的h5是用iframe来嵌入的因此字体和极小一部分的样式会有出入文档里只做展示比较完整的样式点这里查看。")]),t._v(" "),r("p",[r("strong",[t._v("微信扫码预览h5")]),t._v(" "),r("img",{staticStyle:{zoom:"25%"},attrs:{src:"https://miren123.gitee.io/colorui-document/img/colorui-h5-code.png"}})]),t._v(" "),r("h2",{attrs:{id:"文档说明"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#文档说明"}},[t._v("#")]),t._v(" 文档说明")]),t._v(" "),r("p",[t._v("文档左侧目录基础元素、交互组件、插件扩展分别对应Color UI 底部对应的三个大模块,而三个模块下二级目录,也分别对应三个页面里的模块,点击目录右侧会跳转到对应的页面。")]),t._v(" "),r("p",[t._v("在查看文档的同时,可以根据右侧预览图对比当前查看模块的预览效果")]),t._v(" "),r("h3",{attrs:{id:"视图-目录-切换"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#视图-目录-切换"}},[t._v("#")]),t._v(" 视图/目录 切换")]),t._v(" "),r("p",[t._v("点击h5预览模板左上角的切换视图可以随心所欲切换目录/视图,方便快速定位需要查找的内容")])])}),[],!1,null,null,null);r.default=s.exports}}]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -10,13 +10,17 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/36.60a43328.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/36.800cad01.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open no-sidebar"><header class="navbar blur"><div title="目录" 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="/colorui-document/" aria-current="page" class="home-link router-link-exact-active router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open no-sidebar"><header class="navbar blur"><div title="目录" 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="/colorui-document/" aria-current="page" class="home-link router-link-exact-active router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <div class="home-wrapper" data-v-d146d2d2><div class="banner" style="background:var(--mainBg);color:var(--textColor);" data-v-d146d2d2><div class="banner-conent" data-v-d146d2d2><header class="hero" data-v-d146d2d2><img src="/colorui-document/img/colorui-logo.png" data-v-d146d2d2> <h1 id="main-title" data-v-d146d2d2>
ColorUI 使用文档
@@ -25,7 +29,7 @@
</p> <p class="action" data-v-d146d2d2><a href="/colorui-document/pages/base/" class="nav-link action-button" data-v-d146d2d2>快速开始 →</a></p></header> <!----></div> <!----></div> <div class="main-wrapper" data-v-d146d2d2><div class="main-left"><div class="post-list" data-v-d146d2d2><div></div></div> <div class="pagination" style="display:none;" data-v-d146d2d2><span class="card-box prev iconfont icon-jiantou-zuo disabled"><p>上一页</p></span> <div class="pagination-list"></div> <span class="card-box next iconfont icon-jiantou-you"><p>下一页</p></span></div> <div class="theme-vdoing-content custom card-box content__default" data-v-d146d2d2></div></div> <div class="main-right"><!----> <!----> <!----> <!----></div></div></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -35,6 +39,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/36.60a43328.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/36.800cad01.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/11.388aba94.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/11.be9ad194.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" 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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" aria-current="page" class="active sidebar-link">图标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/icon/#引入样式" class="sidebar-link">引入样式</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/icon/#使用语法" class="sidebar-link">使用语法</a></li></ul></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">图标<!----></h1> <div class="theme-vdoing-content content__default"><div class="custom-block tip"><p class="custom-block-title">温馨提示</p> <p>点击右侧图标页面,对应的图标,即可复制类名:<code>cuIcon-图标名称</code></p></div> <h2 id="引入样式"><a href="#引入样式" class="header-anchor">#</a> 引入样式</h2> <p>编辑 <code>App.vue</code>文件在<code>&lt;style&gt;</code> 项引入 <code>icon.css</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">图标<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><div class="custom-block tip"><p class="custom-block-title">温馨提示</p> <p>点击右侧图标页面,对应的图标,即可复制类名:<code>cuIcon-图标名称</code></p></div> <h2 id="引入样式"><a href="#引入样式" class="header-anchor">#</a> 引入样式</h2> <p>编辑 <code>App.vue</code>文件在<code>&lt;style&gt;</code> 项引入 <code>icon.css</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;colorui/main.css&quot;</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;colorui/icon.css&quot;</span><span class="token punctuation">;</span></span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
@@ -33,7 +37,7 @@
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -43,6 +47,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/11.388aba94.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/11.be9ad194.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/17.31e8ea2a.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/17.15374680.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" 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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" aria-current="page" class="active sidebar-link">加载</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/loading/#弹窗加载" class="sidebar-link">弹窗加载</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/loading/#进度条加载" class="sidebar-link">进度条加载</a></li></ul></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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">加载<!----></h1> <div class="theme-vdoing-content content__default"><p>在需要设置加载的元素加上 class 类名 <code>cu-load</code>,可以设置自己喜欢的背景颜色 <code>.bg-red|...</code></p> <p>加载状态 <code>loading</code> 正在加载中,<code>over</code> 加载完成,<code>erro</code> 加载失败</p> <blockquote><p>css</p></blockquote> <div class="language- extra-class"><pre class="language-text"><code>.cu-load loading 加载中
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">加载<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><p>在需要设置加载的元素加上 class 类名 <code>cu-load</code>,可以设置自己喜欢的背景颜色 <code>.bg-red|...</code></p> <p>加载状态 <code>loading</code> 正在加载中,<code>over</code> 加载完成,<code>erro</code> 加载失败</p> <blockquote><p>css</p></blockquote> <div class="language- extra-class"><pre class="language-text"><code>.cu-load loading 加载中
.cu-load over 加载结束
.cu-load erro 加载错误
.cu-load loading load-cuIcon 只有加载图标没有文字
@@ -86,7 +90,7 @@
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -96,6 +100,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/17.31e8ea2a.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/17.15374680.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/16.ff717b47.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/16.da09304c.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" 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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" aria-current="page" class="active sidebar-link">边框阴影</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/shadow/#边框" class="sidebar-link">边框</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/basics/shadow/#阴影" class="sidebar-link">阴影</a></li></ul></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">边框阴影<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="边框"><a href="#边框" class="header-anchor">#</a> 边框</h2> <p>在需要加边框的元素加上 class 类名 <code>solid</code>,加粗的就是 <code>solids</code>,然后还有单独四个不同的方向 <code>solid-top|...</code></p> <blockquote><p>css 代码</p></blockquote> <div class="language-css extra-class"><pre class="language-css"><code>.solid 四周
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">边框阴影<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><h2 id="边框"><a href="#边框" class="header-anchor">#</a> 边框</h2> <p>在需要加边框的元素加上 class 类名 <code>solid</code>,加粗的就是 <code>solids</code>,然后还有单独四个不同的方向 <code>solid-top|...</code></p> <blockquote><p>css 代码</p></blockquote> <div class="language-css extra-class"><pre class="language-css"><code>.solid 四周
.solid-top 上
.solid-right 右
.solid-bottom
@@ -50,7 +54,7 @@
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -60,6 +64,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/16.ff717b47.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/16.da09304c.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/18.78def283.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/18.93fef267.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" 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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" aria-current="page" class="active sidebar-link">底部操作条</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">底部操作条<!----></h1> <div class="theme-vdoing-content content__default"><div class="custom-block tip"><p class="custom-block-title">温馨提示</p> <p>我们可以使用 Bar 操作条自定义项目底部的 <code>tabBar</code>,就拿官方示例代码来举例。
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">底部操作条<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><div class="custom-block tip"><p class="custom-block-title">温馨提示</p> <p>我们可以使用 Bar 操作条自定义项目底部的 <code>tabBar</code>,就拿官方示例代码来举例。
想要使用自定义底部操作条的同学,需要用组件来进行封装,因此这里建议大家提前学习一下组件的封装。</p></div> <h3 id="自定义底部操作条"><a href="#自定义底部操作条" class="header-anchor">#</a> 自定义底部操作条</h3> <ol><li><p><code>pages.json</code> 文件中的 <code>tabBar</code> 不需要配置,操作条代码放在首页即可。</p></li> <li><p><code>pages.json</code> 文件中的 <code>pages</code> 数组中第一项表示应用首页,如果项目有引导页,则根据项目的逻辑来做调整。</p></li> <li><p>示例中通过变量 <code>PageCur</code> 来切换不同 <code>tabBar</code> 页面,控制 <code>tabBar</code> 图标文字的样式切换,同时也控制需要显示对应 <code>tabBar</code> 的页面(组件引入)。</p></li></ol> <details class="custom-block details"><summary>点此查看官方示例</summary> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 这三个是对应的页面 --&gt;</span>
@@ -211,7 +215,7 @@
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -221,6 +225,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/18.78def283.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/18.93fef267.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/19.4f034cd4.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/19.d6f53f4d.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" 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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" aria-current="page" class="active sidebar-link">标题操作条</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">标题操作条<!----></h1> <div class="theme-vdoing-content content__default"><p>标题操作条就是纯粹的样式,右侧预览图滑到标题操作条,直接复制对应代码到项目对应的位置即可</p> <p>演示代码里有代码注释,一条对应一条,复制即可</p> <h3 id="演示代码"><a href="#演示代码" class="header-anchor">#</a> 演示代码</h3> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">标题操作条<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><p>标题操作条就是纯粹的样式,右侧预览图滑到标题操作条,直接复制对应代码到项目对应的位置即可</p> <p>演示代码里有代码注释,一条对应一条,复制即可</p> <h3 id="演示代码"><a href="#演示代码" class="header-anchor">#</a> 演示代码</h3> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
// 第一、二种都是标题和类似边框的组合样式,添加 border-title 类名
// 底部样式是 text 标签的 last-child 选择器设置的,可以自定义颜色和长度
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-bar bg-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
@@ -80,7 +84,7 @@
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -90,6 +94,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/19.4f034cd4.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/19.d6f53f4d.js" defer></script>
</body>
</html>

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/20.76bc794a.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/20.c48b8548.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" 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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" aria-current="page" class="active sidebar-link">顶部操作条</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/component/bar/top/#自定义操作条-导航栏" class="sidebar-link">自定义操作条(导航栏)</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/component/bar/top/#使用原生小程序开发" class="sidebar-link">使用原生小程序开发</a></li></ul></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">顶部操作条<!----></h1> <div class="theme-vdoing-content content__default"><p>顶部操作条设置属于自定义导航栏,接下来会给大家讲解配置。</p> <h2 id="自定义操作条-导航栏"><a href="#自定义操作条-导航栏" class="header-anchor">#</a> 自定义操作条(导航栏)</h2> <ol><li><p>导航栏作为常用组件 <code>color-ui</code> 里有做简单封装,你也可以直接复制代码结构自己修改,达到个性化目的。</p></li> <li><p><code>App.vue</code> 获得系统信息</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">onLaunch</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">顶部操作条<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><p>顶部操作条设置属于自定义导航栏,接下来会给大家讲解配置。</p> <h2 id="自定义操作条-导航栏"><a href="#自定义操作条-导航栏" class="header-anchor">#</a> 自定义操作条(导航栏)</h2> <ol><li><p>导航栏作为常用组件 <code>color-ui</code> 里有做简单封装,你也可以直接复制代码结构自己修改,达到个性化目的。</p></li> <li><p><code>App.vue</code> 获得系统信息</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">onLaunch</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
uni<span class="token punctuation">.</span><span class="token function">getSystemInfo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// #ifndef MP</span>
@@ -86,7 +90,7 @@ Vue.component('cu-custom',cuCustom)
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -96,6 +100,6 @@ Vue.component('cu-custom',cuCustom)
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/20.76bc794a.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/20.c48b8548.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/22.8ff6b731.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/22.5c8e7d4a.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" 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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" aria-current="page" class="active sidebar-link">导航栏</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/component/nav/#导航栏相关class" class="sidebar-link">导航栏相关class</a></li></ul></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" class="sidebar-link">步骤条</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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">导航栏<!----></h1> <div class="theme-vdoing-content content__default"><p>nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的,使用的时候一些属性可以参考一下 <a href="https://uniapp.dcloud.io/component/scroll-view" target="_blank" rel="noopener noreferrer">uni-app 的文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a>,类名 nav 和 cu-item 是必选值</p> <h3 id="默认"><a href="#默认" class="header-anchor">#</a> 默认</h3> <p>通过一个变量来控制当前已选中的tab</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-x</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-white nav<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-with-animation</span> <span class="token attr-name">:scroll-left</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scrollLeft<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">导航栏<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><p>nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的,使用的时候一些属性可以参考一下 <a href="https://uniapp.dcloud.io/component/scroll-view" target="_blank" rel="noopener noreferrer">uni-app 的文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a>,类名 nav 和 cu-item 是必选值</p> <h3 id="默认"><a href="#默认" class="header-anchor">#</a> 默认</h3> <p>通过一个变量来控制当前已选中的tab</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-x</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-white nav<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-with-animation</span> <span class="token attr-name">:scroll-left</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scrollLeft<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index==TabCur?'text-green cur':''<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item,index) in 10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabSelect<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data-id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
Tab{{index}}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
@@ -78,7 +82,7 @@
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -88,6 +92,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/22.8ff6b731.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/22.5c8e7d4a.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/32.956d7d1e.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/32.ce547e96.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" 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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" aria-current="page" class="active sidebar-link">微动画</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/animation/#微动画" class="sidebar-link">微动画</a></li><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/animation/#gif动画" class="sidebar-link">gif动画</a></li></ul></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">微动画<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="微动画"><a href="#微动画" class="header-anchor">#</a> 微动画</h2> <ol><li><p>加上类名 <code>animation-fade|...</code> 即可实现动画</p></li> <li><p>加上类名 <code>animation-reverse</code> 反向动画</p></li> <li><p>延迟动画加上 style <code>animation-delay: 1s</code></p></li></ol> <div class="language-css extra-class"><pre class="language-css"><code>.animation-fade <span class="token comment">/* 淡入 */</span>
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">微动画<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><h2 id="微动画"><a href="#微动画" class="header-anchor">#</a> 微动画</h2> <ol><li><p>加上类名 <code>animation-fade|...</code> 即可实现动画</p></li> <li><p>加上类名 <code>animation-reverse</code> 反向动画</p></li> <li><p>延迟动画加上 style <code>animation-delay: 1s</code></p></li></ol> <div class="language-css extra-class"><pre class="language-css"><code>.animation-fade <span class="token comment">/* 淡入 */</span>
.animation-scale-up <span class="token comment">/* 放大 */</span>
.animation-scale-down <span class="token comment">/* 缩小 */</span>
.animation-slide-top <span class="token comment">/* 从上向下滑动 */</span>
@@ -57,13 +61,13 @@
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://image.weilanwl.com/gif/loading-2.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gif-black response<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span>240upx</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/indexes/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">索引列表</div></a> <a href="/colorui-document/pages/plugin/drawer/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">全屏抽屉</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/06/18, 13:41:09</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/indexes/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">索引列表</div></a> <a href="/colorui-document/pages/plugin/drawer/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">全屏抽屉</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/colorui-document/pages/plugin/indexes/" class="prev">索引列表</a></span> <span class="next"><a href="/colorui-document/pages/plugin/drawer/">全屏抽屉</a>
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -73,6 +77,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/32.956d7d1e.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/32.ce547e96.js" defer></script>
</body>
</html>

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/33.22f2c5eb.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/33.8fc7629e.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" 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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" aria-current="page" class="active sidebar-link">全屏抽屉</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/drawer/#全屏抽屉" class="sidebar-link">全屏抽屉</a></li></ul></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">全屏抽屉<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="全屏抽屉"><a href="#全屏抽屉" class="header-anchor">#</a> 全屏抽屉</h2> <ol><li><p>全屏抽屉效果主要分为三个部分,主要有三个类名</p></li> <li><p>第一个类名 <code>DrawerPage</code>,就是第一张图总体外部包裹的类名</p></li> <li><p>第二个类名 <code>DrawerClose</code>,用来包裹打开抽屉之后关闭部分</p></li> <li><p>第三个类名 <code>DrawerWindow</code>,就是打开的抽屉部分了</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">全屏抽屉<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><h2 id="全屏抽屉"><a href="#全屏抽屉" class="header-anchor">#</a> 全屏抽屉</h2> <ol><li><p>全屏抽屉效果主要分为三个部分,主要有三个类名</p></li> <li><p>第一个类名 <code>DrawerPage</code>,就是第一张图总体外部包裹的类名</p></li> <li><p>第二个类名 <code>DrawerClose</code>,用来包裹打开抽屉之后关闭部分</p></li> <li><p>第三个类名 <code>DrawerWindow</code>,就是打开的抽屉部分了</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-gradual-blue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
// 全屏主体页面
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>DrawerPage<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>modalName=='viewModal'?'show':''<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
@@ -196,13 +200,13 @@
<span class="token property">flex</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/animation/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">微动画</div></a> <a href="/colorui-document/pages/plugin/verticalnav/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">垂直导航</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/06/18, 13:41:09</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/animation/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">微动画</div></a> <a href="/colorui-document/pages/plugin/verticalnav/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">垂直导航</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/colorui-document/pages/plugin/animation/" class="prev">微动画</a></span> <span class="next"><a href="/colorui-document/pages/plugin/verticalnav/">垂直导航</a>
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -212,6 +216,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/33.22f2c5eb.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/33.8fc7629e.js" defer></script>
</body>
</html>

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/31.e6a3e307.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/31.dd72d312.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.f43470a7.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" 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="/colorui-document/pages/plugin/indexes/" aria-current="page" class="active sidebar-link">索引列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/indexes/#使用" class="sidebar-link">使用</a></li></ul></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" class="sidebar-link">垂直导航</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==">索引列表<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h2> <ol><li><p>索引列表主要由 <code>scroll-view</code> 标签实现,类名为 <code>indexes</code>具体js逻辑请看源码</p></li> <li><p>我个人没有使用过这个,大家根据源码来看一下,我也有些地方没弄懂</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">索引列表<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><h2 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h2> <ol><li><p>索引列表主要由 <code>scroll-view</code> 标签实现,类名为 <code>indexes</code>具体js逻辑请看源码</p></li> <li><p>我个人没有使用过这个,大家根据源码来看一下,我也有些地方没弄懂</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cu-bar bg-white search fixed<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search-form round<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
@@ -222,13 +226,13 @@
<span class="token property">font-size</span><span class="token punctuation">:</span> 48upx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/component/steps/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">步骤条</div></a> <a href="/colorui-document/pages/plugin/animation/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">微动画</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/06/18, 13:41:09</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/component/steps/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">步骤条</div></a> <a href="/colorui-document/pages/plugin/animation/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">微动画</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/colorui-document/pages/component/steps/" class="prev">步骤条</a></span> <span class="next"><a href="/colorui-document/pages/plugin/animation/">微动画</a>
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -238,6 +242,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/31.e6a3e307.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/31.dd72d312.js" defer></script>
</body>
</html>

View File

@@ -10,19 +10,23 @@
<meta name="keywords" content="前端,uniapp,uni,插件市场,color,colorui,color文档,colorui文档,colorui文档">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.ef061a61.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/34.f43470a7.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.230d760b.js"><link rel="prefetch" href="/colorui-document/assets/js/11.388aba94.js"><link rel="prefetch" href="/colorui-document/assets/js/12.f801c2be.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b4d1ac6b.js"><link rel="prefetch" href="/colorui-document/assets/js/14.677f7d9f.js"><link rel="prefetch" href="/colorui-document/assets/js/15.fbc3d85a.js"><link rel="prefetch" href="/colorui-document/assets/js/16.ff717b47.js"><link rel="prefetch" href="/colorui-document/assets/js/17.31e8ea2a.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.4f034cd4.js"><link rel="prefetch" href="/colorui-document/assets/js/20.76bc794a.js"><link rel="prefetch" href="/colorui-document/assets/js/21.b5887f35.js"><link rel="prefetch" href="/colorui-document/assets/js/22.8ff6b731.js"><link rel="prefetch" href="/colorui-document/assets/js/23.c8e01869.js"><link rel="prefetch" href="/colorui-document/assets/js/24.58842b6b.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.084fffcf.js"><link rel="prefetch" href="/colorui-document/assets/js/27.cfa9855f.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.6e1e8401.js"><link rel="prefetch" href="/colorui-document/assets/js/30.8d15935b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.e6a3e307.js"><link rel="prefetch" href="/colorui-document/assets/js/32.956d7d1e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.22f2c5eb.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.60a43328.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.fe6a84ee.js"><link rel="prefetch" href="/colorui-document/assets/js/7.d2383eb9.js"><link rel="prefetch" href="/colorui-document/assets/js/8.aecfa685.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c06d2c2b.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.5ee51c1e.js" as="script"><link rel="preload" href="/colorui-document/assets/js/2.8cc7ee55.js" as="script"><link rel="preload" href="/colorui-document/assets/js/3.f24eb86a.js" as="script"><link rel="preload" href="/colorui-document/assets/js/34.f43470a7.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.be9ad194.js"><link rel="prefetch" href="/colorui-document/assets/js/12.c09da45d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.b63baa22.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.06614330.js"><link rel="prefetch" href="/colorui-document/assets/js/16.da09304c.js"><link rel="prefetch" href="/colorui-document/assets/js/17.15374680.js"><link rel="prefetch" href="/colorui-document/assets/js/18.93fef267.js"><link rel="prefetch" href="/colorui-document/assets/js/19.d6f53f4d.js"><link rel="prefetch" href="/colorui-document/assets/js/20.c48b8548.js"><link rel="prefetch" href="/colorui-document/assets/js/21.ff6aef6c.js"><link rel="prefetch" href="/colorui-document/assets/js/22.5c8e7d4a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.f734173f.js"><link rel="prefetch" href="/colorui-document/assets/js/24.b958c107.js"><link rel="prefetch" href="/colorui-document/assets/js/25.7ab9f939.js"><link rel="prefetch" href="/colorui-document/assets/js/26.185ed6b1.js"><link rel="prefetch" href="/colorui-document/assets/js/27.27f84651.js"><link rel="prefetch" href="/colorui-document/assets/js/28.8446f6a3.js"><link rel="prefetch" href="/colorui-document/assets/js/29.f2c7bc05.js"><link rel="prefetch" href="/colorui-document/assets/js/30.fdf59e6b.js"><link rel="prefetch" href="/colorui-document/assets/js/31.dd72d312.js"><link rel="prefetch" href="/colorui-document/assets/js/32.ce547e96.js"><link rel="prefetch" href="/colorui-document/assets/js/33.8fc7629e.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.800cad01.js"><link rel="prefetch" href="/colorui-document/assets/js/4.c7362dbc.js"><link rel="prefetch" href="/colorui-document/assets/js/5.ec11d5fb.js"><link rel="prefetch" href="/colorui-document/assets/js/6.b27b47f9.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.f32da2c4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.9ee08866.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" 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="/colorui-document/" class="home-link router-link-active"><img src="/colorui-document/img/colorui-logo.png" alt="ColorUI 使用文档" class="logo"> <span class="site-name can-hide">ColorUI 使用文档</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="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/colorui-document/pages/base/" class="nav-link">文档</a></div><div class="nav-item"><a href="https://zib.lovemi.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
风华迷
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/weilanwl/coloruicss" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></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="/colorui-document/pages/base/" class="sidebar-link">介绍</a></li><li><a href="/colorui-document/pages/baseStart/" class="sidebar-link">快速使用</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="/colorui-document/pages/basics/layout/" class="sidebar-link">布局</a></li><li><a href="/colorui-document/pages/basics/background/" class="sidebar-link">背景</a></li><li><a href="/colorui-document/pages/basics/text/" class="sidebar-link">文本</a></li><li><a href="/colorui-document/pages/basics/icon/" class="sidebar-link">图标</a></li><li><a href="/colorui-document/pages/basics/button/" class="sidebar-link">按钮</a></li><li><a href="/colorui-document/pages/basics/tag/" class="sidebar-link">标签</a></li><li><a href="/colorui-document/pages/basics/avatar/" class="sidebar-link">头像</a></li><li><a href="/colorui-document/pages/basics/progress/" class="sidebar-link">进度条</a></li><li><a href="/colorui-document/pages/basics/shadow/" class="sidebar-link">边框阴影</a></li><li><a href="/colorui-document/pages/basics/loading/" class="sidebar-link">加载</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><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>操作条</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/colorui-document/pages/component/bar/bottom/" class="sidebar-link">底部操作条</a></li><li><a href="/colorui-document/pages/component/bar/title/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/component/bar/top/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/component/bar/search/" class="sidebar-link">搜索&amp;按钮组&amp;输入操作条</a></li></ul></section></li><li><a href="/colorui-document/pages/component/nav/" class="sidebar-link">导航栏</a></li><li><a href="/colorui-document/pages/component/list/" class="sidebar-link">列表</a></li><li><a href="/colorui-document/pages/component/card/" class="sidebar-link">卡片</a></li><li><a href="/colorui-document/pages/component/form/" class="sidebar-link">表单</a></li><li><a href="/colorui-document/pages/component/timeline/" class="sidebar-link">时间轴</a></li><li><a href="/colorui-document/pages/component/chat/" class="sidebar-link">聊天</a></li><li><a href="/colorui-document/pages/component/swiper/" class="sidebar-link">轮播</a></li><li><a href="/colorui-document/pages/component/modal/" class="sidebar-link">模态框</a></li><li><a href="/colorui-document/pages/component/steps/" 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="/colorui-document/pages/plugin/indexes/" class="sidebar-link">索引列表</a></li><li><a href="/colorui-document/pages/plugin/animation/" class="sidebar-link">微动画</a></li><li><a href="/colorui-document/pages/plugin/drawer/" class="sidebar-link">全屏抽屉</a></li><li><a href="/colorui-document/pages/plugin/verticalnav/" aria-current="page" class="active sidebar-link">垂直导航</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/colorui-document/pages/plugin/verticalnav/#操作条" class="sidebar-link">操作条</a></li></ul></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div title="切换视图" class="views-switch button blur theme-mode-but iconfont icon-yuedu"><ul class="select-box" style="display:none;"><li class="iconfont icon-rijianmoshi active">
视图模式
</li><li class="iconfont icon-yejianmoshi">
目录模式
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">垂直导航<!----></h1> <div class="theme-vdoing-content content__default"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <ol><li><p>垂直导航主要有两个 <code>scroll-view</code> 标签实现</p></li> <li><p>分别是左侧的导航栏部分和右侧的内容部分,左侧导航栏部分使用类名 <code>VerticalBox</code>,右侧内容部分使用类名 <code>VerticalMain</code></p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
</li></ul></div> <div class="docs-box" style="display:;"><iframe src="https://miren123.gitee.io/colorui-h5/#/" frameborder="0" scrolling="auto"></iframe></div> <div class="right-menu-margin" style="display:none;"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">垂直导航<!----></h1> <div class="page-slot page-slot-top"><div><p>👀 视觉的诱惑,美丽的邂逅~</p><p>📸 全网微密合集,每一张都值得珍藏~</p><a href="https://zib.lovemi.ren" target="_blank">🎁 点击进入</a> 风华迷开启浪漫之旅~</div></div> <div class="theme-vdoing-content content__default"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <ol><li><p>垂直导航主要有两个 <code>scroll-view</code> 标签实现</p></li> <li><p>分别是左侧的导航栏部分和右侧的内容部分,左侧导航栏部分使用类名 <code>VerticalBox</code>,右侧内容部分使用类名 <code>VerticalMain</code></p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>fixed<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>cu-custom</span> <span class="token attr-name">:isBack</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bgColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-shadeTop text-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
@@ -249,12 +253,12 @@
<span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/05/28, 18:15:33</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/drawer/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">全屏抽屉</div></a> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre></div></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/06/18, 13:41:09</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/plugin/drawer/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">全屏抽屉</div></a> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/colorui-document/pages/plugin/drawer/" class="prev">全屏抽屉</a></span> <!----></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="https://gitee.com/miren123" title="Gitee" target="_blank" class="iconfont icon-gitee"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2022-2023
| Copyright © 2022-2024
<span>miren | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
@@ -264,6 +268,6 @@
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.ef061a61.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/34.f43470a7.js" defer></script>
<script src="/colorui-document/assets/js/app.5ee51c1e.js" defer></script><script src="/colorui-document/assets/js/2.8cc7ee55.js" defer></script><script src="/colorui-document/assets/js/3.f24eb86a.js" defer></script><script src="/colorui-document/assets/js/34.f43470a7.js" defer></script>
</body>
</html>