framework.html
30.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!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.f8cb2318.css" as="style"><link rel="preload" href="/assets/js/app.4642b67c.js" as="script"><link rel="preload" href="/assets/js/2.930005fe.js" as="script"><link rel="preload" href="/assets/js/13.542586a4.js" as="script"><link rel="prefetch" href="/assets/js/10.10f589f9.js"><link rel="prefetch" href="/assets/js/11.2f263867.js"><link rel="prefetch" href="/assets/js/12.7ea7119d.js"><link rel="prefetch" href="/assets/js/14.e63b49ae.js"><link rel="prefetch" href="/assets/js/15.d958f765.js"><link rel="prefetch" href="/assets/js/16.d9112f88.js"><link rel="prefetch" href="/assets/js/17.8c38efba.js"><link rel="prefetch" href="/assets/js/18.93fc5a16.js"><link rel="prefetch" href="/assets/js/19.de2f2260.js"><link rel="prefetch" href="/assets/js/20.41a57f7b.js"><link rel="prefetch" href="/assets/js/21.05021021.js"><link rel="prefetch" href="/assets/js/3.65af1edd.js"><link rel="prefetch" href="/assets/js/4.54f496b0.js"><link rel="prefetch" href="/assets/js/5.e405b15b.js"><link rel="prefetch" href="/assets/js/6.894cd584.js"><link rel="prefetch" href="/assets/js/7.9e868c4e.js"><link rel="prefetch" href="/assets/js/8.d9c310e8.js"><link rel="prefetch" href="/assets/js/9.ebbf194d.js">
<link rel="stylesheet" href="/assets/css/0.styles.f8cb2318.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"><div class="dropdown-wrapper"><button type="button" aria-label="团队文档" class="dropdown-title"><span class="title">团队文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/frontend/" class="nav-link router-link-active">前端</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">IOS端</a></li><li class="dropdown-item"><!----> <a href="/team/android/" 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/quality/" class="nav-link">测试端</a></li></ul></div></div><div class="nav-item"><a href="/" class="nav-link">项目管控</a></div><div class="nav-item"><a href="/" class="nav-link">行政管理</a></div><div class="nav-item"><a href="/util/" class="nav-link">协作工具</a></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"><div class="dropdown-wrapper"><button type="button" aria-label="团队文档" class="dropdown-title"><span class="title">团队文档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/frontend/" class="nav-link router-link-active">前端</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">IOS端</a></li><li class="dropdown-item"><!----> <a href="/team/android/" 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/quality/" class="nav-link">测试端</a></li></ul></div></div><div class="nav-item"><a href="/" class="nav-link">项目管控</a></div><div class="nav-item"><a href="/" class="nav-link">行政管理</a></div><div class="nav-item"><a href="/util/" class="nav-link">协作工具</a></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">前端 Frontend</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><li class="sidebar-sub-header"><a href="/team/frontend/#代码版本控制位置" class="sidebar-link">代码版本控制位置</a></li></ul></li><li><a href="/team/frontend/plugins.html" class="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/http.html" class="sidebar-link">数据交互格式标准</a></li><li><a href="/team/frontend/framework.html" class="active 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#api" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/team/frontend/framework.html#自定义指令集-directive" class="sidebar-link">自定义指令集 directive</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/web-open-platform.html" class="sidebar-link">网页能力开放平台</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/web-open-platform.html#平台介绍及使用规范" class="sidebar-link">平台介绍及使用规范</a></li><li class="sidebar-sub-header"><a href="/team/frontend/web-open-platform.html#现有项目-模块" class="sidebar-link">现有项目/模块</a></li></ul></li><li><a href="/team/frontend/quality.html" class="sidebar-link">质量保证体系</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/quality.html#团队应用现状" class="sidebar-link">团队应用现状</a></li><li class="sidebar-sub-header"><a href="/team/frontend/quality.html#语法检查" class="sidebar-link">语法检查</a></li><li class="sidebar-sub-header"><a href="/team/frontend/quality.html#单元测试" class="sidebar-link">单元测试</a></li><li class="sidebar-sub-header"><a href="/team/frontend/quality.html#端对端测试（end-to-end）" class="sidebar-link">端对端测试（End-to-end）</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>管理平台项目框架目标使用规范说明及部分系统 API 描述，目前仅适用于 <code>素+管理平台</code> 项目</p> <h2 id="目录结构描述"><a href="#目录结构描述" aria-hidden="true" class="header-anchor">#</a> 目录结构描述</h2> <p>项目结构目录树如下</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>project/
│ .browserslistrc 浏览器版本配置
│ .editorconfig 编辑器配置
│ .env.development 开发环境下使用的环境变量配置文件
│ .env.production 生产环境下使用的环境变量配置文件
│ .env.test 单元测试环境下使用的环境变量配置文件
│ .eslintrc.js ESLint 配置
│ .gitignore 设置 git 忽略上传的内容
│ babel.config.js 项目脚本兼容版本设置
│ cypress.json cypress 配置文件
│ Dockerfile docker 配置文件
│ package.json 项目总体描述及依赖描述
│ postcss.config.js 预编译样式
│ vue.config.js vue-cli 脚手架配置及 webpack 配置
│
├─public 静态资源文件目录
│ favicon.ico 网站图标
│ index.html 网站实际入口
│
├─src
│ │ main.js 项目主入口
│ │
│ ├─assets 项目相关资产 / 附件，通常用于存放图片资源
│ │
│ ├─business 业务处理逻辑、框架相关 API
│ │
│ ├─components 自定义业务组件
│ │
│ ├─config 项目相关配置
│ │ constants.js 常量配置
│ │ directives.js 自定义指令集配置
│ │ element-plugins.js element-ui 插件配置
│ │ menu-path.js 系统菜单及路由匹配关系
│ │ plugins.js 项目中除 element-ui 外的插件引用配置
│ │ polyfill.js 自定义脚本兼容
│ │ velidateData.js 自定义表单校验规则
│ │
│ ├─layouts 整体布局结构
│ │
│ ├─mixins 公共抽象模型
│ │
│ ├─plugins 系统公共插件
│ │
│ ├─router vue-router 路由配置
│ │
│ ├─store Vuex 与本地缓存的相关处理
│ │
│ ├─style 自定义样式文件收纳
│ │
│ ├─utils 工具类
│ │
│ └─views 系统业务功能页面
│ │
│ ├─alonePage 独立页
│ │
│ ├─demo 框架组件、API 实例
│ │
│ └─inner 移动端内嵌页
│
└─tests
├─e2e 端对端测试
│
├─sample 部分数据样例
│
└─unit 单元测试
.eslintrc.js 针对单元测试的 eslint 配置
setup.js 单元测试的前置处理
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br></div></div><p>以上项目结构将为作为后续所有项目的基础结构</p> <h2 id="api"><a href="#api" aria-hidden="true" class="header-anchor">#</a> API</h2> <h3 id="http-url-data-options"><a href="#http-url-data-options" aria-hidden="true" class="header-anchor">#</a> $http(url, [data], [options])</h3> <p>http 数据请求统一入口</p> <ul><li>url</li></ul> <p>目标请求地址，地址分为两种类型：<code>当前域地址</code> 和 <code>其他域地址</code></p> <ul><li>data</li></ul> <p>提交的数据参数</p> <ul><li>options</li></ul> <p>配置参数，主要用于特殊情况下需要覆盖 <strong>axios</strong> 原生配置的情况，多数情况下不需要进行设置</p> <p><strong>return</strong></p> <p>Promise 接口对象</p> <hr> <p>常见使用场景</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//访问当前域服务</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$http</span><span class="token punctuation">(</span><span class="token string">'/user/list'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> groupId<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">resp</span> <span class="token operator">=></span> <span class="token operator">...</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">resp</span> <span class="token operator">=></span> <span class="token operator">...</span><span class="token punctuation">)</span>
<span class="token comment">//访问其他域服务</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$http</span><span class="token punctuation">(</span><span class="token string">'http://aaa.com/user/list'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> groupId<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">resp</span> <span class="token operator">=></span> <span class="token operator">...</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">resp</span> <span class="token operator">=></span> <span class="token operator">...</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="自定义指令集-directive"><a href="#自定义指令集-directive" aria-hidden="true" class="header-anchor">#</a> 自定义指令集 directive</h2> <h3 id="v-date"><a href="#v-date" aria-hidden="true" class="header-anchor">#</a> v-date</h3> <p>日期格式化，将元素的内容格式化为指定的日期格式</p> <h4 id="参数"><a href="#参数" aria-hidden="true" class="header-anchor">#</a> 参数</h4> <ul><li>日期格式 (string)</li></ul> <p>指定日期格式，例如：'yyyy-MM-dd hh:mm:ss'，若不指定格式则默认使用格式：'yyyy-MM-dd'</p> <h4 id="使用方式"><a href="#使用方式" aria-hidden="true" class="header-anchor">#</a> 使用方式</h4> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment"><!-- 指定自定义格式 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-date</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>yyyy-MM-dd hh:mm:ss'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1559631857305<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 不指定格式，使用默认格式 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-date</span><span class="token punctuation">></span></span>1559631857305<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="实例"><a href="#实例" aria-hidden="true" class="header-anchor">#</a> 实例</h4> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-date</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>yyyy-MM-dd hh:mm:ss'<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1559631857305<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 结果：2019-06-04 15:04:17 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-date</span><span class="token punctuation">></span></span>Tue Jun 04 2019 15:33:06 GMT+0800 (中国标准时间)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 结果：2019-06-04 --></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="v-number"><a href="#v-number" aria-hidden="true" class="header-anchor">#</a> v-number</h3> <p>数字类型格式化（保留小数点位数），将元素内容格式化为指定位数小数点数字，位数不足则使用 0 补充，推荐用于数据统计，金额计算、展示等场景</p> <h4 id="参数-2"><a href="#参数-2" aria-hidden="true" class="header-anchor">#</a> 参数</h4> <ul><li>保留小数点位数 (number)</li></ul> <p>指定数字保留小数点位数，默认为：2</p> <h4 id="使用方式-2"><a href="#使用方式-2" aria-hidden="true" class="header-anchor">#</a> 使用方式</h4> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment"><!-- 指定自定义保留位数 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-number</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3450.20<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 不指定格式，使用默认保留位数 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-number</span><span class="token punctuation">></span></span>3450<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="实例-2"><a href="#实例-2" aria-hidden="true" class="header-anchor">#</a> 实例</h4> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-number</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3450.20<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 结果：3450.2000 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-number</span><span class="token punctuation">></span></span>3450<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 结果：3450.00 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-number</span><span class="token punctuation">></span></span>3450.1234<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 结果：3450.12 --></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="表单校验规则"><a href="#表单校验规则" aria-hidden="true" class="header-anchor">#</a> 表单校验规则</h2> <h4 id="使用方式-3"><a href="#使用方式-3" aria-hidden="true" class="header-anchor">#</a> 使用方式</h4> <p>Form 组件通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-form</span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>rules<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></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>
ruleForm<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">''</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
rules<span class="token punctuation">:</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'请输入活动名称'</span><span class="token punctuation">,</span> trigger<span class="token punctuation">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> min<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> max<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> message<span class="token punctuation">:</span> <span class="token string">'长度在 3 到 5 个字符'</span><span class="token punctuation">,</span> trigger<span class="token punctuation">:</span> <span class="token string">'blur'</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><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"></</span>script</span><span class="token punctuation">></span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h4 id="自定义验证函数"><a href="#自定义验证函数" aria-hidden="true" class="header-anchor">#</a> 自定义验证函数</h4> <ul><li><code>checkNumOrLetter</code> 验证只能包含数字和字母</li> <li><code>checkNum</code> 验证只能为整数</li> <li><code>validateNumAndFloat</code> 验证必须是整数或小数</li> <li><code>velidateSpecialNUm</code> 验证只能是范围0.0001 ~ 999999999.9999的数字</li> <li><code>fourDigitsAfter</code> 验证只能是小数点后4位的浮点数</li> <li><code>checkPhoneNum</code> 验证只能是电话号码</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/team/frontend/http.html" class="prev">数据交互格式标准</a></span> <span class="next"><a href="/team/frontend/web-open-platform.html">网页能力开放平台</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.4642b67c.js" defer></script><script src="/assets/js/2.930005fe.js" defer></script><script src="/assets/js/13.542586a4.js" defer></script>
</body>
</html>