Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
Intelligent_due_diligence
/
dev-doc
4
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Haara: dev_1.1.1
Haarat Tagit
dev-doc
/
yump-guide-v2
/
components
/
README copy.html

README copy.html 222 KB
Pysyvä linkki Historia Raaka

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en-US">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    7. 

  7.     <title>业务组件 | 宇信科技-新一代移动金融开发平台YUMP</title>
    8. 

  8.     <meta name="description" content="">
    9. 

  9.     <link rel="shortcut icon" href="/yump-guide-v2/images/favicon.ico">
    10. 

  10.     <meta name="description" content="Yusys New Generation Mobile Platform.">
    11. 

  11.     <link rel="preload" href="/yump-guide-v2/assets/css/0.styles.55c6ad92.css" as="style"><link rel="preload" href="/yump-guide-v2/assets/js/app.896f6ac7.js" as="script"><link rel="preload" href="/yump-guide-v2/assets/js/2.51c90e44.js" as="script"><link rel="preload" href="/yump-guide-v2/assets/js/1.a9756c7a.js" as="script"><link rel="preload" href="/yump-guide-v2/assets/js/57.003ca5b0.js" as="script"><link rel="prefetch" href="/yump-guide-v2/assets/js/10.b899c03d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/100.96e0ca3e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/101.7a3c98e7.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/102.317715ca.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/103.d1f17eea.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/104.639a7b14.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/105.5ef3a72c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/106.e8145609.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/107.1c4c3b98.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/108.25c1bbb4.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/109.c5cc2d99.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/11.79468af0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/110.5bd65915.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/111.f154840e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/112.6557da1b.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/113.fa7dcb7c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/114.3775b454.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/115.2d8ef594.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/116.f5a4fa70.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/117.91c276de.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/118.24469bef.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/119.7f0f2a6d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/12.af97c3b0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/120.28bcb854.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/121.c73b2ca1.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/122.3b756d9e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/123.787b6261.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/124.3cadb4cb.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/125.aaa20687.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/126.e1f1c469.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/127.51ac4f3c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/128.a389b013.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/129.c902f624.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/13.4240fb0f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/130.c7988b69.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/131.be40d11d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/132.5706a673.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/133.e13e29b7.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/134.63ad6dc2.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/135.b9a9c24c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/136.f4c5bd04.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/137.df75f133.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/138.dd38c4a9.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/139.286cf8c3.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/14.7796bbb6.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/140.b6973a53.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/141.d1f2c245.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/142.416c6362.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/143.27dc8736.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/144.7b9fd1d5.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/145.68432b8f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/146.9418526f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/147.84911b0e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/148.5e5b9fa2.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/149.df59bd0e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/15.32b7468f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/150.cb46d058.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/151.e028671a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/152.99edd436.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/153.de762758.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/154.332cdcb5.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/155.a64303d0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/156.bb98520c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/16.84b2b202.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/17.257af1e4.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/18.068a2108.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/19.b443bc8f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/20.51f5877f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/21.6479fbc0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/22.874c6b4b.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/23.7fadcc50.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/24.5b3c6fee.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/25.9d077073.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/26.d92ec3f7.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/27.38f8f436.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/28.2bd84691.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/29.f7f911b0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/3.2661404a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/30.fe7be147.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/31.8b00765d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/32.b4379835.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/33.7480a1a9.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/34.28155497.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/35.8e1572c6.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/36.88cbe849.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/37.57a0a535.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/38.f5feba8c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/39.099c134a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/4.0605f027.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/40.cb743a61.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/41.9b04589b.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/42.8469b0b2.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/43.9eb1b92c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/44.dc802510.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/45.84fb7590.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/46.3431733e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/47.525cbce2.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/48.16b4219a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/49.f27edbe4.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/5.c75411ab.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/50.7607d9da.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/51.e9c81e5a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/52.ffbc5bbe.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/53.177fa16f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/54.14076286.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/55.f1fab994.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/56.8696946c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/58.033b0211.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/59.cd356469.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/6.1d75269f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/60.8e33f749.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/61.b54c085e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/62.25c04659.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/63.7976f910.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/64.ac643e8d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/65.55e606b3.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/66.90c23713.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/67.18846762.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/68.5ad83596.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/69.5008d2cc.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/7.8edc6650.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/70.8e91e18e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/71.42f55c96.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/72.42ff84ec.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/73.f652329b.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/74.134aa0ff.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/75.87205394.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/76.99b23dfb.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/77.63e82002.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/78.fe5a1829.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/79.ce2f0aba.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/80.4762ae2f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/81.e0f47584.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/82.51d99b1c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/83.9a2bec3a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/84.70e27662.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/85.4150dcba.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/86.ca47122f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/87.9806fd1a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/88.408e5802.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/89.5a7330f6.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/90.71f8fe53.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/91.8c5e0db0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/92.4fecf5f0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/93.73314cb4.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/94.6a90e063.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/95.05ec0274.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/96.df0e55aa.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/97.97112e61.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/98.0a637add.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/99.942048ae.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/vendors~docsearch.8ff0dd7b.js">
    12. 

  12.     <link rel="stylesheet" href="/yump-guide-v2/assets/css/0.styles.55c6ad92.css">
    13. 

  13.   </head>
    14. 

  14.   <body>
    15. 

  15.     <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="/yump-guide-v2/" class="home-link router-link-active"><!----> <span class="site-name">宇信科技-新一代移动金融开发平台YUMP</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/yump-guide-v2/" class="nav-link">
    16. 

  16.   首页
    17. 

  17. </a></div><div class="nav-item"><a href="/yump-guide-v2/guide/" class="nav-link">
    18. 

  18.   教程
    19. 

  19. </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 down"></span></button> <button type="button" aria-label="组件" class="mobile-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="https://vant-contrib.gitee.io/vant/v2/#/zh-CN/" target="_blank" rel="noopener noreferrer" class="nav-link external">
    20. 

  20.   基础组件
    21. 

  21.   <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></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/components/" class="nav-link router-link-active">
    22. 

  22.   业务组件
    23. 

  23. </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="H5-API" class="dropdown-title"><span class="title">H5-API</span> <span class="arrow down"></span></button> <button type="button" aria-label="H5-API" class="mobile-dropdown-title"><span class="title">H5-API</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/yump-guide-v2/api/" class="nav-link">
    24. 

  24.   API
    25. 

  25. </a></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/utils/app.html" class="nav-link">
    26. 

  26.   工具方法
    27. 

  27. </a></li></ul></div></div><div class="nav-item"><a href="/yump-guide-v2/sdk/" class="nav-link">
    28. 

  28.   APP-SDK
    29. 

  29. </a></div><div class="nav-item"><a href="http://210.12.198.141:18080/yump-build/#/login?redirect=%2Fdashboard" target="_blank" rel="noopener noreferrer" class="nav-link external">
    30. 

  30.   云打包
    31. 

  31.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/yump-guide-v2/typical/" class="nav-link">
    32. 

  32.   典型场景
    33. 

  33. </a></div><div class="nav-item"><a href="/yump-guide-v2/nativepackaging/" class="nav-link">
    34. 

  34.   原生打包
    35. 

  35. </a></div><div class="nav-item"><a href="/yump-guide-v2/yuga/config.html" class="nav-link">
    36. 

  36.   埋点
    37. 

  37. </a></div><div class="nav-item"><a href="/yump-guide-v2/FAQ/" class="nav-link">
    38. 

  38.   常见问题
    39. 

  39. </a></div><div class="nav-item"><a href="/yump-guide-v2/contact-us/" class="nav-link">
    40. 

  40.   联系我们
    41. 

  41. </a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/yump-guide-v2/" class="nav-link">
    42. 

  42.   首页
    43. 

  43. </a></div><div class="nav-item"><a href="/yump-guide-v2/guide/" class="nav-link">
    44. 

  44.   教程
    45. 

  45. </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 down"></span></button> <button type="button" aria-label="组件" class="mobile-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="https://vant-contrib.gitee.io/vant/v2/#/zh-CN/" target="_blank" rel="noopener noreferrer" class="nav-link external">
    46. 

  46.   基础组件
    47. 

  47.   <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></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/components/" class="nav-link router-link-active">
    48. 

  48.   业务组件
    49. 

  49. </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="H5-API" class="dropdown-title"><span class="title">H5-API</span> <span class="arrow down"></span></button> <button type="button" aria-label="H5-API" class="mobile-dropdown-title"><span class="title">H5-API</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/yump-guide-v2/api/" class="nav-link">
    50. 

  50.   API
    51. 

  51. </a></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/utils/app.html" class="nav-link">
    52. 

  52.   工具方法
    53. 

  53. </a></li></ul></div></div><div class="nav-item"><a href="/yump-guide-v2/sdk/" class="nav-link">
    54. 

  54.   APP-SDK
    55. 

  55. </a></div><div class="nav-item"><a href="http://210.12.198.141:18080/yump-build/#/login?redirect=%2Fdashboard" target="_blank" rel="noopener noreferrer" class="nav-link external">
    56. 

  56.   云打包
    57. 

  57.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/yump-guide-v2/typical/" class="nav-link">
    58. 

  58.   典型场景
    59. 

  59. </a></div><div class="nav-item"><a href="/yump-guide-v2/nativepackaging/" class="nav-link">
    60. 

  60.   原生打包
    61. 

  61. </a></div><div class="nav-item"><a href="/yump-guide-v2/yuga/config.html" class="nav-link">
    62. 

  62.   埋点
    63. 

  63. </a></div><div class="nav-item"><a href="/yump-guide-v2/FAQ/" class="nav-link">
    64. 

  64.   常见问题
    65. 

  65. </a></div><div class="nav-item"><a href="/yump-guide-v2/contact-us/" class="nav-link">
    66. 

  66.   联系我们
    67. 

  67. </a></div> <!----></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="/yump-guide-v2/components/yuarea.html" class="sidebar-link">yuArea 地区级联选择器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yucheckbox.html" class="sidebar-link">yuCheckbox 复选框</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yuchoosebankcard.html" class="sidebar-link">yuChooseBankcard 选择银行卡</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yudatepicker.html" class="sidebar-link">yuDatePicker 时间选择器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yudoublerecord.html" class="sidebar-link">yuDoubleRecord 视频双录</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yufloorcom.html" class="sidebar-link">yuFloorCom 千人千面组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yugrid.html" class="sidebar-link">yuGrid 宫格组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yuimgswiper.html" class="sidebar-link">yuImgSwiper 图片轮播</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yuinputmoney.html" class="sidebar-link">yuInputMoney 组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yuinputnum.html" class="sidebar-link">yuInputNum 数值输入组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yuocr.html" class="sidebar-link">yuOcr 依赖原生的ocr输入框</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yupasswordinput.html" class="sidebar-link">yuPasswordInput 组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yupay.html" class="sidebar-link">yuPay 付款组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yupdf.html" class="sidebar-link">yuPdf pdf预览组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yupullrefreshlist.html" class="sidebar-link">yuPullRefreshList 下拉刷新上拉加载组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yuradio.html" class="sidebar-link">yuRadio 单选tag</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yuring.html" class="sidebar-link">yuRing 环形组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yusearch.html" class="sidebar-link">yuSearch 实时搜索组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yuselectpicker.html" class="sidebar-link">yuSelectPicker 下拉选择器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yusign.html" class="sidebar-link">yuSign 手写电子签名组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yusmsfield.html" class="sidebar-link">yuSmsField 短信验证组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yusvgicon.html" class="sidebar-link">yuSvgIcon 图标组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yutab.html" class="sidebar-link">yuTab tab选项组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/yump-guide-v2/components/yuupload.html" class="sidebar-link">yuUpload 文件选择上传组件</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="业务组件"><a href="#业务组件" class="header-anchor">#</a> 业务组件</h1> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>业务组件基于<code>vant-ui</code>基础组件二次封装，脚手架中未全局注册，使用时需遵循按需导入原则，从<code>工程目录/src/component</code>下导入组件,功能仅做示例操作，组件源码提供，可自定义扩展修改。</p></div> <h2 id="yusearch-实时搜索组件"><a href="#yusearch-实时搜索组件" class="header-anchor">#</a> yuSearch 实时搜索组件</h2> <p>实时搜索查询组件,实现边搜索边查询，包含防抖或节流实现</p> <h3 id="效果预览"><a href="#效果预览" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-search-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    68. 

  68.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-search</span> <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>searchFn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:delay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">delayType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>throttle<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>yu-search</span><span class="token punctuation">&gt;</span></span>
    69. 

  69. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    70. 

  70. <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">
    71. 

  71.   <span class="token keyword">import</span> yuSearch <span class="token keyword">from</span> <span class="token string">'@/components/yu-search/index.vue'</span><span class="token punctuation">;</span>
    72. 

  72.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    73. 

  73.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    74. 

  74.      yuSearch
    75. 

  75.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    76. 

  76.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    77. 

  77.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    78. 

  78.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    79. 

  79.     <span class="token function">searchFn</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    80. 

  80.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'页面查询触发'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    81. 

  81.     <span class="token punctuation">}</span>
    82. 

  82.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    83. 

  83.   <span class="token punctuation">}</span>
    84. 

  84. </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>
    85. 

  85. </code></pre></div><h3 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>placeholder</td> <td>搜索框提示</td> <td>string</td> <td>-</td> <td>请输入搜索关键字</td></tr> <tr><td>val</td> <td>所搜框的默认值</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>delay</td> <td>延迟搜索时间，单位毫秒</td> <td>string</td> <td>-</td> <td>2000</td></tr> <tr><td>delayType</td> <td>延迟搜索类型，节流、防抖</td> <td>string</td> <td>debounce-防抖，throttle-节流</td> <td>debounce</td></tr></tbody></table> <h3 id="events"><a href="#events" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>search</td> <td>查询回调触发</td> <td>value 当前搜索框的值</td></tr> <tr><td>blur</td> <td>查询框失去焦点</td> <td>value 当前搜索框的值</td></tr></tbody></table> <h2 id="yupay-付款组件"><a href="#yupay-付款组件" class="header-anchor">#</a> yuPay 付款组件</h2> <p>付款组件，点击付款的底部弹出框，通常与<a href="#yuPasswordInput">yuPasswordInput</a>密码输入组件、<a href="#yuChooseBankcard">yuChooseBankcard</a>银行卡选择组件搭配使用</p> <h3 id="效果预览-2"><a href="#效果预览-2" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-pay-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    86. 

  86.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-pay</span> <span class="token attr-name">:pay-show.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>payShow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>向宇信科技付款<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:bankName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bankName<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:bankNum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>banNum<span class="token punctuation">&quot;</span></span> <span class="token attr-name">money</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:bankLogo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bankLog<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@comfirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>comfirm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@changePay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changePay<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>yu-pay</span><span class="token punctuation">&gt;</span></span>
    87. 

  87.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-password-input</span> <span class="token attr-name">:password-show.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordShow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:money</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>money<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@cancel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cancelPay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transfer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入六位支付密码<span class="token punctuation">&quot;</span></span> <span class="token attr-name">receiveNum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2734739574547716<span class="token punctuation">&quot;</span></span> <span class="token attr-name">receiveBank</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>中国银行<span class="token punctuation">&quot;</span></span> <span class="token attr-name">receiveName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>宇信小甜甜<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:payAct</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>banNum<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@comfirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>comfirmPay<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>yu-password-input</span><span class="token punctuation">&gt;</span></span>
    88. 

  88.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-choose-bankcard</span> <span class="token attr-name">:show.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chooseShow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:card-list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cardList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@check</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkFn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@cancel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chooseShow = false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@comfirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>comfirmChooseBank<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>yu-choose-bankcard</span><span class="token punctuation">&gt;</span></span>
    89. 

  89.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<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>payShow = true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">block</span><span class="token punctuation">&gt;</span></span>选择支付<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
    90. 

  90. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    91. 

  91. <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">
    92. 

  92.   <span class="token keyword">import</span> yuPay <span class="token keyword">from</span> <span class="token string">'@/components/yu-pay/index.vue'</span>
    93. 

  93.   <span class="token keyword">import</span> yuPasswordInput <span class="token keyword">from</span> <span class="token string">'@/components/yu-password-input/index.vue'</span>
    94. 

  94.   <span class="token keyword">import</span> yuChooseBankcard <span class="token keyword">from</span> <span class="token string">'@/components/yu-choose-bankcard/index.vue'</span>
    95. 

  95.   <span class="token keyword">import</span> <span class="token constant">ZGYH</span> <span class="token keyword">from</span> <span class="token string">'@/assets/img/banklogo/104100000004.png'</span>
    96. 

  96.   <span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">BANK_TYPE</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/common/params/index.js'</span>
    97. 

  97.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    98. 

  98.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    99. 

  99.       demoSection<span class="token punctuation">,</span>
    100. 

  100.       demoBlock<span class="token punctuation">,</span>
    101. 

  101.       yuPay<span class="token punctuation">,</span> 
    102. 

  102.       yuPasswordInput<span class="token punctuation">,</span>
    103. 

  103.       yuChooseBankcard
    104. 

  104.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    105. 

  105.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    106. 

  106.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    107. 

  107.         <span class="token literal-property property">passwordShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    108. 

  108.         <span class="token literal-property property">payShow</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    109. 

  109.         <span class="token literal-property property">banNum</span><span class="token operator">:</span> <span class="token string">'6217898356782450001'</span><span class="token punctuation">,</span>
    110. 

  110.         <span class="token literal-property property">bankLog</span><span class="token operator">:</span> <span class="token constant">ZGYH</span><span class="token punctuation">,</span>
    111. 

  111.         <span class="token literal-property property">bankName</span><span class="token operator">:</span> <span class="token string">'中国银行'</span><span class="token punctuation">,</span>
    112. 

  112.         <span class="token literal-property property">money</span><span class="token operator">:</span> <span class="token string">'2000'</span><span class="token punctuation">,</span>
    113. 

  113.         <span class="token literal-property property">chooseShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    114. 

  114.         <span class="token literal-property property">cardList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    115. 

  115.           <span class="token punctuation">{</span>
    116. 

  116.             <span class="token literal-property property">accountNo</span><span class="token operator">:</span> <span class="token string">'6217898356782452098'</span><span class="token punctuation">,</span>
    117. 

  117.             <span class="token literal-property property">checked</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    118. 

  118.             <span class="token literal-property property">bankNo</span><span class="token operator">:</span> <span class="token string">'103100000026'</span>
    119. 

  119.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    120. 

  120.           <span class="token punctuation">{</span>
    121. 

  121.             <span class="token literal-property property">accountNo</span><span class="token operator">:</span> <span class="token string">'6217898356782450927'</span><span class="token punctuation">,</span>
    122. 

  122.             <span class="token literal-property property">bankNo</span><span class="token operator">:</span> <span class="token string">'104100000004'</span>
    123. 

  123.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    124. 

  124.           <span class="token punctuation">{</span>
    125. 

  125.             <span class="token literal-property property">accountNo</span><span class="token operator">:</span> <span class="token string">'6217898356782453546'</span><span class="token punctuation">,</span>
    126. 

  126.             <span class="token literal-property property">bankNo</span><span class="token operator">:</span> <span class="token string">'105100000017'</span>
    127. 

  127.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    128. 

  128.           <span class="token punctuation">{</span>
    129. 

  129.             <span class="token literal-property property">accountNo</span><span class="token operator">:</span> <span class="token string">'621789835678245323'</span><span class="token punctuation">,</span>
    130. 

  130.             <span class="token literal-property property">bankNo</span><span class="token operator">:</span> <span class="token string">'308584000013'</span>
    131. 

  131.           <span class="token punctuation">}</span>
    132. 

  132.         <span class="token punctuation">]</span>     
    133. 

  133.       <span class="token punctuation">}</span><span class="token punctuation">;</span>
    134. 

  134.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    135. 

  135.     <span class="token function">activated</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    136. 

  136.       <span class="token keyword">this</span><span class="token punctuation">.</span>payShow <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    137. 

  137.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    138. 

  138.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    139. 

  139.       <span class="token function">comfirm</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    140. 

  140.         <span class="token keyword">this</span><span class="token punctuation">.</span>payShow <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    141. 

  141.         <span class="token keyword">this</span><span class="token punctuation">.</span>passwordShow <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    142. 

  142.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'输入密码111'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span>
    143. 

  143.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    144. 

  144.       <span class="token function">comfirmPay</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    145. 

  145.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'确认支付'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span>
    146. 

  146.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    147. 

  147.       <span class="token function">cancelPay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    148. 

  148. 

  149.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    150. 

  150.       <span class="token function">changePay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    151. 

  151.         <span class="token keyword">this</span><span class="token punctuation">.</span>chooseShow <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    152. 

  152.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    153. 

  153.       <span class="token function">checkFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    154. 

  154. 

  155.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    156. 

  156.       <span class="token function">comfirmChooseBank</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    157. 

  157.         <span class="token keyword">this</span><span class="token punctuation">.</span>banNum <span class="token operator">=</span> item<span class="token punctuation">.</span>accountNo<span class="token punctuation">;</span>
    158. 

  158.         <span class="token keyword">this</span><span class="token punctuation">.</span>bankLog <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">@/assets/img/banklogo/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>bankNo<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.png</span><span class="token template-punctuation string">`</span></span>
    159. 

  159.         <span class="token keyword">this</span><span class="token punctuation">.</span>bankName <span class="token operator">=</span> <span class="token constant">BANK_TYPE</span><span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>bankNo<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    160. 

  160.       <span class="token punctuation">}</span>
    161. 

  161. 

  162.     <span class="token punctuation">}</span>
    163. 

  163.   <span class="token punctuation">}</span><span class="token punctuation">;</span>
    164. 

  164. </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>
    165. 

  165. 

  166. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    167. 

  167. 

  168. </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>
    169. 

  169. 

  170. </code></pre></div><h3 id="attributes-2"><a href="#attributes-2" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>payShow</td> <td>显示弹出层</td> <td>Boolean</td> <td>true false</td> <td>false</td></tr> <tr><td>bankName</td> <td>付款标题</td> <td>string</td> <td>-</td> <td>付款</td></tr> <tr><td>bankNum</td> <td>付款金额</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>money</td> <td>付款金额</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>title</td> <td>付款标题</td> <td>string</td> <td>-</td> <td>付款</td></tr> <tr><td>banklogo</td> <td>付款账户银行logo</td> <td>png svg 等</td> <td>-</td> <td>-</td></tr> <tr><td>comfirmText</td> <td>提交按钮文字</td> <td>string</td> <td>-</td> <td>确定</td></tr></tbody></table> <h3 id="events-2"><a href="#events-2" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>comfirm</td> <td>确定付款按钮触发</td> <td></td></tr> <tr><td>changePay</td> <td>切换付款账户</td> <td></td></tr> <tr><td>close</td> <td>关闭弹出框</td> <td></td></tr></tbody></table> <h2 id="yupdf-pdf预览组件"><a href="#yupdf-pdf预览组件" class="header-anchor">#</a> yuPdf pdf预览组件</h2> <p>pdf文件预览组件，支持在线pdf预览等，纯h5实现，不依赖原生</p> <h3 id="效果预览-3"><a href="#效果预览-3" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-pdf-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <p>依赖插件安装：</p> <p>yarn add pdfh5</p> <p>yarn add canvas@2.8.0 --ignore-scripts</p> <p>yarn add dommatrix</p> <p>yarn add web-streams-polyfill</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>template</span><span class="token punctuation">&gt;</span></span>
    171. 

  171.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    172. 

  172.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-pdf</span> <span class="token attr-name">:url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pdfUrl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>800px'<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>100%'<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>yu-pdf</span><span class="token punctuation">&gt;</span></span>
    173. 

  173.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    174. 

  174. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    175. 

  175. 

  176. <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">
    177. 

  177. <span class="token keyword">import</span> yuPdf <span class="token keyword">from</span> <span class="token string">'@/components/yu-pdf/index.vue'</span>
    178. 

  178. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    179. 

  179.   <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    180. 

  180.     yuPdf
    181. 

  181.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    182. 

  182.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    183. 

  183.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    184. 

  184.       <span class="token literal-property property">pdfUrl</span><span class="token operator">:</span> <span class="token string">'http://210.12.198.141:30527/cmis-contract/api/handlerfile/reviewPdfWithWaterMark?contNo=BSNPLANID20240422000713'</span>
    185. 

  185.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    186. 

  186.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    187. 

  187.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    188. 

  188.     
    189. 

  189.   <span class="token punctuation">}</span>
    190. 

  190. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    191. 

  191. </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>
    192. 

  192. </code></pre></div><h3 id="attributes-3"><a href="#attributes-3" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>pdfUrl</td> <td>pdf文件地址，支持在线与本地</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>height</td> <td>pdf展示窗口高度</td> <td>string（100%/200px）</td> <td>-</td> <td>-</td></tr> <tr><td>width</td> <td>pdf展示窗口宽度</td> <td>string（100%/200px）</td> <td>-</td> <td>-</td></tr></tbody></table> <h2 id="yupasswordinput-组件"><a href="#yupasswordinput-组件" class="header-anchor">#</a> yuPasswordInput 组件</h2> <p>密码输入组件，弹出框形式。</p> <h3 id="效果预览-4"><a href="#效果预览-4" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-password-input-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <p>基础示例</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>template</span><span class="token punctuation">&gt;</span></span>
    193. 

  193.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    194. 

  194.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</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>passwordShow = 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>van-button</span><span class="token punctuation">&gt;</span></span>
    195. 

  195.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-password-input</span> <span class="token attr-name">:password-show.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>passwordShow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:money</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>money<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@cancel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cancelPay<span class="token punctuation">&quot;</span></span>
    196. 

  196.       <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>transfer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入六位支付密码<span class="token punctuation">&quot;</span></span> 
    197. 

  197.       <span class="token attr-name">receiveNum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2734739574547716<span class="token punctuation">&quot;</span></span>
    198. 

  198.       <span class="token attr-name">receiveBank</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>中国银行<span class="token punctuation">&quot;</span></span> <span class="token attr-name">receiveName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>宇信小甜甜<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:payAct</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>banNum<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>comfirmPay<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    199. 

  199.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>yu-password-input</span><span class="token punctuation">&gt;</span></span>
    200. 

  200.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    201. 

  201. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    202. 

  202. <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">
    203. 

  203.   <span class="token keyword">import</span> yuPasswordInput <span class="token keyword">from</span> <span class="token string">'@/components/yu-password-input/index.vue'</span><span class="token punctuation">;</span>
    204. 

  204.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    205. 

  205.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    206. 

  206.      yuPasswordInput
    207. 

  207.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    208. 

  208.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    209. 

  209.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    210. 

  210.         <span class="token literal-property property">passwordShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    211. 

  211.         <span class="token literal-property property">money</span><span class="token operator">:</span> <span class="token string">'2000'</span><span class="token punctuation">,</span>
    212. 

  212.         <span class="token literal-property property">banNum</span><span class="token operator">:</span> <span class="token string">'6217898356782450001'</span><span class="token punctuation">,</span>
    213. 

  213.       <span class="token punctuation">}</span><span class="token punctuation">;</span>
    214. 

  214.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    215. 

  215.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    216. 

  216.       <span class="token function">cancelPay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    217. 

  217.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    218. 

  218.       <span class="token function">comfirmPay</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    219. 

  219.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;输入密码&quot;</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span>
    220. 

  220.       <span class="token punctuation">}</span>
    221. 

  221.     <span class="token punctuation">}</span>
    222. 

  222.   <span class="token punctuation">}</span><span class="token punctuation">;</span>
    223. 

  223. </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>
    224. 

  224. </code></pre></div><h3 id="attributes-4"><a href="#attributes-4" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>type</td> <td>弹出框场景类型</td> <td>String</td> <td>transfer  simple   complex</td> <td>transfer</td></tr> <tr><td>passwordShow</td> <td>是否显示弹出框</td> <td>Boolean</td> <td>false true</td> <td>false</td></tr> <tr><td>title</td> <td>标题</td> <td>String</td> <td>-</td> <td>请输入取款密码</td></tr> <tr><td>subTitle</td> <td>小标题type=&quot;complex&quot;时有效</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>errorInfo</td> <td>错误提示信息</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>actName</td> <td>账户名称type=&quot;complex&quot;时有效</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>money</td> <td>转账金额type=&quot;transfer&quot;时有效</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>payAct</td> <td>转账付款账户type=&quot;transfer&quot;时有效</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>receiveName</td> <td>收款名称 type=&quot;transfer&quot;时有效</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>receiveBank</td> <td>收款行type=&quot;transfer&quot;时且receiveName不为空时有效</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>receiveNum</td> <td>收款账号type=&quot;transfer&quot;时有效</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>randomKeyOrder</td> <td>是否开启随机数键盘</td> <td>Boolean</td> <td>true false</td> <td>true</td></tr> <tr><td>pwdLength</td> <td>密码长度</td> <td>String</td> <td>-</td> <td>6</td></tr> <tr><td>isValidate</td> <td>是否开启密码校验，默认包含长度校验、非空校验 type=&quot;simple&quot;时无效</td> <td>Boolean</td> <td>true false</td> <td>true</td></tr></tbody></table> <h3 id="events-3"><a href="#events-3" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>input</td> <td>键盘输入事件</td> <td>输入的值</td></tr> <tr><td>delete</td> <td>键盘删除事件</td> <td>当前剩余密码值</td></tr> <tr><td>focus</td> <td>键盘聚焦事件</td> <td>-</td></tr> <tr><td>confirm</td> <td>确定按钮点击事件</td> <td>当前输入的密码值</td></tr> <tr><td>cancel</td> <td>单击右上角关闭图标点击确认取消回调事件</td> <td>-</td></tr></tbody></table> <h2 id="yuinputmoney-组件"><a href="#yuinputmoney-组件" class="header-anchor">#</a> yuInputMoney 组件</h2> <p>金额输入组件：支持表单项和其他两种展示方式、支持自动格式化金额、支持银行名称logo定制、支持单位自动显示</p> <h3 id="效果预览-5"><a href="#效果预览-5" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-input-money-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <p>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>template</span><span class="token punctuation">&gt;</span></span>
    225. 

  225.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-input-money</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputMoney<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入金额<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isFormItem</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>yu-input-money</span><span class="token punctuation">&gt;</span></span>
    226. 

  226. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    227. 

  227. <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">
    228. 

  228.   <span class="token keyword">import</span> yuInputMoney <span class="token keyword">from</span> <span class="token string">'@/components/yu-input-money/index.vue'</span><span class="token punctuation">;</span>
    229. 

  229.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    230. 

  230.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    231. 

  231.      yuInputMoney
    232. 

  232.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    233. 

  233.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    234. 

  234.       <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    235. 

  235.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    236. 

  236.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    237. 

  237.       <span class="token function">onInput</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    238. 

  238.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'获得输入值------------- '</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    239. 

  239.       <span class="token punctuation">}</span>
    240. 

  240.     <span class="token punctuation">}</span>
    241. 

  241.   <span class="token punctuation">}</span><span class="token punctuation">;</span>
    242. 

  242. </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>
    243. 

  243. </code></pre></div><p>2.金额输入形式</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>template</span><span class="token punctuation">&gt;</span></span>
    244. 

  244.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-input-money</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputMoney<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入金额<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onInput<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:isFormItem</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<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>yu-input-money</span><span class="token punctuation">&gt;</span></span>
    245. 

  245. 

  246. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    247. 

  247. <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">
    248. 

  248.   <span class="token keyword">import</span> yuInputMoney <span class="token keyword">from</span> <span class="token string">'@/components/yu-input-money/index.vue'</span><span class="token punctuation">;</span>
    249. 

  249.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    250. 

  250.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    251. 

  251.      yuInputMoney
    252. 

  252.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    253. 

  253.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    254. 

  254.       <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    255. 

  255.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    256. 

  256.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    257. 

  257.       <span class="token function">onInput</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    258. 

  258.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'获得输入值------------- '</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    259. 

  259.       <span class="token punctuation">}</span>
    260. 

  260.     <span class="token punctuation">}</span>
    261. 

  261.   <span class="token punctuation">}</span><span class="token punctuation">;</span>
    262. 

  262. </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>
    263. 

  263. </code></pre></div><h3 id="attributes-5"><a href="#attributes-5" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>label</td> <td>左侧标签</td> <td>String</td> <td>-</td> <td>金额 ¥</td></tr> <tr><td>placeholder</td> <td>输入框占位</td> <td>String</td> <td>-</td> <td>请输入</td></tr> <tr><td>title</td> <td>键盘名称</td> <td>String</td> <td>-</td> <td>宇信银行</td></tr> <tr><td>disabled</td> <td>是否禁用</td> <td>boolean</td> <td>true、false</td> <td>false</td></tr> <tr><td>showunit</td> <td>是否显示计数单位,最大显示到百亿</td> <td>boolean</td> <td>true、false</td> <td>true</td></tr> <tr><td>maxlength</td> <td>密码键盘最大输入长度</td> <td>Number</td> <td>-</td> <td>11</td></tr> <tr><td>isFormItem</td> <td>是否显示为表单项形式</td> <td>boolean</td> <td>true、false</td> <td>false</td></tr> <tr><td>bankNo</td> <td>银行行号用于反显银行卡logo,键盘左下角银行logo,src/assets/img/banklogo目录下可查看logo图标，文件名即为行号</td> <td>String</td> <td>-</td> <td>yubanktest</td></tr></tbody></table> <h3 id="events-4"><a href="#events-4" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>input</td> <td>输入框 input 事件</td> <td>输入的值</td></tr></tbody></table> <h2 id="yuinputnum-数值输入组件"><a href="#yuinputnum-数值输入组件" class="header-anchor">#</a> yuInputNum 数值输入组件</h2> <h3 id="效果预览-6"><a href="#效果预览-6" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-input-num-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <div class="language-html extra-class"><pre class="language-html"><code>&lt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    264. 

  264.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    265. 

  265.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-input-num</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>guarAmt1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>thsGuarAmt<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>金额<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入本次担保金额<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: '请输入本次担保金额' }]<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    266. 

  266.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-input-num</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>guarAmt2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>thsGuarAmt<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>正整数<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: '请输入' }]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:numType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>digit'<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    267. 

  267.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-input-num</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>guarAmt3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>thsGuarAmt<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>数字<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: '请输入' }]<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:numType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>number'<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:clearable</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>
    268. 

  268.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    269. 

  269. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    270. 

  270. 

  271. <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">
    272. 

  272. <span class="token keyword">import</span> yuInputNum <span class="token keyword">from</span> <span class="token string">'@/components/yu-input-num/index.vue'</span>
    273. 

  273. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    274. 

  274.   <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    275. 

  275.     yuInputNum
    276. 

  276.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    277. 

  277.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    278. 

  278.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    279. 

  279.       <span class="token literal-property property">guarAmt1</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    280. 

  280.       <span class="token literal-property property">guarAmt2</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    281. 

  281.       <span class="token literal-property property">guarAmt3</span><span class="token operator">:</span> <span class="token string">''</span>
    282. 

  282. 

  283.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    284. 

  284.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    285. 

  285.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    286. 

  286.     <span class="token function">changeIndex</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    287. 

  287.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'changeIndex: '</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>
    288. 

  288.     <span class="token punctuation">}</span>
    289. 

  289.   <span class="token punctuation">}</span>
    290. 

  290. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    291. 

  291. </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>
    292. 

  292. 

  293. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    294. 

  294. 

  295. </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>
    296. 

  296. 

  297. </code></pre></div><h3 id="attributes-6"><a href="#attributes-6" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>v-model</td> <td>双向绑定value值</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>label</td> <td>左侧标签</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>label-width</td> <td>标题宽度</td> <td>string（px）</td> <td>-</td> <td>-</td></tr> <tr><td>placeholder</td> <td>输入框占位</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>details</td> <td>是否是详情反显，不可点击，正常色</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>disabled</td> <td>是否禁用</td> <td>boolean</td> <td>true、false</td> <td>-</td></tr> <tr><td>required</td> <td>选项框是否必输</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>rules</td> <td>选项框校验规则</td> <td>Array</td> <td>-</td> <td>-</td></tr> <tr><td>maxLength</td> <td>密码键盘最大输入长度</td> <td>Number</td> <td>-</td> <td>16</td></tr> <tr><td>numType</td> <td>类型 digit-正整数 number-数字 money-金额(千分位金额格式化)</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>unit</td> <td>单位</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>multiple</td> <td>放大倍数</td> <td>number</td> <td>-</td> <td>-</td></tr></tbody></table> <h3 id="events-5"><a href="#events-5" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>input</td> <td>输入框 input 事件</td> <td>输入的值</td></tr> <tr><td>focus</td> <td>输入框 focus 事件</td> <td>组件对象</td></tr> <tr><td>blur</td> <td>输入框 input 事件</td> <td>组件对象</td></tr></tbody></table> <h2 id="yuocr-依赖原生的ocr输入框"><a href="#yuocr-依赖原生的ocr输入框" class="header-anchor">#</a> yuOcr 依赖原生的ocr输入框</h2> <p>依赖原生提供的ocr能力，封装的ocr输入框，目前支持身份证识别、银行卡识别，可在此基础上扩展</p> <h3 id="效果预览-7"><a href="#效果预览-7" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-ocr-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    298. 

  298.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    299. 

  299.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-ocr</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>身份证号码<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:idType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>2'<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请录入证件号码<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ocrResult1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cert<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeFn1<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>yu-ocr</span><span class="token punctuation">&gt;</span></span>
    300. 

  300.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-ocr</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>银行卡账号<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:idType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>4'<span class="token punctuation">&quot;</span></span> <span class="token attr-name">required</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请录入银行卡号码<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ocrResult2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cert<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeFn2<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>yu-ocr</span><span class="token punctuation">&gt;</span></span>
    301. 

  301.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    302. 

  302. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    303. 

  303. 

  304. <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">
    305. 

  305. <span class="token keyword">import</span> yuOcr <span class="token keyword">from</span> <span class="token string">'@/components/yu-ocr/index.vue'</span>
    306. 

  306. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    307. 

  307.   <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    308. 

  308.     yuOcr
    309. 

  309.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    310. 

  310.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    311. 

  311.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    312. 

  312.       <span class="token literal-property property">ocrResult1</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    313. 

  313.       <span class="token literal-property property">ocrResult2</span><span class="token operator">:</span> <span class="token string">''</span>
    314. 

  314.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    315. 

  315.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    316. 

  316.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    317. 

  317.     <span class="token function">changeFn1</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    318. 

  318.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">' ======== &gt;&gt;&gt;&gt;'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ocrResult1<span class="token punctuation">)</span>
    319. 

  319.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    320. 

  320.     <span class="token function">changeFn2</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    321. 

  321.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">' ======== &gt;&gt;&gt;&gt;'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ocrResult2<span class="token punctuation">)</span>
    322. 

  322.     <span class="token punctuation">}</span>
    323. 

  323.   <span class="token punctuation">}</span>
    324. 

  324. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    325. 

  325. </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>
    326. 

  326. </code></pre></div><h3 id="attributes-7"><a href="#attributes-7" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>v-model</td> <td>双向绑定值，识别结果</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>label</td> <td>标题</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>label-width</td> <td>标题宽度</td> <td>string（px）</td> <td>-</td> <td>-</td></tr> <tr><td>disabled</td> <td>是否不可编辑，暗色</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>details</td> <td>是否是详情反显，不可点击，正常色</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>placeholder</td> <td>选项框placeholder</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>required</td> <td>选项框是否必输</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>rules</td> <td>选项框校验规则</td> <td>Array</td> <td>-</td> <td>-</td></tr> <tr><td>idType</td> <td>识别证件类型</td> <td>string(目前支持2和4，主要是回调数据差异，其他类型可自行扩展)</td> <td>'0': '通用文字识别'  '1': '身份证识别'  '2': '身份证正面识别'  '3': '身份证背面识别'  '4': '银行卡识别'  '5': '网络图片识别'  '6': '驾驶证证识别'  '7': '行驶证识别'  '8': '车牌识别'  '9': '营业执照识别'  '10': '票据识别'</td> <td>-</td></tr></tbody></table> <h3 id="events-6"><a href="#events-6" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>change</td> <td>识别结果输出</td> <td></td></tr></tbody></table> <h2 id="yuchoosebankcard-选择银行卡"><a href="#yuchoosebankcard-选择银行卡" class="header-anchor">#</a> yuChooseBankcard 选择银行卡</h2> <p>封装选择银行卡组件</p> <h3 id="效果预览-8"><a href="#效果预览-8" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-choose-bankcard-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    327. 

  327.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    328. 

  328.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</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>chooseShow = 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>van-button</span><span class="token punctuation">&gt;</span></span>
    329. 

  329.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-choose-bankcard</span> <span class="token attr-name">:show.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chooseShow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:card-list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cardList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@check</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkFn<span class="token punctuation">&quot;</span></span> 
    330. 

  330.     <span class="token attr-name">@cancel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chooseShow = false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@comfirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chooseShow = false<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>yu-choose-bankcard</span><span class="token punctuation">&gt;</span></span>
    331. 

  331.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    332. 

  332. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    333. 

  333. <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">
    334. 

  334.   <span class="token keyword">import</span> yuChooseBankcard <span class="token keyword">from</span> <span class="token string">'@/components/yu-choose-bankcard/index.vue'</span><span class="token punctuation">;</span>
    335. 

  335.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    336. 

  336.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    337. 

  337.      yuChooseBankcard
    338. 

  338.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    339. 

  339.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    340. 

  340.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    341. 

  341.         <span class="token literal-property property">chooseShow</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    342. 

  342.         <span class="token literal-property property">cardList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    343. 

  343.           <span class="token punctuation">{</span>
    344. 

  344.             <span class="token literal-property property">accountNo</span><span class="token operator">:</span> <span class="token string">'6217898356782452098'</span><span class="token punctuation">,</span>
    345. 

  345.             <span class="token literal-property property">checked</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    346. 

  346.             <span class="token literal-property property">bankNo</span><span class="token operator">:</span> <span class="token string">'103100000026'</span>
    347. 

  347.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    348. 

  348.           <span class="token punctuation">{</span>
    349. 

  349.             <span class="token literal-property property">accountNo</span><span class="token operator">:</span> <span class="token string">'6217898356782450927'</span><span class="token punctuation">,</span>
    350. 

  350.             <span class="token literal-property property">bankNo</span><span class="token operator">:</span> <span class="token string">'104100000004'</span>
    351. 

  351.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    352. 

  352.           <span class="token punctuation">{</span>
    353. 

  353.             <span class="token literal-property property">accountNo</span><span class="token operator">:</span> <span class="token string">'6217898356782453546'</span><span class="token punctuation">,</span>
    354. 

  354.             <span class="token literal-property property">bankNo</span><span class="token operator">:</span> <span class="token string">'105100000017'</span>
    355. 

  355.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    356. 

  356.           <span class="token punctuation">{</span>
    357. 

  357.             <span class="token literal-property property">accountNo</span><span class="token operator">:</span> <span class="token string">'621789835678245323'</span><span class="token punctuation">,</span>
    358. 

  358.             <span class="token literal-property property">bankNo</span><span class="token operator">:</span> <span class="token string">'308584000013'</span>
    359. 

  359.           <span class="token punctuation">}</span>
    360. 

  360.         <span class="token punctuation">]</span>
    361. 

  361.       <span class="token punctuation">}</span>
    362. 

  362.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    363. 

  363.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    364. 

  364.       <span class="token function">checkFn</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    365. 

  365.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'check触发'</span><span class="token punctuation">,</span> a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
    366. 

  366.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    367. 

  367.       <span class="token function">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    368. 

  368.         <span class="token comment">// 取消</span>
    369. 

  369.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    370. 

  370.       <span class="token function">comfirm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    371. 

  371.         <span class="token comment">// 提交</span>
    372. 

  372.       <span class="token punctuation">}</span>
    373. 

  373.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    374. 

  374.   <span class="token punctuation">}</span>
    375. 

  375. </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>
    376. 

  376. </code></pre></div><h3 id="attributes-8"><a href="#attributes-8" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>show</td> <td>显示选择页面</td> <td>Boolean</td> <td>true false</td> <td>false</td></tr> <tr><td>title</td> <td>标题</td> <td>String</td> <td>-</td> <td>选择账号</td></tr> <tr><td>cancelTxt</td> <td>取消按钮文字</td> <td>string</td> <td>-</td> <td>取消</td></tr> <tr><td>confirmTxt</td> <td>确定按钮文字</td> <td>string</td> <td>-</td> <td>确定</td></tr> <tr><td>cardList</td> <td>付款信息列表，{accountNo:'账号', bankNo: '行号'}</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>checkedData</td> <td>选中的账号信息{accountNo:'账号', bankNo: '行号'}, 用于反显选中状态</td> <td>Object</td> <td>-</td> <td>-</td></tr> <tr><td>needAdd</td> <td>是否需要添加新卡按钮</td> <td>Boolean</td> <td>true false</td> <td>true</td></tr></tbody></table> <h3 id="events-7"><a href="#events-7" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>comfirm</td> <td>确定付款按钮触发</td> <td>(index, item), 账户列表索引 ，账户信息</td></tr> <tr><td>cancel</td> <td>取消按钮触发</td> <td></td></tr> <tr><td>check</td> <td>选中账户触发</td> <td>(index, item), 账户列表索引 ，账户信息</td></tr> <tr><td>addCard</td> <td>添加新卡</td> <td>-</td></tr></tbody></table> <h2 id="yudatepicker-时间选择器"><a href="#yudatepicker-时间选择器" class="header-anchor">#</a> yuDatePicker 时间选择器</h2> <h3 id="效果预览-9"><a href="#效果预览-9" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-date-picker-demo" width="375" height="667" frameborder="0" overflow="" allowfullscreen="allowfullscreen"></iframe> <p>选择日期</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>template</span><span class="token punctuation">&gt;</span></span>
    377. 

  377.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-date-picker</span> 
    378. 

  378.   <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectDate1<span class="token punctuation">&quot;</span></span> 
    379. 

  379.   <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>endDate<span class="token punctuation">&quot;</span></span> 
    380. 

  380.   <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>合同结束日<span class="token punctuation">&quot;</span></span> 
    381. 

  381.   <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>150px<span class="token punctuation">&quot;</span></span>  
    382. 

  382.   <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> 
    383. 

  383.   <span class="token attr-name">:details</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> 
    384. 

  384.   <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请选择<span class="token punctuation">&quot;</span></span> 
    385. 

  385.   <span class="token attr-name">right-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>share-o<span class="token punctuation">&quot;</span></span> 
    386. 

  386.   <span class="token attr-name">required</span> 
    387. 

  387.   <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: '请选择合同结束日' }]<span class="token punctuation">&quot;</span></span> 
    388. 

  388.   <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yyyy年MM月dd日<span class="token punctuation">&quot;</span></span> 
    389. 

  389.   <span class="token attr-name">:minDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>new Date(2022,0,1)<span class="token punctuation">&quot;</span></span> 
    390. 

  390.   <span class="token attr-name">:maxDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>new Date(2025,12,0)<span class="token punctuation">&quot;</span></span> 
    391. 

  391.   <span class="token attr-name">:readonly</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> 
    392. 

  392.   <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeSelect<span class="token punctuation">&quot;</span></span>
    393. 

  393.   <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    394. 

  394. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    395. 

  395. <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">
    396. 

  396.   <span class="token keyword">import</span> yuCheckbox <span class="token keyword">from</span> <span class="token string">'@/components/yu-checkbox/index.vue'</span>
    397. 

  397.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    398. 

  398.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    399. 

  399.       yuDatePicker
    400. 

  400.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    401. 

  401.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    402. 

  402.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    403. 

  403.         <span class="token literal-property property">selectDate1</span><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>
    404. 

  404.       <span class="token punctuation">}</span><span class="token punctuation">;</span>
    405. 

  405.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    406. 

  406.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    407. 

  407.       <span class="token function">changeSelect</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    408. 

  408.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'==changeSelect=======&gt;'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectDate1<span class="token punctuation">)</span>
    409. 

  409.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    410. 

  410.       <span class="token function">changeInput</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    411. 

  411.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'==changeInput=======&gt;'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectDate1<span class="token punctuation">)</span>
    412. 

  412.       <span class="token punctuation">}</span>
    413. 

  413.     <span class="token punctuation">}</span>
    414. 

  414.   <span class="token punctuation">}</span>
    415. 

  415. </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>
    416. 

  416. </code></pre></div><h3 id="attributes-9"><a href="#attributes-9" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>v-model</td> <td>双向绑定值</td> <td>string(2024-04-10 00:00:02)/Date</td> <td>-</td> <td>-</td></tr> <tr><td>label</td> <td>标题</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>label-width</td> <td>标题宽度</td> <td>string（px）</td> <td>-</td> <td>-</td></tr> <tr><td>disabled</td> <td>是否不可编辑，暗色</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>details</td> <td>是否是详情反显，不可点击，正常色</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>placeholder</td> <td>选项框placeholder</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>right-icon</td> <td>选项框右侧图标名</td> <td>string</td> <td>支持vant图标库（icon）设置</td> <td>-</td></tr> <tr><td>required</td> <td>选项框是否必输</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>rules</td> <td>选项框校验规则</td> <td>Array</td> <td>-</td> <td>-</td></tr> <tr><td>format</td> <td>日期格式化</td> <td>string</td> <td>yyyy年MM月dd日/yyyy-MM-dd。。。</td> <td>-</td></tr> <tr><td>minDate</td> <td>选择器最小时间</td> <td>Date</td> <td>-</td> <td>-</td></tr> <tr><td>maxDate</td> <td>选择器最大时间</td> <td>Date</td> <td>-</td> <td>-</td></tr> <tr><td>readonly</td> <td>是否只读，只可选中查看，不可切换日期</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>maxDate</td> <td>选择器最大时间</td> <td>Date</td> <td>-</td> <td>-</td></tr></tbody></table> <h3 id="方法"><a href="#方法" class="header-anchor">#</a> 方法</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>changeSelect</td> <td>选择切换回调</td> <td></td></tr> <tr><td>changeInput</td> <td>选择切换回调</td> <td></td></tr></tbody></table> <h2 id="yudoublerecord-视频双录"><a href="#yudoublerecord-视频双录" class="header-anchor">#</a> yuDoubleRecord 视频双录</h2> <p>依赖原生提供的能力，封装的视频双录</p> <h3 id="效果预览-10"><a href="#效果预览-10" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-double-record-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    417. 

  417.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    418. 

  418.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-double-record</span> <span class="token attr-name">@recordResult</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>recordResult<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>yu-double-record</span><span class="token punctuation">&gt;</span></span>
    419. 

  419.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    420. 

  420. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    421. 

  421. 

  422. <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">
    423. 

  423. <span class="token keyword">import</span> yuDoubleRecord <span class="token keyword">from</span> <span class="token string">'@/components/yu-double-record/index.vue'</span>
    424. 

  424. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    425. 

  425.   <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    426. 

  426.     yuDoubleRecord
    427. 

  427.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    428. 

  428.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    429. 

  429.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    430. 

  430.       <span class="token literal-property property">ocrResult2</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    431. 

  431.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    432. 

  432.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    433. 

  433.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    434. 

  434.     <span class="token function">recordResult</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    435. 

  435.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">' ======== &gt;&gt;&gt;&gt;'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span>
    436. 

  436.     <span class="token punctuation">}</span>
    437. 

  437.   <span class="token punctuation">}</span>
    438. 

  438. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    439. 

  439. </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>
    440. 

  440. </code></pre></div><h3 id="attributes-10"><a href="#attributes-10" class="header-anchor">#</a> Attributes</h3> <h3 id="events-8"><a href="#events-8" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>recordResult</td> <td>双录结果输出</td> <td></td></tr></tbody></table> <h2 id="yusvgicon-图标组件"><a href="#yusvgicon-图标组件" class="header-anchor">#</a> yuSvgIcon 图标组件</h2> <p>图标组件,直接配置svg图标文件名称(<code>src\assets\icons下的图标文件名或src\views\mbank\模块名\assets\icons</code>下的图标文件名)即可应用图标，此组件已经<code>全局注册</code>无需再页面单独注册。</p> <h3 id="效果预览-11"><a href="#效果预览-11" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-svg-icon-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    441. 

  441.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-svg-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>add<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>yu-svg-icon</span><span class="token punctuation">&gt;</span></span>
    442. 

  442. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    443. 

  443. <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">
    444. 

  444.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    445. 

  445.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    446. 

  446.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    447. 

  447.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    448. 

  448.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    449. 

  449.   <span class="token punctuation">}</span>
    450. 

  450. </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>
    451. 

  451. </code></pre></div><h3 id="attributes-11"><a href="#attributes-11" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>type</td> <td>图标名称src\assets\icons下的图标文件名或src\views\mbank\模块名\assets\icons下的图标文件名</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>className</td> <td>图标自定义类名</td> <td>String</td> <td>-</td> <td>-</td></tr></tbody></table> <h2 id="yuimgswiper-图片轮播"><a href="#yuimgswiper-图片轮播" class="header-anchor">#</a> yuImgSwiper 图片轮播</h2> <p>图片轮播组件，<code>图片懒加载</code></p> <h3 id="效果预览-12"><a href="#效果预览-12" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-img-swiper-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    452. 

  452.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-img-swiper</span> <span class="token attr-name">:images</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@userClick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goChangeImg<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>yu-img-swiper</span><span class="token punctuation">&gt;</span></span>
    453. 

  453. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    454. 

  454. <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">
    455. 

  455.   <span class="token keyword">import</span> img1 <span class="token keyword">from</span> <span class="token string">'@/assets/img/entrance.png'</span>
    456. 

  456.   <span class="token keyword">import</span> yuImgSwiper <span class="token keyword">from</span> <span class="token string">'@/components/yu-img-swiper/index.vue'</span><span class="token punctuation">;</span>
    457. 

  457.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    458. 

  458.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    459. 

  459.      yuImgSwiper
    460. 

  460.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    461. 

  461.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    462. 

  462.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    463. 

  463.         <span class="token literal-property property">images</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    464. 

  464.           img1<span class="token punctuation">,</span>
    465. 

  465.           img1<span class="token punctuation">,</span>
    466. 

  466.           <span class="token string">'https://pic4.zhimg.com/80/v2-94a0bc8b2774dc9a4dc9a7a01981d30b_1440w.webp'</span><span class="token punctuation">,</span>
    467. 

  467.           <span class="token string">'https://pic3.zhimg.com/80/v2-121ad85546ecc7a044558593f30dea8a_1440w.webp'</span>
    468. 

  468.         <span class="token punctuation">]</span>
    469. 

  469.       <span class="token punctuation">}</span>
    470. 

  470.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    471. 

  471.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    472. 

  472.       <span class="token function">goChangeImg</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    473. 

  473.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'goChangeImg:'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span>
    474. 

  474.       <span class="token punctuation">}</span>
    475. 

  475.     <span class="token punctuation">}</span>
    476. 

  476.   <span class="token punctuation">}</span>
    477. 

  477. </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>
    478. 

  478. </code></pre></div><h3 id="attributes-12"><a href="#attributes-12" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>images</td> <td>图片数组</td> <td>Array</td> <td>-</td> <td>-</td></tr></tbody></table> <h2 id="yusigncanvas-手写签名组件"><a href="#yusigncanvas-手写签名组件" class="header-anchor">#</a> yuSignCanvas 手写签名组件</h2> <p>手写签名，签名结果为图片base64格式</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>template</span><span class="token punctuation">&gt;</span></span>
    479. 

  479.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-sign-canvas</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>signCanvas<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@saveSign</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>saveSign<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>yu-sign-canvas</span><span class="token punctuation">&gt;</span></span>
    480. 

  480. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    481. 

  481. <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">
    482. 

  482.   <span class="token keyword">import</span> yuSignCanvas <span class="token keyword">from</span> <span class="token string">'@/components/yu-sign-canvas/index.vue'</span><span class="token punctuation">;</span>
    483. 

  483.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    484. 

  484.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    485. 

  485.      yuSignCanvas
    486. 

  486.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    487. 

  487.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    488. 

  488.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    489. 

  489.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    490. 

  490.       <span class="token function">saveSign</span><span class="token punctuation">(</span><span class="token parameter">img</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    491. 

  491.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>img<span class="token punctuation">,</span> <span class="token string">'img'</span><span class="token punctuation">)</span>
    492. 

  492.       <span class="token punctuation">}</span>
    493. 

  493.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    494. 

  494.   <span class="token punctuation">}</span>
    495. 

  495. </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>
    496. 

  496. </code></pre></div><h3 id="attributes-13"><a href="#attributes-13" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>title</td> <td>签名标题</td> <td>string</td> <td>-</td> <td>请签名</td></tr> <tr><td>saveBtnTxt</td> <td>保存按钮文字</td> <td>string</td> <td>-</td> <td>保存</td></tr> <tr><td>clearBtnTxt</td> <td>清空按钮文字</td> <td>string</td> <td>-</td> <td>清空</td></tr></tbody></table> <h3 id="events-9"><a href="#events-9" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>clear</td> <td>清空按钮触发</td> <td>-</td></tr> <tr><td>saveSign</td> <td>保存按钮触发</td> <td>{signData: ''}</td></tr></tbody></table> <h2 id="yusign-手写电子签名组件"><a href="#yusign-手写电子签名组件" class="header-anchor">#</a> yuSign 手写电子签名组件</h2> <p>手写签名，签名结果为图片base64格式,对<a href="#yuSignCanvas">yuSignCanvas</a>的二次封装</p> <h3 id="效果预览-13"><a href="#效果预览-13" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-sign-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    497. 

  497.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-sign</span> <span class="token attr-name">:before-valid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sighBforeValid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>imageUrl<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>saveSign<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>yu-sign</span><span class="token punctuation">&gt;</span></span>
    498. 

  498. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    499. 

  499. 

  500. <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">
    501. 

  501. <span class="token keyword">import</span> yuSign <span class="token keyword">from</span> <span class="token string">'@/components/yu-sign/index.vue'</span>
    502. 

  502. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    503. 

  503.   <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    504. 

  504.     yuSign
    505. 

  505.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    506. 

  506.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    507. 

  507.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    508. 

  508.       <span class="token literal-property property">imageUrl</span><span class="token operator">:</span> <span class="token string">''</span>
    509. 

  509.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    510. 

  510.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    511. 

  511.   
    512. 

  512.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    513. 

  513.     <span class="token comment">// 签名前校验</span>
    514. 

  514.     <span class="token function">sighBforeValid</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    515. 

  515.       <span class="token comment">// 判断是否进行协议阅读同意等</span>
    516. 

  516.       <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    517. 

  517.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    518. 

  518.     <span class="token function">saveSign</span><span class="token punctuation">(</span><span class="token parameter">img</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    519. 

  519.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>img<span class="token punctuation">,</span> <span class="token string">'img'</span><span class="token punctuation">)</span>
    520. 

  520.     <span class="token punctuation">}</span>
    521. 

  521.   <span class="token punctuation">}</span>
    522. 

  522. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    523. 

  523. </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>
    524. 

  524. </code></pre></div><h3 id="attributes-14"><a href="#attributes-14" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>v-model</td> <td>双向绑定值（签名结果图片）</td> <td>base64字符串</td> <td>-</td> <td>-</td></tr> <tr><td>title</td> <td>标题</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>beforeValid</td> <td>打开签名弹窗前的验证方法</td> <td>Function</td> <td>-</td> <td>-</td></tr></tbody></table> <h3 id="方法-2"><a href="#方法-2" class="header-anchor">#</a> 方法</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>@input</td> <td>保存按钮触发，签名结果更新</td> <td></td></tr></tbody></table> <h2 id="yuarea-地区级联选择器"><a href="#yuarea-地区级联选择器" class="header-anchor">#</a> yuArea 地区级联选择器</h2> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>组件默认从<code>public/plugins/Area.min.js</code>中加载全部省市区数据，本地开发环境需要在<code>.env.development</code>环境配置文件中<code>VUE_APP_COMM_RES_SRC</code>变量配置为终端服务地址，生产环境中，数据默认从<a href="/yump-guide-v2/guide/#编译配置">公共资源包中加载</a>。</p></div> <h3 id="效果预览-14"><a href="#效果预览-14" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-area-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <h3 id="选择省市区"><a href="#选择省市区" class="header-anchor">#</a> 选择省市区</h3> <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>template</span><span class="token punctuation">&gt;</span></span>
    525. 

  525.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-area</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>地址<span class="token punctuation">&quot;</span></span> <span class="token attr-name">regionCode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>140109<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>confirmArea<span class="token punctuation">&quot;</span></span> <span class="token attr-name">columnsNum</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<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>yu-area</span><span class="token punctuation">&gt;</span></span>
    526. 

  526. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    527. 

  527. <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">
    528. 

  528.   <span class="token keyword">import</span> yuArea <span class="token keyword">from</span> <span class="token string">'@/components/yu-area/index.vue'</span><span class="token punctuation">;</span>
    529. 

  529.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    530. 

  530.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    531. 

  531.      yuArea
    532. 

  532.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    533. 

  533.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    534. 

  534.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    535. 

  535.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    536. 

  536.       <span class="token function">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    537. 

  537.         <span class="token comment">// 取消</span>
    538. 

  538.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    539. 

  539.       <span class="token function">confirmArea</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    540. 

  540.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'选中的地址：'</span><span class="token punctuation">,</span> data<span class="token punctuation">.</span>value<span class="token punctuation">,</span> data<span class="token punctuation">.</span>code<span class="token punctuation">)</span><span class="token punctuation">;</span>
    541. 

  541.       <span class="token punctuation">}</span>
    542. 

  542.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    543. 

  543.   <span class="token punctuation">}</span>
    544. 

  544. </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>
    545. 

  545. </code></pre></div><h3 id="attributes-15"><a href="#attributes-15" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>regionCode</td> <td>地区码前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>label</td> <td>标题</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>title</td> <td>选择器标题</td> <td>string</td> <td>-</td> <td>地区</td></tr> <tr><td>placeholder</td> <td>选择器提示描述</td> <td>string</td> <td>-</td> <td>请选择</td></tr> <tr><td>cancelBtntext</td> <td>取消按钮文字</td> <td>string</td> <td>-</td> <td>取消</td></tr> <tr><td>confirmBtntext</td> <td>确定按钮文字</td> <td>string</td> <td>-</td> <td>确定</td></tr></tbody></table> <h3 id="events-10"><a href="#events-10" class="header-anchor">#</a> events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>confirm</td> <td>确定按钮触发</td> <td>{code: '', value: ''}</td></tr> <tr><td>cancel</td> <td>取消按钮触发</td> <td>-</td></tr></tbody></table> <h2 id="yucheckbox-复选框"><a href="#yucheckbox-复选框" class="header-anchor">#</a> yuCheckbox 复选框</h2> <p>复选框选择器，支持数据字典码传入，自动加载数据字典数据源</p> <h3 id="效果预览-15"><a href="#效果预览-15" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-checkbox-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    546. 

  546.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    547. 

  547.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-checkbox</span> 
    548. 

  548.     <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>80px<span class="token punctuation">&quot;</span></span> 
    549. 

  549.     <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>担保方式<span class="token punctuation">&quot;</span></span> 
    550. 

  550.     <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkboxValues1<span class="token punctuation">&quot;</span></span> 
    551. 

  551.     <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>guarMtd<span class="token punctuation">&quot;</span></span> 
    552. 

  552.     <span class="token attr-name">data-code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>TEST_TYPE<span class="token punctuation">&quot;</span></span> 
    553. 

  553.     <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>yu-checkbox</span><span class="token punctuation">&gt;</span></span>
    554. 

  554.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-checkbox</span> 
    555. 

  555.     <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>80px<span class="token punctuation">&quot;</span></span> 
    556. 

  556.     <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>担保方式<span class="token punctuation">&quot;</span></span> 
    557. 

  557.     <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkboxValues2<span class="token punctuation">&quot;</span></span> 
    558. 

  558.     <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>guarMtd<span class="token punctuation">&quot;</span></span> 
    559. 

  559.     <span class="token attr-name">data-code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>TEST_TYPE<span class="token punctuation">&quot;</span></span> 
    560. 

  560.     <span class="token attr-name">:excludeKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>02,03'<span class="token punctuation">&quot;</span></span>
    561. 

  561.     <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>yu-checkbox</span><span class="token punctuation">&gt;</span></span>
    562. 

  562.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-checkbox</span> 
    563. 

  563.     <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>80px<span class="token punctuation">&quot;</span></span> 
    564. 

  564.     <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>担保方式<span class="token punctuation">&quot;</span></span> 
    565. 

  565.     <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkboxValues3<span class="token punctuation">&quot;</span></span> 
    566. 

  566.     <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>guarMtd<span class="token punctuation">&quot;</span></span> 
    567. 

  567.     <span class="token attr-name">data-code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>TEST_TYPE<span class="token punctuation">&quot;</span></span> 
    568. 

  568.     <span class="token attr-name">:details</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>
    569. 

  569.     <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>yu-checkbox</span><span class="token punctuation">&gt;</span></span>
    570. 

  570.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    571. 

  571. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    572. 

  572. <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">
    573. 

  573.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    574. 

  574.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    575. 

  575.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    576. 

  576.         <span class="token literal-property property">checkboxValues1</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'02'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    577. 

  577.         <span class="token literal-property property">checkboxValues2</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'01'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    578. 

  578.         <span class="token literal-property property">checkboxValues3</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'01'</span><span class="token punctuation">,</span> <span class="token string">'04'</span><span class="token punctuation">]</span>
    579. 

  579.       <span class="token punctuation">}</span><span class="token punctuation">;</span>
    580. 

  580.     <span class="token punctuation">}</span>
    581. 

  581.   <span class="token punctuation">}</span>
    582. 

  582. </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>
    583. 

  583. </code></pre></div><h3 id="attributes-16"><a href="#attributes-16" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>label-width</td> <td>左侧标题栏宽度</td> <td>string(px)</td> <td>-</td> <td>-</td></tr> <tr><td>label</td> <td>标题</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>v-model</td> <td>当前选中值</td> <td>string</td> <td>[]</td> <td>-</td></tr> <tr><td>data-code</td> <td>数据源字典码</td> <td>string</td> <td>[]</td> <td>-</td></tr> <tr><td>excludeKey</td> <td>数据源中排除项</td> <td>string(逗号分割)</td> <td>-</td> <td>-</td></tr> <tr><td>details</td> <td>是否是详情反选不可修改状态</td> <td>bool</td> <td>-</td> <td>-</td></tr></tbody></table> <h2 id="yusmsfield-短信验证组件"><a href="#yusmsfield-短信验证组件" class="header-anchor">#</a> yuSmsField 短信验证组件</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>组件自带验证码倒计时功能，通过当前系统时间为维度进行动态计算时间差, 解决iOS或安卓切换后台,js进程被挂起,倒计时中止的问题。</p></div> <p>短信验证组件,倒计时</p> <h3 id="效果预览-16"><a href="#效果预览-16" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-sms-field-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    584. 

  584.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-sms-field</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>smsField<span class="token punctuation">&quot;</span></span> <span class="token attr-name">smsCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>60<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@getCode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getCodeFn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:smsSendNo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>smsSendNo<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>yu-sms-field</span><span class="token punctuation">&gt;</span></span>
    585. 

  585. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    586. 

  586. <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">
    587. 

  587.   <span class="token keyword">import</span> yuSmsField <span class="token keyword">from</span> <span class="token string">'@/components/yu-sms-field/index.vue'</span><span class="token punctuation">;</span>
    588. 

  588.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    589. 

  589.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    590. 

  590.      yuSmsField
    591. 

  591.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    592. 

  592.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    593. 

  593.       <span class="token keyword">return</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    594. 

  594.         <span class="token literal-property property">smsSendNo</span><span class="token operator">:</span> <span class="token string">''</span>
    595. 

  595.       <span class="token punctuation">}</span>
    596. 

  596.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    597. 

  597.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    598. 

  598.       <span class="token function">getCodeFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    599. 

  599.       <span class="token comment">// todo:request </span>
    600. 

  600.       <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>smsField<span class="token punctuation">.</span><span class="token function">smsCountDown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    601. 

  601.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$toast</span><span class="token punctuation">(</span><span class="token string">'短信验证码已发送至132****3126'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    602. 

  602.       <span class="token keyword">this</span><span class="token punctuation">.</span>smsSendNo <span class="token operator">=</span> <span class="token string">'3409'</span>
    603. 

  603.       <span class="token punctuation">}</span>
    604. 

  604.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    605. 

  605.   <span class="token punctuation">}</span>
    606. 

  606. </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>
    607. 

  607. </code></pre></div><h3 id="attributes-17"><a href="#attributes-17" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>label</td> <td>标题</td> <td>String</td> <td>-</td> <td>短信验证码</td></tr> <tr><td>smsCount</td> <td>倒计时时间长度</td> <td>string</td> <td>-</td> <td>60</td></tr> <tr><td>placeholder</td> <td>输入框提示</td> <td>string</td> <td>-</td> <td>请输入短信验证码</td></tr> <tr><td>isSmsSendNo</td> <td>是否显示短信序列号</td> <td>Boolean</td> <td>-</td> <td>true</td></tr> <tr><td>smsSendNo</td> <td>短信验证序列号</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>btnTxt</td> <td>输入域右侧按钮文字内容</td> <td>String</td> <td>-</td> <td>获取</td></tr></tbody></table> <h3 id="events-11"><a href="#events-11" class="header-anchor">#</a> events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>getCode</td> <td>点击右侧按钮触发事件</td> <td></td></tr></tbody></table> <h3 id="methods"><a href="#methods" class="header-anchor">#</a> methods</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>smsCountDown</td> <td>开启倒计时</td> <td>-</td></tr></tbody></table> <h2 id="yufloorcom-千人千面组件"><a href="#yufloorcom-千人千面组件" class="header-anchor">#</a> yuFloorCom 千人千面组件</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>千人千面组件</code>，可<code>动态渲染</code>页面，根据接口返回数据，渲染对应的页面组件，脚手架中接口数据通过<code>MOCK</code>模拟,组件默认渲染MOCK数据，页面编号非必填，项目中需要根据实际情况从接口中获取对应数据.</p></div> <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>template</span><span class="token punctuation">&gt;</span></span>
    608. 

  608.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-floor-Com</span> <span class="token attr-name">:pageNo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pageNo<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>yu-floor-Com</span><span class="token punctuation">&gt;</span></span>
    609. 

  609. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    610. 

  610. <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">
    611. 

  611.   <span class="token keyword">import</span> yuFloorCom <span class="token keyword">from</span> <span class="token string">'@/components/floorCom/index.vue'</span><span class="token punctuation">;</span>
    612. 

  612.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    613. 

  613.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    614. 

  614.      yuFloorCom
    615. 

  615.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    616. 

  616.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    617. 

  617.       <span class="token keyword">return</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    618. 

  618.         <span class="token literal-property property">pageNo</span><span class="token operator">:</span> <span class="token string">'PM002'</span> <span class="token comment">// 根据页面编号区分不同的页面</span>
    619. 

  619.       <span class="token punctuation">}</span>
    620. 

  620.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    621. 

  621.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    622. 

  622.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    623. 

  623.   <span class="token punctuation">}</span>
    624. 

  624. </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>
    625. 

  625. </code></pre></div><h3 id="attributes-18"><a href="#attributes-18" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>pageNo</td> <td>页面编号</td> <td>String</td> <td>-</td> <td>-</td></tr></tbody></table> <h2 id="yuring-环形组件"><a href="#yuring-环形组件" class="header-anchor">#</a> yuRing 环形组件</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>环形组件</code>，可用于展示环形资产动画。</p></div> <h3 id="效果预览-17"><a href="#效果预览-17" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-ring-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    626. 

  626.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-ring</span> <span class="token attr-name">:allAsset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>allAsset<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>yu-ring</span><span class="token punctuation">&gt;</span></span>
    627. 

  627. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    628. 

  628. <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">
    629. 

  629.   <span class="token keyword">import</span> yuRing <span class="token keyword">from</span> <span class="token string">'@/components/yu-ring/index.vue'</span><span class="token punctuation">;</span>
    630. 

  630.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    631. 

  631.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    632. 

  632.      yuRing
    633. 

  633.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    634. 

  634.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    635. 

  635.       <span class="token keyword">return</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    636. 

  636.         <span class="token literal-property property">allAsset</span><span class="token operator">:</span> <span class="token string">'44000'</span>
    637. 

  637.       <span class="token punctuation">}</span>
    638. 

  638.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    639. 

  639.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    640. 

  640.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    641. 

  641.   <span class="token punctuation">}</span>
    642. 

  642. </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>
    643. 

  643. </code></pre></div><h3 id="attributes-19"><a href="#attributes-19" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>allAsset</td> <td>总资产</td> <td>String</td> <td>-</td> <td>-</td></tr></tbody></table> <h2 id="yupullrefreshlist-下拉刷新上拉加载组件"><a href="#yupullrefreshlist-下拉刷新上拉加载组件" class="header-anchor">#</a> yuPullRefreshList 下拉刷新上拉加载组件</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>yuPullRefreshList</code>，可用于列表查询页面，将列表内容以插槽的形式嵌入组件，实现下拉的时触发刷新，上拉时触发加载更多数据。</p></div> <h3 id="效果预览-18"><a href="#效果预览-18" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-pull-refresh-list-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    644. 

  644.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-pull-refresh-list</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>refHisList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:api</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getHisList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:queryParams</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>doneQueryParams<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@loaded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(list, total) =&gt; (listTotal = total)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    645. 

  645.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slotProps<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    646. 

  646.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>{{ slotProps.item }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
    647. 

  647.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    648. 

  648.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>yu-pull-refresh-list</span><span class="token punctuation">&gt;</span></span>
    649. 

  649. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    650. 

  650. <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">
    651. 

  651. <span class="token keyword">import</span> yuPullRefreshList <span class="token keyword">from</span> <span class="token string">'@/components/yuPullRefreshList/index'</span><span class="token punctuation">;</span>
    652. 

  652.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    653. 

  653.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    654. 

  654.      yuPullRefreshList
    655. 

  655.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    656. 

  656.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    657. 

  657.       <span class="token keyword">return</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    658. 

  658.       <span class="token punctuation">}</span>
    659. 

  659.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    660. 

  660.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    661. 

  661.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    662. 

  662.   <span class="token punctuation">}</span>
    663. 

  663. </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>
    664. 

  664. </code></pre></div><h3 id="attributes-20"><a href="#attributes-20" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>api</td> <td>列表接口</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>queryParams</td> <td>列表固定查询参数</td> <td>Object</td> <td>-</td> <td>-</td></tr> <tr><td>page</td> <td>起始页</td> <td>Number</td> <td>-</td> <td>1</td></tr> <tr><td>size</td> <td>没有加载的数据</td> <td>Number</td> <td>-</td> <td>10</td></tr> <tr><td>defaultLoad</td> <td>是否默认加载数据</td> <td>Boolean</td> <td>-</td> <td>true</td></tr></tbody></table> <h3 id="events-12"><a href="#events-12" class="header-anchor">#</a> events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>loaded</td> <td>列表加载完成时间</td> <td>resData-列表请求数据, total-列表数据数据</td></tr></tbody></table> <h3 id="slot"><a href="#slot" class="header-anchor">#</a> slot</h3> <table><thead><tr><th>名称</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>default</td> <td>默认插槽</td> <td>-</td></tr></tbody></table> <h2 id="yugrid-宫格业务"><a href="#yugrid-宫格业务" class="header-anchor">#</a> yuGrid 宫格业务</h2> <p>宫格组件，可用于配置移动应用金刚区菜单，支持图标、文字等自定义 、支持权限控制。</p> <h3 id="效果预览-19"><a href="#效果预览-19" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-grid-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    665. 

  665.  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-grid</span> <span class="token attr-name">:gridList</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>funList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> <span class="token attr-name">column-num</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>4<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>yu-grid</span><span class="token punctuation">&gt;</span></span>
    666. 

  666. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    667. 

  667. <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">
    668. 

  668. <span class="token keyword">import</span> yuGrid <span class="token keyword">from</span> <span class="token string">'@/components/yu-grid/index'</span><span class="token punctuation">;</span>
    669. 

  669.  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    670. 

  670.    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    671. 

  671.     yuGrid
    672. 

  672.    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    673. 

  673.    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    674. 

  674.      <span class="token keyword">return</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    675. 

  675.      <span class="token literal-property property">funList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    676. 

  676.        <span class="token punctuation">{</span>
    677. 

  677.          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'私人定制账户'</span><span class="token punctuation">,</span>
    678. 

  678.          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
    679. 

  679.          <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./assets/img/private.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    680. 

  680.          <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'private'</span><span class="token punctuation">,</span>
    681. 

  681.          <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token string">'financial'</span>
    682. 

  682.          <span class="token literal-property property">bage</span><span class="token operator">:</span> <span class="token string">'推荐'</span>
    683. 

  683.        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    684. 

  684.        <span class="token punctuation">{</span>
    685. 

  685.          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'积分商城'</span><span class="token punctuation">,</span>
    686. 

  686.          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
    687. 

  687.          <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./assets/img/shop.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    688. 

  688.          <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'shop'</span><span class="token punctuation">,</span>
    689. 

  689.          <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token string">'deposit'</span>
    690. 

  690.        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    691. 

  691.        <span class="token punctuation">{</span>
    692. 

  692.          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'排行榜'</span><span class="token punctuation">,</span>
    693. 

  693.          <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./assets/img/ranking.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    694. 

  694.          <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'ranking'</span><span class="token punctuation">,</span>
    695. 

  695.          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
    696. 

  696.          <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token string">'foundation'</span>
    697. 

  697.        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    698. 

  698.        <span class="token punctuation">{</span>
    699. 

  699.          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'04'</span><span class="token punctuation">,</span>
    700. 

  700.          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'慈善捐助'</span><span class="token punctuation">,</span>
    701. 

  701.          <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./assets/img/giving.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    702. 

  702.          <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'giving'</span><span class="token punctuation">,</span>
    703. 

  703.          <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token string">'loan'</span>
    704. 

  704.        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    705. 

  705.        <span class="token punctuation">{</span>
    706. 

  706.          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'5'</span><span class="token punctuation">,</span>
    707. 

  707.          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'资产配置'</span><span class="token punctuation">,</span>
    708. 

  708.          <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./assets/img/allocation.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    709. 

  709.          <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'allocation'</span><span class="token punctuation">,</span>
    710. 

  710.          <span class="token literal-property property">checkAuth</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    711. 

  711.          <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token string">'financial'</span>
    712. 

  712.        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    713. 

  713.        <span class="token punctuation">{</span>
    714. 

  714.          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'6'</span><span class="token punctuation">,</span>
    715. 

  715.          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'咨询'</span><span class="token punctuation">,</span>
    716. 

  716.          <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./assets/img/info.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    717. 

  717.          <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'info'</span><span class="token punctuation">,</span>
    718. 

  718.          <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token string">'loan'</span>
    719. 

  719.        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    720. 

  720.        <span class="token punctuation">{</span>
    721. 

  721.          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'7'</span><span class="token punctuation">,</span>
    722. 

  722.          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'合格投资者'</span><span class="token punctuation">,</span>
    723. 

  723.          <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./assets/img/investors.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    724. 

  724.          <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'investors'</span><span class="token punctuation">,</span>
    725. 

  725.          <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token string">'loan'</span>
    726. 

  726.        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    727. 

  727.        <span class="token punctuation">{</span>
    728. 

  728.          <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'8'</span><span class="token punctuation">,</span>
    729. 

  729.          <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'合同签署'</span><span class="token punctuation">,</span>
    730. 

  730.          <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./assets/img/signing.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    731. 

  731.          <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'signing'</span><span class="token punctuation">,</span>
    732. 

  732.          <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token string">'perCenter'</span><span class="token punctuation">,</span>
    733. 

  733.          <span class="token literal-property property">bage</span><span class="token operator">:</span> <span class="token string">'1'</span>
    734. 

  734.        <span class="token punctuation">}</span>
    735. 

  735.      <span class="token punctuation">]</span>
    736. 

  736.      <span class="token punctuation">}</span>
    737. 

  737.    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    738. 

  738.    <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    739. 

  739.    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    740. 

  740.  <span class="token punctuation">}</span>
    741. 

  741. </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>
    742. 

  742. </code></pre></div><h3 id="attributes-21"><a href="#attributes-21" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>isActive</td> <td>是否有激活样式</td> <td>Boolean</td> <td>true,false</td> <td>false</td></tr> <tr><td>columnNum</td> <td>宫格列数</td> <td>String</td> <td>-</td> <td>4</td></tr> <tr><td>border</td> <td>是否有边框</td> <td>Boolean</td> <td>-</td> <td>false</td></tr> <tr><td>isPermission</td> <td>是否开启权限控制</td> <td>Boolean</td> <td>true,false</td> <td>false</td></tr> <tr><td>gridList</td> <td>宫格数据列表,详细配置见下表</td> <td>Object</td> <td>-</td> <td>-</td></tr></tbody></table> <h3 id="gridlist-配置项说明"><a href="#gridlist-配置项说明" class="header-anchor">#</a> gridList 配置项说明</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>name</td> <td>宫格菜单名称</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>key</td> <td>宫格菜单key</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>type</td> <td>宫格菜单图标名</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>link</td> <td>宫格菜单跳转路由</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>modules</td> <td>宫格菜单跳转模块名称，若为当前模块则不需要配置</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>permissionId</td> <td>宫格菜单权限控制ID，需开启权限控制isPermission时生效，配合后台接口权限数据才能生效</td> <td>String</td> <td>-</td> <td>-</td></tr></tbody></table> <h3 id="events-13"><a href="#events-13" class="header-anchor">#</a> events</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>clickFn</td> <td>点击宫格菜单时触发</td> <td>data,当前宫格菜单项信息</td></tr></tbody></table> <h2 id="yuradio-单选tag"><a href="#yuradio-单选tag" class="header-anchor">#</a> yuRadio 单选tag</h2> <h3 id="效果预览-20"><a href="#效果预览-20" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-radio-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    743. 

  743.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-radio</span> 
    744. 

  744.   <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>风险等级<span class="token punctuation">&quot;</span></span>  
    745. 

  745.   <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100px<span class="token punctuation">&quot;</span></span> 
    746. 

  746.   <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>risk<span class="token punctuation">&quot;</span></span> 
    747. 

  747.   <span class="token attr-name">data-code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>RISKLEVEL<span class="token punctuation">&quot;</span></span> 
    748. 

  748.   <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> 
    749. 

  749.   <span class="token attr-name">:details</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> 
    750. 

  750.   <span class="token attr-name">required</span> 
    751. 

  751.   <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: '请选择风险等级' }]<span class="token punctuation">&quot;</span></span> 
    752. 

  752.   <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请选择<span class="token punctuation">&quot;</span></span>  
    753. 

  753.   <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeSelect<span class="token punctuation">&quot;</span></span>
    754. 

  754.   <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    755. 

  755. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    756. 

  756. <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">
    757. 

  757.   <span class="token keyword">import</span> yuRadio <span class="token keyword">from</span> <span class="token string">'@/components/yu-radio/index.vue'</span>
    758. 

  758.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    759. 

  759.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    760. 

  760.       yuRadio
    761. 

  761.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    762. 

  762.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    763. 

  763.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    764. 

  764.         <span class="token literal-property property">risk</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    765. 

  765.       <span class="token punctuation">}</span><span class="token punctuation">;</span>
    766. 

  766.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    767. 

  767.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    768. 

  768.       <span class="token function">changeSelect</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    769. 

  769.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'==changeSelect=======&gt;'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectDate1<span class="token punctuation">)</span>
    770. 

  770.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    771. 

  771.       <span class="token function">changeInput</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    772. 

  772.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'==changeInput=======&gt;'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectDate1<span class="token punctuation">)</span>
    773. 

  773.       <span class="token punctuation">}</span>
    774. 

  774.     <span class="token punctuation">}</span>
    775. 

  775.   <span class="token punctuation">}</span>
    776. 

  776. </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>
    777. 

  777. </code></pre></div><h3 id="attributes-22"><a href="#attributes-22" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>v-model</td> <td>双向绑定值</td> <td>string(2024-04-10 00:00:02)/Date</td> <td>-</td> <td>-</td></tr> <tr><td>label</td> <td>标题</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>label-width</td> <td>标题宽度</td> <td>string（px）</td> <td>-</td> <td>-</td></tr> <tr><td>disabled</td> <td>是否不可编辑，暗色</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>details</td> <td>是否是详情反显，不可点击，正常色</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>placeholder</td> <td>选项框placeholder</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>required</td> <td>选项框是否必输</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>rules</td> <td>选项框校验规则</td> <td>Array</td> <td>-</td> <td>-</td></tr> <tr><td>excludeKey</td> <td>数据源中排除项</td> <td>string(逗号分割)</td> <td>-</td> <td>-</td></tr> <tr><td>data-code</td> <td>数据源字典码</td> <td>string</td> <td>[]</td> <td>-</td></tr> <tr><td>options</td> <td>数据源，如果传入此参数，data-code不生效</td> <td>Array</td> <td>[]</td> <td>-</td></tr></tbody></table> <h3 id="方法-3"><a href="#方法-3" class="header-anchor">#</a> 方法</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>changeSelect</td> <td>选择切换回调</td> <td></td></tr> <tr><td>changeInput</td> <td>选择切换回调</td> <td></td></tr></tbody></table> <h2 id="yuselectpicker-下拉选择器"><a href="#yuselectpicker-下拉选择器" class="header-anchor">#</a> yuSelectPicker 下拉选择器</h2> <h3 id="效果预览-21"><a href="#效果预览-21" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-select-picker-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    778. 

  778.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-select-picker</span> 
    779. 

  779.   <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>风险等级<span class="token punctuation">&quot;</span></span>  
    780. 

  780.   <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100px<span class="token punctuation">&quot;</span></span> 
    781. 

  781.   <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>risk<span class="token punctuation">&quot;</span></span> 
    782. 

  782.   <span class="token attr-name">data-code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>RISKLEVEL<span class="token punctuation">&quot;</span></span> 
    783. 

  783.   <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> 
    784. 

  784.   <span class="token attr-name">:details</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span> 
    785. 

  785.   <span class="token attr-name">required</span> 
    786. 

  786.   <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: '请选择风险等级' }]<span class="token punctuation">&quot;</span></span> 
    787. 

  787.   <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请选择<span class="token punctuation">&quot;</span></span>  
    788. 

  788.   <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeSelect<span class="token punctuation">&quot;</span></span>
    789. 

  789.   <span class="token attr-name">@input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeInput<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    790. 

  790. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    791. 

  791. <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">
    792. 

  792.   <span class="token keyword">import</span> yuSelectPicker <span class="token keyword">from</span> <span class="token string">'@/components/yu-select-picker/index.vue'</span>
    793. 

  793.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    794. 

  794.     <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    795. 

  795.       yuSelectPicker
    796. 

  796.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    797. 

  797.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    798. 

  798.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    799. 

  799.         <span class="token literal-property property">risk</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    800. 

  800.       <span class="token punctuation">}</span><span class="token punctuation">;</span>
    801. 

  801.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    802. 

  802.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    803. 

  803.       <span class="token function">changeSelect</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    804. 

  804.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'==changeSelect=======&gt;'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectDate1<span class="token punctuation">)</span>
    805. 

  805.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    806. 

  806.       <span class="token function">changeInput</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    807. 

  807.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'==changeInput=======&gt;'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectDate1<span class="token punctuation">)</span>
    808. 

  808.       <span class="token punctuation">}</span>
    809. 

  809.     <span class="token punctuation">}</span>
    810. 

  810.   <span class="token punctuation">}</span>
    811. 

  811. </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>
    812. 

  812. </code></pre></div><h3 id="attributes-23"><a href="#attributes-23" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>v-model</td> <td>双向绑定值</td> <td>string(2024-04-10 00:00:02)/Date</td> <td>-</td> <td>-</td></tr> <tr><td>label</td> <td>标题</td> <td>String</td> <td>-</td> <td>-</td></tr> <tr><td>label-width</td> <td>标题宽度</td> <td>string（px）</td> <td>-</td> <td>-</td></tr> <tr><td>disabled</td> <td>是否不可编辑，暗色</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>details</td> <td>是否是详情反显，不可点击，正常色</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>placeholder</td> <td>选项框placeholder</td> <td>string</td> <td>-</td> <td>-</td></tr> <tr><td>required</td> <td>选项框是否必输</td> <td>Bool</td> <td>true/false</td> <td>-</td></tr> <tr><td>rules</td> <td>选项框校验规则</td> <td>Array</td> <td>-</td> <td>-</td></tr> <tr><td>excludeKey</td> <td>数据源中排除项</td> <td>string(逗号分割)</td> <td>-</td> <td>-</td></tr> <tr><td>data-code</td> <td>数据源字典码</td> <td>string</td> <td>[]</td> <td>-</td></tr> <tr><td>options</td> <td>数据源，如果传入此参数，data-code不生效</td> <td>Array</td> <td>[]</td> <td>-</td></tr></tbody></table> <h3 id="方法-4"><a href="#方法-4" class="header-anchor">#</a> 方法</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>changeSelect</td> <td>选择切换回调</td> <td></td></tr> <tr><td>changeInput</td> <td>选择切换回调</td> <td></td></tr></tbody></table> <h2 id="yutab-tab选项组件"><a href="#yutab-tab选项组件" class="header-anchor">#</a> yuTab tab选项组件</h2> <h3 id="效果预览-22"><a href="#效果预览-22" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-tab-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <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>template</span><span class="token punctuation">&gt;</span></span>
    813. 

  813.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-tab</span> <span class="token attr-name">:tabs-list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tabDataList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:activeTab</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>activeTab<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@changeIndex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeIndex<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>yu-tab</span><span class="token punctuation">&gt;</span></span>
    814. 

  814. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    815. 

  815. 

  816. <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">
    817. 

  817. <span class="token keyword">import</span> yuTab <span class="token keyword">from</span> <span class="token string">'@/components/yu-tab/index.vue'</span>
    818. 

  818. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    819. 

  819.   <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    820. 

  820.     yuTab
    821. 

  821.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    822. 

  822.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    823. 

  823.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    824. 

  824.       <span class="token literal-property property">activeTab</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    825. 

  825.       <span class="token literal-property property">tabDataList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    826. 

  826.         <span class="token punctuation">{</span>
    827. 

  827.           <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'合同信息'</span><span class="token punctuation">,</span>
    828. 

  828.           <span class="token literal-property property">titleMore</span><span class="token operator">:</span> <span class="token string">'9'</span>
    829. 

  829.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    830. 

  830.         <span class="token punctuation">{</span>
    831. 

  831.           <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'保证信息'</span>
    832. 

  832.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    833. 

  833.         <span class="token punctuation">{</span>
    834. 

  834.           <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'抵押信息'</span><span class="token punctuation">,</span>
    835. 

  835.           <span class="token literal-property property">titleMore</span><span class="token operator">:</span> <span class="token string">'5'</span>
    836. 

  836.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    837. 

  837.         <span class="token punctuation">{</span>
    838. 

  838.           <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'质押信息'</span>
    839. 

  839.         <span class="token punctuation">}</span>
    840. 

  840.       <span class="token punctuation">]</span>
    841. 

  841.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    842. 

  842.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    843. 

  843.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    844. 

  844.     <span class="token function">changeIndex</span><span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    845. 

  845.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'changeIndex: '</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>
    846. 

  846.     <span class="token punctuation">}</span>
    847. 

  847.   <span class="token punctuation">}</span>
    848. 

  848. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    849. 

  849. </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>
    850. 

  850. 

  851. </code></pre></div><h3 id="attributes-24"><a href="#attributes-24" class="header-anchor">#</a> Attributes</h3> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th></tr></thead> <tbody><tr><td>tabs-list</td> <td>选项栏数据源</td> <td>Array：title-标题，titleMore-标题副值，一般为数量统计等</td> <td>-</td> <td>-</td></tr> <tr><td>activeTab</td> <td>当前选中tab索引</td> <td>Number</td> <td>-</td> <td>-</td></tr></tbody></table> <h3 id="方法-5"><a href="#方法-5" class="header-anchor">#</a> 方法</h3> <table><thead><tr><th>方法名</th> <th>说明</th> <th>参数</th></tr></thead> <tbody><tr><td>@changeIndex</td> <td>选中tab变化回调</td> <td></td></tr></tbody></table> <h2 id="yuupload-文件选择上传组件"><a href="#yuupload-文件选择上传组件" class="header-anchor">#</a> yuUpload 文件选择上传组件</h2> <h3 id="效果预览-23"><a href="#效果预览-23" class="header-anchor">#</a> 效果预览</h3> <iframe src="http://192.168.49.9:18080/yump-demo-h5/index/index.html#/yu-upload-demo" width="375" height="667" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <div class="language-html extra-class"><pre class="language-html"><code>
    852. 

  852. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    853. 

  853.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>demo-section</span> <span class="token attr-name">demoName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo-checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    854. 

  854.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>demo-block</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t('basicUsage')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    855. 

  855.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>yu-upload</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>refCommUpload<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@refresh</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>refreshFn<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>yu-upload</span><span class="token punctuation">&gt;</span></span>
    856. 

  856.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&quot;</span>add-btn<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>addFn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    857. 

  857.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</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>add-icon<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>p</span><span class="token punctuation">&gt;</span></span>
    858. 

  858.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</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>add-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>p</span><span class="token punctuation">&gt;</span></span>
    859. 

  859.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    860. 

  860.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>demo-block</span><span class="token punctuation">&gt;</span></span>
    861. 

  861.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>demo-section</span><span class="token punctuation">&gt;</span></span>
    862. 

  862. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    863. 

  863. 

  864. <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">
    865. 

  865. <span class="token keyword">import</span> demoBlock <span class="token keyword">from</span> <span class="token string">'@/views/mbank/index/components/demoblock.vue'</span>
    866. 

  866. <span class="token keyword">import</span> demoSection <span class="token keyword">from</span> <span class="token string">'@/views/mbank/index/components/demoSection.vue'</span>
    867. 

  867. <span class="token keyword">import</span> yuUpload <span class="token keyword">from</span> <span class="token string">'@/components/yu-upload/index.vue'</span>
    868. 

  868. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    869. 

  869.   <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    870. 

  870.     demoSection<span class="token punctuation">,</span>
    871. 

  871.     demoBlock<span class="token punctuation">,</span>
    872. 

  872.     yuUpload
    873. 

  873.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    874. 

  874.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    875. 

  875.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    876. 

  876.       <span class="token literal-property property">currFileList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    877. 

  877.       <span class="token literal-property property">uploadParams</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    878. 

  878.       <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">''</span>
    879. 

  879.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    880. 

  880.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    881. 

  881.   <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    882. 

  882.     <span class="token function">refreshFn</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    883. 

  883.       <span class="token comment">// 重新请求服务器已上传文件列表，更新currFileList</span>
    884. 

  884.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'页面'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    885. 

  885.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    886. 

  886.     <span class="token function">addFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    887. 

  887.       <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>refCommUpload<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    888. 

  888.     <span class="token punctuation">}</span>
    889. 

  889.   <span class="token punctuation">}</span>
    890. 

  890. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    891. 

  891. </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>
    892. 

  892. 

  893. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    894. 

  894. <span class="token selector">.add-btn</span> <span class="token punctuation">{</span>
    895. 

  895.     <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    896. 

  896.     <span class="token property">bottom</span><span class="token punctuation">:</span> 109px<span class="token punctuation">;</span>
    897. 

  897.     <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    898. 

  898.     <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    899. 

  899.     <span class="token property">width</span><span class="token punctuation">:</span> 208px<span class="token punctuation">;</span>
    900. 

  900.     <span class="token property">height</span><span class="token punctuation">:</span> 56px<span class="token punctuation">;</span>
    901. 

  901.     <span class="token property">line-height</span><span class="token punctuation">:</span> 56px<span class="token punctuation">;</span>
    902. 

  902.     <span class="token property">font-size</span><span class="token punctuation">:</span> 26px<span class="token punctuation">;</span>
    903. 

  903.     <span class="token property">color</span><span class="token punctuation">:</span> #2877ff<span class="token punctuation">;</span>
    904. 

  904.     <span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
    905. 

  905.     <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>216<span class="token punctuation">,</span> 216<span class="token punctuation">,</span> 216<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
    906. 

  906.     <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">rgba</span><span class="token punctuation">(</span>40<span class="token punctuation">,</span> 119<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    907. 

  907.     <span class="token property">border-radius</span><span class="token punctuation">:</span> 28px<span class="token punctuation">;</span>
    908. 

  908.     <span class="token selector">.add-icon</span> <span class="token punctuation">{</span>
    909. 

  909.       <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    910. 

  910.       <span class="token property">margin-left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    911. 

  911.       <span class="token property">margin-right</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
    912. 

  912.       <span class="token property">font-size</span><span class="token punctuation">:</span> 56px<span class="token punctuation">;</span>
    913. 

  913.     <span class="token punctuation">}</span>
    914. 

  914.     
    915. 

  915.   <span class="token punctuation">}</span>
    916. 

  916. </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>
    917. 

  917. 

  918. 

  919. </code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">5/15/2024, 4:47:26 PM</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    920. 

  920.     <script src="/yump-guide-v2/assets/js/app.896f6ac7.js" defer></script><script src="/yump-guide-v2/assets/js/2.51c90e44.js" defer></script><script src="/yump-guide-v2/assets/js/1.a9756c7a.js" defer></script><script src="/yump-guide-v2/assets/js/57.003ca5b0.js" defer></script>
    921. 

  921.   </body>
    922. 

  922. </html>
    923.