mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-10-14 10:52:28 +08:00
137 lines
39 KiB
HTML
137 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Vue增强 | Fes.js</title>
|
||
<meta name="generator" content="VuePress 1.5.4">
|
||
|
||
<meta name="description" content="中台应用前端快速解决方案">
|
||
<link rel="preload" href="/fes.js/assets/css/0.styles.b6d96aa7.css" as="style"><link rel="preload" href="/fes.js/assets/js/app.7ac13123.js" as="script"><link rel="preload" href="/fes.js/assets/js/2.56b3886c.js" as="script"><link rel="preload" href="/fes.js/assets/js/45.fb304e2c.js" as="script"><link rel="preload" href="/fes.js/assets/js/10.2329d47f.js" as="script"><link rel="prefetch" href="/fes.js/assets/js/100.a8c0b37a.js"><link rel="prefetch" href="/fes.js/assets/js/101.d0d13c58.js"><link rel="prefetch" href="/fes.js/assets/js/102.fe4c5431.js"><link rel="prefetch" href="/fes.js/assets/js/103.1e0250da.js"><link rel="prefetch" href="/fes.js/assets/js/104.61dead22.js"><link rel="prefetch" href="/fes.js/assets/js/105.e7c079d9.js"><link rel="prefetch" href="/fes.js/assets/js/106.c7c5a406.js"><link rel="prefetch" href="/fes.js/assets/js/107.bfd74ae5.js"><link rel="prefetch" href="/fes.js/assets/js/108.5d6f1cb6.js"><link rel="prefetch" href="/fes.js/assets/js/109.3ed5c334.js"><link rel="prefetch" href="/fes.js/assets/js/11.b4d5367a.js"><link rel="prefetch" href="/fes.js/assets/js/110.caabd92b.js"><link rel="prefetch" href="/fes.js/assets/js/111.0141da48.js"><link rel="prefetch" href="/fes.js/assets/js/112.cfcc7229.js"><link rel="prefetch" href="/fes.js/assets/js/113.758f9823.js"><link rel="prefetch" href="/fes.js/assets/js/114.9f35bf06.js"><link rel="prefetch" href="/fes.js/assets/js/115.8ffbdd8d.js"><link rel="prefetch" href="/fes.js/assets/js/116.27f2e3de.js"><link rel="prefetch" href="/fes.js/assets/js/117.7aac4f7b.js"><link rel="prefetch" href="/fes.js/assets/js/118.a5d65639.js"><link rel="prefetch" href="/fes.js/assets/js/119.2a8725e5.js"><link rel="prefetch" href="/fes.js/assets/js/12.cbaf95bc.js"><link rel="prefetch" href="/fes.js/assets/js/120.c7f32a7f.js"><link rel="prefetch" href="/fes.js/assets/js/121.a1ec0e52.js"><link rel="prefetch" href="/fes.js/assets/js/122.b1ad092f.js"><link rel="prefetch" href="/fes.js/assets/js/123.86f0532a.js"><link rel="prefetch" href="/fes.js/assets/js/124.ec311481.js"><link rel="prefetch" href="/fes.js/assets/js/125.8045057a.js"><link rel="prefetch" href="/fes.js/assets/js/126.dff05f5f.js"><link rel="prefetch" href="/fes.js/assets/js/127.5220a27f.js"><link rel="prefetch" href="/fes.js/assets/js/128.d0f912e7.js"><link rel="prefetch" href="/fes.js/assets/js/129.a8202d99.js"><link rel="prefetch" href="/fes.js/assets/js/13.7788c802.js"><link rel="prefetch" href="/fes.js/assets/js/130.02a8d9aa.js"><link rel="prefetch" href="/fes.js/assets/js/131.3c5d70fe.js"><link rel="prefetch" href="/fes.js/assets/js/132.9ddbe3a4.js"><link rel="prefetch" href="/fes.js/assets/js/133.22227f49.js"><link rel="prefetch" href="/fes.js/assets/js/134.ade2d38f.js"><link rel="prefetch" href="/fes.js/assets/js/135.946abbf8.js"><link rel="prefetch" href="/fes.js/assets/js/136.c5915197.js"><link rel="prefetch" href="/fes.js/assets/js/137.89297891.js"><link rel="prefetch" href="/fes.js/assets/js/138.65574a12.js"><link rel="prefetch" href="/fes.js/assets/js/139.2cd935e4.js"><link rel="prefetch" href="/fes.js/assets/js/14.8fac330f.js"><link rel="prefetch" href="/fes.js/assets/js/140.293a0265.js"><link rel="prefetch" href="/fes.js/assets/js/141.e159c5b6.js"><link rel="prefetch" href="/fes.js/assets/js/142.dd4cdd5c.js"><link rel="prefetch" href="/fes.js/assets/js/143.6fdfc5f7.js"><link rel="prefetch" href="/fes.js/assets/js/144.2bd01d75.js"><link rel="prefetch" href="/fes.js/assets/js/145.9957ee9b.js"><link rel="prefetch" href="/fes.js/assets/js/146.a469b3a8.js"><link rel="prefetch" href="/fes.js/assets/js/147.c8aaada6.js"><link rel="prefetch" href="/fes.js/assets/js/148.0faccf52.js"><link rel="prefetch" href="/fes.js/assets/js/149.b475e1f0.js"><link rel="prefetch" href="/fes.js/assets/js/15.0d5c6b20.js"><link rel="prefetch" href="/fes.js/assets/js/150.17b2fa65.js"><link rel="prefetch" href="/fes.js/assets/js/151.59972751.js"><link rel="prefetch" href="/fes.js/assets/js/152.53506863.js"><link rel="prefetch" href="/fes.js/assets/js/153.a62dbdff.js"><link rel="prefetch" href="/fes.js/assets/js/154.1b94b041.js"><link rel="prefetch" href="/fes.js/assets/js/155.2f06d48e.js"><link rel="prefetch" href="/fes.js/assets/js/156.671e7902.js"><link rel="prefetch" href="/fes.js/assets/js/157.8b9e81df.js"><link rel="prefetch" href="/fes.js/assets/js/158.21377514.js"><link rel="prefetch" href="/fes.js/assets/js/159.cfb0cdcf.js"><link rel="prefetch" href="/fes.js/assets/js/16.f10005a4.js"><link rel="prefetch" href="/fes.js/assets/js/160.cc1540a1.js"><link rel="prefetch" href="/fes.js/assets/js/161.bd0fc3cd.js"><link rel="prefetch" href="/fes.js/assets/js/162.bde5a33d.js"><link rel="prefetch" href="/fes.js/assets/js/163.fe5c2089.js"><link rel="prefetch" href="/fes.js/assets/js/164.2e44dada.js"><link rel="prefetch" href="/fes.js/assets/js/165.e7d98f39.js"><link rel="prefetch" href="/fes.js/assets/js/166.71b72815.js"><link rel="prefetch" href="/fes.js/assets/js/167.cb126445.js"><link rel="prefetch" href="/fes.js/assets/js/168.51b6f9e4.js"><link rel="prefetch" href="/fes.js/assets/js/169.3187cae3.js"><link rel="prefetch" href="/fes.js/assets/js/17.80716878.js"><link rel="prefetch" href="/fes.js/assets/js/170.423e830e.js"><link rel="prefetch" href="/fes.js/assets/js/171.e10ad2c1.js"><link rel="prefetch" href="/fes.js/assets/js/172.b0b807d7.js"><link rel="prefetch" href="/fes.js/assets/js/173.3574e789.js"><link rel="prefetch" href="/fes.js/assets/js/174.2705e6bc.js"><link rel="prefetch" href="/fes.js/assets/js/175.fc49bba7.js"><link rel="prefetch" href="/fes.js/assets/js/176.1cf66e65.js"><link rel="prefetch" href="/fes.js/assets/js/177.346a4793.js"><link rel="prefetch" href="/fes.js/assets/js/178.c736e9d6.js"><link rel="prefetch" href="/fes.js/assets/js/179.dd1ccb6b.js"><link rel="prefetch" href="/fes.js/assets/js/18.7f22e3ec.js"><link rel="prefetch" href="/fes.js/assets/js/180.690eeb9b.js"><link rel="prefetch" href="/fes.js/assets/js/181.a809ffbb.js"><link rel="prefetch" href="/fes.js/assets/js/182.d2b7f97d.js"><link rel="prefetch" href="/fes.js/assets/js/183.0bb8dfc9.js"><link rel="prefetch" href="/fes.js/assets/js/184.6d240817.js"><link rel="prefetch" href="/fes.js/assets/js/185.d19a1c22.js"><link rel="prefetch" href="/fes.js/assets/js/186.0c358954.js"><link rel="prefetch" href="/fes.js/assets/js/187.1ec43d29.js"><link rel="prefetch" href="/fes.js/assets/js/188.dae3f98c.js"><link rel="prefetch" href="/fes.js/assets/js/189.024c389a.js"><link rel="prefetch" href="/fes.js/assets/js/19.702f97e5.js"><link rel="prefetch" href="/fes.js/assets/js/190.21969647.js"><link rel="prefetch" href="/fes.js/assets/js/191.58e5c5e5.js"><link rel="prefetch" href="/fes.js/assets/js/20.b265f3f4.js"><link rel="prefetch" href="/fes.js/assets/js/21.606a9299.js"><link rel="prefetch" href="/fes.js/assets/js/22.99c374c9.js"><link rel="prefetch" href="/fes.js/assets/js/23.ed43a371.js"><link rel="prefetch" href="/fes.js/assets/js/24.16673676.js"><link rel="prefetch" href="/fes.js/assets/js/25.d462e128.js"><link rel="prefetch" href="/fes.js/assets/js/26.abfba309.js"><link rel="prefetch" href="/fes.js/assets/js/27.c3088ae8.js"><link rel="prefetch" href="/fes.js/assets/js/28.16acfbcd.js"><link rel="prefetch" href="/fes.js/assets/js/29.ca572092.js"><link rel="prefetch" href="/fes.js/assets/js/3.5e11613d.js"><link rel="prefetch" href="/fes.js/assets/js/30.d39beb81.js"><link rel="prefetch" href="/fes.js/assets/js/31.e55a61a1.js"><link rel="prefetch" href="/fes.js/assets/js/32.add16ab1.js"><link rel="prefetch" href="/fes.js/assets/js/33.f605afe1.js"><link rel="prefetch" href="/fes.js/assets/js/34.de9ee359.js"><link rel="prefetch" href="/fes.js/assets/js/35.d6201419.js"><link rel="prefetch" href="/fes.js/assets/js/36.067393a5.js"><link rel="prefetch" href="/fes.js/assets/js/37.90e20ad7.js"><link rel="prefetch" href="/fes.js/assets/js/38.0c353308.js"><link rel="prefetch" href="/fes.js/assets/js/39.0dc359a2.js"><link rel="prefetch" href="/fes.js/assets/js/4.9d864fda.js"><link rel="prefetch" href="/fes.js/assets/js/40.54266c8b.js"><link rel="prefetch" href="/fes.js/assets/js/41.e5915060.js"><link rel="prefetch" href="/fes.js/assets/js/42.ace93022.js"><link rel="prefetch" href="/fes.js/assets/js/43.38092443.js"><link rel="prefetch" href="/fes.js/assets/js/44.4b79e40d.js"><link rel="prefetch" href="/fes.js/assets/js/46.472c10a1.js"><link rel="prefetch" href="/fes.js/assets/js/47.ff5a356f.js"><link rel="prefetch" href="/fes.js/assets/js/48.86e85b89.js"><link rel="prefetch" href="/fes.js/assets/js/49.c5bb16cb.js"><link rel="prefetch" href="/fes.js/assets/js/5.3fe51578.js"><link rel="prefetch" href="/fes.js/assets/js/50.1900433a.js"><link rel="prefetch" href="/fes.js/assets/js/51.037ca69a.js"><link rel="prefetch" href="/fes.js/assets/js/52.a8d80c09.js"><link rel="prefetch" href="/fes.js/assets/js/53.2ed52ab3.js"><link rel="prefetch" href="/fes.js/assets/js/54.33ae21ce.js"><link rel="prefetch" href="/fes.js/assets/js/55.80412639.js"><link rel="prefetch" href="/fes.js/assets/js/56.3f904233.js"><link rel="prefetch" href="/fes.js/assets/js/57.5e6fe058.js"><link rel="prefetch" href="/fes.js/assets/js/58.8d1fc65c.js"><link rel="prefetch" href="/fes.js/assets/js/59.43427b99.js"><link rel="prefetch" href="/fes.js/assets/js/6.6fc44206.js"><link rel="prefetch" href="/fes.js/assets/js/60.b1bc1e0e.js"><link rel="prefetch" href="/fes.js/assets/js/61.969ddc3c.js"><link rel="prefetch" href="/fes.js/assets/js/62.798037ce.js"><link rel="prefetch" href="/fes.js/assets/js/63.4e2bb5e8.js"><link rel="prefetch" href="/fes.js/assets/js/64.4b661afe.js"><link rel="prefetch" href="/fes.js/assets/js/65.0fd9d81f.js"><link rel="prefetch" href="/fes.js/assets/js/66.5e6218d9.js"><link rel="prefetch" href="/fes.js/assets/js/67.eba75639.js"><link rel="prefetch" href="/fes.js/assets/js/68.bdf81488.js"><link rel="prefetch" href="/fes.js/assets/js/69.74a89467.js"><link rel="prefetch" href="/fes.js/assets/js/7.95ca4a58.js"><link rel="prefetch" href="/fes.js/assets/js/70.9e20bb29.js"><link rel="prefetch" href="/fes.js/assets/js/71.15c857e4.js"><link rel="prefetch" href="/fes.js/assets/js/72.0628eb14.js"><link rel="prefetch" href="/fes.js/assets/js/73.e22387d7.js"><link rel="prefetch" href="/fes.js/assets/js/74.f49b77ea.js"><link rel="prefetch" href="/fes.js/assets/js/75.8e2db202.js"><link rel="prefetch" href="/fes.js/assets/js/76.29f9246b.js"><link rel="prefetch" href="/fes.js/assets/js/77.684cf181.js"><link rel="prefetch" href="/fes.js/assets/js/78.41cd0a7e.js"><link rel="prefetch" href="/fes.js/assets/js/79.ac8c1e35.js"><link rel="prefetch" href="/fes.js/assets/js/8.298d27ef.js"><link rel="prefetch" href="/fes.js/assets/js/80.2e78c1da.js"><link rel="prefetch" href="/fes.js/assets/js/81.5c04171f.js"><link rel="prefetch" href="/fes.js/assets/js/82.97f83886.js"><link rel="prefetch" href="/fes.js/assets/js/83.d211f1d3.js"><link rel="prefetch" href="/fes.js/assets/js/84.3314ecc1.js"><link rel="prefetch" href="/fes.js/assets/js/85.089aabfe.js"><link rel="prefetch" href="/fes.js/assets/js/86.c1efb58b.js"><link rel="prefetch" href="/fes.js/assets/js/87.56369081.js"><link rel="prefetch" href="/fes.js/assets/js/88.bfcb3442.js"><link rel="prefetch" href="/fes.js/assets/js/89.2b1da9a0.js"><link rel="prefetch" href="/fes.js/assets/js/9.c994cdf9.js"><link rel="prefetch" href="/fes.js/assets/js/90.addff0a9.js"><link rel="prefetch" href="/fes.js/assets/js/91.a06f8cc8.js"><link rel="prefetch" href="/fes.js/assets/js/92.ddfaa402.js"><link rel="prefetch" href="/fes.js/assets/js/93.e5738182.js"><link rel="prefetch" href="/fes.js/assets/js/94.aaa2d9d8.js"><link rel="prefetch" href="/fes.js/assets/js/95.45e38043.js"><link rel="prefetch" href="/fes.js/assets/js/96.841b4360.js"><link rel="prefetch" href="/fes.js/assets/js/97.6068a1b7.js"><link rel="prefetch" href="/fes.js/assets/js/98.b5ea7b13.js"><link rel="prefetch" href="/fes.js/assets/js/99.4d5bd9b8.js">
|
||
<link rel="stylesheet" href="/fes.js/assets/css/0.styles.b6d96aa7.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="/fes.js/" class="home-link router-link-active"><!----> <span class="site-name">Fes.js</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="/fes.js/guide/" class="nav-link router-link-active">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/fes.js/api/" class="nav-link">
|
||
API参考
|
||
</a></div><div class="nav-item"><a href="/fes.js/ui/" class="nav-link">
|
||
组件
|
||
</a></div><div class="nav-item"><a href="/fes.js/cli/" class="nav-link">
|
||
CLI
|
||
</a></div> <a href="https://github.com/WeBankFinTech/fes.js" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/fes.js/guide/" class="nav-link router-link-active">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/fes.js/api/" class="nav-link">
|
||
API参考
|
||
</a></div><div class="nav-item"><a href="/fes.js/ui/" class="nav-link">
|
||
组件
|
||
</a></div><div class="nav-item"><a href="/fes.js/cli/" class="nav-link">
|
||
CLI
|
||
</a></div> <a href="https://github.com/WeBankFinTech/fes.js" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></nav> <ul class="sidebar-links"><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="/fes.js/guide/" aria-current="page" class="sidebar-link">介绍</a></li><li><a href="/fes.js/guide/install.html" class="sidebar-link">安装</a></li><li><a href="/fes.js/guide/play.html" class="sidebar-link">快速上手</a></li><li><a href="/fes.js/guide/directory-structure.html" class="sidebar-link">目录结构</a></li><li><a href="/fes.js/guide/layout.html" class="sidebar-link">布局</a></li><li><a href="/fes.js/guide/route.html" class="sidebar-link">路由</a></li><li><a href="/fes.js/guide/permisson.html" class="sidebar-link">权限管理</a></li><li><a href="/fes.js/guide/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/fes.js/guide/option.html" aria-current="page" class="active sidebar-link">Vue增强</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#实例" class="sidebar-link">实例</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesfesx" class="sidebar-link">FesFesx</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesmap" class="sidebar-link">FesMap</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesenv" class="sidebar-link">FesEnv</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesstorage" class="sidebar-link">FesStorage</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesutil" class="sidebar-link">FesUtil</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesapi" class="sidebar-link">FesApi</a></li></ul></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#选项" class="sidebar-link">选项</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesleft" class="sidebar-link">FesLeft</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesheader" class="sidebar-link">FesHeader</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesdata" class="sidebar-link">FesData</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fessyncdata" class="sidebar-link">FesSyncData</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fescreated" class="sidebar-link">FesCreated</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesready" class="sidebar-link">FesReady</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesbeforedestroy" class="sidebar-link">FesBeforeDestroy</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#fesdestroy" class="sidebar-link">FesDestroy</a></li></ul></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#过滤器" class="sidebar-link">过滤器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#date" class="sidebar-link">date</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#money" class="sidebar-link">money</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#card" class="sidebar-link">card</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#safety" class="sidebar-link">safety</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/option.html#map" class="sidebar-link">map</a></li></ul></li></ul></li><li><a href="/fes.js/guide/unit.html" class="sidebar-link">单元测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件</span> <!----></p> <!----></section></li><li><a href="/fes.js/guide/releaseNote.html" class="sidebar-link">Release 记录</a></li><li><a href="/fes.js/guide/contact.html" class="sidebar-link">联系我们</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue增强"><a href="#vue增强" class="header-anchor">#</a> Vue增强</h1> <p>fes.js基于Vue.js，对.vue单文件组件做了一些增强，扩展了一些配置和内置过滤器等。</p> <h2 id="实例"><a href="#实例" class="header-anchor">#</a> 实例</h2> <h3 id="fesfesx"><a href="#fesfesx" class="header-anchor">#</a> FesFesx</h3> <p>FesFesx是全局状态容器，独立于组件之外的一个Map对象，在任何组件中可以通过<code>this.FesFesx</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"><</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>article<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{{FesFesx.data}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</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">FesReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>FesFesx<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">"data"</span><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></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><h3 id="fesmap"><a href="#fesmap" class="header-anchor">#</a> FesMap</h3> <p>FesMap是数据字典容器，在任何组件中可以通过<code>this.FesMap</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"><</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>article<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
{{data | map(FesMap['xxx'])}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><h3 id="fesenv"><a href="#fesenv" class="header-anchor">#</a> FesEnv</h3> <p>FesEnv的引用，具体Api请参考<a href="/fes.js/api/#fesenv">api-FesEnv</a></p> <h3 id="fesstorage"><a href="#fesstorage" class="header-anchor">#</a> FesStorage</h3> <p>FesStorage的引用，具体Api请参考<a href="/fes.js/api/#fesstorage">api-FesStorage</a></p> <h3 id="fesutil"><a href="#fesutil" class="header-anchor">#</a> FesUtil</h3> <p>FesUtil的引用，具体Api请参考<a href="/fes.js/api/#fesutil">api-FesUtil</a></p> <h3 id="fesapi"><a href="#fesapi" class="header-anchor">#</a> FesApi</h3> <p>FesApi的引用，具体Api请参考<a href="/fes.js/api/#fesapi">api-FesApi</a></p> <h2 id="选项"><a href="#选项" class="header-anchor">#</a> 选项</h2> <h3 id="fesleft"><a href="#fesleft" class="header-anchor">#</a> FesLeft</h3> <p>控制页面的左侧是否显示，详情可见<a href="/fes.js/guide/directory-structure.html#特殊组件">全局组件</a></p> <h3 id="fesheader"><a href="#fesheader" class="header-anchor">#</a> FesHeader</h3> <p>控制页面的顶部(<code>FesHeader.vue</code>)是否显示，详情可见<a href="/fes.js/guide/directory-structure.html#特殊组件">全局组件</a></p> <h3 id="fesdata"><a href="#fesdata" class="header-anchor">#</a> FesData</h3> <p>参考Vue.js的<a href="https://cn.vuejs.org/v2/api/#data" target="_blank" rel="noopener noreferrer">data<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a>，目前两者使用起来几乎一致。假如未来Vue升级不兼容data时，使用FesData会尽可能保证兼容。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
<span class="token function">FesData</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>
|
||
a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
b<span class="token operator">:</span> <span class="token number">2</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><h3 id="fessyncdata"><a href="#fessyncdata" class="header-anchor">#</a> FesSyncData</h3> <p>异步响应数据是指当vue实例初始化时把通过接口查询到的数据挂载在FesData上，响应化。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
FesSyncData<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/query"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
max<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
min<span class="token operator">:</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 punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p>给<code>FesData</code>添加一个属性data，值是"/query"查询到的结果。 { max: 100, min: 1} 是查询条件，路由参数<code>transition.to.params</code> 和<code>transition.to.query</code> 也会当作参数跟自定义参数一起传给后台。</p> <h3 id="fescreated"><a href="#fescreated" class="header-anchor">#</a> FesCreated</h3> <p>当Vue实例创建完后立即调用，用法类似Vue的<a href="https://cn.vuejs.org/v2/api/#created" target="_blank" rel="noopener noreferrer">created<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></p> <h3 id="fesready"><a href="#fesready" class="header-anchor">#</a> FesReady</h3> <p>当Vue实例被挂载后调用立即调用，用法类似Vue的<a href="https://cn.vuejs.org/v2/api/#mounted" target="_blank" rel="noopener noreferrer">mounted<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></p> <h3 id="fesbeforedestroy"><a href="#fesbeforedestroy" class="header-anchor">#</a> FesBeforeDestroy</h3> <p>当Vue实例销毁之前调用。在这一步，实例仍然完全可用。用法类似Vue的<a href="https://cn.vuejs.org/v2/api/#beforeDestroy" target="_blank" rel="noopener noreferrer">beforeDestroy<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></p> <h3 id="fesdestroy"><a href="#fesdestroy" class="header-anchor">#</a> FesDestroy</h3> <p>当Vue实例销毁后调用。在这一步，实例仍然完全可用。用法类似Vue的<a href="https://cn.vuejs.org/v2/api/#destroyed" target="_blank" rel="noopener noreferrer">destroyed<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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></a></p> <h2 id="过滤器"><a href="#过滤器" class="header-anchor">#</a> 过滤器</h2> <h3 id="date"><a href="#date" class="header-anchor">#</a> date</h3> <p>把时间戳转换成日期，日期格式默认为<code>yyyy-MM-dd hh:mm:ss</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"><</span>template</span><span class="token punctuation">></span></span>
|
||
{{date | date}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</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">FesData</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>
|
||
date<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</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><p>日期带参数：</p> <div class="language-html extra-class"><pre class="language-html"><code>{{date | date('yyyy-MM-dd')}}
|
||
</code></pre></div><h3 id="money"><a href="#money" class="header-anchor">#</a> money</h3> <p>金额过滤器，把数字<code>100000</code>转换成金额<code>100,000.00</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"><</span>template</span><span class="token punctuation">></span></span>
|
||
{{money | money}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</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>
|
||
FesData<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
money<span class="token operator">:</span> <span class="token number">100000</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><h3 id="card"><a href="#card" class="header-anchor">#</a> card</h3> <p>银行卡过滤器，把数字<code>11122233242323</code> 转换成 <code>1112 2233 2423 23</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"><</span>template</span><span class="token punctuation">></span></span>
|
||
{{card | card}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</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>
|
||
FesData<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
card<span class="token operator">:</span> <span class="token string">"11122233242323"</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><h3 id="safety"><a href="#safety" class="header-anchor">#</a> safety</h3> <p>给关键信息打码，把身份证号<code>42222991018719191</code>转换成<code>4222***191</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"><</span>template</span><span class="token punctuation">></span></span>
|
||
{{safety | safety(4,3)}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</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>
|
||
FesData<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
safety<span class="token operator">:</span> <span class="token string">"42222991018719191"</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><p>参数表示保留几位不加密，第一个参数为前几位不加密，第二个参数为后几位不加密。</p> <h3 id="map"><a href="#map" class="header-anchor">#</a> map</h3> <p>数据字典过滤器</p> <p>首先定义数据字典：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
map<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
status<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">"1"</span><span class="token punctuation">,</span> <span class="token string">"成功"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"2"</span><span class="token punctuation">,</span> <span class="token string">"失败"</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>
|
||
</code></pre></div><p>在页面中使用：</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
{{map | map(FesMap.status)}}
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</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 attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/ecmascript-6<span class="token punctuation">"</span></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>
|
||
FesData<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
map<span class="token operator">:</span> <span class="token string">"1"</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></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次编辑时间:</span> <span class="time">8/27/2020, 5:18:57 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||
←
|
||
<a href="/fes.js/guide/i18n.html" class="prev">
|
||
国际化
|
||
</a></span> <span class="next"><a href="/fes.js/guide/unit.html">
|
||
单元测试
|
||
</a>
|
||
→
|
||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||
<script src="/fes.js/assets/js/app.7ac13123.js" defer></script><script src="/fes.js/assets/js/2.56b3886c.js" defer></script><script src="/fes.js/assets/js/45.fb304e2c.js" defer></script><script src="/fes.js/assets/js/10.2329d47f.js" defer></script>
|
||
</body>
|
||
</html>
|