plugins.html
12.1 KB
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>功能插件 | 买买买开发文档</title>
<meta name="description" content="买买买开发文档">
<link rel="preload" href="/assets/css/0.styles.33db45da.css" as="style"><link rel="preload" href="/assets/js/app.7411fd60.js" as="script"><link rel="preload" href="/assets/js/2.0f93069c.js" as="script"><link rel="preload" href="/assets/js/15.654f1e9e.js" as="script"><link rel="prefetch" href="/assets/js/10.496a1015.js"><link rel="prefetch" href="/assets/js/11.4d722f93.js"><link rel="prefetch" href="/assets/js/12.032cc919.js"><link rel="prefetch" href="/assets/js/13.7051e431.js"><link rel="prefetch" href="/assets/js/14.9f9c2cd6.js"><link rel="prefetch" href="/assets/js/16.fd8e6bfc.js"><link rel="prefetch" href="/assets/js/17.c3e15390.js"><link rel="prefetch" href="/assets/js/18.1ea40e92.js"><link rel="prefetch" href="/assets/js/19.ff3ad037.js"><link rel="prefetch" href="/assets/js/3.f7d51a28.js"><link rel="prefetch" href="/assets/js/4.d1a4c2b6.js"><link rel="prefetch" href="/assets/js/5.3773c289.js"><link rel="prefetch" href="/assets/js/6.f98081f2.js"><link rel="prefetch" href="/assets/js/7.aa234984.js"><link rel="prefetch" href="/assets/js/8.806d68c9.js"><link rel="prefetch" href="/assets/js/9.57beb154.js">
<link rel="stylesheet" href="/assets/css/0.styles.33db45da.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="买买买开发文档" class="logo"> <span class="site-name can-hide">买买买开发文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">主页</a></div><div class="nav-item"><a href="/product/" class="nav-link">公司产品</a></div><div class="nav-item"><a href="/util/" class="nav-link">协作工具</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">工作团队</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/design/" class="nav-link">产品设计</a></li><li class="dropdown-item"><!----> <a href="/team/backend/" class="nav-link">服务端</a></li><li class="dropdown-item"><!----> <a href="/team/frontend/" class="nav-link router-link-active">前端</a></li><li class="dropdown-item"><!----> <a href="/team/android/" class="nav-link">安卓端</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">苹果端</a></li><li class="dropdown-item"><!----> <a href="/team/quality/" class="nav-link">测试组</a></li></ul></div></div><div class="nav-item"><a href="/guide/" class="nav-link">文档写作平台入门介绍</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">主页</a></div><div class="nav-item"><a href="/product/" class="nav-link">公司产品</a></div><div class="nav-item"><a href="/util/" class="nav-link">协作工具</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">工作团队</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/design/" class="nav-link">产品设计</a></li><li class="dropdown-item"><!----> <a href="/team/backend/" class="nav-link">服务端</a></li><li class="dropdown-item"><!----> <a href="/team/frontend/" class="nav-link router-link-active">前端</a></li><li class="dropdown-item"><!----> <a href="/team/android/" class="nav-link">安卓端</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">苹果端</a></li><li class="dropdown-item"><!----> <a href="/team/quality/" class="nav-link">测试组</a></li></ul></div></div><div class="nav-item"><a href="/guide/" class="nav-link">文档写作平台入门介绍</a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/team/frontend/" class="sidebar-link">前端文档</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/#项目构建说明" class="sidebar-link">项目构建说明</a></li><li class="sidebar-sub-header"><a href="/team/frontend/#项目环境要求" class="sidebar-link">项目环境要求</a></li><li class="sidebar-sub-header"><a href="/team/frontend/#项目技术组成" class="sidebar-link">项目技术组成</a></li><li class="sidebar-sub-header"><a href="/team/frontend/#项目说明" class="sidebar-link">项目说明</a></li></ul></li><li><a href="/team/frontend/plugins.html" class="active sidebar-link">功能插件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#拼图验证码插件" class="sidebar-link">拼图验证码插件</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#短信验证" class="sidebar-link">短信验证</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#侧边栏抽屉" class="sidebar-link">侧边栏抽屉</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#数据表格" class="sidebar-link">数据表格</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#数据下载-导出" class="sidebar-link">数据下载/导出</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#选择器" class="sidebar-link">选择器</a></li></ul></li><li><a href="/team/frontend/components.html" class="sidebar-link">业务组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/components.html#数据导入导出" class="sidebar-link">数据导入导出</a></li><li class="sidebar-sub-header"><a href="/team/frontend/components.html#操作权限应用" class="sidebar-link">操作权限应用</a></li><li class="sidebar-sub-header"><a href="/team/frontend/components.html#选择器" class="sidebar-link">选择器</a></li></ul></li><li><a href="/team/frontend/framework.html" class="sidebar-link">系统框架</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/framework.html#目录结构描述" class="sidebar-link">目录结构描述</a></li><li class="sidebar-sub-header"><a href="/team/frontend/framework.html#表单校验规则" class="sidebar-link">表单校验规则</a></li></ul></li><li><a href="/team/frontend/http.html" class="sidebar-link">http 网络请求</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/http.html#数据交互标准格式" class="sidebar-link">数据交互标准格式</a></li><li class="sidebar-sub-header"><a href="/team/frontend/http.html#数据请求封装使用说明" class="sidebar-link">数据请求封装使用说明</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="功能插件"><a href="#功能插件" aria-hidden="true" class="header-anchor">#</a> 功能插件</h1> <p>完全不与业务耦合的功能插件/组件，此类型的成果代表着不以项目类型或业务为限，可随意组合使用</p> <h2 id="拼图验证码插件"><a href="#拼图验证码插件" aria-hidden="true" class="header-anchor">#</a> 拼图验证码插件</h2> <p>用户操作行为验证，能有效区分人机，阻绝恶意程序带来的业务损失。</p> <p>可应用于系统登录、用户端留言或发贴等场景</p> <p><strong>拼图拖拽模式</strong></p> <p><img src="/frontend/plugins/captcha.png" alt="captcha"></p> <p><strong>随机文字点选模式</strong></p> <p><img src="/frontend/plugins/captcha1.png" alt="captcha1"></p> <p>图形验证码插件（极验），当前使用 <strong>免费</strong> 版本，限制为 200 次 / 小时的使用频率，且免费版仅能使用拼图拖拽或文字选择等形式的其中一种，收费版本可随出现验证类型或根据验证级别的提升智能选择不同验证方式和难度，且可定制背景图片</p> <p><strong>全部验证形式</strong></p> <p><img src="/frontend/plugins/captcha-all.png" alt="captcha-all"></p> <blockquote><p>该功能需要服务端配套相关功能</p></blockquote> <h2 id="短信验证"><a href="#短信验证" aria-hidden="true" class="header-anchor">#</a> 短信验证</h2> <p>使用手机及验证码进行身份验证</p> <img src="/frontend/plugins/sms.png" class="border-shadow"> <p>提供了默认形态界面的完整功能，也允许只引用底层实现 API 适配自定义短信验证界面场景</p> <h2 id="侧边栏抽屉"><a href="#侧边栏抽屉" aria-hidden="true" class="header-anchor">#</a> 侧边栏抽屉</h2> <p>一个可从屏幕边缘抽屉式滑出的内容展示层</p> <p><img src="/frontend/plugins/slide.png" alt="slide"></p> <h2 id="数据表格"><a href="#数据表格" aria-hidden="true" class="header-anchor">#</a> 数据表格</h2> <p>带有分页栏的数据表格，集成了单选、多选、跨页选择等功能</p> <p><img src="/frontend/plugins/grid.png" alt="grid"></p> <blockquote><p>该插件依赖于 element-ui，以及服务端数据接口</p></blockquote> <h2 id="数据下载-导出"><a href="#数据下载-导出" aria-hidden="true" class="header-anchor">#</a> 数据下载/导出</h2> <p>标准文件下载/导出功能，根据提供位置的内容构建文件流并自动开始下载，下载过程中默认开启全屏遮罩，并在下载完成后自动关闭</p> <p><img src="/frontend/plugins/download.png" alt="download"></p> <blockquote><p>该插件遮罩功能依赖于 element-ui</p></blockquote> <h2 id="选择器"><a href="#选择器" aria-hidden="true" class="header-anchor">#</a> 选择器</h2> <p>用于挑选数据的选择器</p> <p><strong>选择器基本规则说明</strong></p> <p>所有选择器应包含以下三个元素</p> <ul><li>右上角 <code>X</code> 关闭按钮，点击后仅关闭选择器，不触发事件响应</li> <li><code>清空</code> 按钮，清空选择器已选择项目，但不关闭窗口</li> <li><code>确定</code> 按钮，触发回调事件，响应数据变更并关闭选择器窗口</li></ul> <p><strong>选择器基本构成元素图例</strong></p> <p><img src="/frontend/plugins/selector-base.png" alt="selector-base"></p> <h3 id="单列数据穿梭框"><a href="#单列数据穿梭框" aria-hidden="true" class="header-anchor">#</a> 单列数据穿梭框</h3> <img src="/frontend/plugins/selector-transfer.png" class="border-shadow"> <h3 id="树形数据选择器"><a href="#树形数据选择器" aria-hidden="true" class="header-anchor">#</a> 树形数据选择器</h3> <img src="/frontend/plugins/selector-tree.png" class="border-shadow"> <h3 id="分组树形数据选择器"><a href="#分组树形数据选择器" aria-hidden="true" class="header-anchor">#</a> 分组树形数据选择器</h3> <img src="/frontend/plugins/selector-tree-group.png" class="border-shadow"></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/team/frontend/" class="prev router-link-active">
前端文档
</a></span> <span class="next"><a href="/team/frontend/components.html">
业务组件
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.7411fd60.js" defer></script><script src="/assets/js/2.0f93069c.js" defer></script><script src="/assets/js/15.654f1e9e.js" defer></script>
</body>
</html>