molong/colorui-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mjz update

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vuepress/dist/pages/base/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/baseStart/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/avatar/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/background/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/button/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/icon/index.html
Vendored
+10 -6
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>
docs/.vuepress/dist/pages/basics/layout/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/loading/index.html
Vendored
+10 -6
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>
docs/.vuepress/dist/pages/basics/progress/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/shadow/index.html
Vendored
+10 -6
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>
docs/.vuepress/dist/pages/basics/tag/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/text/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/bar/bottom/index.html
Vendored
+10 -6
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>
docs/.vuepress/dist/pages/component/bar/search/index.html
Vendored
+10 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/bar/title/index.html
Vendored
+10 -6
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>
docs/.vuepress/dist/pages/component/bar/top/index.html
Vendored
+10 -6
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>
docs/.vuepress/dist/pages/component/card/index.html
Vendored
+11 -7
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/chat/index.html
Vendored
+11 -7
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/form/index.html
Vendored
+11 -7
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/list/index.html
Vendored
+11 -7
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/modal/index.html
Vendored
+11 -7
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/nav/index.html
Vendored
+10 -6
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>
docs/.vuepress/dist/pages/component/steps/index.html
Vendored
+11 -7
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/swiper/index.html
Vendored
+11 -7
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/timeline/index.html
Vendored
+11 -7
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/plugin/animation/index.html
Vendored
+11 -7
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>
docs/.vuepress/dist/pages/plugin/drawer/index.html
Vendored
+11 -7
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>
docs/.vuepress/dist/pages/plugin/indexes/index.html
Vendored
+11 -7
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>
docs/.vuepress/dist/pages/plugin/verticalnav/index.html
Vendored
+11 -7
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>