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
2023-06-13 07:46:55 +08:00
parent 8321ac99a9
commit a2653e6d5a
78 changed files with 1119 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vuepress/dist/pages/43ebee/index.html
Vendored
-39
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/733677/index.html
Vendored
-39
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/base/index.html
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/baseStart/index.html
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/avatar/index.html
Vendored
+5 -5
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/background/index.html
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/button/index.html
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/icon/index.html
Vendored
+4 -4
View File
@@ -10,7 +10,7 @@
<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.733581c7.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.aa5f2866.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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.8f891ef9.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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">
<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,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>点击右侧图标页面，对应的图标，即可复制类名：<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,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">
<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>
@@ -43,6 +43,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.733581c7.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.aa5f2866.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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.8f891ef9.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/basics/layout/index.html
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/loading/index.html
Vendored
+7 -7
View File
@@ -10,7 +10,7 @@
<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.733581c7.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.5b31e114.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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.c9592bc4.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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">
<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,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"><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 只有加载图标没有文字
@@ -38,12 +38,12 @@
<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>block</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 punctuation">&gt;</span></span>
</code></pre></div><h2 id="弹窗加载"><a href="#弹窗加载" class="header-anchor">#</a> 弹窗加载</h2> <p>父容器加上 class <code>cu-load load-modal</code>，且用变量控制弹窗的显示与隐藏，父容器里面的内容，既是弹窗中间的内容</p> <p>可以在弹窗里面放文字、带颜色的图标、静态图片等</p> <blockquote><p>演示代码</p></blockquote> <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>cu-load load-modal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loadModal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="弹窗加载"><a href="#弹窗加载" class="header-anchor">#</a> 弹窗加载</h2> <p>父容器加上 class 类名 <code>cu-load load-modal</code>，且用变量控制弹窗的显示与隐藏，父容器里面的内容，既是弹窗中间的内容</p> <p>可以在弹窗里面放文字、带颜色的图标、静态图片等</p> <blockquote><p>演示代码</p></blockquote> <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>cu-load load-modal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loadModal<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &lt;view class=&quot;cuIcon-emojifill text-orange&quot;&gt;&lt;/view&gt; --&gt;</span>
<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>/static/logo.png<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 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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gray-text<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 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><h2 id="进度条加载"><a href="#进度条加载" class="header-anchor">#</a> 进度条加载</h2> <p>父容器加上 class <code>load-progress show|hide</code>，动态变量控制 class <code>show 和 hide</code>，动态 style 设置距离顶部的高度 <code>top: 高度px</code></p> <p>容器里第一个就是加载的进度条，需要加上 class <code>load-progress-bar bg-green|...</code>，通过动态 style，控制进度</p> <p>容器里第二个就是右侧的加载圆圈，需要加上 class <code>load-progress-spinner text-green|...</code></p> <blockquote><p>演示代码</p></blockquote> <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>cu-bar bg-white margin-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="进度条加载"><a href="#进度条加载" class="header-anchor">#</a> 进度条加载</h2> <p>父容器加上 class 类名 <code>load-progress show|hide</code>，动态变量控制 class <code>show 和 hide</code>，动态 style 设置距离顶部的高度 <code>top: 高度px</code></p> <p>容器里第一个就是加载的进度条，需要加上 class <code>load-progress-bar bg-green|...</code>，通过动态 style，控制进度</p> <p>容器里第二个就是右侧的加载圆圈，需要加上 class <code>load-progress-spinner text-green|...</code></p> <blockquote><p>演示代码</p></blockquote> <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>cu-bar bg-white margin-top<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>action<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>text</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>cuIcon-title text-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>text</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>
@@ -80,7 +80,7 @@
<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>script</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/06/01, 23:30:40</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/basics/shadow/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">边框阴影</div></a> <a href="/colorui-document/pages/component/bar/bottom/" 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/07, 23:32:56</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/basics/shadow/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">边框阴影</div></a> <a href="/colorui-document/pages/component/bar/bottom/" 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/basics/shadow/" class="prev">边框阴影</a></span> <span class="next"><a href="/colorui-document/pages/component/bar/bottom/">底部操作条</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>
@@ -96,6 +96,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.733581c7.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.5b31e114.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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.c9592bc4.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/basics/progress/index.html
Vendored
+7 -7
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/shadow/index.html
Vendored
+6 -6
View File
@@ -10,7 +10,7 @@
<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.733581c7.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.d2825fa1.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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.7a82715e.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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">
<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,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> <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,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> <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
@@ -32,7 +32,7 @@
<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>padding solid-right<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 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>padding solid-bottom<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 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>padding solid-left<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 punctuation">&gt;</span></span>
</code></pre></div><h2 id="阴影"><a href="#阴影" class="header-anchor">#</a> 阴影</h2> <p>在需要加阴影的元素加上 class <code>shadow</code> 即可</p> <blockquote><p>css 代码</p></blockquote> <div class="language-css extra-class"><pre class="language-css"><code>.shadow 默认阴影
</code></pre></div><h2 id="阴影"><a href="#阴影" class="header-anchor">#</a> 阴影</h2> <p>在需要加阴影的元素加上 class 类名 <code>shadow</code> 即可</p> <blockquote><p>css 代码</p></blockquote> <div class="language-css extra-class"><pre class="language-css"><code>.shadow 默认阴影
.shadow bg-blue|... 根据背景颜色而改变的阴影
.shadow shadow-lg 长阴影
.shadow-warp 翘边阴影
@@ -44,7 +44,7 @@
<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>padding-xl radius shadow-blur bg-red bg-img<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">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span></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>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>
<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/06/01, 23:30:40</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/basics/progress/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">进度条</div></a> <a href="/colorui-document/pages/basics/loading/" 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/07, 23:32:56</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/basics/progress/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">进度条</div></a> <a href="/colorui-document/pages/basics/loading/" 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/basics/progress/" class="prev">进度条</a></span> <span class="next"><a href="/colorui-document/pages/basics/loading/">加载</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>
@@ -60,6 +60,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.733581c7.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.d2825fa1.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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.7a82715e.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/basics/tag/index.html
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/basics/text/index.html
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/bar/bottom/index.html
Vendored
+188 -6
View File
@@ -10,7 +10,7 @@
<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.733581c7.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.d3188366.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,14 +18,196 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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">
<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,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"><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></div></div> <div class="page-edit"><!----> <!----> <!----></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/basics/loading/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">加载</div></a> <a href="/colorui-document/pages/43ebee/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">标题操作条</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</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>我们可以使用 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>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>basics</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>PageCur=='basics'<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>basics</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>components</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>PageCur=='component'<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>components</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>plugin</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>PageCur=='plugin'<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>plugin</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 底部操作条 --&gt;</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 tabbar bg-white shadow foot<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>action<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>NavChange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-cur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>basics<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">'</span>cuIcon-cu-image<span class="token punctuation">'</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 attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'<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>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 attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>PageCur=='basics'?'text-green':'text-gray'<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 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>action<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>NavChange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-cur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>component<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">'</span>cuIcon-cu-image<span class="token punctuation">'</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 attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'<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>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 attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>PageCur=='component'?'text-green':'text-gray'<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 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>action<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>NavChange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-cur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>plugin<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">'</span>cuIcon-cu-image<span class="token punctuation">'</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 attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'<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>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 attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>PageCur=='plugin'?'text-green':'text-gray'<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 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>
<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>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">PageCur</span><span class="token operator">:</span> <span class="token string">'basics'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">NavChange</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 keyword">this</span><span class="token punctuation">.</span>PageCur <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>cur
<span class="token punctuation">}</span>
<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>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></details> <h3 id="tab-操作条实现"><a href="#tab-操作条实现" class="header-anchor">#</a> tab 操作条实现</h3> <ol><li><p>操作条的父容器需求加上 class 类名 <code>cu-bar 和 tabbar</code>，同时可以加上 <code>bg-white|...</code> <code>shadow|...</code> 等样式来优化操作条。</p></li> <li><p><strong>固定底部</strong>：需要操作条固定在底部加上 class 类名 <code>foot</code> 即可。</p></li> <li><p>每一个 tab 的元素需要加上 class 类名 <code>action</code>，该 tab 里面则放置对应的图标和文字。</p></li> <li><p>展示不同的页面，以及 tab 需要用一个变量 <code>PageCur</code> 来进行控制。（官方示例 tab 图标是采用的图片，自定义也可以用图标）。</p></li> <li><p><strong>数字标签</strong>：对应的 tab 元素里可以加上 数字标签 <code>&lt;view class=&quot;cu-tag badge&quot;&gt;99+&lt;/view&gt;</code>，<strong>红色圆点</strong>：数字标签里没有内容。</p></li> <li><p><strong>中间的添加按钮</strong>：<code>action</code> 同级加上 class 类名 <code>add-action</code>，其里面的图标换成 <code>button</code> 即可。</p></li></ol> <blockquote><p><strong>演示代码（可直接复制使用）</strong></p></blockquote> <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>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>homePage</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>PageCur=='home'<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>homePage</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 底部操作条：背景颜色、对应图标、字体颜色，可自定义 --&gt;</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 tabbar bg-white foot<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 首页 --&gt;</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>action<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>PageCur=='home'?'text-green':'text-gray'<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">data-cur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>NavChange<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>cuIcon-homefill<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 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>
<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>action<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>PageCur=='similar'?'text-green':'text-gray'<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">data-cur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>similar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>NavChange<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>cuIcon-similar<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 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>
<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>action add-action<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>PageCur=='sub'?'text-green':'text-gray'<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">data-cur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sub<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>NavChange<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>button</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-btn cuIcon-add bg-green shadow<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>button</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>
<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>action<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>PageCur=='cart'?'text-green':'text-gray'<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">data-cur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cart<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>NavChange<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>cuIcon-cart<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 数字角标 --&gt;</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-tag badge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>99<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>
购物车
<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>
<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>action<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>PageCur=='mine'?'text-green':'text-gray'<span class="token punctuation">&quot;</span></span>
<span class="token attr-name">data-cur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mine<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>NavChange<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>cuIcon-my<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 红色圆点（数字角标） --&gt;</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-tag badge<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 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>
<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>
<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>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">PageCur</span><span class="token operator">:</span> <span class="token string">'home'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">NavChange</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 keyword">this</span><span class="token punctuation">.</span>PageCur <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>cur
<span class="token punctuation">}</span>
<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>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="购物车底部操作条"><a href="#购物车底部操作条" class="header-anchor">#</a> 购物车底部操作条</h3> <ol><li><p>操作条的父容器需求加上 class 类名 <code>cu-bar 和 tabbar</code>，还有一个 <code>shop</code>，同时可以加上 <code>bg-white|...</code> <code>shadow|...</code> 等样式来优化操作条。</p></li> <li><p><strong>固定底部</strong>：需要操作条固定在底部加上 class 类名 <code>foot</code> 即可。</p></li> <li><p>每一个需要操作的元素需要加上 class 类名 <code>action</code>，该 <code>action</code> 元素里面则放置对应的图标和文字以及按钮。</p></li> <li><p><strong>数字标签</strong>：对应的 <code>action</code> 元素里可以加上 数字标签 <code>&lt;view class=&quot;cu-tag badge&quot;&gt;99+&lt;/view&gt;</code>，<strong>红色圆点</strong>：数字标签里没有内容。</p></li> <li><p><strong>立即订购</strong>：和 <code>action</code> 元素同级的 view 加上 class 类名 <code>submit bg-red|...</code>，该元素会默认占据剩余的宽度，从右侧预览图知道，可以是三个 <code>action</code> 元素加上一个 <code>submit</code> 元素，也可以是两个 <code>action</code> 元素加上两个 <code>submit</code> 元素。</p></li> <li><p><strong>立即订购的第二种样式</strong>：上面一种是默认撑宽的元素，第二种则是再该元素里放置一个自定义的按钮，实现为 <code>action</code> 同级元素加上 class 类名 <code>btn-group</code>，相当于把第五条 <code>submit</code> 换成 <code>btn-group</code>；然后 <code>btn-group</code> 里再放置自定义按钮。</p></li></ol> <blockquote><p><strong>演示代码（可直接复制使用）</strong></p></blockquote> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 右侧预览图，第一个购物车示例 --&gt;</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 tabbar border shop foot<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>button</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>action<span class="token punctuation">&quot;</span></span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<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>cuIcon-service text-green<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-tag badge<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 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>button</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>action text-orange<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>cuIcon-favorfill<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 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>action<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>cuIcon-cart<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-tag badge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>99<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>
购物车
<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>bg-red submit<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 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>
<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 tabbar border shop foot<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>button</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>action<span class="token punctuation">&quot;</span></span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<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>cuIcon-service text-green<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-tag badge<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 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>button</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>action<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>cuIcon-cart<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-tag badge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>99<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>
购物车
<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>bg-orange submit<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 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-red submit<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 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>
<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 tabbar border shop foot<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>button</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>action<span class="token punctuation">&quot;</span></span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<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>cuIcon-service text-green<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-tag badge<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 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>button</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>action<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> cuIcon-shop<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 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>action<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>cuIcon-cart<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-tag badge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>99<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>
购物车
<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>btn-group<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>button</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-btn bg-red round shadow-blur<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>button</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>
<span class="token comment">&lt;!-- 右侧预览图，第四个购物车示例 --&gt;</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 tabbar border shop foot<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>button</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>action<span class="token punctuation">&quot;</span></span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>contact<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>cuIcon-service text-green<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-tag badge<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 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>button</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>action<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>cuIcon-cart<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-tag badge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>99<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>
购物车
<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>btn-group<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>button</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-btn bg-orange round shadow-blur<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>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</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-btn bg-red round shadow-blur<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>button</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/06/07, 23:32:56</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/basics/loading/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">加载</div></a> <a href="/colorui-document/pages/component/bar/title/" 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/basics/loading/" class="prev">加载</a></span> <span class="next"><a href="/colorui-document/pages/43ebee/">标题操作条</a>→
<a href="/colorui-document/pages/basics/loading/" class="prev">加载</a></span> <span class="next"><a href="/colorui-document/pages/component/bar/title/">标题操作条</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>
@@ -39,6 +221,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.733581c7.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.d3188366.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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>
</body>
</html>
docs/.vuepress/dist/pages/component/bar/search/index.html
Vendored
+154
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/bar/title/index.html
Vendored
+95
View File
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>标题操作条 | ColorUI 使用文档</title>
<meta name="generator" content="VuePress 1.9.2">
<link rel="icon" href="/colorui-document/img/colorui-logo.png">
<meta name="description" content="ColorUI 使用文档">
<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.3af2dee2.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.5f011825.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.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">
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">
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,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"><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>
<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>action border-title<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>text</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>text-xl text-bold<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>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</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-grey<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">width</span><span class="token punctuation">:</span>2rem</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>text</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>
<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>
<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>action border-title<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>text</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>text-xl text-bold text-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>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</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 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">width</span><span class="token punctuation">:</span>3rem</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>text</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>
// 第三、四这两种和上面的原理相同，添加的是 sub-title 类名，底部可以设置文字
<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>
<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>action sub-title<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>text</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>text-xl text-bold text-green<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>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</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-green<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>text</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>
<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>
<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>action sub-title<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>text</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>text-xl text-bold text-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>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</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>text-ABC text-blue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>about<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</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>
// 第五种主要是类名 self-end，设置了最后一行字的位置，就是 css 属性 align-self: flex-end （详情可以去看看 flex 布局）
<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>
<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>action<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>text</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>text-xl text-bold<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>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</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>text-Abc text-gray self-end margin-left-sm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>about<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</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>
// 最后这两种就是简单的添加了两个图标，没什么好说的
<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>
<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>action<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>text</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>cuIcon-title text-green<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>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</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>text-xl text-bold<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>text</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>
<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>
<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>action<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>text</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>cuIcon-titles text-green<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>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</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>text-xl text-bold<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>text</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>
<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/06/07, 23:32:56</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/component/bar/bottom/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">底部操作条</div></a> <a href="/colorui-document/pages/component/bar/top/" 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/bar/bottom/" class="prev">底部操作条</a></span> <span class="next"><a href="/colorui-document/pages/component/bar/top/">顶部操作条</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
<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">
浅色模式
</li><li class="iconfont icon-yejianmoshi">
深色模式
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.3af2dee2.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.5f011825.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/bar/top/index.html
Vendored
+101
View File
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>顶部操作条 | ColorUI 使用文档</title>
<meta name="generator" content="VuePress 1.9.2">
<link rel="icon" href="/colorui-document/img/colorui-logo.png">
<meta name="description" content="ColorUI 使用文档">
<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.3af2dee2.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.b480e9bf.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.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">
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">
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,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> <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>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>StatusBar <span class="token operator">=</span> e<span class="token punctuation">.</span>statusBarHeight<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>platform <span class="token operator">==</span> <span class="token string">'android'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>CustomBar <span class="token operator">=</span> e<span class="token punctuation">.</span>statusBarHeight <span class="token operator">+</span> <span class="token number">50</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>CustomBar <span class="token operator">=</span> e<span class="token punctuation">.</span>statusBarHeight <span class="token operator">+</span> <span class="token number">45</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// #endif</span>
<span class="token comment">// #ifdef MP-WEIXIN</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>StatusBar <span class="token operator">=</span> e<span class="token punctuation">.</span>statusBarHeight<span class="token punctuation">;</span>
<span class="token keyword">let</span> custom <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getMenuButtonBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>Custom <span class="token operator">=</span> custom<span class="token punctuation">;</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>CustomBar <span class="token operator">=</span> custom<span class="token punctuation">.</span>bottom <span class="token operator">+</span> custom<span class="token punctuation">.</span>top <span class="token operator">-</span> e<span class="token punctuation">.</span>statusBarHeight<span class="token punctuation">;</span>
<span class="token comment">// #endif </span>
<span class="token comment">// #ifdef MP-ALIPAY</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>StatusBar <span class="token operator">=</span> e<span class="token punctuation">.</span>statusBarHeight<span class="token punctuation">;</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>CustomBar <span class="token operator">=</span> e<span class="token punctuation">.</span>statusBarHeight <span class="token operator">+</span> e<span class="token punctuation">.</span>titleBarHeight<span class="token punctuation">;</span>
<span class="token comment">// #endif</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div></li> <li><p>需要设置导航栏的页面配置 <code>pages.json</code> 配置取消系统导航栏，如下配置：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string-property property">&quot;globalStyle&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">&quot;navigationStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;custom&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div></li> <li><p>复制 <code>color-ui</code> 代码结构可以直接使用，注意全局变量的获取。</p></li> <li><p>使用封装，在 main.js 引入 cu-custom 组件，cu-custom 组件里可以根据自己的需求来自定义。</p> <div class="language-vue extra-class"><pre class="language-vue"><code>import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
</code></pre></div></li> <li><p>对应的页面 index.vue 可以直接调用即可。</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>cu-custom</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-gradual-blue<span class="token punctuation">&quot;</span></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 punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>backText<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>block</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content<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>block</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 punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>以下是对应属性参数，自定义也可基于官方封装好的。</p> <table><thead><tr><th>参数</th> <th>作用</th> <th>类型</th> <th>默认值</th></tr></thead> <tbody><tr><td>bgColor</td> <td>背景颜色类名</td> <td>String</td> <td>''</td></tr> <tr><td>isBack</td> <td>是否开启返回</td> <td>Boolean</td> <td>false</td></tr> <tr><td>isCustom</td> <td>是否开启左侧胶囊</td> <td>Boolean</td> <td>false</td></tr> <tr><td>bgImage</td> <td>背景图片路径</td> <td>String</td> <td>''</td></tr></tbody></table> <table><thead><tr><th>slot块</th> <th>作用</th></tr></thead> <tbody><tr><td>backText</td> <td>返回时的文字</td></tr> <tr><td>content</td> <td>中间区域</td></tr> <tr><td>right</td> <td>右侧区域(小程序端可使用范围很窄！)</td></tr></tbody></table></li></ol> <h2 id="使用原生小程序开发"><a href="#使用原生小程序开发" class="header-anchor">#</a> 使用原生小程序开发</h2> <h3 id="从现有项目开始"><a href="#从现有项目开始" class="header-anchor">#</a> 从现有项目开始</h3> <p>下载源码解压获得<code>/demo</code>，复制目录下的 <code>/colorui</code> 文件夹到你的项目根目录</p> <div class="language- extra-class"><pre class="language-text"><code>App.wxss` 引入关键Css `main.wxss` `icon.wxss
@import &quot;colorui/main.wxss&quot;;
@import &quot;colorui/icon.wxss&quot;;
@import &quot;app.css&quot;; /* 你的项目css */
....
</code></pre></div><h3 id="从新项目开始"><a href="#从新项目开始" class="header-anchor">#</a> 从新项目开始</h3> <p>下载源码解压获得<code>/template</code>，复制<code>/template</code>并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了</p> <h3 id="使用自定义导航栏"><a href="#使用自定义导航栏" class="header-anchor">#</a> 使用自定义导航栏</h3> <p>导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。</p> <p><code>App.js</code> 获得系统信息</p> <div class="language- extra-class"><pre class="language-text"><code>onLaunch: function() {
wx.getSystemInfo({
success: e =&gt; {
this.globalData.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
}
})
},
</code></pre></div><p><code>App.json</code> 配置取消系统导航栏,并全局引入组件</p> <div class="language- extra-class"><pre class="language-text"><code>&quot;window&quot;: {
&quot;navigationStyle&quot;: &quot;custom&quot;
},
&quot;usingComponents&quot;: {
&quot;cu-custom&quot;:&quot;/colorui/components/cu-custom&quot;
}
</code></pre></div><p><code>page.wxml</code> 页面可以直接调用了</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;cu-custom bgColor=&quot;bg-gradual-pink&quot; isBack=&quot;{{true}}&quot;&gt;
&lt;view slot=&quot;backText&quot;&gt;返回&lt;/view&gt;
&lt;view slot=&quot;content&quot;&gt;导航栏&lt;/view&gt;
&lt;/cu-custom&gt;
</code></pre></div><table><thead><tr><th>参数</th> <th>作用</th> <th>类型</th> <th>默认值</th></tr></thead> <tbody><tr><td>bgColor</td> <td>背景颜色类名</td> <td>String</td> <td>''</td></tr> <tr><td>isBack</td> <td>是否开启返回</td> <td>Boolean</td> <td>false</td></tr> <tr><td>isCustom</td> <td>是否开启左侧胶囊</td> <td>Boolean</td> <td>false</td></tr> <tr><td>bgImage</td> <td>背景图片路径</td> <td>String</td> <td>''</td></tr></tbody></table> <table><thead><tr><th>slot块</th> <th>作用</th></tr></thead> <tbody><tr><td>backText</td> <td>返回时的文字</td></tr> <tr><td>content</td> <td>中间区域</td></tr> <tr><td>right</td> <td>右侧区域(小程序端可使用范围很窄！)</td></tr></tbody></table></div></div> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/06/07, 23:32:56</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/component/bar/title/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">标题操作条</div></a> <a href="/colorui-document/pages/component/bar/search/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">搜索&amp;按钮组&amp;输入操作条</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/colorui-document/pages/component/bar/title/" class="prev">标题操作条</a></span> <span class="next"><a href="/colorui-document/pages/component/bar/search/">搜索&amp;按钮组&amp;输入操作条</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
<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">
浅色模式
</li><li class="iconfont icon-yejianmoshi">
深色模式
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
<script src="/colorui-document/assets/js/app.3af2dee2.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.b480e9bf.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/card/index.html
Vendored
+100 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/chat/index.html
Vendored
+4 -4
View File
@@ -10,7 +10,7 @@
<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.733581c7.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/27.31520831.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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/27.31520831.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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/" 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/chat/#操作条" class="sidebar-link">操作条</a></li></ul></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">
<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/" 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/" 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/chat/#操作条" class="sidebar-link">操作条</a></li></ul></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> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/component/chat</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></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/timeline/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">时间轴</div></a> <a href="/colorui-document/pages/component/swiper/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">轮播</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</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> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/component/chat</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></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/timeline/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">时间轴</div></a> <a href="/colorui-document/pages/component/swiper/" 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/timeline/" class="prev">时间轴</a></span> <span class="next"><a href="/colorui-document/pages/component/swiper/">轮播</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>
@@ -38,6 +38,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.733581c7.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/27.31520831.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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/27.31520831.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/form/index.html
Vendored
+3 -3
View File
@@ -10,7 +10,7 @@
<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.733581c7.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/25.1ed8cac5.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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/25.96bbab41.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,7 +18,7 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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/" 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/form/#操作条" class="sidebar-link">操作条</a></li></ul></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">
<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/" 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/" 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/form/#操作条" class="sidebar-link">操作条</a></li></ul></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">
目录模式
@@ -38,6 +38,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.733581c7.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/25.1ed8cac5.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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/25.96bbab41.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/list/index.html
Vendored
+280 -4
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/component/modal/index.html
Vendored
+4 -4
View File
@@ -10,7 +10,7 @@
<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.733581c7.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/29.b0521c11.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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/29.b0521c11.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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/" 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/modal/#操作条" class="sidebar-link">操作条</a></li></ul></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">
<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/" 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/" 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/modal/#操作条" class="sidebar-link">操作条</a></li></ul></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"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/component/modal</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></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/swiper/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">轮播</div></a> <a href="/colorui-document/pages/component/steps/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">步骤条</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</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> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/component/modal</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></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/swiper/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">轮播</div></a> <a href="/colorui-document/pages/component/steps/" 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/swiper/" class="prev">轮播</a></span> <span class="next"><a href="/colorui-document/pages/component/steps/">步骤条</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>
@@ -38,6 +38,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.733581c7.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/29.b0521c11.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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/29.b0521c11.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/nav/index.html
Vendored
+55 -5
View File
@@ -10,7 +10,7 @@
<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.733581c7.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.3c0d8868.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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.2bf7c109.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,13 +18,63 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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="sidebar-link">操作条</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">
<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"></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"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/component/nav</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></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/f2dfd8/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">搜索操作条</div></a> <a href="/colorui-document/pages/component/list/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">列表</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</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>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>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">TabCur</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token literal-property property">scrollLeft</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function">tabSelect</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 keyword">this</span><span class="token punctuation">.</span>TabCur <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>scrollLeft <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>id <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">60</span>
<span class="token punctuation">}</span>
<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>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="居中"><a href="#居中" class="header-anchor">#</a> 居中</h3> <p>父容器加上 class 类名 <code>text-center</code></p> <div class="language-html extra-class"><pre class="language-html"><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 text-center<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-blue 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 3<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>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="平分"><a href="#平分" class="header-anchor">#</a> 平分</h3> <p>设置 flex 和 flex-sub 实现弹性布局，flex-sub 就是 css 属性 flex:1，将弹性盒子内子元素按照 1:1:1:1 来分配空间</p> <div class="language-html extra-class"><pre class="language-html"><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 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>flex text-center<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 flex-sub<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-orange 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 4<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>
<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>scroll-view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="背景"><a href="#背景" class="header-anchor">#</a> 背景</h3> <p>加上 class 类名 <code>bg-red|...</code>，参考背景</p> <div class="language-html extra-class"><pre class="language-html"><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-red nav text-center<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-white 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 3<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>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="图标"><a href="#图标" class="header-anchor">#</a> 图标</h3> <p>里面 tab 文字前加上图标 <code>cuIcon-</code>，参照图标</p> <div class="language-html extra-class"><pre class="language-html"><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-green nav text-center<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>0==TabCur?'text-white cur':''<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>0<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>text</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>cuIcon-camerafill<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>text</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-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>1==TabCur?'text-white cur':''<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>1<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>text</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>cuIcon-upstagefill<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>text</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-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>2==TabCur?'text-white cur':''<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>2<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>text</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>cuIcon-clothesfill<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>text</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>scroll-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/06/07, 23:32:56</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/colorui-document/pages/component/bar/search/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">搜索&amp;按钮组&amp;输入操作条</div></a> <a href="/colorui-document/pages/component/list/" 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/f2dfd8/" class="prev">搜索操作条</a></span> <span class="next"><a href="/colorui-document/pages/component/list/">列表</a>→
<a href="/colorui-document/pages/component/bar/search/" class="prev">搜索&amp;按钮组&amp;输入操作条</a></span> <span class="next"><a href="/colorui-document/pages/component/list/">列表</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>
@@ -38,6 +88,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.733581c7.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.3c0d8868.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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.2bf7c109.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/steps/index.html
Vendored
+3 -3
View File
@@ -10,7 +10,7 @@
<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.733581c7.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/30.6b55ac5f.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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/30.2daabb12.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,7 +18,7 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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/" 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/steps/#操作条" 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><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">
<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/" 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/" 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/steps/#操作条" 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><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">
目录模式
@@ -38,6 +38,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.733581c7.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/30.6b55ac5f.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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/30.2daabb12.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/swiper/index.html
Vendored
+4 -4
View File
@@ -10,7 +10,7 @@
<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.733581c7.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/28.e9603cb0.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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/28.2a118694.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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/" 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/swiper/#操作条" class="sidebar-link">操作条</a></li></ul></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">
<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/" 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/" 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/swiper/#操作条" class="sidebar-link">操作条</a></li></ul></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"><h2 id="操作条"><a href="#操作条" class="header-anchor">#</a> 操作条</h2> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/component/swiper</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></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/chat/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">聊天</div></a> <a href="/colorui-document/pages/component/modal/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">模态框</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
</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> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/component/swiper</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></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/chat/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">聊天</div></a> <a href="/colorui-document/pages/component/modal/" 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/chat/" class="prev">聊天</a></span> <span class="next"><a href="/colorui-document/pages/component/modal/">模态框</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>
@@ -38,6 +38,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.733581c7.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/28.e9603cb0.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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/28.2a118694.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/component/timeline/index.html
Vendored
+3 -3
View File
@@ -10,7 +10,7 @@
<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.733581c7.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/26.eea2fb13.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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/26.24fadaff.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,7 +18,7 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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/" 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/timeline/#操作条" class="sidebar-link">操作条</a></li></ul></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">
<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/" 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/" 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/timeline/#操作条" class="sidebar-link">操作条</a></li></ul></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">
目录模式
@@ -38,6 +38,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.733581c7.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/26.eea2fb13.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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/26.24fadaff.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/f2dfd8/index.html
Vendored
-39
View File
File diff suppressed because one or more lines are too long
docs/.vuepress/dist/pages/plugin/animation/index.html
Vendored
+3 -3
View File
@@ -10,7 +10,7 @@
<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.733581c7.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.d3f0e1fc.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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.e86ce51e.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,7 +18,7 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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></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">
<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></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">
目录模式
@@ -38,6 +38,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.733581c7.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.d3f0e1fc.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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.e86ce51e.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/plugin/drawer/index.html
Vendored
+3 -3
View File
@@ -10,7 +10,7 @@
<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.733581c7.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.901c0e5c.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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.e61116b9.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,7 +18,7 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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">
<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">
目录模式
@@ -38,6 +38,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.733581c7.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.901c0e5c.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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.e61116b9.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/plugin/indexes/index.html
Vendored
+3 -3
View File
@@ -10,7 +10,7 @@
<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.733581c7.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.6798c53e.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/34.588cf7ee.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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.c9d2ae6b.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/34.664f5502.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,7 +18,7 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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">
<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">
目录模式
@@ -38,6 +38,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.733581c7.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.6798c53e.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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.c9d2ae6b.js" defer></script>
</body>
</html>
docs/.vuepress/dist/pages/plugin/verticalnav/index.html
Vendored
+4 -4
View File
@@ -10,7 +10,7 @@
<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.733581c7.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.588cf7ee.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.9bc4e830.js"><link rel="prefetch" href="/colorui-document/assets/js/11.aa5f2866.js"><link rel="prefetch" href="/colorui-document/assets/js/12.b6dfb3ff.js"><link rel="prefetch" href="/colorui-document/assets/js/13.fa82888f.js"><link rel="prefetch" href="/colorui-document/assets/js/14.de01b888.js"><link rel="prefetch" href="/colorui-document/assets/js/15.f4a625ba.js"><link rel="prefetch" href="/colorui-document/assets/js/16.d2825fa1.js"><link rel="prefetch" href="/colorui-document/assets/js/17.5b31e114.js"><link rel="prefetch" href="/colorui-document/assets/js/18.d3188366.js"><link rel="prefetch" href="/colorui-document/assets/js/19.908b9cea.js"><link rel="prefetch" href="/colorui-document/assets/js/20.bd3c0c15.js"><link rel="prefetch" href="/colorui-document/assets/js/21.44ec1dc7.js"><link rel="prefetch" href="/colorui-document/assets/js/22.3c0d8868.js"><link rel="prefetch" href="/colorui-document/assets/js/23.a105e75e.js"><link rel="prefetch" href="/colorui-document/assets/js/24.4420ea87.js"><link rel="prefetch" href="/colorui-document/assets/js/25.1ed8cac5.js"><link rel="prefetch" href="/colorui-document/assets/js/26.eea2fb13.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.e9603cb0.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.6b55ac5f.js"><link rel="prefetch" href="/colorui-document/assets/js/31.6798c53e.js"><link rel="prefetch" href="/colorui-document/assets/js/32.d3f0e1fc.js"><link rel="prefetch" href="/colorui-document/assets/js/33.901c0e5c.js"><link rel="prefetch" href="/colorui-document/assets/js/35.f9cf5c30.js"><link rel="prefetch" href="/colorui-document/assets/js/36.124c98a3.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.5d3b8b43.js"><link rel="prefetch" href="/colorui-document/assets/js/7.cba8e246.js"><link rel="prefetch" href="/colorui-document/assets/js/8.91b4f711.js"><link rel="prefetch" href="/colorui-document/assets/js/9.a1a5ef58.js">
<link rel="preload" href="/colorui-document/assets/css/0.styles.9278fe0a.css" as="style"><link rel="preload" href="/colorui-document/assets/js/app.3af2dee2.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.664f5502.js" as="script"><link rel="prefetch" href="/colorui-document/assets/js/10.2c6b507c.js"><link rel="prefetch" href="/colorui-document/assets/js/11.8f891ef9.js"><link rel="prefetch" href="/colorui-document/assets/js/12.5a61345d.js"><link rel="prefetch" href="/colorui-document/assets/js/13.52dfb2d7.js"><link rel="prefetch" href="/colorui-document/assets/js/14.ee6b7794.js"><link rel="prefetch" href="/colorui-document/assets/js/15.2c1914c5.js"><link rel="prefetch" href="/colorui-document/assets/js/16.7a82715e.js"><link rel="prefetch" href="/colorui-document/assets/js/17.c9592bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/18.78def283.js"><link rel="prefetch" href="/colorui-document/assets/js/19.5f011825.js"><link rel="prefetch" href="/colorui-document/assets/js/20.b480e9bf.js"><link rel="prefetch" href="/colorui-document/assets/js/21.1aa9948a.js"><link rel="prefetch" href="/colorui-document/assets/js/22.2bf7c109.js"><link rel="prefetch" href="/colorui-document/assets/js/23.0e21233a.js"><link rel="prefetch" href="/colorui-document/assets/js/24.7b300973.js"><link rel="prefetch" href="/colorui-document/assets/js/25.96bbab41.js"><link rel="prefetch" href="/colorui-document/assets/js/26.24fadaff.js"><link rel="prefetch" href="/colorui-document/assets/js/27.31520831.js"><link rel="prefetch" href="/colorui-document/assets/js/28.2a118694.js"><link rel="prefetch" href="/colorui-document/assets/js/29.b0521c11.js"><link rel="prefetch" href="/colorui-document/assets/js/30.2daabb12.js"><link rel="prefetch" href="/colorui-document/assets/js/31.c9d2ae6b.js"><link rel="prefetch" href="/colorui-document/assets/js/32.e86ce51e.js"><link rel="prefetch" href="/colorui-document/assets/js/33.e61116b9.js"><link rel="prefetch" href="/colorui-document/assets/js/35.a3f9ac6f.js"><link rel="prefetch" href="/colorui-document/assets/js/36.41463aa2.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.79dc241c.js"><link rel="prefetch" href="/colorui-document/assets/js/7.14247048.js"><link rel="prefetch" href="/colorui-document/assets/js/8.b5737bc4.js"><link rel="prefetch" href="/colorui-document/assets/js/9.c89ca94c.js">
<link rel="stylesheet" href="/colorui-document/assets/css/0.styles.9278fe0a.css">
</head>
<body class="theme-mode-light">
@@ -18,11 +18,11 @@
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">
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/43ebee/" class="sidebar-link">标题操作条</a></li><li><a href="/colorui-document/pages/733677/" class="sidebar-link">顶部操作条</a></li><li><a href="/colorui-document/pages/f2dfd8/" class="sidebar-link">搜索操作条</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">
<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,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> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/plugin/verticalnav</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></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">
</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> <details class="custom-block details"><summary>点此查看页面源代码</summary> <p>页面位置：<code>/pages/plugin/verticalnav</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code></code></pre></div></details></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">
←
<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
@@ -37,6 +37,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.733581c7.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.588cf7ee.js" defer></script>
<script src="/colorui-document/assets/js/app.3af2dee2.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.664f5502.js" defer></script>
</body>
</html>