已重命名16个文件
已删除575个文件
已修改6个文件
已添加436个文件
| | |
|---|
| | | # 忽ç¥çæçæ件 |
|---|
| | | build/ |
|---|
| | | dist/ |
|---|
| | | unpackage/ |
|---|
| | | *.class |
|---|
| | | *.jar |
|---|
| | | *.war |
|---|
| | | *.ear |
|---|
| | | ###################################################################### |
|---|
| | | # Build Tools |
|---|
| | | |
|---|
| | | # 忽ç¥ç¼è¾å¨/IDEçæçæ件åç®å½ |
|---|
| | | .idea/ |
|---|
| | | .gradle |
|---|
| | | /build/ |
|---|
| | | !gradle/wrapper/gradle-wrapper.jar |
|---|
| | | |
|---|
| | | target/ |
|---|
| | | !.mvn/wrapper/maven-wrapper.jar |
|---|
| | | |
|---|
| | | ###################################################################### |
|---|
| | | # IDE |
|---|
| | | |
|---|
| | | ### hbuilder ### |
|---|
| | | unpackage |
|---|
| | | .hbuilderx |
|---|
| | | *.swp |
|---|
| | | *.swo |
|---|
| | | *~ |
|---|
| | | |
|---|
| | | # 忽ç¥ä¾èµç®¡çå·¥å
·çæçç®å½ |
|---|
| | | node_modules/ |
|---|
| | | bower_components/ |
|---|
| | | vendor/ |
|---|
| | | ### STS ### |
|---|
| | | .apt_generated |
|---|
| | | .classpath |
|---|
| | | .factorypath |
|---|
| | | .project |
|---|
| | | .settings |
|---|
| | | .springBeans |
|---|
| | | |
|---|
| | | # 忽ç¥æä½ç³»ç»æ件 |
|---|
| | | .DS_Store |
|---|
| | | Thumbs.db |
|---|
| | | ### IntelliJ IDEA ### |
|---|
| | | .idea |
|---|
| | | *.iws |
|---|
| | | *.iml |
|---|
| | | *.ipr |
|---|
| | | |
|---|
| | | # 忽ç¥æ¥å¿æ件 |
|---|
| | | ### JRebel ### |
|---|
| | | rebel.xml |
|---|
| | | |
|---|
| | | ### NetBeans ### |
|---|
| | | nbproject/private/ |
|---|
| | | build/* |
|---|
| | | nbbuild/ |
|---|
| | | dist/ |
|---|
| | | nbdist/ |
|---|
| | | .nb-gradle/ |
|---|
| | | |
|---|
| | | ###################################################################### |
|---|
| | | # Others |
|---|
| | | *.log |
|---|
| | | *.xml.versionsBackup |
|---|
| | | *.swp |
|---|
| | | |
|---|
| | | # 忽ç¥æææå
å«ä¸ªäººä¿¡æ¯çæ件ï¼æ ¹æ®éè¦æ·»å æ´å¤ï¼ |
|---|
| | | credentials.json |
|---|
| | | config.ini |
|---|
| | | secrets.txt |
|---|
| | | |
|---|
| | | # 忽ç¥å
¶ä»èªå®ä¹çæ件æç®å½ |
|---|
| | | /custom_directory/ |
|---|
| | | |
|---|
| | | # æé¤ç¹å®æ©å±åçæ件ï¼æ ¹æ®éè¦æ·»å æ´å¤ï¼ |
|---|
| | | *.bak |
|---|
| | | *.tmp |
|---|
| | | |
|---|
| | | # æé¤ç¹å®æ件åï¼æ ¹æ®éè¦æ·»å æ´å¤ï¼ |
|---|
| | | debug.log |
|---|
| | | |
|---|
| | | # ä¸æé¤ä¸åæ©å±åçæ件 |
|---|
| | | !*.allowed_extension |
|---|
| | | |
|---|
| | | # ä¸æé¤ä¸åæ件å |
|---|
| | | !important_file.txt |
|---|
| | | !*/build/*.java |
|---|
| | | !*/build/*.html |
|---|
| | | !*/build/*.xml |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | onLaunch () { |
|---|
| | | // å 载系ç»ä¿¡æ¯ |
|---|
| | | this.$store.dispatch('SystemInfo') |
|---|
| | | }, |
|---|
| | | onShow () { |
|---|
| | | }, |
|---|
| | | onHide () { |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import "@/uni_modules/uview-ui/index.scss"; |
|---|
| | | @import "@/static/style.scss"; |
|---|
| | | </style> |
|---|
| | |
|---|
| | | MIT License |
|---|
| | | Apache License |
|---|
| | | Version 2.0, January 2004 |
|---|
| | | http://www.apache.org/licenses/ |
|---|
| | | |
|---|
| | | Copyright (c) 2023 å¦NO |
|---|
| | | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION |
|---|
| | | |
|---|
| | | Permission is hereby granted, free of charge, to any person obtaining a copy |
|---|
| | | of this software and associated documentation files (the "Software"), to deal |
|---|
| | | in the Software without restriction, including without limitation the rights |
|---|
| | | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|---|
| | | copies of the Software, and to permit persons to whom the Software is |
|---|
| | | furnished to do so, subject to the following conditions: |
|---|
| | | 1. Definitions. |
|---|
| | | |
|---|
| | | The above copyright notice and this permission notice shall be included in all |
|---|
| | | copies or substantial portions of the Software. |
|---|
| | | "License" shall mean the terms and conditions for use, reproduction, |
|---|
| | | and distribution as defined by Sections 1 through 9 of this document. |
|---|
| | | |
|---|
| | | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|---|
| | | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|---|
| | | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|---|
| | | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|---|
| | | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|---|
| | | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|---|
| | | SOFTWARE. |
|---|
| | | "Licensor" shall mean the copyright owner or entity authorized by |
|---|
| | | the copyright owner that is granting the License. |
|---|
| | | |
|---|
| | | "Legal Entity" shall mean the union of the acting entity and all |
|---|
| | | other entities that control, are controlled by, or are under common |
|---|
| | | control with that entity. For the purposes of this definition, |
|---|
| | | "control" means (i) the power, direct or indirect, to cause the |
|---|
| | | direction or management of such entity, whether by contract or |
|---|
| | | otherwise, or (ii) ownership of fifty percent (50%) or more of the |
|---|
| | | outstanding shares, or (iii) beneficial ownership of such entity. |
|---|
| | | |
|---|
| | | "You" (or "Your") shall mean an individual or Legal Entity |
|---|
| | | exercising permissions granted by this License. |
|---|
| | | |
|---|
| | | "Source" form shall mean the preferred form for making modifications, |
|---|
| | | including but not limited to software source code, documentation |
|---|
| | | source, and configuration files. |
|---|
| | | |
|---|
| | | "Object" form shall mean any form resulting from mechanical |
|---|
| | | transformation or translation of a Source form, including but |
|---|
| | | not limited to compiled object code, generated documentation, |
|---|
| | | and conversions to other media types. |
|---|
| | | |
|---|
| | | "Work" shall mean the work of authorship, whether in Source or |
|---|
| | | Object form, made available under the License, as indicated by a |
|---|
| | | copyright notice that is included in or attached to the work |
|---|
| | | (an example is provided in the Appendix below). |
|---|
| | | |
|---|
| | | "Derivative Works" shall mean any work, whether in Source or Object |
|---|
| | | form, that is based on (or derived from) the Work and for which the |
|---|
| | | editorial revisions, annotations, elaborations, or other modifications |
|---|
| | | represent, as a whole, an original work of authorship. For the purposes |
|---|
| | | of this License, Derivative Works shall not include works that remain |
|---|
| | | separable from, or merely link (or bind by name) to the interfaces of, |
|---|
| | | the Work and Derivative Works thereof. |
|---|
| | | |
|---|
| | | "Contribution" shall mean any work of authorship, including |
|---|
| | | the original version of the Work and any modifications or additions |
|---|
| | | to that Work or Derivative Works thereof, that is intentionally |
|---|
| | | submitted to Licensor for inclusion in the Work by the copyright owner |
|---|
| | | or by an individual or Legal Entity authorized to submit on behalf of |
|---|
| | | the copyright owner. For the purposes of this definition, "submitted" |
|---|
| | | means any form of electronic, verbal, or written communication sent |
|---|
| | | to the Licensor or its representatives, including but not limited to |
|---|
| | | communication on electronic mailing lists, source code control systems, |
|---|
| | | and issue tracking systems that are managed by, or on behalf of, the |
|---|
| | | Licensor for the purpose of discussing and improving the Work, but |
|---|
| | | excluding communication that is conspicuously marked or otherwise |
|---|
| | | designated in writing by the copyright owner as "Not a Contribution." |
|---|
| | | |
|---|
| | | "Contributor" shall mean Licensor and any individual or Legal Entity |
|---|
| | | on behalf of whom a Contribution has been received by Licensor and |
|---|
| | | subsequently incorporated within the Work. |
|---|
| | | |
|---|
| | | 2. Grant of Copyright License. Subject to the terms and conditions of |
|---|
| | | this License, each Contributor hereby grants to You a perpetual, |
|---|
| | | worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
|---|
| | | copyright license to reproduce, prepare Derivative Works of, |
|---|
| | | publicly display, publicly perform, sublicense, and distribute the |
|---|
| | | Work and such Derivative Works in Source or Object form. |
|---|
| | | |
|---|
| | | 3. Grant of Patent License. Subject to the terms and conditions of |
|---|
| | | this License, each Contributor hereby grants to You a perpetual, |
|---|
| | | worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
|---|
| | | (except as stated in this section) patent license to make, have made, |
|---|
| | | use, offer to sell, sell, import, and otherwise transfer the Work, |
|---|
| | | where such license applies only to those patent claims licensable |
|---|
| | | by such Contributor that are necessarily infringed by their |
|---|
| | | Contribution(s) alone or by combination of their Contribution(s) |
|---|
| | | with the Work to which such Contribution(s) was submitted. If You |
|---|
| | | institute patent litigation against any entity (including a |
|---|
| | | cross-claim or counterclaim in a lawsuit) alleging that the Work |
|---|
| | | or a Contribution incorporated within the Work constitutes direct |
|---|
| | | or contributory patent infringement, then any patent licenses |
|---|
| | | granted to You under this License for that Work shall terminate |
|---|
| | | as of the date such litigation is filed. |
|---|
| | | |
|---|
| | | 4. Redistribution. You may reproduce and distribute copies of the |
|---|
| | | Work or Derivative Works thereof in any medium, with or without |
|---|
| | | modifications, and in Source or Object form, provided that You |
|---|
| | | meet the following conditions: |
|---|
| | | |
|---|
| | | (a) You must give any other recipients of the Work or |
|---|
| | | Derivative Works a copy of this License; and |
|---|
| | | |
|---|
| | | (b) You must cause any modified files to carry prominent notices |
|---|
| | | stating that You changed the files; and |
|---|
| | | |
|---|
| | | (c) You must retain, in the Source form of any Derivative Works |
|---|
| | | that You distribute, all copyright, patent, trademark, and |
|---|
| | | attribution notices from the Source form of the Work, |
|---|
| | | excluding those notices that do not pertain to any part of |
|---|
| | | the Derivative Works; and |
|---|
| | | |
|---|
| | | (d) If the Work includes a "NOTICE" text file as part of its |
|---|
| | | distribution, then any Derivative Works that You distribute must |
|---|
| | | include a readable copy of the attribution notices contained |
|---|
| | | within such NOTICE file, excluding those notices that do not |
|---|
| | | pertain to any part of the Derivative Works, in at least one |
|---|
| | | of the following places: within a NOTICE text file distributed |
|---|
| | | as part of the Derivative Works; within the Source form or |
|---|
| | | documentation, if provided along with the Derivative Works; or, |
|---|
| | | within a display generated by the Derivative Works, if and |
|---|
| | | wherever such third-party notices normally appear. The contents |
|---|
| | | of the NOTICE file are for informational purposes only and |
|---|
| | | do not modify the License. You may add Your own attribution |
|---|
| | | notices within Derivative Works that You distribute, alongside |
|---|
| | | or as an addendum to the NOTICE text from the Work, provided |
|---|
| | | that such additional attribution notices cannot be construed |
|---|
| | | as modifying the License. |
|---|
| | | |
|---|
| | | You may add Your own copyright statement to Your modifications and |
|---|
| | | may provide additional or different license terms and conditions |
|---|
| | | for use, reproduction, or distribution of Your modifications, or |
|---|
| | | for any such Derivative Works as a whole, provided Your use, |
|---|
| | | reproduction, and distribution of the Work otherwise complies with |
|---|
| | | the conditions stated in this License. |
|---|
| | | |
|---|
| | | 5. Submission of Contributions. Unless You explicitly state otherwise, |
|---|
| | | any Contribution intentionally submitted for inclusion in the Work |
|---|
| | | by You to the Licensor shall be under the terms and conditions of |
|---|
| | | this License, without any additional terms or conditions. |
|---|
| | | Notwithstanding the above, nothing herein shall supersede or modify |
|---|
| | | the terms of any separate license agreement you may have executed |
|---|
| | | with Licensor regarding such Contributions. |
|---|
| | | |
|---|
| | | 6. Trademarks. This License does not grant permission to use the trade |
|---|
| | | names, trademarks, service marks, or product names of the Licensor, |
|---|
| | | except as required for reasonable and customary use in describing the |
|---|
| | | origin of the Work and reproducing the content of the NOTICE file. |
|---|
| | | |
|---|
| | | 7. Disclaimer of Warranty. Unless required by applicable law or |
|---|
| | | agreed to in writing, Licensor provides the Work (and each |
|---|
| | | Contributor provides its Contributions) on an "AS IS" BASIS, |
|---|
| | | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or |
|---|
| | | implied, including, without limitation, any warranties or conditions |
|---|
| | | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A |
|---|
| | | PARTICULAR PURPOSE. You are solely responsible for determining the |
|---|
| | | appropriateness of using or redistributing the Work and assume any |
|---|
| | | risks associated with Your exercise of permissions under this License. |
|---|
| | | |
|---|
| | | 8. Limitation of Liability. In no event and under no legal theory, |
|---|
| | | whether in tort (including negligence), contract, or otherwise, |
|---|
| | | unless required by applicable law (such as deliberate and grossly |
|---|
| | | negligent acts) or agreed to in writing, shall any Contributor be |
|---|
| | | liable to You for damages, including any direct, indirect, special, |
|---|
| | | incidental, or consequential damages of any character arising as a |
|---|
| | | result of this License or out of the use or inability to use the |
|---|
| | | Work (including but not limited to damages for loss of goodwill, |
|---|
| | | work stoppage, computer failure or malfunction, or any and all |
|---|
| | | other commercial damages or losses), even if such Contributor |
|---|
| | | has been advised of the possibility of such damages. |
|---|
| | | |
|---|
| | | 9. Accepting Warranty or Additional Liability. While redistributing |
|---|
| | | the Work or Derivative Works thereof, You may choose to offer, |
|---|
| | | and charge a fee for, acceptance of support, warranty, indemnity, |
|---|
| | | or other liability obligations and/or rights consistent with this |
|---|
| | | License. However, in accepting such obligations, You may act only |
|---|
| | | on Your own behalf and on Your sole responsibility, not on behalf |
|---|
| | | of any other Contributor, and only if You agree to indemnify, |
|---|
| | | defend, and hold each Contributor harmless for any liability |
|---|
| | | incurred by, or claims asserted against, such Contributor by reason |
|---|
| | | of your accepting any such warranty or additional liability. |
|---|
| | | |
|---|
| | | END OF TERMS AND CONDITIONS |
|---|
| | | |
|---|
| | | APPENDIX: How to apply the Apache License to your work. |
|---|
| | | |
|---|
| | | To apply the Apache License to your work, attach the following |
|---|
| | | boilerplate notice, with the fields enclosed by brackets "[]" |
|---|
| | | replaced with your own identifying information. (Don't include |
|---|
| | | the brackets!) The text should be enclosed in the appropriate |
|---|
| | | comment syntax for the file format. We also recommend that a |
|---|
| | | file or class name and description of purpose be included on the |
|---|
| | | same "printed page" as the copyright notice for easier |
|---|
| | | identification within third-party archives. |
|---|
| | | |
|---|
| | | Copyright [yyyy] [name of copyright owner] |
|---|
| | | |
|---|
| | | Licensed under the Apache License, Version 2.0 (the "License"); |
|---|
| | | you may not use this file except in compliance with the License. |
|---|
| | | You may obtain a copy of the License at |
|---|
| | | |
|---|
| | | http://www.apache.org/licenses/LICENSE-2.0 |
|---|
| | | |
|---|
| | | Unless required by applicable law or agreed to in writing, software |
|---|
| | | distributed under the License is distributed on an "AS IS" BASIS, |
|---|
| | | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|---|
| | | See the License for the specific language governing permissions and |
|---|
| | | limitations under the License. |
|---|
| | |
|---|
| | | # RuoYi-App-Geek |
|---|
| | | # 移å¨ç«¯åå°ç®¡çç³»ç» RuoYi-Mobile |
|---|
| | | 主页ï¼<a href="http://fastbuild.run" target="_blank">http://fastbuild.run</a> |
|---|
| | | |
|---|
| | | <p align="center"> |
|---|
| | | <span> |
|---|
| | | <img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png"> |
|---|
| | | </span> |
|---|
| | | <span>+</span> |
|---|
| | | <span> |
|---|
| | | <img alt="logo" src="./doc/image/logo.png"> |
|---|
| | | </span> |
|---|
| | | </p> |
|---|
| | | <h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi-Geek v3.8.7.3.2</h1> |
|---|
| | | <h4 align="center">åºäºSpringBoot3+Vue3åå端å离çJavaå¿«éå¼åæ¡æ¶</h4> |
|---|
| | | <p align="center"> |
|---|
| | | <img src="https://img.shields.io/github/license/mashape/apistatus.svg"> |
|---|
| | | </p> |
|---|
| | | []('https://gitee.com/yinm/RuoYi-Mobile/stargazers') |
|---|
| | | []('https://gitee.com/yinm/RuoYi-Mobile/members') |
|---|
| | | [](https://www.apache.org/licenses/LICENSE-2.0.html) |
|---|
| | | |
|---|
| | | # å¼è¨ |
|---|
| | | ### :peach: 项ç®ç®ä» |
|---|
| | | ä¼äºä¸åä½ä¿¡æ¯åå éï¼ç§»å¨ç«¯åå·¥éæ¸æ为è¶å¿ï¼H5æå°ç¨åºæ¯èµ·APPæ¥è¯´æ´ç®åæ¹ä¾¿ãå æ¤ä¸æ¬¾å¥½ç移å¨ç«¯åºç¡å¹³å°ååæå¿
è¦ã<br> |
|---|
| | | 项ç®éç¨å½ä¸æµè¡çUniApp + uView2 æ¡æ¶å¼åï¼å®æ常è§çæ¥å¸¸å·¥ä½åè½ä¸ç§»å¨ç«¯ç¹æåè½ç»ä»¶ã |
|---|
| | | <br><br> |
|---|
| | | |
|---|
| | | RuoYi-Vue ä¸ RuoYi-App æ¯åºäº SpringBoot2+Vue2 æé çä¼ä¸çº§å¼åæ¡æ¶ï¼å¾å°äºå¹¿å¤§å¼åè
çåç±å积æåé¦ãéçææ¯çè¿ä»£è¿æ¥ï¼SpringBoot3 ä¸ Vue3 éæ¸è¿å
¥å¼åè
çè§éã为äºæ»¡è¶³å¼åè
对äºæ°ææ¯ç追æ±ï¼RuoYi å®æ¹ææ¡£æä¾äº SpringBoot2 è³ SpringBoot3 çå级æ¹æ³ãä¸æ¤åæ¶ï¼ç¤¾åºä¹æ¶ç°åºäº RuoYi-Vue3ãRuoYi-App-Vue3 ççæ¬ï¼å±ç°äºå¼åè
社åºå¯¹äºææ¯å级ççæ
ä¸åªåã |
|---|
| | | |
|---|
| | | ç¶èï¼å¨å级çè¿ç¨ä¸ï¼å®æ¹çæ¹æ³ä¸ºäºå
¼é¡¾ Java1.8 çç¹æ§ä¸ä¸äºèæ§çæ¹æ³ï¼æªå®å
¨æ¥æ±**SpringBoot3 ä¸ Java17**çå
¨é¨ç¹æ§ãè社åºç RuoYi-Vue3ãRuoYi-App-Vue3 çæ¬ç±äºåºèªä¸åçå¢éä¹æï¼**å
¼å®¹æ§åæ´åæ§**ä¸åå¨äºè®¸**ä¸è¶³**ãæ´ä¸ºå
³é®çæ¯ï¼å°½ç®¡è¿äºçæ¬**æ¯æ TypeScript**ï¼ä½**缺ä¹ä¸ä¹ç¸å¹é
ç tsconfig.json é
ç½®æ件**ï¼è¿ä½¿å¾å¨ä¸»æµç¼è¾å¨å¦ VSCode ä¸ï¼TypeScript çè¯æ³æ示ç¯å¢å¹¶æªè¾¾å°æä½³ç¶æã |
|---|
| | | |
|---|
| | | é´äºæ¤ï¼**RuoYi-Geek çæ**åºè¿èçãå®æ¨å¨ä¸ºå¹¿å¤§å¼åè
æä¾ä¸ä¸ªæ¢ä¿çåçæ¬æ ¸å¿ç¹æ§ï¼åæ´å社åºçä¼ç¹çå
¨æ°è§£å³æ¹æ¡ãå¨**RuoYi-Geek**ä¸ï¼æ们深å
¥è°ç äºä¼ä¸å¼åä¸å¸¸ç¨ç RuoYi æ©å±ï¼å¹¶ç´æ¥å¨æ¡æ¶ä¸éæï¼ç¡®ä¿å¼åè
è½å¤å¿«éä¸æï¼é«æå¼åãåæ¶ï¼æ们éç¨äºææ°ç**SpringBoot3+Vue3**ææ¯æ ï¼å½»åºç§»é¤äºä¸ºäºå
¼å®¹ Java1.8 èä¿ççèæ§æ¹æ³ãæ´ä¸ºéè¦çæ¯ï¼æ们为 TypeScript å¼åç¯å¢å å
¥äºå¸¸ç¨ç tsconfig.json é
ç½®ï¼ä½¿å¾å¼åè
å¨ VSCode çç¼è¾å¨ä¸è½å¤è·å¾æ´ä¸ºèéã便æ·çè¯æ³æ示ä½éªã |
|---|
| | | |
|---|
| | | **RuoYi-Geek**ä¸ä»
ä»
æ¯ä¸ä¸ªç®åçå级çæ¬ï¼æ´æ¯å¯¹äº RuoYi çæçä¸æ¬¡å
¨é¢ä¼åä¸æ´åãæ们ç¸ä¿¡ï¼éè¿**RuoYi-Geek çæ**ï¼å¼åè
å°è½å¤æ´ä¸ºé«æãææ¦å°å¼ååºä¼ç§çä¼ä¸çº§åºç¨ã |
|---|
| | | |
|---|
| | | æ¬é¡¹ç®ä¸º**RuoYi-Geek çæ**ç RuoYi-App é¨åã |
|---|
| | | **注æï¼** |
|---|
| | | æ¬äººçå
¶ä»ä¸¤ä¸ªæ¨èæé
çé¡¹ç® |
|---|
| | | |
|---|
| | | 1. [Ruoyi-SpringBoot3-Geek: è¿æ¯è¥ä¾æ客çæçå端 Springboot3 çæ¬ (gitee.com)](https://gitee.com/geek-xd/ruoyi-spring-boot3-geek) |
|---|
| | | 2. [RuoYi-Vue3-Geek: è¿æ¯è¥ä¾æ客çæç Vue3 çæ¬ (gitee.com)](https://gitee.com/geek-xd/ruo-yi-vue3-geek) |
|---|
| | | |
|---|
| | | **ä¸ Ruoyi-App ç¸æ¯è¾** |
|---|
| | | |
|---|
| | | 1. ä½¿ç¨ UniApp+Vue3 çææ°æ¡æ¶ |
|---|
| | | 2. æ¯æ TSãSCSSãLESS ç对 js å css çæ©å
è¯è¨ |
|---|
| | | 3. ä½¿ç¨ Pinia ä»£æ¿ Vuexï¼æ´å 轻巧ç®å |
|---|
| | | 4. ä½¿ç¨ uView-Plusï¼å¥½çç uiï¼ ä»£æ¿ uView-ui ç ui ç»ä»¶åº |
|---|
| | | 5. ä½¿ç¨ uChartsï¼æ¹ä¾¿çå¾è¡¨ï¼ç»å¾å·¥å
· |
|---|
| | | 6. å·²ç»å®æäºåå
æä½ |
|---|
| | | 7. æä¾äºé¢è²éæ©å¨ãäºç»´ç ç常ç¨ç»ä»¶ |
|---|
| | | 8. å°åæå
置工å
·è¿è¡ç±»åæ å® |
|---|
| | | 9. åå«æä¾äº uview-plus å ucharts ç模æ¿ï¼å¯ä»¥ç´æ¥ä½¿ç¨æè
ç¨äºå¦ä¹ ï¼ |
|---|
| | | |
|---|
| | | # å¿«éå¼å§ |
|---|
| | | |
|---|
| | | **注æï¼** node çæ¬éè¦ 16+ |
|---|
| | | |
|---|
| | | ## è¿ç§»å°Hbuilderï¼ä¸ä¾èµHbuilderç项ç®ä¸éè¦è¿ç§»ï¼ |
|---|
| | | |
|---|
| | | 1. srcè·¯å¾ä½ä¸ºé¡¹ç®æ ¹è·¯å¾ |
|---|
| | | 2. å°index.htmlãpackage.jsonãvite.config.jsãtsconfig.jsonã.gitignoreç²è´´å°srcç®å½ä¸ |
|---|
| | | 3. å¨srcç®å½ä¸è¿è¡npm install |
|---|
| | | 4. ä¿®æ¹index.htmlä¸ç./src/main.js为./main.js |
|---|
| | | 5. å¨HBuilderXä¸è¿è¡æ¶æ³¨æè§å¯æ¯å¦ä½¿ç¨çæ¯Vue3çç¼è¯å¨ï¼è¥ä¸æ¯è¯·èªè¡æ¥æ¾æ¹æ³è§£å³ï¼æ¬äººå¯¹HbuilderX使ç¨ä¸å¤ï¼ |
|---|
| | | ### :pear: å端ä¸è½½ |
|---|
| | | ä¸è½½å°åï¼<a href="http://fastbuild.run" target="_blank">ä¼ éé¨</a><br> |
|---|
| | | ***注ï¼ç®å移å¨ç«¯æ¯æè¥ä¾ç®¡çå¹³å°å
¨ç³»åï¼ååºç¨ãå¾®æå¡ãMySQLçãOracleçãSqlServerçãAntdççï¼ï¼éè¦éé
å
¶ä»çæ¬ç请å°ä¸é¢å°åä¸è½½ç§»å¨ç«¯æºç ã*** |
|---|
| | | <br><br> |
|---|
| | | |
|---|
| | | |
|---|
| | | ## å®è£
|
|---|
| | | ### :watermelon: ææ¯æ |
|---|
| | | | ç»ä»¶ | çæ¬ | |
|---|
| | | |----------|--------| |
|---|
| | | | uview-ui | 2.0.31 | |
|---|
| | | | qiun-data-charts | 2.4.3-20220505 | |
|---|
| | | |
|---|
| | | ä¸ä¸ä¸ç§æ¹å¼åå¯ï¼æè§é度 pnpm > yarn > cnpm > npm |
|---|
| | | <br><br> |
|---|
| | | |
|---|
| | | **_Vue3/Vite çè¦æ± node çæ¬^14.18.0 || >=16.0.0_** |
|---|
| | | ### :tw-1f348: ç³»ç»é
ç½® |
|---|
| | | 1. å端请æ±å°åé
ç½®ï¼ |
|---|
| | | |
|---|
| | | ```shell |
|---|
| | | npm install |
|---|
| | | cnpm install |
|---|
| | | yarn |
|---|
| | | pnpm install |
|---|
| | | ``` |
|---|
| | | # é
ç½®æ件路å¾ï¼/config/environment.js |
|---|
| | | # ä¿®æ¹baseURLå±æ§ |
|---|
| | | |
|---|
| | | const environment = { |
|---|
| | | // å¼åç¯å¢é
ç½® |
|---|
| | | development: { |
|---|
| | | // æ¬å°é¨ç½²çå端 |
|---|
| | | baseURL: 'http://localhost:8080', |
|---|
| | | |
|---|
| | | // ç´æ¥ä½¿ç¨çº¿ä¸å端 |
|---|
| | | // baseURL: 'http://vue.ruoyi.vip/prod-api' |
|---|
| | | }, |
|---|
| | | // ç产ç¯å¢é
ç½® |
|---|
| | | production: { |
|---|
| | | baseURL: 'http://vue.ruoyi.vip/prod-api' // åå¸æ¶éè¦ä¿®æ¹ä¸ºå端å®é
å°å |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | module.exports = { |
|---|
| | | environment: environment[process.env.NODE_ENV] |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | 2. H5å¯å¨ç«¯å£é
ç½®ï¼ |
|---|
| | | |
|---|
| | | ***注æï¼ä¸è¦å¨manifest.jsonä¸é
ç½®h5å¯å¨ä¿¡æ¯ï¼å¯è½ä¼å¼åå端æ¥å£è®¿é®å¼å¸¸*** |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | # é
ç½®æ件路å¾ï¼/vue.config.js |
|---|
| | | # ä¿®æ¹portå±æ§ |
|---|
| | | |
|---|
| | | const { environment } = require('./config/environment.js') |
|---|
| | | |
|---|
| | | module.exports = { |
|---|
| | | devServer: { |
|---|
| | | port: 9001, |
|---|
| | | proxy: { |
|---|
| | | '/': { |
|---|
| | | target: environment.baseURL, |
|---|
| | | ws: true, |
|---|
| | | changeOrigin: true, |
|---|
| | | pathRewrite: { |
|---|
| | | '^/': '' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | # å¯å¨ |
|---|
| | | |
|---|
| | | 1. å°é¡¹ç®ä¸è½½å°æ¬å° |
|---|
| | | 2. åå§å项ç®---è¿å
¥é¡¹ç®æ ¹è·¯å¾è¿è¡æ令åå§åé¡¹ç® |
|---|
| | | `npm install` |
|---|
| | | 3. è¿è¡é¡¹ç®---è¿å
¥é¡¹ç®æ ¹è·¯å¾è¿è¡æ令ï¼å¨ package.json è½æ¾å°æææ令ï¼ï¼ |
|---|
| | | 以微信å°ç¨åºä¸ºä¾ï¼`npm run dev:mp-weixin` |
|---|
| | | 以 H5 ä¸ºä¾ ` npm run dev:h5` |
|---|
| | | 4. æ¥çé¡¹ç® ä»¥å¾®ä¿¡å°ç¨åºä¸ºä¾ï¼ |
|---|
| | | æå¼å¾®ä¿¡å¼åè
å·¥å
·ï¼å¯¼å
¥é¡¹ç®è·¯å¾ dist\dev\mp-weixin |
|---|
| | | 以 H5 为ä¾ï¼æå¼æµè§å¨ï¼è¾å
¥æ§å¶å°è¾åºçå°å |
|---|
| | | 注ï¼å
¬ä¼å·å±äº H5ï¼ä»¥å¾®ä¿¡å
¬ä¼å·ä¸ºä¾ï¼æå¼å¾®ä¿¡å¼åè
å·¥å
·ï¼è¾å
¥æ§å¶å°è¾åºçå°å |
|---|
| | | 5. æå
项ç®---è¿å
¥é¡¹ç®æ ¹è·¯å¾è¿è¡æ令ï¼å¨ package.json è½æ¾å°æææ令ï¼ï¼ |
|---|
| | | 以微信å°ç¨åºä¸ºä¾ï¼`npm run build:mp-weixin` |
|---|
| | | 以 H5 为ä¾ï¼ `npm run build:h5` |
|---|
| | | |
|---|
| | | ### 代ç å缩 |
|---|
| | | |
|---|
| | | é»è®¤æ¯å¯å¨ä»£ç å缩çï¼ |
|---|
| | | |
|---|
| | | å¦æéè¦å
³é代ç å缩ï¼å¯ä»¥å° vite.config.js ä¸ç build.minify èµå¼ä¸º falseã |
|---|
| | | |
|---|
| | | å¦æéè¦æå¼ä»£ç å缩ï¼å¯ä»¥å° vite.config.js ä¸ç build.minify èµå¼ä¸º trueã |
|---|
| | | |
|---|
| | | # å
ç½®ç»ä»¶(geek-xd) |
|---|
| | | |
|---|
| | | 1. é¢è²éæ©å¨ç»ä»¶ |
|---|
| | | 2. äºç»´ç ç»ä»¶ |
|---|
| | | 3. åå½¢èåç»ä»¶ |
|---|
| | | 4. 常ç¨ç订åç»ä»¶ |
|---|
| | | 5. ä¿¡æ¯å±ç¤ºç»ä»¶ |
|---|
| | | |
|---|
| | | # æ件çä½¿ç¨ |
|---|
| | | |
|---|
| | | #### tab - 页é¢æ件 |
|---|
| | | |
|---|
| | | å¯ä»¥éè¿è®¾ç½®åæ°ä¸ç config.data æ¥å®ç°é¡µé¢ä¼ å |
|---|
| | | |
|---|
| | | | æ¹æ³ | ä½ç¨ | åæ° | |
|---|
| | | | ------------ | ------------------------------------------------ | ----------- | |
|---|
| | | | getData | å¯ä»¥æ¿å°ä¸ä¸ªé¡µé¢éè¿ tab ä¼ éçåæ° | æ | |
|---|
| | | | reLaunch | å
³éææ页é¢ï¼æå¼å°åºç¨å
çæä¸ªé¡µé¢ | urlãconfig | |
|---|
| | | | switchTab | è·³è½¬å° tabBar 页é¢ï¼å¹¶å
³éå
¶ä»ææé tabBar é¡µé¢ | urlãconfig | |
|---|
| | | | redirectTo | å
³éå½å页é¢ï¼è·³è½¬å°åºç¨å
çæä¸ªé¡µé¢ | urlãconfig | |
|---|
| | | | navigateTo | ä¿çå½å页é¢ï¼è·³è½¬å°åºç¨å
çæä¸ªé¡µé¢ | urlãconfig | |
|---|
| | | | navigateBack | å
³éå½å页é¢ï¼è¿åä¸ä¸é¡µé¢æå¤çº§é¡µé¢ | config | |
|---|
| | | |
|---|
| | | #### auth - é´ææ件 |
|---|
| | | |
|---|
| | | ä¸é¢æææ¹æ³è¿åå¼é½æ¯å¸å°å¼ï¼permission 代表æéå符串ï¼role 代表è§è²å符串ï¼å¤æ°å½¢å¼ä»£è¡¨æ°ç»ã |
|---|
| | | |
|---|
| | | | æ¹æ³ | ä½ç¨ | åæ° | |
|---|
| | | | ----------- | ------------------------------------------ | ----------- | |
|---|
| | | | hasPermi | éªè¯ç¨æ·æ¯å¦å
·å¤ææé | permission | |
|---|
| | | | hasPermiOr | éªè¯ç¨æ·æ¯å¦å«ææå®æéï¼åªéå
å«å
¶ä¸ä¸ä¸ª | permissions | |
|---|
| | | | hasPermiAnd | éªè¯ç¨æ·æ¯å¦å«ææå®æéï¼å¿
é¡»å
¨é¨æ¥æ | permissions | |
|---|
| | | | hasRole | éªè¯ç¨æ·æ¯å¦å
·å¤æè§è² | role | |
|---|
| | | | hasRoleOr | éªè¯ç¨æ·æ¯å¦å«ææå®è§è²ï¼åªéå
å«å
¶ä¸ä¸ä¸ª | roles | |
|---|
| | | | hasRoleAnd | roles | roles | |
|---|
| | | |
|---|
| | | #### modal - å¼¹çªæ件 |
|---|
| | | |
|---|
| | | content æ¯æ¶æ¯å
容ï¼option æ¯è¯¦ç»é
ç½®ã |
|---|
| | | |
|---|
| | | | æ¹æ³ | ä½ç¨ | åæ° | |
|---|
| | | | ------------ | ------------------------------ | ------- | |
|---|
| | | | msg | æ¶æ¯æ示 | content | |
|---|
| | | | msgError | é误æ¶æ¯ | content | |
|---|
| | | | msgSuccess | æåæ¶æ¯ | content | |
|---|
| | | | hideMsg | éèæ¶æ¯ | æ | |
|---|
| | | | alert | å¼¹åºæ示 | content | |
|---|
| | | | confirm | 确认çªä½ | content | |
|---|
| | | | showToast | æç¤ºä¿¡æ¯ | option | |
|---|
| | | | loading | æå¼é®ç½©å±ï¼éè¦æå¨å
³éé®ç½©å± | content | |
|---|
| | | | closeLoading | å
³éé®ç½©å± | æ | |
|---|
| | | |
|---|
| | | #### bus - äºä»¶æ件 |
|---|
| | | |
|---|
| | | eventName æ¯äºä»¶å称ï¼eventFun æ¯äºä»¶å¤çå½æ°ï¼è¯·å°½éé¿å
äºä»¶æ件ç使ç¨ï¼è¯·å¨ç»ä»¶éæ¯æ¯è§£ç»ç´ æ该ç»ä»¶æå
³çäºä»¶ï¼é¿å
产ç bugã |
|---|
| | | |
|---|
| | | | æ¹æ³ | ä½ç¨ | åæ° | |
|---|
| | | | ----- | ------------ | ------------------- | |
|---|
| | | | $on | ç»å®ä¸ä¸ªäºä»¶ | eventNameãeventFun | |
|---|
| | | | $off | 解ç»ä¸ä¸ªäºä»¶ | eventName | |
|---|
| | | | $emit | 触åä¸ä¸ªäºä»¶ | eventNameã...args | |
|---|
| | | |
|---|
| | | #### socket |
|---|
| | | |
|---|
| | | 设置项 enableUUIDï¼æ¯å¦å¯ç¨åºäº uuid çæ¶æ¯å¤çæºå¶ï¼è¦æ±å½åéçæ¶æ¯æºå¸¦ uuid å段æ¶ï¼è¿åçæ¶æ¯ä¹è¦æºå¸¦ uuid å段ã |
|---|
| | | |
|---|
| | | 设置项 enableEventï¼æ¯å¦å¯ç¨åºäºäºä»¶çæ¶æ¯å¤çæºå¶ï¼è¦æ±å½å¸æ被äºä»¶å¤çå½æ°å¤ççæ¶æ¯éè¦æºå¸¦ event å段ã |
|---|
| | | |
|---|
| | | | æ¹æ³ | ä½ç¨ | åæ° | |
|---|
| | | | --------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | |
|---|
| | | | connect | è¿æ¥ websockeï¼å½è¿æ¥æåå触ååè°å½æ° | æç®åçç¨æ³å°±æ¯ä¼ å
¥{url:"ws://demo"} | |
|---|
| | | | send | åéä¿¡æ¯ï¼å½ uuid ä¸ä¸ºç©ºä¸ä¸ä¸º false æ¶ï¼å½æ¶å°æºå¸¦ç¸å uuid çæ¶æ¯æ¶è§¦ååè°å½æ°ï¼åªè§¦åä¸æ¬¡ãå¦åç±é»è®¤å¤çå½æ°å¤çã | msg æ¶æ¯å
容ï¼ä¼è¢«å¤çæ json å符串 uuid å¯ä¸æ è¯ç¬¦ï¼å¯ä»¥æå¨ä¼ å
¥ï¼ä¹å¯ä»¥è®¾ç½®ä¸º true å½ä¸º true æ¶ä¼èªå¨çæä¸ä¸ª uuid 并添å å° msg ä¸ã | |
|---|
| | | | close | å
³éè¿æ¥ï¼ä¼è§¦ååè°å½æ°çå
容ï¼ä¸ä¼è§¦åé»è®¤å
³éäºä»¶çå¤çå½æ°ï¼ä¹ä¸ä¼ä¿®æ¹é»è®¤å
³éäºä»¶çå¤çå½æ°ã | æ | |
|---|
| | | | on | çå¬äºä»¶ï¼å½æ¶å°æºå¸¦ event çæ¶æ¯æ¶ä¼è°ç¨åè°å½æ°ã | event äºä»¶çå称 | |
|---|
| | | | off | åæ¶çå¬äºä»¶ | | |
|---|
| | | | onMessage | å®ä¹é»è®¤çå¬äºä»¶ | callback é»è®¤çå¬äºä»¶çå¤çå½æ° | |
|---|
| | | | onError | å®ä¹å¼å¸¸äºä»¶ | callback é»è®¤å¼å¸¸äºä»¶çå¤çå½æ° | |
|---|
| | | | onClose | å®ä¹å
³éäºä»¶ | callback é»è®¤å
³éäºä»¶çå¤çå½æ° | |
|---|
| | | |
|---|
| | | # ä½è
建议 |
|---|
| | | |
|---|
| | | ### 对äºéé¡¹å¼ |
|---|
| | | |
|---|
| | | ```js |
|---|
| | | this.$tab; // 建议使ç¨this.$tabè¿è¡é¡µé¢è·³è½¬ï¼çç±ï¼ä¾¿äºå¨è·³è½¬åå¤çå
¶ä»äºå¡ |
|---|
| | | this.$auth; // 建议使ç¨this.$authè¿è¡é´ææä½ |
|---|
| | | this.$modal; // 建议使ç¨this.$modalæå¼å¼¹çªï¼çç±ï¼ä¾¿äºä»¥åæ³è¦ä½¿ç¨èªå®ä¹å¼¹çª |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### 对äºç»åå¼ |
|---|
| | | |
|---|
| | | ```js |
|---|
| | | import tab from "@/plugins/tab"; // 建议使ç¨tabè¿è¡é¡µé¢è·³è½¬ï¼çç±ï¼ä¾¿äºå¨è·³è½¬åå¤çå
¶ä»äºå¡ |
|---|
| | | import auth from "@/plugins/auth"; // 建议使ç¨authè¿è¡é´ææä½ |
|---|
| | | import modal from "@/plugins/modal"; // 建议使ç¨modalæå¼å¼¹çªï¼çç±ï¼ä¾¿äºä»¥åæ³è¦ä½¿ç¨èªå®ä¹å¼¹çª |
|---|
| | | |
|---|
| | | // ä¹å¯ä»¥ä½¿ç¨ä¸é¢çæ¹å¼ |
|---|
| | | import { tab, auth, modal } from "@/plugins"; |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### å¯¹äº ucharts |
|---|
| | | |
|---|
| | | 建议å³ä¾¿ææ¶ä¸ä½¿ç¨å¾è¡¨ä¹ä¸è¦å é¤å®ï¼ä»¥åå¯è½ä¼ç¨å°ã |
|---|
| | | |
|---|
| | | # å缩å
å |
|---|
| | | |
|---|
| | | (主å
æä½ 809kb å·¦å³) |
|---|
| | | |
|---|
| | | ### å é¤ geek ç»ä»¶ |
|---|
| | | |
|---|
| | | 1. å é¤ pages_geek å components/geek-xd æ件夹 |
|---|
| | | 2. å é¤ pages.json ä¸ subPackages ç root å¼ä¸ºâpages_geek/pagesâçé
ç½® |
|---|
| | | 3. å é¤ pages/template.config.js ä¸ geek ç»ä»¶ |
|---|
| | | |
|---|
| | | ### å»é¤æ¨¡æ¿ |
|---|
| | | |
|---|
| | | ï¼å ç¨ä¸»å
582kb å·¦å³ï¼ |
|---|
| | | |
|---|
| | | 1. å é¤ pages_templateãpages_qiun 两个æ件夹 |
|---|
| | | 2. å é¤ pages.json ä¸ subPackages ç root å¼ä¸ºâpages_qiun/pagesâãâpages_template/pagesâç两个é
ç½® |
|---|
| | | 3. å é¤ pages/template.config.js å pages/template.vue |
|---|
| | | 4. å é¤ pages.json ä¸ subPackages çâtabBarâä¸ç模æ¿ä¸é¡¹åâpagesâä¸æ¨¡æ¿çä¸é¡¹ |
|---|
| | | 5. å é¤ static ä¸ç uviewï¼éé¢é½æ¯ç¤ºä¾å¾çã |
|---|
| | | 6. å é¤ plugins ä¸ç config.js å common.jsï¼å¹¶å¨ plugins/index.js ä¸å é¤ç¸å
³é
ç½® |
|---|
| | | |
|---|
| | | ### å é¤ uchart |
|---|
| | | |
|---|
| | | ï¼å ç¨ä¸»å
175kb å·¦å³ï¼ä¸å»ºè®®å é¤ï¼ä»¥é²ä»¥åä¼ç¨ï¼ |
|---|
| | | |
|---|
| | | 1. å é¤ components/qiun-data-charts æ件夹 |
|---|
| | | 2. å é¤ pages.json ä¸ç easycom ä¸ç custom ä¸ç"qiun-(.\*)"çé£ä¸è¡ |
|---|
| | | 3. å é¤ pages/index ä¸ä½¿ç¨ âqiun-data-chartsâ çé¨å |
|---|
| | | |
|---|
| | | ### å é¤ uview |
|---|
| | | |
|---|
| | | ï¼æéå¼å
¥ï¼æ²¡å¿
è¦å é¤ï¼ |
|---|
| | | |
|---|
| | | 1. main.js æè
main.ts ä¸å é¤ |
|---|
| | | |
|---|
| | | ```js |
|---|
| | | import uviewPlus from "uview-plus"; |
|---|
| | | // ...... |
|---|
| | | app.use(uviewPlus); |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 2. uni.scss ä¸å é¤ @import 'uview-plus/theme.scss'; |
|---|
| | | 3. App.vue ä¸å é¤ @import '@/static/scss/index.scss'; |
|---|
| | | 4. package.json ä¸å é¤ "clipboard": "^2.0.11","dayjs": "^1.11.9","uview-plus": "^3.1.36", |
|---|
| | | |
|---|
| | | # åè½æ¼ç¤º |
|---|
| | | |
|---|
| | | ### :lemon: ç³»ç»æªå¾ |
|---|
| | | <table> |
|---|
| | | <tr> |
|---|
| | | <td><img src="./doc/image/template1.png" /></td> |
|---|
| | | <td><img src="./doc/image/template2.png" /></td> |
|---|
| | | <td valign="top"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/login.jpg"/></td> |
|---|
| | | <td valign="top"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/index.jpg"/></td> |
|---|
| | | <td valign="top"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/work.jpg"/></td> |
|---|
| | | <td valign="top"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/my.jpg"/></td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td><img src="./doc/image/index.png" /></td> |
|---|
| | | <td><img src="./doc/image/mallMenu.png"/></td> |
|---|
| | | <td valign="top"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/notice-m.jpg"/></td> |
|---|
| | | <td valign="top"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/notice-e.jpg"/></td> |
|---|
| | | <td valign="top"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/prefile.jpg"/></td> |
|---|
| | | <td valign="top"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/pwd-reset.jpg"/></td> |
|---|
| | | </tr> |
|---|
| | | </table> |
|---|
| | | <br><br> |
|---|
| | | |
|---|
| | | # éå½ |
|---|
| | | ### :lollipop: ææ¯äº¤æµ |
|---|
| | | QQ群ï¼860974500 |
|---|
| | | |
|---|
| | | [Vue3 å®ç½](https://cn.vuejs.org/)ï¼ |
|---|
| | | [uniapp å®ç½](https://uniapp.dcloud.net.cn/)ï¼ |
|---|
| | | [uView-plus å®ç½](https://uiadmin.net/uview-plus/)ï¼ |
|---|
| | | [uCharts å®ç½](https://www.ucharts.cn/v2/#/)ï¼ |
|---|
| | | [RuoYi å®ç½](http://ruoyi.vip/)ï¼ |
|---|
| | | <br><br> |
|---|
| | | #### å¦æè§å¾é¡¹ç®è¿ä¸éï¼ä¸å®è®°å¾ :star: ä¸ä¸ |
|---|
| | | #### å¦æè§å¾é¡¹ç®è¿ä¸éï¼ä¸å®è®°å¾ :star: ä¸ä¸ |
|---|
| | | #### å¦æè§å¾é¡¹ç®è¿ä¸éï¼ä¸å®è®°å¾ :star: ä¸ä¸ |
|---|
| | | <br><br> |
|---|
| | | |
|---|
| | | # èç³»æä»¬ï¼ |
|---|
| | | |
|---|
| | | QQ 交æµç¾¤ï¼744785891 |
|---|
| | | ### :poultry_leg: ç»ä½è
å 个鸡è
¿ |
|---|
| | | å¦æ对æ¨çå·¥ä½æå¦ä¹ 产çäºè®¸å¸®å©ï¼å¯ä»¥ç»ä½è
çåé¤å ä¸ä¸ªé¸¡è
¿ :poultry_leg: :poultry_leg: :poultry_leg: ï¼~~ |
|---|
| | | <table> |
|---|
| | | <tr> |
|---|
| | | <td valign="top" width="180"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/wechat_pay.jpg"/></td> |
|---|
| | | <td valign="top" width="180"><img src="https://gitee.com/yinm/RuoYi-Mobile/raw/master/static/preview/ali_pay.jpg"/></td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td valign="top" align="center">微信æå©</td> |
|---|
| | | <td valign="top" align="center">æ¯ä»å®æå©</td> |
|---|
| | | </tr> |
|---|
| | | </table> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import request from '@/config/request.js'; |
|---|
| | | |
|---|
| | | // è·åéªè¯ç |
|---|
| | | export const image = () => request.get('/captchaImage', null, { custom: { auth: false, loading: false } }) |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import request from '@/config/request.js'; |
|---|
| | | |
|---|
| | | // è·åæä½æ¥å¿ |
|---|
| | | export const operLog = (params) => request.get('/monitor/operlog/list', params) |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import request from '@/config/request.js'; |
|---|
| | | |
|---|
| | | // ç¨æ·ç»å½(è´¦å·+å¯ç +éªè¯ç ) |
|---|
| | | export const login = (params) => request.post('/login', params, { custom: { auth: false } }) |
|---|
| | | |
|---|
| | | // ç¨æ·éåº |
|---|
| | | export const logout = () => request.get('/logout') |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import request from '@/config/request.js'; |
|---|
| | | |
|---|
| | | // è·åç¨æ·ä¿¡æ¯ |
|---|
| | | export const getInfo = () => request.get('/getInfo') |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import request from '@/config/request.js'; |
|---|
| | | |
|---|
| | | // è·åéç¥å
¬åå表 |
|---|
| | | export const noticeList = (params) => request.get('/system/notice/list', params) |
|---|
| | | |
|---|
| | | // è·åéç¥å
¬å详æ
ä¿¡æ¯ |
|---|
| | | export const noticeById = (id) => request.get('/system/notice/' + id) |
|---|
| | | |
|---|
| | | // æ°å¢éç¥å
¬å详æ
ä¿¡æ¯ |
|---|
| | | export const noticeAdd = (params) => request.post('/system/notice', params) |
|---|
| | | |
|---|
| | | // ä¿®æ¹éç¥å
¬å详æ
ä¿¡æ¯ |
|---|
| | | export const noticeModify = (params) => request.put('/system/notice', params) |
|---|
| | | |
|---|
| | | // å é¤éç¥å
¬å详æ
ä¿¡æ¯ |
|---|
| | | export const noticeDelete = (id) => request.delete('/system/notice/' + id) |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import request from '@/config/request.js'; |
|---|
| | | |
|---|
| | | // è·åç¨æ·å表 |
|---|
| | | export const userList = (params) => request.get('/system/user/list', params) |
|---|
| | | |
|---|
| | | // è·åç¨æ·ä¿¡æ¯ |
|---|
| | | export const userById = (id) => request.get('/system/user/' + id) |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="float-button"> |
|---|
| | | <u-button :type="type" :icon="icon" :shape="shape" :disabled="disabled" :size="size" @click="$emit('click')"></u-button> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æé®çé¢ç½®æ ·å¼ï¼infoï¼primaryï¼errorï¼warningï¼success |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.type |
|---|
| | | }, |
|---|
| | | // å¾æ |
|---|
| | | icon: { |
|---|
| | | type: String |
|---|
| | | }, |
|---|
| | | // æé®å°ºå¯¸ï¼largeï¼normalï¼smallï¼mini |
|---|
| | | size: { |
|---|
| | | type: String, |
|---|
| | | default: 'large' |
|---|
| | | }, |
|---|
| | | // æé®å½¢ç¶ï¼circleï¼ä¸¤è¾¹ä¸ºååï¼ï¼squareï¼å¸¦åè§ï¼ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: 'circle' |
|---|
| | | }, |
|---|
| | | // æé®æ¯å¦é空 |
|---|
| | | plain: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.button.plain |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦æ¢ç¶æ |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.button.disabled |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .float-button { |
|---|
| | | bottom: 100px; |
|---|
| | | right: 20px; |
|---|
| | | width: 52px; |
|---|
| | | height: 52px; |
|---|
| | | position: fixed; |
|---|
| | | z-index: 10; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <u-gap :height="height" :bgColor="bgColor"></u-gap> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 16 |
|---|
| | | }, |
|---|
| | | bgColor: { |
|---|
| | | type: String, |
|---|
| | | default: '#f4f4f5' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <block v-if="isShow()"> |
|---|
| | | <view v-if="hideBtn" class="u-navbar" :style="{ backgroundColor: bgColor, textAlign: 'center' }"> |
|---|
| | | <view |
|---|
| | | class="u-navbar__placeholder" |
|---|
| | | v-if="fixed" |
|---|
| | | :style="{ |
|---|
| | | height: $u.addUnit($u.getPx(height) + $u.sys().statusBarHeight,'px'), |
|---|
| | | }" |
|---|
| | | ></view> |
|---|
| | | <view :class="[fixed && 'u-navbar--fixed']"> |
|---|
| | | <u-status-bar v-if="safeAreaInsetTop" :bgColor="bgColor"></u-status-bar> |
|---|
| | | <view class="u-navbar__content" :class="[border && 'u-border-bottom']" :style="{ height: contentHeight, backgroundColor: bgColor }"> |
|---|
| | | <view class="u-navbar__content__left" hover-class="u-navbar__content__left--hover" hover-start-time="150" style="position: relative;"> |
|---|
| | | <text class="u-line-1 u-navbar__content__title" :style="[{ height: contentHeight, lineHeight: contentHeight, margin: '0 auto' }, $u.addStyle(titleStyle)]"> |
|---|
| | | {{ title }} |
|---|
| | | </text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-navbar v-else :title="title" :autoBack="true" :placeholder="true" :bgColor="bgColor"></u-navbar> |
|---|
| | | </block> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * Navbar èªå®ä¹å¯¼èªæ |
|---|
| | | * @property {Boolean} h5Show æ¯å¦å¨h5模å¼ä¸æ¾ç¤º ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} hideBtn æ¯å¦éèè¿åæé® ï¼é»è®¤ false ï¼ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | mixins: [props], |
|---|
| | | props: { |
|---|
| | | h5Show: Boolean, |
|---|
| | | hideBtn: Boolean, |
|---|
| | | back: Boolean, |
|---|
| | | home: Boolean |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | systemInfo : this.$store.getters.getSystemInfo, |
|---|
| | | statusBarHeight: uni.$u.addUnit(uni.$u.getPx(this.height) + uni.$u.sys().statusBarHeight, 'px'), |
|---|
| | | contentHeight: uni.$u.addUnit(this.height) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | isShow () { |
|---|
| | | if (this.systemInfo.uniPlatform == 'web') { |
|---|
| | | return this.h5Show |
|---|
| | | } |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .u-navbar { |
|---|
| | | |
|---|
| | | &--fixed { |
|---|
| | | position: fixed; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | top: 0; |
|---|
| | | z-index: 11; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | @include flex(row); |
|---|
| | | align-items: center; |
|---|
| | | height: 44px; |
|---|
| | | background-color: #9acafc; |
|---|
| | | position: relative; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | &__left, |
|---|
| | | &__right { |
|---|
| | | padding: 0 13px; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | @include flex(row); |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__left { |
|---|
| | | left: 0; |
|---|
| | | |
|---|
| | | &--hover { |
|---|
| | | opacity: 0.7; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: 15px; |
|---|
| | | margin-left: 3px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__title { |
|---|
| | | text-align: center; |
|---|
| | | font-size: 16px; |
|---|
| | | color: $u-main-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__right { |
|---|
| | | right: 0; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: 15px; |
|---|
| | | margin-left: 3px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¯å¦å¼å¯é¡¶é¨å®å
¨åºéé
|
|---|
| | | safeAreaInsetTop: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.navbar.safeAreaInsetTop |
|---|
| | | }, |
|---|
| | | // åºå®å¨é¡¶é¨æ¶ï¼æ¯å¦çæä¸ä¸ªçé«å
ç´ ï¼ä»¥é²æ¢å¡é· |
|---|
| | | placeholder: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.navbar.placeholder |
|---|
| | | }, |
|---|
| | | // æ¯å¦åºå®å¨é¡¶é¨ |
|---|
| | | fixed: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.navbar.fixed |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºä¸è¾¹æ¡ |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.navbar.border |
|---|
| | | }, |
|---|
| | | // 左边çå¾æ |
|---|
| | | leftIcon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.navbar.leftIcon |
|---|
| | | }, |
|---|
| | | // 左边çæ示æå |
|---|
| | | leftText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.navbar.leftText |
|---|
| | | }, |
|---|
| | | // å·¦å³çæ示æå |
|---|
| | | rightText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.navbar.rightText |
|---|
| | | }, |
|---|
| | | // å³è¾¹çå¾æ |
|---|
| | | rightIcon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.navbar.rightIcon |
|---|
| | | }, |
|---|
| | | // æ é¢ |
|---|
| | | title: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.navbar.title |
|---|
| | | }, |
|---|
| | | // èæ¯é¢è² |
|---|
| | | bgColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.navbar.bgColor |
|---|
| | | }, |
|---|
| | | // æ é¢ç宽度 |
|---|
| | | titleWidth: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.navbar.titleWidth |
|---|
| | | }, |
|---|
| | | // 导èªæ é«åº¦ |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.navbar.height |
|---|
| | | }, |
|---|
| | | // 左侧è¿åå¾æ çå¤§å° |
|---|
| | | leftIconSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.navbar.leftIconSize |
|---|
| | | }, |
|---|
| | | // 左侧è¿åå¾æ çé¢è² |
|---|
| | | leftIconColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.navbar.leftIconColor |
|---|
| | | }, |
|---|
| | | // ç¹å»å·¦ä¾§åºå(è¿åå¾æ )ï¼æ¯å¦èªå¨è¿åä¸ä¸é¡µ |
|---|
| | | autoBack: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.navbar.autoBack |
|---|
| | | }, |
|---|
| | | // æ é¢çæ ·å¼ï¼å¯¹è±¡æå符串 |
|---|
| | | titleStyle: { |
|---|
| | | type: [String, Object], |
|---|
| | | default: uni.$u.props.navbar.titleStyle |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template xlang="wxml"> |
|---|
| | | <view class="tki-tree"> |
|---|
| | | <view class="tki-tree-mask" :class="{'show':showTree}" @tap="_cancel"></view> |
|---|
| | | <view class="tki-tree-cnt" :class="{'show':showTree}"> |
|---|
| | | <view class="tki-tree-bar"> |
|---|
| | | <view class="tki-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">åæ¶</view> |
|---|
| | | <view class="tki-tree-bar-title" :style="{'color':titleColor}">{{title}}</view> |
|---|
| | | <view class="tki-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">ç¡®å®</view> |
|---|
| | | </view> |
|---|
| | | <view class="tki-tree-view"> |
|---|
| | | <scroll-view class="tki-tree-view-sc" :scroll-y="true"> |
|---|
| | | <block v-for="(item, index) in treeList" :key="index"> |
|---|
| | | <view class="tki-tree-item" :style="[{ |
|---|
| | | paddingLeft: item.rank*15 + 'px', |
|---|
| | | zIndex: item.rank*-1 +50 |
|---|
| | | }]" |
|---|
| | | :class="{ |
|---|
| | | border: border === true, |
|---|
| | | show: item.show, |
|---|
| | | last: item.lastRank, |
|---|
| | | showchild: item.showChild, |
|---|
| | | open: item.open, |
|---|
| | | }"> |
|---|
| | | <view class="tki-tree-label" @tap.stop="_treeItemTap(item, index)"> |
|---|
| | | <image class="tki-tree-icon" :src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"></image> |
|---|
| | | {{item.name}} |
|---|
| | | </view> |
|---|
| | | <view class="tki-tree-check" @tap.stop="_treeItemSelect(item, index)" v-if="selectParent?true:item.lastRank"> |
|---|
| | | <view class="tki-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}" :style="{'border-color':confirmColor}"> |
|---|
| | | <view class="tki-tree-check-yes-b" :style="{'background-color':confirmColor}"></view> |
|---|
| | | </view> |
|---|
| | | <view class="tki-tree-check-no" v-else :class="{'radio':!multiple}" :style="{'border-color':confirmColor}"></view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </block> |
|---|
| | | </scroll-view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: "tki-tree", |
|---|
| | | props: { |
|---|
| | | lazy: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | range: { |
|---|
| | | type: Array, |
|---|
| | | default: function() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | idKey: { |
|---|
| | | type: String, |
|---|
| | | default: 'id' |
|---|
| | | }, |
|---|
| | | rangeKey: { |
|---|
| | | type: String, |
|---|
| | | default: 'label' |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | multiple: { // æ¯å¦å¯ä»¥å¤é |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | // default: true |
|---|
| | | }, |
|---|
| | | selectParent: { //æ¯å¦å¯ä»¥éç¶çº§ |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | foldAll: { //æå æ¶å
³éææå·²ç»æå¼çåéï¼å次æå¼æ¶éè¦ä¸çº§ä¸çº§æå¼ |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | confirmColor: { // ç¡®å®æé®é¢è² |
|---|
| | | type: String, |
|---|
| | | default: '' // #07bb07 |
|---|
| | | }, |
|---|
| | | cancelColor: { // åæ¶æé®é¢è² |
|---|
| | | type: String, |
|---|
| | | default: '' // #757575 |
|---|
| | | }, |
|---|
| | | titleColor: { // æ é¢é¢è² |
|---|
| | | type: String, |
|---|
| | | default: '' // #757575 |
|---|
| | | }, |
|---|
| | | currentIcon: { // å±å¼æ¶åçic |
|---|
| | | type: String, |
|---|
| | | default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg==' |
|---|
| | | }, |
|---|
| | | defaultIcon: { // æå æ¶åçic |
|---|
| | | type: String, |
|---|
| | | default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC' |
|---|
| | | }, |
|---|
| | | lastIcon: { // 没æåéçic |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | border: { // æ¯å¦æåå²çº¿ |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | showTree: false, |
|---|
| | | treeList: [], |
|---|
| | | selectIndex: -1, |
|---|
| | | returnedItem: [] ,//å®ä¹ä¸ä¸ªç©ºæ°ç» |
|---|
| | | pids: [], |
|---|
| | | ancestorsIds: [], |
|---|
| | | childNums: [], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: {}, |
|---|
| | | methods: { |
|---|
| | | _show() { |
|---|
| | | this.showTree = true |
|---|
| | | }, |
|---|
| | | _hide() { |
|---|
| | | this.showTree = false |
|---|
| | | }, |
|---|
| | | _cancel() { |
|---|
| | | this._hide() |
|---|
| | | this.$emit("cancel", ''); |
|---|
| | | }, |
|---|
| | | _confirm() { |
|---|
| | | // å¤çæéæ°æ® |
|---|
| | | let rt = [], |
|---|
| | | obj = {}; |
|---|
| | | this.treeList.forEach((v, i) => { |
|---|
| | | if (this.treeList[i].checked) { |
|---|
| | | rt.push(this.treeList[i].id) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this._hide() |
|---|
| | | this.$emit("confirm", rt); |
|---|
| | | }, |
|---|
| | | //æå¹³åæ ç»æ |
|---|
| | | _renderTreeList(list = [], rank = 0, parentId = [], parents = []) { |
|---|
| | | list.forEach(item => { |
|---|
| | | this.treeList.push({ |
|---|
| | | id: item[this.idKey], |
|---|
| | | name: item[this.rangeKey], |
|---|
| | | source: item, |
|---|
| | | parentId, // ç¶çº§idæ°ç» |
|---|
| | | parents, // ç¶çº§idæ°ç» |
|---|
| | | rank, // å±çº§ |
|---|
| | | showChild: false, //å级æ¯å¦æ¾ç¤º |
|---|
| | | open: false, //æ¯å¦æå¼ |
|---|
| | | show: rank === 0, // èªèº«æ¯å¦æ¾ç¤º |
|---|
| | | hideArr: [], |
|---|
| | | orChecked: item.checked ? item.checked : false, |
|---|
| | | checked: item.checked ? item.checked : false, |
|---|
| | | childNum: 0 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (Array.isArray(item.children) && item.children.length > 0) { |
|---|
| | | // console.log(item) |
|---|
| | | let parentid = [...parentId], |
|---|
| | | parentArr = [...parents]; |
|---|
| | | delete parentArr.children |
|---|
| | | parentid.push(item[this.idKey]); |
|---|
| | | parentArr.push({ |
|---|
| | | [this.idKey]: item[this.idKey], |
|---|
| | | [this.rangeKey]: item[this.rangeKey] |
|---|
| | | }) |
|---|
| | | // lazy |
|---|
| | | if(!this.lazy) { |
|---|
| | | this._renderTreeList(item.children, rank + 1, parentid, parentArr) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.treeList[this.treeList.length - 1].lastRank = true; |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // å¤çé»è®¤éæ© |
|---|
| | | _defaultSelect() { |
|---|
| | | this.treeList.forEach((v, i) => { |
|---|
| | | if (v.checked) { |
|---|
| | | this.treeList.forEach((v2, i2) => { |
|---|
| | | if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) { |
|---|
| | | v2.show = true |
|---|
| | | if (v.parentId.includes(v2.id)) { |
|---|
| | | v2.showChild = true; |
|---|
| | | v2.open = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | getOwn(id, arr){ |
|---|
| | | //å©ç¨foreach循ç¯éå |
|---|
| | | arr.forEach((item) => { |
|---|
| | | //å¤æéå½ç»ææ¡ä»¶ |
|---|
| | | if(item[this.idKey] == id) |
|---|
| | | { |
|---|
| | | // åå¨æ°æ®å°ç©ºæ°ç» |
|---|
| | | this.returnedItem = item |
|---|
| | | } |
|---|
| | | else if(item.children != null) //å¤æchlidrenæ¯å¦ææ°æ® |
|---|
| | | { |
|---|
| | | //éå½è°ç¨ |
|---|
| | | this.getOwn(id, item.children); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | return this.returnedItem |
|---|
| | | }, |
|---|
| | | setShow (id, arr, isShow) { |
|---|
| | | arr.forEach((item, index) => { |
|---|
| | | if(item.parentId.includes(id)) { |
|---|
| | | this.treeList[index].showChild = isShow |
|---|
| | | this.treeList[index].show = isShow |
|---|
| | | } else if (item.children !== undefined) { |
|---|
| | | this.setShow(id, item.children, isShow) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // ç¹å» |
|---|
| | | _treeItemTap(item, index) { |
|---|
| | | // console.log(item) |
|---|
| | | if (item.lastRank === true) { |
|---|
| | | //ç¹å»æåä¸çº§æ¶è§¦åäºä»¶ |
|---|
| | | this.treeList[index].checked = !this.treeList[index].checked |
|---|
| | | this._fixMultiple(index) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | let id = item.id; |
|---|
| | | item.showChild = !item.showChild; |
|---|
| | | // qingqian |
|---|
| | | if(item.showChild) { |
|---|
| | | const range = this.range |
|---|
| | | const parentIdArr = item.parentId |
|---|
| | | // æ¾å°å½åå
ç´ |
|---|
| | | const own = this.getOwn(id, range) |
|---|
| | | const checkedChildren = own.children |
|---|
| | | // åå
ç´ æå
¥çç´¢å¼ä½ç½® |
|---|
| | | const nextIndex = this.treeList.findIndex(itemT => itemT.id === item.id) |
|---|
| | | console.log(checkedChildren); |
|---|
| | | if(checkedChildren === undefined || checkedChildren.length < 1) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // åèç¹æ°é |
|---|
| | | this.treeList[index].childNum = checkedChildren.length |
|---|
| | | const newRank = item.rank + 1 |
|---|
| | | checkedChildren.forEach(itemC => { |
|---|
| | | const childObj = { |
|---|
| | | id: itemC[this.idKey], |
|---|
| | | name: itemC[this.rangeKey], |
|---|
| | | source: {}, |
|---|
| | | parentId: [item.id], // ç¶çº§idæ°ç» |
|---|
| | | parents: [item], // ç¶çº§idæ°ç» |
|---|
| | | rank: newRank, // å±çº§ |
|---|
| | | showChild: false, //å级æ¯å¦æ¾ç¤º |
|---|
| | | open: false, //æ¯å¦æå¼ |
|---|
| | | show: 1, // èªèº«æ¯å¦æ¾ç¤º |
|---|
| | | hideArr: [], |
|---|
| | | orChecked: this.treeList[index].checked, |
|---|
| | | checked: this.treeList[index].checked, |
|---|
| | | } |
|---|
| | | if(!this.treeList.some(itemT => itemT.id === itemC[this.idKey])) { |
|---|
| | | this.treeList.splice(nextIndex+1,0,childObj) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // å±å¼/éèå级/å级 |
|---|
| | | let list = this.treeList |
|---|
| | | item.open = item.showChild ? true : !item.open; |
|---|
| | | list.forEach((childItem, i) => { |
|---|
| | | if (item.showChild === false) { |
|---|
| | | //éèææå级 |
|---|
| | | if (!childItem.parentId.includes(id)) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | //TODO: ä¿®æ¹ |
|---|
| | | if (!this.foldAll) { |
|---|
| | | if (childItem.lastRank !== true && !childItem.open) { |
|---|
| | | childItem.showChild = false; |
|---|
| | | this.setShow(childItem.id, this.treeList, false) |
|---|
| | | } |
|---|
| | | // 为éèçå
容添å ä¸ä¸ªæ è®° |
|---|
| | | if (childItem.show) { |
|---|
| | | childItem.hideArr[item.rank] = id |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (childItem.lastRank !== true) { |
|---|
| | | childItem.showChild = false; |
|---|
| | | // 继ç»éèå级ççå级 |
|---|
| | | this.setShow(childItem.id, this.treeList, false) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if(childItem.children !== undefined) { |
|---|
| | | childItem.children.forEach((childItem1, i1) => { |
|---|
| | | if(!childItem1.parentId.includes(childItem.id)) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | childItem.children[i1].showChild = false |
|---|
| | | childItem.children[i1].show = false |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | childItem.show = false; |
|---|
| | | } else { |
|---|
| | | // æå¼åé |
|---|
| | | if (childItem.parentId[childItem.parentId.length - 1] === id) { |
|---|
| | | childItem.show = true; |
|---|
| | | } |
|---|
| | | // æå¼è¢«éèçåé |
|---|
| | | if (childItem.parentId.includes(id) && !this.foldAll) { |
|---|
| | | // console.log(childItem.hideArr) |
|---|
| | | if (childItem.hideArr[item.rank] === id) { |
|---|
| | | childItem.show = true; |
|---|
| | | if (childItem.open && childItem.showChild) { |
|---|
| | | childItem.showChild = true |
|---|
| | | } else { |
|---|
| | | childItem.showChild = false |
|---|
| | | } |
|---|
| | | childItem.hideArr[item.rank] = null |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // éè¿ç¶idå¤çå级 |
|---|
| | | syncChecked (trees, pid, checked) { |
|---|
| | | trees.forEach((item,index) => { |
|---|
| | | if(item.parentId.includes(pid)) { |
|---|
| | | this.treeList[index].checked = checked |
|---|
| | | this.syncChecked(trees, item.id, checked) |
|---|
| | | } else if(item.children !== undefined) { |
|---|
| | | this.syncChecked(item.children, pid, checked) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è·åç¶çº§å¾ä¸ææå±çº§çid 并åæ¥ç¶æ |
|---|
| | | setAncestors (pids, checked) { |
|---|
| | | this.treeList.forEach((item,index) => { |
|---|
| | | if(pids.includes(item.id)) { |
|---|
| | | if(checked && this.childNums[item.id] !== undefined && item.childNum === this.childNums[item.id]) { |
|---|
| | | // å级å
¨é¨éä¸, ç¶çº§æéä¸ |
|---|
| | | this.treeList[index].checked = true |
|---|
| | | } else { |
|---|
| | | this.treeList[index].checked = false |
|---|
| | | } |
|---|
| | | this.setAncestors(item.parentId, checked) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | _treeItemSelect(item, index) { |
|---|
| | | this.treeList[index].checked = !this.treeList[index].checked |
|---|
| | | // éç¶çº§, å级èªå¨å
¨é |
|---|
| | | this.syncChecked(this.treeList, item.id, this.treeList[index].checked) |
|---|
| | | |
|---|
| | | if(item.rank > 0) { |
|---|
| | | item.parentId.forEach((pid, indexP) => { |
|---|
| | | const parent = this.treeList.filter(i => i.id === pid) |
|---|
| | | const childNum = parent.length > 0 ? parent[0].childNum : 0 |
|---|
| | | if(this.childNums[pid] === undefined) { |
|---|
| | | this.childNums[pid] = 1 |
|---|
| | | } else if(this.childNums[pid] < childNum) { |
|---|
| | | this.childNums[pid]++ |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | //å级éæ©/é满/åæ¶éæ©, ç¶çº§å¾ä¸åæ¥ç¶æ |
|---|
| | | this.setAncestors(item.parentId, this.treeList[index].checked) |
|---|
| | | } |
|---|
| | | this._fixMultiple(index) |
|---|
| | | }, |
|---|
| | | // å¤çåéå¤é |
|---|
| | | _fixMultiple(index) { |
|---|
| | | if (!this.multiple) { |
|---|
| | | // å¦ææ¯åé |
|---|
| | | this.treeList.forEach((v, i) => { |
|---|
| | | if (i != index) { |
|---|
| | | this.treeList[i].checked = false |
|---|
| | | } else { |
|---|
| | | this.treeList[i].checked = true |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // éç½®æ°æ® |
|---|
| | | _reTreeList() { |
|---|
| | | this.treeList.forEach((v, i) => { |
|---|
| | | this.treeList[i].checked = v.orChecked |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | _initTree(range = this.range){ |
|---|
| | | this.treeList = []; |
|---|
| | | this._renderTreeList(range); |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this._defaultSelect(range) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | range(list) { |
|---|
| | | this._initTree(list); |
|---|
| | | }, |
|---|
| | | multiple() { |
|---|
| | | if (this.range.length) { |
|---|
| | | this._reTreeList(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | selectParent() { |
|---|
| | | if (this.range.length) { |
|---|
| | | this._reTreeList(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this._initTree(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | @import "./style.css"; |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .tki-tree-mask { |
|---|
| | | position: fixed; |
|---|
| | | top: 0rpx; |
|---|
| | | right: 0rpx; |
|---|
| | | bottom: 0rpx; |
|---|
| | | left: 0rpx; |
|---|
| | | z-index: 9998; |
|---|
| | | background-color: rgba(0, 0, 0, 0.6); |
|---|
| | | opacity: 0; |
|---|
| | | transition: all 0.3s ease; |
|---|
| | | visibility: hidden; |
|---|
| | | } |
|---|
| | | .tki-tree-mask.show { |
|---|
| | | visibility: visible; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | .tki-tree-cnt { |
|---|
| | | position: fixed; |
|---|
| | | top: 0rpx; |
|---|
| | | right: 0rpx; |
|---|
| | | bottom: 0rpx; |
|---|
| | | left: 0rpx; |
|---|
| | | z-index: 9999; |
|---|
| | | top: 160rpx; |
|---|
| | | transition: all 0.3s ease; |
|---|
| | | transform: translateY(100%); |
|---|
| | | } |
|---|
| | | .tki-tree-cnt.show { |
|---|
| | | transform: translateY(0); |
|---|
| | | } |
|---|
| | | .tki-tree-bar { |
|---|
| | | background-color: #fff; |
|---|
| | | height: 72rpx; |
|---|
| | | padding-left: 20rpx; |
|---|
| | | padding-right: 20rpx; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | box-sizing: border-box; |
|---|
| | | border-bottom-width: 1rpx !important; |
|---|
| | | border-bottom-style: solid; |
|---|
| | | border-bottom-color: #f5f5f5; |
|---|
| | | font-size: 32rpx; |
|---|
| | | color: #757575; |
|---|
| | | line-height: 1; |
|---|
| | | } |
|---|
| | | .tki-tree-bar-confirm { |
|---|
| | | color: #07bb07; |
|---|
| | | } |
|---|
| | | .tki-tree-view { |
|---|
| | | position: absolute; |
|---|
| | | top: 0rpx; |
|---|
| | | right: 0rpx; |
|---|
| | | bottom: 0rpx; |
|---|
| | | left: 0rpx; |
|---|
| | | top: 72rpx; |
|---|
| | | background-color: #fff; |
|---|
| | | padding-top: 20rpx; |
|---|
| | | padding-right: 20rpx; |
|---|
| | | padding-bottom: 20rpx; |
|---|
| | | padding-left: 20rpx; |
|---|
| | | } |
|---|
| | | .tki-tree-view-sc { |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | .tki-tree-item { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 26rpx; |
|---|
| | | color: #757575; |
|---|
| | | line-height: 1; |
|---|
| | | height: 0; |
|---|
| | | opacity: 0; |
|---|
| | | transition: 0.2s; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | .tki-tree-item.show { |
|---|
| | | height: 80rpx; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | .tki-tree-item.showchild:before { |
|---|
| | | transform: rotate(90deg); |
|---|
| | | } |
|---|
| | | .tki-tree-item.last:before { |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | .tki-tree-icon { |
|---|
| | | width: 26rpx; |
|---|
| | | height: 26rpx; |
|---|
| | | margin-right: 8rpx; |
|---|
| | | } |
|---|
| | | .tki-tree-label { |
|---|
| | | flex: 1; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | height: 100%; |
|---|
| | | line-height: 1.2; |
|---|
| | | } |
|---|
| | | .tki-tree-check { |
|---|
| | | width: 40px; |
|---|
| | | height: 40px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .tki-tree-check-yes, |
|---|
| | | .tki-tree-check-no { |
|---|
| | | width: 20px; |
|---|
| | | height: 20px; |
|---|
| | | border-top-left-radius: 20%; |
|---|
| | | border-top-right-radius: 20%; |
|---|
| | | border-bottom-right-radius: 20%; |
|---|
| | | border-bottom-left-radius: 20%; |
|---|
| | | border-top-width: 1rpx; |
|---|
| | | border-left-width: 1rpx; |
|---|
| | | border-bottom-width: 1rpx; |
|---|
| | | border-right-width: 1rpx; |
|---|
| | | border-style: solid; |
|---|
| | | border-color: #07bb07; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | .tki-tree-check-yes-b { |
|---|
| | | width: 12px; |
|---|
| | | height: 12px; |
|---|
| | | border-top-left-radius: 20%; |
|---|
| | | border-top-right-radius: 20%; |
|---|
| | | border-bottom-right-radius: 20%; |
|---|
| | | border-bottom-left-radius: 20%; |
|---|
| | | background-color: #07bb07; |
|---|
| | | } |
|---|
| | | .tki-tree-check .radio { |
|---|
| | | border-top-left-radius: 50%; |
|---|
| | | border-top-right-radius: 50%; |
|---|
| | | border-bottom-right-radius: 50%; |
|---|
| | | border-bottom-left-radius: 50%; |
|---|
| | | } |
|---|
| | | .tki-tree-check .radio .tki-tree-check-yes-b { |
|---|
| | | border-top-left-radius: 50%; |
|---|
| | | border-top-right-radius: 50%; |
|---|
| | | border-bottom-right-radius: 50%; |
|---|
| | | border-bottom-left-radius: 50%; |
|---|
| | | } |
|---|
| | | .hover-c { |
|---|
| | | opacity: 0.6; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <u-tabs :activeStyle="activeStyle" :list="tabs" @change="(tab) => $emit('change', tab)"></u-tabs> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | tabs: Array |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | activeStyle: { |
|---|
| | | color: '#303133', |
|---|
| | | fontSize: '20px', |
|---|
| | | fontWeight: 'bold', |
|---|
| | | transform: 'scale(1.05)' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | const environment = { |
|---|
| | | // å¼åç¯å¢é
ç½® |
|---|
| | | development: { |
|---|
| | | // æ¬å°é¨ç½²çå端 |
|---|
| | | // baseURL: 'http://localhost:8080', |
|---|
| | | |
|---|
| | | // ç´æ¥ä½¿ç¨çº¿ä¸å端 |
|---|
| | | baseURL: 'http://vue.ruoyi.vip/prod-api' |
|---|
| | | }, |
|---|
| | | // ç产ç¯å¢é
ç½® |
|---|
| | | production: { |
|---|
| | | baseURL: 'http://vue.ruoyi.vip/prod-api' // åå¸æ¶éè¦ä¿®æ¹ä¸ºå端å®é
å°å |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | module.exports = { |
|---|
| | | environment: environment[process.env.NODE_ENV] |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | const { environment } = require('./environment.js') |
|---|
| | | import { ACCESS_TOKEN } from '@/store/mutation-types' |
|---|
| | | import storage from '@/utils/storage'; |
|---|
| | | |
|---|
| | | // æ¤vmåæ°ä¸ºé¡µé¢çå®ä¾ï¼å¯ä»¥éè¿å®å¼ç¨vuexä¸çåé |
|---|
| | | module.exports = (vm) => { |
|---|
| | | // åå§å请æ±é
ç½® |
|---|
| | | uni.$u.http.setConfig((config) => { |
|---|
| | | /* config 为é»è®¤å
¨å±é
ç½®ï¼è¯·æ±å°åå¤æ*/ |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | if (process.env.NODE_ENV === 'production') { |
|---|
| | | config.baseURL = environment.baseURL; /* æ ¹åå */ |
|---|
| | | } else { |
|---|
| | | // å¼å模å¼å使ç¨ä»£çæ¹å¼ï¼è§vue.config.jsé
ç½® |
|---|
| | | config.baseURL = '/'; /* æ ¹åå */ |
|---|
| | | } |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifndef H5 */ |
|---|
| | | config.baseURL = environment.baseURL; /* æ ¹åå */ |
|---|
| | | /* #endif */ |
|---|
| | | return config |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 请æ±æ¦æª |
|---|
| | | uni.$u.http.interceptors.request.use((config) => { // å¯ä½¿ç¨async await åå¼æ¥æä½ |
|---|
| | | // åå§å请æ±æ¦æªå¨æ¶ï¼ä¼æ§è¡æ¤æ¹æ³ï¼æ¤æ¶data为undefinedï¼èµäºé»è®¤{} |
|---|
| | | config.data = config.data || {} |
|---|
| | | // æ ¹æ®customåæ°ä¸é
ç½®çæ¯å¦éè¦tokenï¼æ·»å 对åºç请æ±å¤´ |
|---|
| | | if(config?.custom?.auth) { |
|---|
| | | // å¯ä»¥å¨æ¤éè¿vmå¼ç¨vuexä¸çåéï¼å
·ä½å¼å¨vm.$store.stateä¸ |
|---|
| | | config.header.Authorization = 'Bearer ' + storage.get(ACCESS_TOKEN) |
|---|
| | | } |
|---|
| | | // æ ¹æ®customåæ°ä¸é
ç½®çæ¯å¦éè¦æ¾ç¤ºloading |
|---|
| | | if (config?.custom?.loading) { |
|---|
| | | uni.showLoading({ |
|---|
| | | title: 'å è½½ä¸...', |
|---|
| | | mask: true |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return config |
|---|
| | | }, config => { // å¯ä½¿ç¨async await åå¼æ¥æä½ |
|---|
| | | return Promise.reject(config) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // ååºæ¦æª |
|---|
| | | uni.$u.http.interceptors.response.use((response) => { /* 对ååºæååç¹ä»ä¹ å¯ä½¿ç¨async await åå¼æ¥æä½*/ |
|---|
| | | const data = response.data |
|---|
| | | |
|---|
| | | // å
³éloading |
|---|
| | | uni.hideLoading(); |
|---|
| | | |
|---|
| | | // èªå®ä¹åæ° |
|---|
| | | const custom = response.config?.custom |
|---|
| | | if (data.code !== 200) { |
|---|
| | | // å¦æ没ææ¾å¼å®ä¹customçtoaståæ°ä¸ºfalseçè¯ï¼é»è®¤å¯¹æ¥éè¿è¡toastå¼¹åºæ示 |
|---|
| | | if (custom.toast !== false) { |
|---|
| | | uni.$u.toast(data.msg) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¤æç¶æç |
|---|
| | | switch (data.code) { |
|---|
| | | case 401: { |
|---|
| | | uni.reLaunch({ url: '/' }) |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å¦æéè¦catchè¿åï¼åè¿è¡reject |
|---|
| | | if (custom?.catch) { |
|---|
| | | return Promise.reject(data) |
|---|
| | | } else { |
|---|
| | | // å¦åè¿åä¸ä¸ªpendingä¸çpromiseï¼è¯·æ±ä¸ä¼è¿å
¥catchä¸ |
|---|
| | | return new Promise(() => { }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return data === undefined ? {} : data |
|---|
| | | }, (response) => { |
|---|
| | | // 对ååºé误åç¹ä»ä¹ ï¼statusCode !== 200ï¼ |
|---|
| | | return Promise.reject(response) |
|---|
| | | }) |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | const http = uni.$u.http; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ··å
¥é»è®¤ä¸ªæ§åé
ç½® |
|---|
| | | * @param {*} config |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | function mixinCustom (config) { |
|---|
| | | config.custom = Object.assign({ |
|---|
| | | auth: true, |
|---|
| | | toast: true, |
|---|
| | | catch: true, |
|---|
| | | loading: true |
|---|
| | | }, config.custom || {}); |
|---|
| | | return config; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * æ ¼å¼åget请æ±urlåæ°ï¼å°å¯¹è±¡è§£æ为å符串 |
|---|
| | | * @param {*} url |
|---|
| | | * @param {*} params |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | function urlFormater (url, params) { |
|---|
| | | if (params) { |
|---|
| | | let paramList = []; |
|---|
| | | for (let key in params) { |
|---|
| | | paramList.push(key + '=' + params[key]) |
|---|
| | | } |
|---|
| | | return url.indexOf('?') > -1 ? (url + '&' + paramList.join('&')) : (url + '?' + paramList.join('&')) |
|---|
| | | } |
|---|
| | | return url; |
|---|
| | | } |
|---|
| | | |
|---|
| | | const request = { |
|---|
| | | // postæ交 |
|---|
| | | post (url, params, config = {}) { |
|---|
| | | config = mixinCustom(config) |
|---|
| | | return http.post(url, params, config); |
|---|
| | | }, |
|---|
| | | // getæ交 |
|---|
| | | get (url, params, config = {}) { |
|---|
| | | config = mixinCustom(config) |
|---|
| | | let path = urlFormater(url, params) |
|---|
| | | return http.get(path, config); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // putæ交 |
|---|
| | | put (url, params, config = {}) { |
|---|
| | | config = mixinCustom(config) |
|---|
| | | return http.put(url, params, config); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // deleteæ交 |
|---|
| | | delete (url, params, config = {}) { |
|---|
| | | config = mixinCustom(config) |
|---|
| | | return http.delete(url, params, config); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | export default request; |
|---|
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <title>Ruoyi-App-Geek</title> |
|---|
| | | <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> |
|---|
| | | <meta charset="UTF-8" /> |
|---|
| | | <script> |
|---|
| | | var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || |
|---|
| | | CSS.supports('top: constant(a)')) |
|---|
| | |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app"><!--app-html--></div> |
|---|
| | | <script type="module" src="./src/main.js"></script> |
|---|
| | | <script type="module" src="/main.js"></script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import App from './App' |
|---|
| | | import Vue from 'vue' |
|---|
| | | import uView from 'uni_modules/uview-ui' |
|---|
| | | |
|---|
| | | Vue.use(uView) |
|---|
| | | |
|---|
| | | Vue.config.productionTip = false |
|---|
| | | |
|---|
| | | App.mpType = 'app' |
|---|
| | | |
|---|
| | | import store from '@/store'; |
|---|
| | | |
|---|
| | | const app = new Vue({ |
|---|
| | | store, |
|---|
| | | ...App |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // å¼å
¥è¯·æ±å°è£
ï¼å°appåæ°ä¼ éå°é
ç½®ä¸ |
|---|
| | | require('@/config/http.interceptor.js')(app) |
|---|
| | | |
|---|
| | | app.$mount() |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "name" : "è¥ä¾æé管çç³»ç»", |
|---|
| | | "appid" : "__UNI__3D0DC28", |
|---|
| | | "description" : "", |
|---|
| | | "versionName" : "1.0.1", |
|---|
| | | "versionCode" : "100", |
|---|
| | | "transformPx" : false, |
|---|
| | | /* 5+Appç¹æç¸å
³ */ |
|---|
| | | "app-plus" : { |
|---|
| | | "usingComponents" : true, |
|---|
| | | "nvueStyleCompiler" : "uni-app", |
|---|
| | | "compilerVersion" : 3, |
|---|
| | | "splashscreen" : { |
|---|
| | | "alwaysShowBeforeRender" : true, |
|---|
| | | "waiting" : true, |
|---|
| | | "autoclose" : true, |
|---|
| | | "delay" : 0 |
|---|
| | | }, |
|---|
| | | /* 模åé
ç½® */ |
|---|
| | | "modules" : {}, |
|---|
| | | /* åºç¨åå¸ä¿¡æ¯ */ |
|---|
| | | "distribute" : { |
|---|
| | | /* androidæå
é
ç½® */ |
|---|
| | | "android" : { |
|---|
| | | "permissions" : [ |
|---|
| | | "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
|---|
| | | "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|---|
| | | "<uses-feature android:name=\"android.hardware.camera\"/>", |
|---|
| | | "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | /* iosæå
é
ç½® */ |
|---|
| | | "ios" : {}, |
|---|
| | | /* SDKé
ç½® */ |
|---|
| | | "sdkConfigs" : {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | /* å¿«åºç¨ç¹æç¸å
³ */ |
|---|
| | | "quickapp" : {}, |
|---|
| | | /* å°ç¨åºç¹æç¸å
³ */ |
|---|
| | | "mp-weixin" : { |
|---|
| | | "appid" : "", |
|---|
| | | "setting" : { |
|---|
| | | "urlCheck" : false |
|---|
| | | }, |
|---|
| | | "usingComponents" : true |
|---|
| | | }, |
|---|
| | | "mp-alipay" : { |
|---|
| | | "usingComponents" : true |
|---|
| | | }, |
|---|
| | | "mp-baidu" : { |
|---|
| | | "usingComponents" : true |
|---|
| | | }, |
|---|
| | | "mp-toutiao" : { |
|---|
| | | "usingComponents" : true |
|---|
| | | }, |
|---|
| | | "uniStatistics" : { |
|---|
| | | "enable" : false |
|---|
| | | }, |
|---|
| | | "vueVersion" : "2", |
|---|
| | | /* h5ä¸è½é
ç½®devServerå±æ§,éè¦é
ç½®å¯ä¿®æ¹vue.config.jsæ件 */ |
|---|
| | | "h5" : { |
|---|
| | | "template" : "template.h5.html" |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | { |
|---|
| | | "name": "ruoyi-geek-app", |
|---|
| | | "version": "1.0.0", |
|---|
| | | "description": "è¥ä¾Geek管çç³»ç»", |
|---|
| | | "author": "Geek-XD", |
|---|
| | | "license": "MIT", |
|---|
| | | "homepage": "https://gitee.com/geek-xd", |
|---|
| | | "repository": { |
|---|
| | | "type": "git", |
|---|
| | | "url": "https://gitee.com/geek-xd/ruoyi-geek-app.git" |
|---|
| | | }, |
|---|
| | | "engines": { |
|---|
| | | "node": "^18.0.0 || >=20.0.0" |
|---|
| | | }, |
|---|
| | | "scripts": { |
|---|
| | | "dev:app": "uni -p app", |
|---|
| | | "dev:app-android": "uni -p app-android", |
|---|
| | | "dev:app-ios": "uni -p app-ios", |
|---|
| | | "dev:custom": "uni -p", |
|---|
| | | "dev:h5": "uni", |
|---|
| | | "dev:h5:ssr": "uni --ssr", |
|---|
| | | "dev:mp-alipay": "uni -p mp-alipay", |
|---|
| | | "dev:mp-baidu": "uni -p mp-baidu", |
|---|
| | | "dev:mp-jd": "uni -p mp-jd", |
|---|
| | | "dev:mp-kuaishou": "uni -p mp-kuaishou", |
|---|
| | | "dev:mp-lark": "uni -p mp-lark", |
|---|
| | | "dev:mp-qq": "uni -p mp-qq", |
|---|
| | | "dev:mp-toutiao": "uni -p mp-toutiao", |
|---|
| | | "dev:mp-weixin": "uni -p mp-weixin", |
|---|
| | | "dev:quickapp-webview": "uni -p quickapp-webview", |
|---|
| | | "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei", |
|---|
| | | "dev:quickapp-webview-union": "uni -p quickapp-webview-union", |
|---|
| | | "build:app": "uni build -p app", |
|---|
| | | "build:app-android": "uni build -p app-android", |
|---|
| | | "build:app-ios": "uni build -p app-ios", |
|---|
| | | "build:custom": "uni build -p", |
|---|
| | | "build:h5": "uni build", |
|---|
| | | "build:h5:ssr": "uni build --ssr", |
|---|
| | | "build:mp-alipay": "uni build -p mp-alipay", |
|---|
| | | "build:mp-baidu": "uni build -p mp-baidu", |
|---|
| | | "build:mp-jd": "uni build -p mp-jd", |
|---|
| | | "build:mp-kuaishou": "uni build -p mp-kuaishou", |
|---|
| | | "build:mp-lark": "uni build -p mp-lark", |
|---|
| | | "build:mp-qq": "uni build -p mp-qq", |
|---|
| | | "build:mp-toutiao": "uni build -p mp-toutiao", |
|---|
| | | "build:mp-weixin": "uni build -p mp-weixin", |
|---|
| | | "build:quickapp-webview": "uni build -p quickapp-webview", |
|---|
| | | "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei", |
|---|
| | | "build:quickapp-webview-union": "uni build -p quickapp-webview-union", |
|---|
| | | "type-check": "vue-tsc --noEmit", |
|---|
| | | "clean:linux": "rm -rf dist || rm -rf node_modules", |
|---|
| | | "clean:windows": "rd /s /q dist || rd /s /q node_modules" |
|---|
| | | }, |
|---|
| | | "dependencies": { |
|---|
| | | "@dcloudio/uni-app": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-app-harmony": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-app-plus": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-components": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-h5": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-alipay": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-baidu": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-harmony": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-jd": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-kuaishou": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-lark": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-qq": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-toutiao": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-weixin": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-mp-xhs": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-quickapp-webview": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uvm": "^0.3.1", |
|---|
| | | "@jridgewell/sourcemap-codec": "^1.5.0", |
|---|
| | | "@qiun/wx-ucharts": "2.5.0-20230101", |
|---|
| | | "@uview-plus/types": "^3.2.5", |
|---|
| | | "clipboard": "^2.0.11", |
|---|
| | | "dayjs": "^1.11.13", |
|---|
| | | "mqtt": "4.1.0", |
|---|
| | | "pinia": "2.2.2", |
|---|
| | | "tslib": "^2.7.0", |
|---|
| | | "uview-plus": "^3.3.32", |
|---|
| | | "vue": "3.4.21", |
|---|
| | | "vue-i18n": "^9.14.2" |
|---|
| | | }, |
|---|
| | | "devDependencies": { |
|---|
| | | "@dcloudio/types": "^3.4.14", |
|---|
| | | "@dcloudio/uni-automator": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-cli-shared": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/uni-stacktracey": "3.0.0-4060420250429001", |
|---|
| | | "@dcloudio/vite-plugin-uni": "3.0.0-4060420250429001", |
|---|
| | | "@vue/runtime-core": "^3.5.12", |
|---|
| | | "@vue/tsconfig": "^0.5.1", |
|---|
| | | "less": "^4.2.0", |
|---|
| | | "sass": "^1.78.0", |
|---|
| | | "sass-loader": "^16.0.1", |
|---|
| | | "typescript": "^5.6.2", |
|---|
| | | "vite": "5.2.8", |
|---|
| | | "vue-tsc": "2.1.6" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | "id": "qian-tree", |
|---|
| | | "name": "æ å½¢éæ©å¨å¢å¼ºçï¼æ¯æå¤éãåéãç¶çº§éä¸å级èªå¨éä¸ãæå è½½", |
|---|
| | | "version": "1.0.1", |
|---|
| | | "description": "æ å½¢éæ©å¨å¢å¼ºçï¼æ¯æå¤éãåéãç¶çº§éæ©ãç¶å级éä¸/åæ¶èå¨ãæå è½½.", |
|---|
| | | "keywords": [ |
|---|
| | | "tree", |
|---|
| | | "æ ", |
|---|
| | | "å¤é" |
|---|
| | | ], |
|---|
| | | "dcloudext": { |
|---|
| | | "category": [ |
|---|
| | | "å端ç»ä»¶", |
|---|
| | | "éç¨ç»ä»¶" |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "pages": [ //pagesæ°ç»ä¸ç¬¬ä¸é¡¹è¡¨ç¤ºåºç¨å¯å¨é¡µï¼åèï¼https://uniapp.dcloud.io/collocation/pages |
|---|
| | | { |
|---|
| | | "path": "pages/login/index", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "ç»å½", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/index/index", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "é¦é¡µ", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/work/index", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "å·¥ä½å°", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/work/user/list", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "ç¨æ·ç®¡ç", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/work/user/edit", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "ç¨æ·è¯¦æ
", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/work/notice/list", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "éç¥å
Œ", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/work/notice/manage", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "å
¬å管ç", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/work/notice/detail", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "å
¬å详æ
", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/work/notice/edit", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "å
¬å详æ
", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/center/index", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "æç", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/center/profile", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "个人èµæ", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "path": "pages/center/log", |
|---|
| | | "style": { |
|---|
| | | "navigationBarTitleText": "æä½æ¥å¿", |
|---|
| | | "navigationStyle": "custom" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | "tabBar": { |
|---|
| | | "color": "#909399", |
|---|
| | | "selectedColor": "#000000", |
|---|
| | | "borderStyle": "black", |
|---|
| | | "backgroundColor": "#ffffff", |
|---|
| | | "list": [{ |
|---|
| | | "pagePath": "pages/index/index", |
|---|
| | | "iconPath": "static/img/tabbar/home.png", |
|---|
| | | "selectedIconPath": "static/img/tabbar/home_art.png", |
|---|
| | | "text": "é¦é¡µ" |
|---|
| | | }, { |
|---|
| | | "pagePath": "pages/work/index", |
|---|
| | | "iconPath": "static/img/tabbar/center.png", |
|---|
| | | "selectedIconPath": "static/img/tabbar/center_art.png", |
|---|
| | | "text": "å·¥ä½å°" |
|---|
| | | }, { |
|---|
| | | "pagePath": "pages/center/index", |
|---|
| | | "iconPath": "static/img/tabbar/user.png", |
|---|
| | | "selectedIconPath": "static/img/tabbar/user_art.png", |
|---|
| | | "text": "æç" |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | "globalStyle": { |
|---|
| | | "navigationBarTextStyle": "black", |
|---|
| | | "navigationBarTitleText": "uni-app", |
|---|
| | | "navigationBarBackgroundColor": "#F8F8F8", |
|---|
| | | "backgroundColor": "#F8F8F8", |
|---|
| | | "app-plus": { |
|---|
| | | "softinputMode": "adjustResize" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "easycom": { |
|---|
| | | "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue" |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <Navbar :hideBtn="true" bgColor="#f3f4f6"></Navbar> |
|---|
| | | <view class="profile-top"> |
|---|
| | | <view class="user-info"> |
|---|
| | | <view> |
|---|
| | | <view class="user-info--name">{{ user.nickName }}</view> |
|---|
| | | <text class="user-info--account">{{ user.email || user.phonenumber || user.userName }}</text> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <u-avatar src="/static/img/avatar.png" size="120rpx"></u-avatar> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view style="padding: 40rpx 40rpx 0 40rpx;"> |
|---|
| | | <view class="profile-rule"> |
|---|
| | | <u-row> |
|---|
| | | <u-col span="8"> |
|---|
| | | <view style="color: white; font-size: 20px;">{{ user.dept ? user.dept.deptName : 'æªç¥é¨é¨' }}</view> |
|---|
| | | </u-col> |
|---|
| | | <u-col span="4"> |
|---|
| | | <u-button icon="question-circle" text="é®é¢åé¦" style="height: 36px;"></u-button> |
|---|
| | | </u-col> |
|---|
| | | </u-row> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view style="padding: 40rpx; background-color: #fff;"> |
|---|
| | | <u-grid> |
|---|
| | | <u-grid-item @click="navigateTo('/pages/center/profile')"> |
|---|
| | | <u-icon name="account-fill" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">个人èµæ</text> |
|---|
| | | </u-grid-item> |
|---|
| | | <u-grid-item @click="resetPassword = true"> |
|---|
| | | <u-icon name="lock-fill" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">ä¿®æ¹å¯ç </text> |
|---|
| | | </u-grid-item> |
|---|
| | | <u-grid-item @click="navigateTo('/pages/center/log')"> |
|---|
| | | <u-icon name="coupon-fill" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">æä½æ¥å¿</text> |
|---|
| | | </u-grid-item> |
|---|
| | | </u-grid> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <view style="padding: 40rpx; margin-top: 300rpx;"> |
|---|
| | | <u-row gutter="32"> |
|---|
| | | <u-col span="6"> |
|---|
| | | <u-button icon="phone" text="èç³»æ们" plain></u-button> |
|---|
| | | </u-col> |
|---|
| | | <u-col span="6"> |
|---|
| | | <u-button icon="reload" text="éåº" type="error" @click="logout"></u-button> |
|---|
| | | </u-col> |
|---|
| | | </u-row> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <Password :show="resetPassword" @close="resetPassword = false"></Password> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | import Password from './password.vue' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Navbar, |
|---|
| | | Password, |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | user: {}, |
|---|
| | | resetPassword: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | this.getInfo() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getInfo () { |
|---|
| | | const app = this |
|---|
| | | app.$store.dispatch('Info').then(res => { |
|---|
| | | app.user = res.user |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | navigateTo (url) { |
|---|
| | | uni.navigateTo({ url: url }) |
|---|
| | | }, |
|---|
| | | logout () { |
|---|
| | | const app = this |
|---|
| | | app.$store.dispatch('Logout').then(res => { |
|---|
| | | uni.reLaunch({ |
|---|
| | | url: '/pages/login/index' |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | .profile-top { |
|---|
| | | background-color: #f3f4f6; |
|---|
| | | padding-top: 50rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .profile-rule { |
|---|
| | | height: 140rpx; |
|---|
| | | line-height: 140rpx; |
|---|
| | | padding: 0px 40rpx; |
|---|
| | | background-color: $u-main-color; |
|---|
| | | border-radius: 16px 16px 0 0; |
|---|
| | | box-shadow: 0px 16px 26px rgba(0, 0, 0, .8); |
|---|
| | | } |
|---|
| | | .btn-text { |
|---|
| | | font-size: 28rpx; |
|---|
| | | color: #606266; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-info { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding: 40rpx; |
|---|
| | | max-width: 100%; |
|---|
| | | color: #303133; |
|---|
| | | |
|---|
| | | &--name { |
|---|
| | | font-size: 56rpx; |
|---|
| | | font-weight: bold; |
|---|
| | | width: 100% |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--account { |
|---|
| | | font-size: 26rpx; |
|---|
| | | color: #909399; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view style="padding: 40rpx;"> |
|---|
| | | <view> |
|---|
| | | <u-search placeholder="请è¾å
¥æ¥è¯¢å
容" v-model="params.title" height="60rpx" @search="searchData" @custom="searchData"></u-search> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <u-list v-if="logList.length > 0" @scrolltolower="scrolltolower"> |
|---|
| | | <u-list-item v-for="(item, index) in logList" :key="index" class="log-item"> |
|---|
| | | <view><text style="color: #606266;">æä½å
容ï¼</text><text>{{item.title}}</text></view> |
|---|
| | | <view><text style="color: #606266;">请æ±å°åï¼</text><text>{{item.operUrl}}</text></view> |
|---|
| | | <view><text style="color: #606266;">æä½å°åï¼</text><text>{{item.operLocation}}</text></view> |
|---|
| | | <view><text style="color: #606266;">æä½æ¶é´ï¼</text><text>{{item.operTime}}</text></view> |
|---|
| | | </u-list-item> |
|---|
| | | </u-list> |
|---|
| | | <u-empty v-else></u-empty> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as LogApi from '@/api/center/log' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | params: { |
|---|
| | | pageNum: 0, |
|---|
| | | pageSize: 10, |
|---|
| | | title: '' |
|---|
| | | }, |
|---|
| | | logList: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | this.loadData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å è½½æ¥å¿å表æ°æ® |
|---|
| | | loadData () { |
|---|
| | | const app = this |
|---|
| | | // é¦å
è·åå½åç»å½è´¦å·ä¿¡æ¯ |
|---|
| | | app.$store.dispatch('Info').then(res => { |
|---|
| | | app.params.pageNum += 1 |
|---|
| | | if (res.user) { |
|---|
| | | // åªæ¥è¯¢å½åç¨æ·çæä½æ¥å¿ |
|---|
| | | app.params.operName = res.user.userName |
|---|
| | | } |
|---|
| | | LogApi.operLog(app.params).then(res => { |
|---|
| | | app.logList = app.logList.concat(res.rows); |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ¥è¯¢æé®å¨ä½ |
|---|
| | | searchData () { |
|---|
| | | this.params.pageNum = 0 |
|---|
| | | this.logList = [] |
|---|
| | | this.loadData(); |
|---|
| | | }, |
|---|
| | | // æ»å¨å页å è½½æ°æ® |
|---|
| | | scrolltolower () { |
|---|
| | | this.loadData(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .log-item { |
|---|
| | | padding: 20rpx 0; |
|---|
| | | border-bottom: 0.5px solid #ccc; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <u-modal :show="show" title="ä¿®æ¹å¯ç " showCancelButton @confirm="confirm" @cancel="cancel"> |
|---|
| | | <view class="slot-content"> |
|---|
| | | <u--form :model="pwd" ref="uForm" labelWidth="160rpx" labelAlign="left"> |
|---|
| | | <u-form-item label="åå¯ç " prop="origiPwd" class="u-border-bottom"> |
|---|
| | | <u--input v-model="pwd.origiPwd" type="password" placeholder="请è¾å
¥åå¯ç " border="none"></u--input> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="æ°å¯ç " prop="newPwd" class="u-border-bottom"> |
|---|
| | | <u--input v-model="pwd.newPwd" type="password" placeholder="请è¾å
¥æ°å¯ç " border="none"></u--input> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="确认å¯ç " prop="confirmPwd" class="u-border-bottom"> |
|---|
| | | <u--input v-model="pwd.confirmPwd" type="password" placeholder="请è¾å
¥ç¡®è®¤å¯ç " border="none"></u--input> |
|---|
| | | </u-form-item> |
|---|
| | | </u--form> |
|---|
| | | </view> |
|---|
| | | </u-modal> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | show: Boolean |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | pwd: { |
|---|
| | | origiPwd: '', |
|---|
| | | newPwd: '', |
|---|
| | | confirmPwd: '' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | confirm () { |
|---|
| | | this.$emit('close') |
|---|
| | | }, |
|---|
| | | cancel () { |
|---|
| | | this.$emit('close') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <Navbar :hideBtn="false" bgColor="#f3f4f6"></Navbar> |
|---|
| | | <view style="background-color: #2b85e4; padding: 40rpx;"> |
|---|
| | | <view style="width: 140rpx; height: 140rpx; border: 1px solid #fff; border-radius: 50%; margin: 0 auto;"> |
|---|
| | | <u-avatar src="/static/img/avatar.png" size="120rpx" style="margin: 10rpx;"></u-avatar> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view style="padding: 40rpx;"> |
|---|
| | | <u--form :model="userInfo" ref="uForm" labelWidth="160rpx" labelAlign="left"> |
|---|
| | | <u-form-item label="å§å" prop="nickName" class="u-border-bottom"> |
|---|
| | | <u--input |
|---|
| | | placeholder="请è¾å
¥å
容" |
|---|
| | | border="none" |
|---|
| | | v-model="userInfo.nickName" |
|---|
| | | ></u--input> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="æ§å«" prop="sex" class="u-border-bottom"> |
|---|
| | | <u-radio-group v-model="userInfo.sex" size="36rpx"> |
|---|
| | | <u-radio shape="circle" label="ç·" name="1" labelSize="32rpx"></u-radio> |
|---|
| | | <u-radio shape="circle" label="女" name="2" labelSize="32rpx" style="margin-left: 36rpx;"></u-radio> |
|---|
| | | </u-radio-group> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="ææºå·ç " prop="phonenumber" class="u-border-bottom"> |
|---|
| | | <u--input |
|---|
| | | placeholder="请è¾å
¥å
容" |
|---|
| | | border="none" |
|---|
| | | v-model="userInfo.phonenumber" |
|---|
| | | ></u--input> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="é®ç®±" prop="email" class="u-border-bottom"> |
|---|
| | | <u--input |
|---|
| | | placeholder="请è¾å
¥å
容" |
|---|
| | | border="none" |
|---|
| | | v-model="userInfo.email" |
|---|
| | | ></u--input> |
|---|
| | | </u-form-item> |
|---|
| | | </u--form> |
|---|
| | | </view> |
|---|
| | | <view style="padding: 40rpx;"> |
|---|
| | | <u-row gutter="32"> |
|---|
| | | <u-col span="6"> |
|---|
| | | <u-button icon="arrow-left" text="è¿å" plain @click="goBack()"></u-button> |
|---|
| | | </u-col> |
|---|
| | | <u-col span="6"> |
|---|
| | | <u-button icon="checkmark-circle" text="ä¿å" type="primary"></u-button> |
|---|
| | | </u-col> |
|---|
| | | </u-row> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Navbar, |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | userInfo: { |
|---|
| | | nickName: 'è¥ä¾', |
|---|
| | | sex: '1', |
|---|
| | | email: 'fastbuild@163.com', |
|---|
| | | phonenumber: '18888888888' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | goBack () { |
|---|
| | | uni.navigateBack({ delta: 1}); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="sass" scoped> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="index-content"> |
|---|
| | | <Navbar :hideBtn="true" title="é¦é¡µ" bgColor="#fff" :h5Show="false" :fixed="false"></Navbar> |
|---|
| | | <view class="index-block"> |
|---|
| | | <view class="index-block-title">è¿è¡ç»è®¡</view> |
|---|
| | | <u-row gutter="16"> |
|---|
| | | <u-col span="4"> |
|---|
| | | <view class="item-tj item-tj-frist"> |
|---|
| | | <view style="padding: 16rpx; height: 100%; position: relative;"> |
|---|
| | | <view style="display: flex; color: white;"> |
|---|
| | | <u-icon name="photo" color="#fff"></u-icon> |
|---|
| | | <text>å¨çº¿äººæ°</text> |
|---|
| | | </view> |
|---|
| | | <view style="position: absolute; bottom: 48rpx; right: 16rpx;"> |
|---|
| | | <u-count-to :startVal="0" :endVal="149" :duration="1500" color="#fff" separator=","></u-count-to> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </u-col> |
|---|
| | | <u-col span="4"> |
|---|
| | | <view class="item-tj item-tj-second"> |
|---|
| | | <view style="padding: 16rpx; height: 100%; position: relative;"> |
|---|
| | | <view style="display: flex; color: white;"> |
|---|
| | | <u-icon name="photo" color="#fff"></u-icon> |
|---|
| | | <text>ä»æ¥æ°å¢</text> |
|---|
| | | </view> |
|---|
| | | <view style="position: absolute; bottom: 48rpx; right: 16rpx;"> |
|---|
| | | <u-count-to :startVal="1" :endVal="2349" :duration="1500" color="#fff" separator=","></u-count-to> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </u-col> |
|---|
| | | <u-col span="4"> |
|---|
| | | <view class="item-tj item-tj-thrid"> |
|---|
| | | <view style="padding: 16rpx; height: 100%; position: relative;"> |
|---|
| | | <view style="display: flex; color: white;"> |
|---|
| | | <u-icon name="photo" color="#fff"></u-icon> |
|---|
| | | <text>æ»äººæ°</text> |
|---|
| | | </view> |
|---|
| | | <view style="position: absolute; bottom: 48rpx; right: 16rpx;"> |
|---|
| | | <u-count-to :startVal="1" :endVal="1249350" :duration="1500" color="#fff" separator=","></u-count-to> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </u-col> |
|---|
| | | </u-row> |
|---|
| | | </view> |
|---|
| | | <view class="index-block"> |
|---|
| | | <view class="index-block-title">è¿7天访é®éç»è®¡</view> |
|---|
| | | <view> |
|---|
| | | <qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :resshow="delayload" |
|---|
| | | :opts="{xAxis:{itemCount:12,disableGrid:true},yAxis:{disableGrid:true,data:[{disabled:true}]}}" |
|---|
| | | :chartData="historyData" /> |
|---|
| | | </view> |
|---|
| | | <view class="index-block-title">访é®éç»è®¡</view> |
|---|
| | | <view> |
|---|
| | | <qiun-data-charts type="bar" canvasId="finance_b" :canvas2d="isCanvas2d" :resshow="delayload" |
|---|
| | | :opts="{xAxis:{disabled: true,disableGrid:true},extra:{bar:{barBorderCircle:true,width:20}},legend:{show:false}}" |
|---|
| | | :chartData="historyData" /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="index-block"> |
|---|
| | | <view class="index-block-title">æ°æ®æ»è§</view> |
|---|
| | | <view class="detail_list"> |
|---|
| | | <view v-for="(item,index) in detail_list" :key="index" class="detail_item"> |
|---|
| | | <view> |
|---|
| | | <view class="font-middle">{{item.date}}</view> |
|---|
| | | <view class="font-small">{{item.time}}</view> |
|---|
| | | </view> |
|---|
| | | <view class="icon"><li :class="['iconfont',item.type == 'income'?'icon-income':'icon-expend']"></li></view> |
|---|
| | | <view class="right_content"> |
|---|
| | | <view class="money">{{item.type == 'income'?'+':'-'}}{{item.money}}</view> |
|---|
| | | <view class="text-gray font-middle">{{item.desc}}</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | |
|---|
| | | let _now = new Date(); |
|---|
| | | let now_time = {}; |
|---|
| | | now_time.year = _now.getFullYear() |
|---|
| | | now_time.month = _now.getMonth() + 1 |
|---|
| | | now_time.day = _now.getDay() |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Navbar, |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | isCanvas2d: true, |
|---|
| | | delayload: false, |
|---|
| | | historyData: { |
|---|
| | | "categories": [ |
|---|
| | | "1æ", |
|---|
| | | "2æ", |
|---|
| | | "2æ", |
|---|
| | | "4æ", |
|---|
| | | "5æ" |
|---|
| | | ], |
|---|
| | | "series": [ |
|---|
| | | { |
|---|
| | | "name": "æ¶å
¥æ
åµ", |
|---|
| | | "data": [1601,1840.5,1900,1760,1500.85], |
|---|
| | | "type": "line", |
|---|
| | | "style": "curve", |
|---|
| | | "color": "#4ECDB6", |
|---|
| | | "unit":"" |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | "yAxis":[ |
|---|
| | | {"calibration":true,"position":"left","title":"åä½/å
","titleFontSize":12,"unit":"","tofix":0,"min":0,"disableGrid":true} |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | detail_list:[ |
|---|
| | | {date:now_time.month + "-01",time:"11:01","type":"extend",money:"10.00",desc:"é¶è¡å¡è½¬åº"}, |
|---|
| | | {date:now_time.month + "-01",time:"13:45","type":"income",money:"18.00",desc:"é¶è¡å¡æ¶å
¥"}, |
|---|
| | | {date:now_time.month + "-02",time:"06:21","type":"extend",money:"123.45",desc:"ä¿¡ç¨å¡è½¬åº"}, |
|---|
| | | {date:now_time.month + "-03",time:"07:38","type":"income",money:"23.00",desc:"é¶è¡å¡æ¶å
¥"}, |
|---|
| | | {date:now_time.month + "-08",time:"16:28","type":"extend",money:"23.56",desc:"ä¿¡ç¨å¡è½¬åº"}, |
|---|
| | | {date:now_time.month + "-09",time:"15:25","type":"income",money:"850.12",desc:"é¶è¡å¡æ¶å
¥"}, |
|---|
| | | {date:now_time.month + "-09",time:"18:52","type":"income",money:"1.88",desc:"é¶è¡å¡æ¶å
¥"}, |
|---|
| | | {date:now_time.month + "-11",time:"21:12","type":"extend",money:"220.21",desc:"é¶è¡å¡è½¬åº"}, |
|---|
| | | {date:now_time.month + "-12",time:"13:08","type":"income",money:"32.28",desc:"é¶è¡å¡æ¶å
¥"}, |
|---|
| | | {date:now_time.month + "-12",time:"12:41","type":"extend",money:"122.12",desc:"ä¿¡ç¨å¡è½¬åº"}, |
|---|
| | | {date:now_time.month + "-13",time:"17:21","type":"income",money:"10.00",desc:"é¶è¡å¡æ¶å
¥"}, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | .index-content { |
|---|
| | | background-color: #f3f4f6; |
|---|
| | | min-height: 100vh; |
|---|
| | | } |
|---|
| | | .index-block { |
|---|
| | | padding: 40rpx; |
|---|
| | | background-color: #fff; |
|---|
| | | } |
|---|
| | | .index-block-title { |
|---|
| | | font-size: 40rpx; |
|---|
| | | font-weight: bold; |
|---|
| | | padding: 0 0 40rpx 0; |
|---|
| | | } |
|---|
| | | .item-tj { |
|---|
| | | width: 100%; |
|---|
| | | height: 160rpx; |
|---|
| | | border-radius: 16rpx; |
|---|
| | | |
|---|
| | | &-frist { |
|---|
| | | background-color: rgba($color: #2979ff, $alpha: 0.8); |
|---|
| | | // background-image: url('/static/img/bg/qb.png'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &-second { |
|---|
| | | background-color: rgba($color: #303133, $alpha: 0.8); |
|---|
| | | // background-image: url('/static/img/bg/qb.png'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &-thrid { |
|---|
| | | background-color: rgba($color: #19be6b, $alpha: 0.8); |
|---|
| | | // background-image: url('/static/img/bg/qb.png'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .detail_list{ |
|---|
| | | height: 700rpx; |
|---|
| | | overflow: auto; |
|---|
| | | color: #9E9E9E; |
|---|
| | | .detail_item{ |
|---|
| | | display: flex; |
|---|
| | | margin: 20rpx 0; |
|---|
| | | align-items: center; |
|---|
| | | .icon{ |
|---|
| | | width: 30%; |
|---|
| | | text-align: center; |
|---|
| | | li{ |
|---|
| | | font-size: 80rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .right_content{ |
|---|
| | | width: 50%; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | .icon-income{ |
|---|
| | | color:#4AABF9; |
|---|
| | | } |
|---|
| | | .icon-expend{ |
|---|
| | | color: #E45521; |
|---|
| | | } |
|---|
| | | .money{ |
|---|
| | | color: #000; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .t-login { |
|---|
| | | width: 650rpx; |
|---|
| | | margin: 0 auto; |
|---|
| | | font-size: 28rpx; |
|---|
| | | color: #000; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /deep/ .login-form-item .u-input { |
|---|
| | | padding: 0 10px 0 62px; |
|---|
| | | height: 32px; |
|---|
| | | line-height: 32px; |
|---|
| | | margin-bottom: 26px; |
|---|
| | | background: #f8f7fc; |
|---|
| | | border: 1px solid #e9e9e9; |
|---|
| | | font-size: 14px; |
|---|
| | | border-radius: 26px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .t-captcha { |
|---|
| | | display: flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | justify-content: space-evenly; |
|---|
| | | } |
|---|
| | | .t-captcha-img { |
|---|
| | | margin-left: 16px; |
|---|
| | | width: 102px; |
|---|
| | | height: 44px; |
|---|
| | | } |
|---|
| | | .img-a { |
|---|
| | | position: absolute; |
|---|
| | | width: 100%; |
|---|
| | | top: -150rpx; |
|---|
| | | right: 0; |
|---|
| | | z-index: -999; |
|---|
| | | } |
|---|
| | | .img-b { |
|---|
| | | position: absolute; |
|---|
| | | width: 50%; |
|---|
| | | bottom: 0; |
|---|
| | | left: -50rpx; |
|---|
| | | z-index: -999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .t-login button { |
|---|
| | | font-size: 28rpx; |
|---|
| | | background: #5677fc; |
|---|
| | | color: #fff; |
|---|
| | | height: 90rpx; |
|---|
| | | line-height: 90rpx; |
|---|
| | | border-radius: 50rpx; |
|---|
| | | box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .t-login .t-b { |
|---|
| | | text-align: left; |
|---|
| | | font-size: 56rpx; |
|---|
| | | color: #000; |
|---|
| | | padding: 300rpx 0 20rpx 0; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .t-login .t-b2 { |
|---|
| | | text-align: left; |
|---|
| | | font-size: 32rpx; |
|---|
| | | color: #aaaaaa; |
|---|
| | | padding: 0rpx 0 60rpx 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .t-login .uni-input-placeholder { |
|---|
| | | color: #000 !important; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!-- èè²ç®æ´ç»å½é¡µé¢ --> |
|---|
| | | <template> |
|---|
| | | <view class="t-login"> |
|---|
| | | <!-- 页é¢è£
饰å¾ç --> |
|---|
| | | <image class="img-a" src="/static/img/b-1.png"></image> |
|---|
| | | <image class="img-b" src="/static/img/b-2.png"></image> |
|---|
| | | <!-- æ é¢ --> |
|---|
| | | <view class="t-b">{{ title }}</view> |
|---|
| | | <view class="t-b2">{{ subTitle }}</view> |
|---|
| | | <form class="cl"> |
|---|
| | | <!-- ç»å½è´¦å· --> |
|---|
| | | <view class="login-form-item"> |
|---|
| | | <u-input v-model="username" placeholder="请è¾å
¥ç»å½ç¨æ·å" maxlength="30"> |
|---|
| | | <u-icon slot="prefix" name="account" size="35px"></u-icon> |
|---|
| | | </u-input> |
|---|
| | | </view> |
|---|
| | | <!-- ç»å½å¯ç --> |
|---|
| | | <view class="login-form-item"> |
|---|
| | | <u-input v-model="password" type="password" placeholder="请è¾å
¥ç»å½å¯ç " maxlength="16"> |
|---|
| | | <u-icon slot="prefix" name="lock" size="35px"></u-icon> |
|---|
| | | </u-input> |
|---|
| | | </view> |
|---|
| | | <!-- å¾å½¢éªè¯ç --> |
|---|
| | | <view class="login-form-item t-captcha"> |
|---|
| | | <u-input v-model="captchaCode" type="number" placeholder="请è¾å
¥éªè¯ç " maxlength="4"> |
|---|
| | | <u-icon slot="prefix" name="fingerprint" size="35px"></u-icon> |
|---|
| | | </u-input> |
|---|
| | | <image :src="captcha" @click="getCaptcha" class="t-captcha-img"></image> |
|---|
| | | </view> |
|---|
| | | <button @tap="login()">ç» å½</button> |
|---|
| | | </form> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | import * as CaptchaApi from '@/api/captcha' |
|---|
| | | import { isEmpty } from '@/utils/verify.js' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | title: 'è¥ä¾æé管çç³»ç»', |
|---|
| | | subTitle: '欢è¿åæ¥ï¼å¼å§å·¥ä½å§ï¼', |
|---|
| | | // å¾å½¢éªè¯ç ä¿¡æ¯ |
|---|
| | | captcha: null, |
|---|
| | | // ç»å½è´¦å· |
|---|
| | | username: 'admin', |
|---|
| | | // å¯ç |
|---|
| | | password: 'admin123', |
|---|
| | | // å¾å½¢éªè¯ç |
|---|
| | | captchaCode: '', |
|---|
| | | uuid: '' |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // è·åå¾å½¢éªè¯ç |
|---|
| | | this.getCaptcha() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // è·åå¾å½¢éªè¯ç |
|---|
| | | getCaptcha() { |
|---|
| | | const app = this |
|---|
| | | CaptchaApi.image().then(result => { |
|---|
| | | app.captcha = 'data:image/gif;base64,' + result.img |
|---|
| | | app.uuid = result.uuid |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // éªè¯è¡¨åå
容 |
|---|
| | | validItem() { |
|---|
| | | const app = this |
|---|
| | | if (isEmpty(app.username)) { |
|---|
| | | uni.$u.toast('请è¾å
¥ç»å½ç¨æ·å') |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | if (isEmpty(app.password)) { |
|---|
| | | uni.$u.toast('请è¾å
¥ç»å½å¯ç ') |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | if (isEmpty(app.captchaCode)) { |
|---|
| | | uni.$u.toast('请è¾å
¥éªè¯ç ') |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | return true |
|---|
| | | }, |
|---|
| | | // 确认ç»å½ |
|---|
| | | login() { |
|---|
| | | const app = this |
|---|
| | | let valid = app.validItem(); |
|---|
| | | if (valid) { |
|---|
| | | app.isLoading = true |
|---|
| | | app.$store.dispatch('Login', { |
|---|
| | | username: app.username, |
|---|
| | | password: app.password, |
|---|
| | | code: app.captchaCode, |
|---|
| | | uuid: app.uuid |
|---|
| | | }).then(result => { |
|---|
| | | uni.switchTab({ |
|---|
| | | url: '/pages/index/index', |
|---|
| | | fail(err) { |
|---|
| | | console.log(err) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | .catch(err => { |
|---|
| | | app.captchaCode = '' |
|---|
| | | app.getCaptcha() |
|---|
| | | }) |
|---|
| | | .finally(() => app.isLoading = false) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import 'index.scss'; |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view> |
|---|
| | | <Navbar title="å·¥ä½å°" bgColor="#fff" :hideBtn="true" :h5Show="false"></Navbar> |
|---|
| | | <view class="mobile-item-container"> |
|---|
| | | <view style="font-size: 40rpx; font-weight: bold; padding: 0 0 40rpx 0;">å¾
å¤ç</view> |
|---|
| | | <u-grid col="3"> |
|---|
| | | <u-grid-item @click="navigateTo('/pages/work/notice/list')"> |
|---|
| | | <view style="position: relative;"> |
|---|
| | | <u-icon name="chat" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <u-badge style="position: absolute; top: -5rpx; right: -10rpx;" type="error" numberType="overflow" max="99" v-model="todo.notice"></u-badge> |
|---|
| | | </view> |
|---|
| | | <text class="btn-text">éç¥å
Œ</text> |
|---|
| | | </u-grid-item> |
|---|
| | | <u-grid-item> |
|---|
| | | <view style="position: relative;"> |
|---|
| | | <u-icon name="list-dot" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <u-badge style="position: absolute; top: -5rpx; right: -10rpx;" type="error" numberType="overflow" max="99" v-model="todo.task"></u-badge> |
|---|
| | | </view> |
|---|
| | | <text class="btn-text">å¾
åä»»å¡</text> |
|---|
| | | </u-grid-item> |
|---|
| | | <u-grid-item> |
|---|
| | | <view style="position: relative;"> |
|---|
| | | <u-icon name="warning" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <u-badge style="position: absolute; top: -5rpx; right: -10rpx;" type="error" numberType="overflow" max="99" v-model="todo.error"></u-badge> |
|---|
| | | </view> |
|---|
| | | <text class="btn-text">å¼å¸¸ä¿¡æ¯</text> |
|---|
| | | </u-grid-item> |
|---|
| | | </u-grid> |
|---|
| | | </view> |
|---|
| | | <Gap /> |
|---|
| | | <view class="mobile-item-container"> |
|---|
| | | <view style="font-size: 40rpx; font-weight: bold; padding: 0 0 40rpx 0;">ç»è®¡æ¥è¡¨</view> |
|---|
| | | <u-grid col="3"> |
|---|
| | | <u-grid-item> |
|---|
| | | <u-icon name="star" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">访é®éç»è®¡</text> |
|---|
| | | </u-grid-item> |
|---|
| | | <u-grid-item> |
|---|
| | | <u-icon name="share-square" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">å享ç»è®¡</text> |
|---|
| | | </u-grid-item> |
|---|
| | | </u-grid> |
|---|
| | | </view> |
|---|
| | | <Gap /> |
|---|
| | | <view style="padding: 40rpx; background-color: #fff; margin-top: 40rpx; min-height: 600rpx;"> |
|---|
| | | <u-tabs |
|---|
| | | :activeStyle="{ |
|---|
| | | color: '#303133', |
|---|
| | | fontSize: '40rpx', |
|---|
| | | fontWeight: 'bold', |
|---|
| | | transform: 'scale(1.05)' |
|---|
| | | }" |
|---|
| | | :inactiveStyle="{ |
|---|
| | | color: '#606266', |
|---|
| | | fontSize: '36rpx', |
|---|
| | | transform: 'scale(1)' |
|---|
| | | }" |
|---|
| | | :list="tabs" |
|---|
| | | @change="tabChange"> |
|---|
| | | </u-tabs> |
|---|
| | | <view v-if="activeKey == 'work'" style="padding: 40rpx 0;"> |
|---|
| | | <u-grid col="3"> |
|---|
| | | <u-grid-item @click="navigateTo('/pages/work/notice/manage')"> |
|---|
| | | <u-icon name="edit-pen" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">å
¬å管ç</text> |
|---|
| | | </u-grid-item> |
|---|
| | | <u-grid-item @click="navigateTo('/pages/work/user/list')"> |
|---|
| | | <u-icon name="plus-people-fill" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">ç¨æ·ç®¡ç</text> |
|---|
| | | </u-grid-item> |
|---|
| | | <u-grid-item> |
|---|
| | | <u-icon name="tags" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">é¨é¨ç®¡ç</text> |
|---|
| | | </u-grid-item> |
|---|
| | | </u-grid> |
|---|
| | | <u-grid col="3" style="margin-top: 40rpx;"> |
|---|
| | | <u-grid-item> |
|---|
| | | <u-icon name="bookmark" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">å²ä½ç®¡ç</text> |
|---|
| | | </u-grid-item> |
|---|
| | | </u-grid> |
|---|
| | | </view> |
|---|
| | | <view v-if="activeKey == 'plugin'" style="padding: 40rpx 0;"> |
|---|
| | | <u-grid col="3"> |
|---|
| | | <u-grid-item> |
|---|
| | | <u-icon name="order" color="#2979ff" size="60rpx"></u-icon> |
|---|
| | | <text class="btn-text">表åæ ·ä¾</text> |
|---|
| | | </u-grid-item> |
|---|
| | | </u-grid> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | import Gap from '@/components/gap/Gap' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Gap, |
|---|
| | | Navbar, |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | activeKey: 'work', |
|---|
| | | tabs: [{ |
|---|
| | | name: 'æ¥å¸¸å·¥ä½', |
|---|
| | | key: 'work' |
|---|
| | | }, { |
|---|
| | | name: 'æ件', |
|---|
| | | key: 'plugin' |
|---|
| | | }], |
|---|
| | | todo: { |
|---|
| | | notice: 2, |
|---|
| | | task: 5, |
|---|
| | | error: 1 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | tabChange (item) { |
|---|
| | | this.activeKey = item.key; |
|---|
| | | }, |
|---|
| | | navigateTo (url) { |
|---|
| | | uni.navigateTo({ url: url }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="mobile-item-container"> |
|---|
| | | <Navbar title="å
¬å详æ
" bgColor="#fff" :h5Show="false"></Navbar> |
|---|
| | | <view style="font-size: 40rpx; font-weight: bold;">{{notice.noticeTitle}}</view> |
|---|
| | | <view style="display: flex; font-size: 12px; color: #909399;"> |
|---|
| | | <u-icon name="clock" size="12"></u-icon> |
|---|
| | | <text>{{notice.createTime}}</text> |
|---|
| | | <u-icon name="account" size="12"></u-icon> |
|---|
| | | <text>{{notice.remark}}</text> |
|---|
| | | </view> |
|---|
| | | <view style="margin-top: 40rpx;"> |
|---|
| | | <u-parse :content="notice.noticeContent"></u-parse> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as NoticeApi from '@/api/work/notice' |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Navbar, |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | noticeId: undefined, |
|---|
| | | notice: {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad (params) { |
|---|
| | | this.noticeId = params.id |
|---|
| | | this.loadData() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | loadData () { |
|---|
| | | const app = this |
|---|
| | | NoticeApi.noticeById(this.noticeId).then(res => { |
|---|
| | | app.notice = res.data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="mobile-item-container"> |
|---|
| | | <Navbar :title="noticeId ? 'ä¿®æ¹å
¬å' : 'æ°å¢å
Œ'" bgColor="#fff" :h5Show="false"></Navbar> |
|---|
| | | <u--form ref="noticeForm" :model="notice" :rules="rules" labelPosition="left"> |
|---|
| | | <u-form-item label="æ é¢" prop="noticeTitle" borderBottom> |
|---|
| | | <u--textarea v-model="notice.noticeTitle" placeholder="请è¾å
¥æ é¢" :count="false" :maxlength="30" :autoHeight="true" confirmType="done"></u--textarea> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="ç±»å" prop="noticeType" borderBottom @click="actionShow = true;"> |
|---|
| | | <u--input v-model="noticeTypeName" disabled disabledColor="#ffffff" placeholder="请éæ©ç±»å" border="none"></u--input> |
|---|
| | | <u-icon slot="right" name="arrow-right"></u-icon> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="ç¶æ" prop="status" borderBottom> |
|---|
| | | <u-radio-group v-model="notice.status"> |
|---|
| | | <u-radio shape="circle" label="æ£å¸¸" name="0" checked></u-radio> |
|---|
| | | <u-radio shape="circle" label="å
³é" name="1"></u-radio> |
|---|
| | | </u-radio-group> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="æ£æ" prop="noticeContent"> |
|---|
| | | <u--textarea v-model="notice.noticeContent" placeholder="请è¾å
¥æ é¢" :count="true" :maxlength="600" confirmType="done"></u--textarea> |
|---|
| | | </u-form-item> |
|---|
| | | </u--form> |
|---|
| | | <u-action-sheet :actions="actions" :title="actionTitle" :show="actionShow" @close="actionShow = false" @select="actionSelect"></u-action-sheet> |
|---|
| | | <u-row :gutter="16" style="margin-top: 36px;"> |
|---|
| | | <u-col :span="6"> |
|---|
| | | <u-button v-if="noticeId" type="error" text="å é¤" @click="del"></u-button> |
|---|
| | | <u-button v-else icon="arrow-left" text="è¿å" plain @click="goBack()"></u-button> |
|---|
| | | </u-col> |
|---|
| | | <u-col :span="6"> |
|---|
| | | <u-button type="primary" text="æ交" @click="submit"></u-button> |
|---|
| | | </u-col> |
|---|
| | | </u-row> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as NoticeApi from '@/api/work/notice' |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Navbar, |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | noticeId: undefined, |
|---|
| | | notice: { |
|---|
| | | noticeTitle: '', |
|---|
| | | status: '0', |
|---|
| | | noticeContent: '' |
|---|
| | | }, |
|---|
| | | actionShow: false, |
|---|
| | | actions: [{ |
|---|
| | | name: 'éç¥', |
|---|
| | | value: '1' |
|---|
| | | }, { |
|---|
| | | name: 'å
Œ', |
|---|
| | | value: '2' |
|---|
| | | }], |
|---|
| | | actionTitle: '', |
|---|
| | | noticeTypeName: null, |
|---|
| | | rules: { |
|---|
| | | noticeTitle: [ { required: true, message: '请è¾å
¥å
¬åæ é¢', trigger: ['blur', 'change'] } ], |
|---|
| | | noticeType: [ { required: true, message: '请éæ©å
¬åç±»å', trigger: ['blur', 'change'] } ], |
|---|
| | | status: [ { required: true, message: '请éæ©å
¬åç¶æ', trigger: ['blur', 'change'] } ], |
|---|
| | | noticeContent: [ { required: true, message: '请è¾å
¥å
¬åæ£æ', trigger: ['blur', 'change'] } ], |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad (params) { |
|---|
| | | this.noticeId = params.id |
|---|
| | | this.loadData() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | loadData () { |
|---|
| | | if (this.noticeId) { |
|---|
| | | const app = this |
|---|
| | | NoticeApi.noticeById(this.noticeId).then(res => { |
|---|
| | | app.notice = res.data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | del () { |
|---|
| | | NoticeApi.noticeDelete(this.noticeId).then(res => { |
|---|
| | | uni.showToast({ title: 'ä¿åæåï¼' }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | submit () { |
|---|
| | | this.$refs.noticeForm.validate().then(res => { |
|---|
| | | if (this.noticeId) { |
|---|
| | | NoticeApi.noticeModify(this.notice).then(res => { |
|---|
| | | uni.showToast({ title: 'æ交æåï¼' }) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | NoticeApi.noticeAdd(this.notice).then(res => { |
|---|
| | | uni.showToast({ title: 'æ交æåï¼' }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | actionSelect (item) { |
|---|
| | | this.noticeTypeName = item.name; |
|---|
| | | this.notice.noticeType = item.value; |
|---|
| | | this.$refs.noticeForm.validateField('noticeType'); |
|---|
| | | }, |
|---|
| | | goBack () { |
|---|
| | | uni.navigateBack({ delta: 1}); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="mobile-item-container"> |
|---|
| | | <Navbar title="éç¥å
Œ" bgColor="#fff" :h5Show="false"></Navbar> |
|---|
| | | <u-tabs :activeStyle="activeStyle" :list="tabs" @change="tabChange"></u-tabs> |
|---|
| | | <!-- æªè¯» --> |
|---|
| | | <view v-if="activeKey == 'unread'"> |
|---|
| | | <view style="padding: 16px 0 10px;"> |
|---|
| | | <view class="notice-item-tips"> |
|---|
| | | <text>éç¥</text> |
|---|
| | | <u-tag text="1" size="mini" type="primary" style="margin: 0 8px;"></u-tag> |
|---|
| | | <text>æ¡ï¼å
Œ</text> |
|---|
| | | <u-tag text="1" size="mini" type="success" style="margin: 0 8px;"></u-tag> |
|---|
| | | <text>æ¡ï¼å
± 2 æ¡ã</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <Record :list="list" @click="toDetail"></Record> |
|---|
| | | </view> |
|---|
| | | <!-- 已读 --> |
|---|
| | | <view v-if="activeKey == 'read'"> |
|---|
| | | <view style="padding: 16px 0 10px;"> |
|---|
| | | <u-search :show-action="true" actionText="æç´¢" :animation="true" shape="square" height="40px"></u-search> |
|---|
| | | </view> |
|---|
| | | <Record :list="[]" @click="toDetail"></Record> |
|---|
| | | </view> |
|---|
| | | <!-- å
¨é¨ --> |
|---|
| | | <view v-if="activeKey == 'all'"> |
|---|
| | | <view style="padding: 16px 0 10px;"> |
|---|
| | | <u-search :show-action="true" actionText="æç´¢" :animation="true" shape="square" height="40px"></u-search> |
|---|
| | | </view> |
|---|
| | | <Record :list="list" @click="toDetail"></Record> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as NoticeApi from '@/api/work/notice' |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | import Record from './record' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Navbar, |
|---|
| | | Record, |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | activeKey: 'unread', |
|---|
| | | tabs: [{ |
|---|
| | | name: 'æªè¯»', |
|---|
| | | key: 'unread', |
|---|
| | | badge: { |
|---|
| | | value: 2, |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | name: '已读', |
|---|
| | | key: 'read' |
|---|
| | | }, { |
|---|
| | | name: 'å
¨é¨', |
|---|
| | | key: 'all' |
|---|
| | | }], |
|---|
| | | params: { |
|---|
| | | pageNum: 0, |
|---|
| | | pageSize: 10 |
|---|
| | | }, |
|---|
| | | list: [], |
|---|
| | | activeStyle: { |
|---|
| | | color: '#303133', |
|---|
| | | fontSize: '20px', |
|---|
| | | fontWeight: 'bold', |
|---|
| | | transform: 'scale(1.05)' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | this.loadData() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å è½½éç¥å
¬åæ°æ® |
|---|
| | | loadData () { |
|---|
| | | const app = this |
|---|
| | | this.params.pageNum += 1; |
|---|
| | | NoticeApi.noticeList(this.params).then(res => { |
|---|
| | | app.list = res.rows; |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | tabChange (item) { |
|---|
| | | this.activeKey = item.key; |
|---|
| | | this.params.pageNum = 0; |
|---|
| | | this.loadData(); |
|---|
| | | }, |
|---|
| | | // æ»å¨å页å è½½æ°æ® |
|---|
| | | scrolltolower () { |
|---|
| | | this.loadData(); |
|---|
| | | }, |
|---|
| | | toDetail (notice) { |
|---|
| | | uni.navigateTo({ url: '/pages/work/notice/detail?id=' + notice.noticeId }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .notice-item-tips { |
|---|
| | | border-radius: 8px; |
|---|
| | | background-color: #f4f4f5; |
|---|
| | | padding: 9px 16px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="mobile-item-container"> |
|---|
| | | <Navbar title="å
¬å管ç" bgColor="#fff" :h5Show="false"></Navbar> |
|---|
| | | <Tabs :tabs="tabs" @change="tabChange" style="margin-bottom: 16px;"></Tabs> |
|---|
| | | <Record v-if="activeKey == 'draft'" :list="list" @click="navigateTo"></Record> |
|---|
| | | <Record v-if="activeKey == 'published'" :list="list" @click="navigateTo"></Record> |
|---|
| | | <FloatButton type="primary" icon="plus" @click="navigateTo"></FloatButton> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as NoticeApi from '@/api/work/notice' |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | import FloatButton from '@/components/button/FloatButton' |
|---|
| | | import Tabs from '@/components/tabs/Tabs' |
|---|
| | | import Record from './record' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Navbar, |
|---|
| | | FloatButton, |
|---|
| | | Tabs, |
|---|
| | | Record, |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | activeKey: 'draft', |
|---|
| | | tabs: [{ |
|---|
| | | name: 'è稿', |
|---|
| | | key: 'draft', |
|---|
| | | }, { |
|---|
| | | name: 'å·²åå¸', |
|---|
| | | key: 'published' |
|---|
| | | }], |
|---|
| | | params: { |
|---|
| | | pageNum: 0, |
|---|
| | | pageSize: 10 |
|---|
| | | }, |
|---|
| | | list: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | this.loadData() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å è½½éç¥å
¬åæ°æ® |
|---|
| | | loadData () { |
|---|
| | | const app = this |
|---|
| | | this.params.pageNum += 1; |
|---|
| | | NoticeApi.noticeList(this.params).then(res => { |
|---|
| | | app.list = res.rows; |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ»å¨å页å è½½æ°æ® |
|---|
| | | scrolltolower () { |
|---|
| | | this.loadData(); |
|---|
| | | }, |
|---|
| | | tabChange (tab) { |
|---|
| | | this.activeKey = tab.key; |
|---|
| | | this.params.pageNum = 0; |
|---|
| | | this.loadData(); |
|---|
| | | }, |
|---|
| | | navigateTo (notice) { |
|---|
| | | if (notice) { |
|---|
| | | uni.navigateTo({ url: '/pages/work/notice/edit?id=' + notice.noticeId }) |
|---|
| | | } else { |
|---|
| | | uni.navigateTo({ url: '/pages/work/notice/edit' }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .list-item { |
|---|
| | | padding: 20rpx 0; |
|---|
| | | border-bottom: 0.5px solid #ccc; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view v-if="list && list.length > 0"> |
|---|
| | | <u-cell v-for="(item, index) in list" :key="index" :isLink="true" :border="true" @click="$emit('click', item)"> |
|---|
| | | <u-avatar slot="icon" :bg-color="item.noticeType == 2 ? '#2979ff' : '#19be6b'" :text="item.noticeType == 2 ? 'å
¬' : 'é'" shape="square"></u-avatar> |
|---|
| | | <view slot="title" class="notice-record-title">{{item.noticeTitle}}</view> |
|---|
| | | <view slot="label" class="notice-record-desc"> |
|---|
| | | <view style="display: flex;"> |
|---|
| | | <u-icon name="clock" size="12"></u-icon> |
|---|
| | | <text>{{item.createTime}}</text> |
|---|
| | | </view> |
|---|
| | | <view style="display: flex; margin-left: 16px;"> |
|---|
| | | <u-icon name="account" size="12"></u-icon> |
|---|
| | | <text>{{item.remark}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </u-cell> |
|---|
| | | <!-- <u-loadmore :status="status" /> --> |
|---|
| | | </view> |
|---|
| | | <u-empty v-else></u-empty> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | list: { |
|---|
| | | type: Array, |
|---|
| | | default: [] |
|---|
| | | }, |
|---|
| | | status: String |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | /deep/.u-cell__body { |
|---|
| | | padding: 8px 0 !important; |
|---|
| | | } |
|---|
| | | .notice-record { |
|---|
| | | display: flex; |
|---|
| | | padding: 16px 0; |
|---|
| | | |
|---|
| | | &-content { |
|---|
| | | margin-left: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &-title { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: bold; |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | display: -webkit-box; |
|---|
| | | -webkit-line-clamp: 2; |
|---|
| | | -webkit-box-orient: vertical; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &-title .read { |
|---|
| | | color: #ccc; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &-desc { |
|---|
| | | padding: 4px 0; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #909399; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="mobile-item-container"> |
|---|
| | | <Navbar :title="userId ? 'ä¿®æ¹ç¨æ·' : 'æ°å¢ç¨æ·'" bgColor="#fff" :h5Show="false"></Navbar> |
|---|
| | | <u--form ref="form" :model="userInfo" :rules="rules" labelPosition="left" labelWidth="80"> |
|---|
| | | <u-form-item label="ç¨æ·æµç§°" prop="nickName" borderBottom> |
|---|
| | | <u-input v-model="userInfo.nickName" placeholder="请è¾å
¥ç¨æ·æµç§°" :maxlength="30" border="none"></u-input> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="å½å±é¨é¨" prop="deptId" borderBottom @click="actionShow = true;"> |
|---|
| | | <u--input v-model="noticeTypeName" disabled disabledColor="#ffffff" placeholder="请éæ©ç±»å" border="none"></u--input> |
|---|
| | | <u-icon slot="right" name="arrow-right"></u-icon> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="ç¶æ" prop="status" borderBottom> |
|---|
| | | <u-radio-group v-model="userInfo.status"> |
|---|
| | | <u-radio shape="circle" label="æ£å¸¸" name="0" checked></u-radio> |
|---|
| | | <u-radio shape="circle" label="å
³é" name="1"></u-radio> |
|---|
| | | </u-radio-group> |
|---|
| | | </u-form-item> |
|---|
| | | <u-form-item label="æ£æ" prop="noticeContent"> |
|---|
| | | <u--textarea v-model="userInfo.noticeContent" placeholder="请è¾å
¥æ é¢" :count="true" :maxlength="600" confirmType="done"></u--textarea> |
|---|
| | | </u-form-item> |
|---|
| | | </u--form> |
|---|
| | | <u-action-sheet title="é¨é¨éæ©" :show="actionShow" @close="actionShow = false"> |
|---|
| | | <qian-tree ref="tkitree" confirmColor="#4e8af7" /> |
|---|
| | | </u-action-sheet> |
|---|
| | | <u-row :gutter="16" style="margin-top: 36px;"> |
|---|
| | | <u-col :span="6"> |
|---|
| | | <u-button v-if="userId" type="error" text="å é¤" @click="del"></u-button> |
|---|
| | | <u-button v-else icon="arrow-left" text="è¿å" plain @click="goBack()"></u-button> |
|---|
| | | </u-col> |
|---|
| | | <u-col :span="6"> |
|---|
| | | <u-button type="primary" text="æ交" @click="submit"></u-button> |
|---|
| | | </u-col> |
|---|
| | | </u-row> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as UserManageApi from '@/api/work/userManage' |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | import qianTree from "@/components/qian-tree/qian-tree.vue" |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Navbar, |
|---|
| | | qianTree |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | userId: undefined, |
|---|
| | | userInfo: { |
|---|
| | | noticeTitle: '', |
|---|
| | | status: '0', |
|---|
| | | noticeContent: '' |
|---|
| | | }, |
|---|
| | | actionShow: false, |
|---|
| | | actions: [{ |
|---|
| | | name: 'éç¥', |
|---|
| | | value: '1' |
|---|
| | | }, { |
|---|
| | | name: 'å
Œ', |
|---|
| | | value: '2' |
|---|
| | | }], |
|---|
| | | actionTitle: '', |
|---|
| | | noticeTypeName: null, |
|---|
| | | rules: { |
|---|
| | | noticeTitle: [ { required: true, message: '请è¾å
¥å
¬åæ é¢', trigger: ['blur', 'change'] } ], |
|---|
| | | noticeType: [ { required: true, message: '请éæ©å
¬åç±»å', trigger: ['blur', 'change'] } ], |
|---|
| | | status: [ { required: true, message: '请éæ©å
¬åç¶æ', trigger: ['blur', 'change'] } ], |
|---|
| | | noticeContent: [ { required: true, message: '请è¾å
¥å
¬åæ£æ', trigger: ['blur', 'change'] } ], |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad (params) { |
|---|
| | | this.userId = params.id |
|---|
| | | this.loadData() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | loadData () { |
|---|
| | | if (this.userId) { |
|---|
| | | const app = this |
|---|
| | | UserManageApi.userById(this.userId).then(res => { |
|---|
| | | app.userInfo = res.data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | del () { |
|---|
| | | NoticeApi.noticeDelete(this.userId).then(res => { |
|---|
| | | uni.showToast({ title: 'ä¿åæåï¼' }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | submit () { |
|---|
| | | this.$refs.noticeForm.validate().then(res => { |
|---|
| | | if (this.userId) { |
|---|
| | | NoticeApi.noticeModify(this.notice).then(res => { |
|---|
| | | uni.showToast({ title: 'æ交æåï¼' }) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | NoticeApi.noticeAdd(this.notice).then(res => { |
|---|
| | | uni.showToast({ title: 'æ交æåï¼' }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | actionSelect (item) { |
|---|
| | | this.noticeTypeName = item.name; |
|---|
| | | this.userInfo.noticeType = item.value; |
|---|
| | | this.$refs.noticeForm.validateField('noticeType'); |
|---|
| | | }, |
|---|
| | | goBack () { |
|---|
| | | uni.navigateBack({ delta: 1}); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="mobile-item-container"> |
|---|
| | | <Navbar title="ç¨æ·ç®¡ç" bgColor="#fff" :h5Show="false"></Navbar> |
|---|
| | | <view style="padding: 16px 0 10px;"> |
|---|
| | | <u-search :show-action="true" actionText="æç´¢" :animation="true" height="40px"></u-search> |
|---|
| | | </view> |
|---|
| | | <view v-if="list && list.length > 0"> |
|---|
| | | <u-cell v-for="(item, index) in list" :key="index" :isLink="true" :border="true" @click="navigateTo(item)"> |
|---|
| | | <u-avatar slot="icon" v-if="item.avatar" :src="item.avatar"></u-avatar> |
|---|
| | | <u-avatar slot="icon" v-else :text="item.remark.substring(0, 1)" randomBgColor></u-avatar> |
|---|
| | | <view slot="title"> |
|---|
| | | <view style="display: flex; padding: 8px 0;"> |
|---|
| | | <text style="font-size: 18px; font-weight: bold;">{{item.remark}}</text> |
|---|
| | | <u-tag :text="item.delFlag == 0 ? 'å¯ç¨' : 'åç¨'" :type="item.delFlag == 0 ? 'primary' : 'error'" shape="circle" size="mini" style="margin-left: 8px;"></u-tag> |
|---|
| | | </view> |
|---|
| | | <view style="display: flex; justify-content:space-between;"> |
|---|
| | | <text>é¨é¨ï¼{{item.dept.deptName}}</text> |
|---|
| | | <text>çµè¯ï¼{{item.phonenumber}}</text> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <text>é®ä»¶ï¼{{item.email}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view slot="label"> |
|---|
| | | </view> |
|---|
| | | </u-cell> |
|---|
| | | <!-- <u-loadmore :status="status" /> --> |
|---|
| | | </view> |
|---|
| | | <u-empty v-else></u-empty> |
|---|
| | | <FloatButton type="primary" icon="plus" @click="navigateTo"></FloatButton> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as UserManageApi from '@/api/work/userManage' |
|---|
| | | import Navbar from '@/components/navbar/Navbar' |
|---|
| | | import FloatButton from '@/components/button/FloatButton' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | Navbar, |
|---|
| | | FloatButton |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | params: { |
|---|
| | | pageNum: 0, |
|---|
| | | pageSize: 10 |
|---|
| | | }, |
|---|
| | | list: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad () { |
|---|
| | | this.loadData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å è½½ç¨æ·å表æ°æ® |
|---|
| | | loadData () { |
|---|
| | | const app = this |
|---|
| | | this.params.pageNum += 1; |
|---|
| | | UserManageApi.userList(this.params).then(res => { |
|---|
| | | app.list = res.rows; |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | navigateTo (user) { |
|---|
| | | if (user) { |
|---|
| | | uni.navigateTo({ url: '/pages/work/user/edit?id=' + user.userId }) |
|---|
| | | } else { |
|---|
| | | uni.navigateTo({ url: '/pages/work/user/edit' }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /* èªå®ä¹æ ·å¼ */ |
|---|
| | | .mobile-item-container { |
|---|
| | | padding: 16px; |
|---|
| | | background-color: #fff; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import Vue from 'vue' |
|---|
| | | import Vuex from 'vuex' |
|---|
| | | |
|---|
| | | Vue.use(Vuex) |
|---|
| | | |
|---|
| | | const files = require.context("./modules", false, /\.js$/); |
|---|
| | | let modules = { |
|---|
| | | state: {}, |
|---|
| | | mutations: {}, |
|---|
| | | actions: {}, |
|---|
| | | getters: {} |
|---|
| | | }; |
|---|
| | | |
|---|
| | | files.keys().forEach((key) => { |
|---|
| | | Object.assign(modules.state, files(key)["state"] || {}); |
|---|
| | | Object.assign(modules.mutations, files(key)["mutations"] || {}); |
|---|
| | | Object.assign(modules.actions, files(key)["actions"] || {}); |
|---|
| | | Object.assign(modules.getters, files(key)["getters"] || {}); |
|---|
| | | }); |
|---|
| | | const store = new Vuex.Store(modules); |
|---|
| | | export default store; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | import storage from '@/utils/storage' |
|---|
| | | |
|---|
| | | export const state = { |
|---|
| | | systemInfo: null |
|---|
| | | } |
|---|
| | | |
|---|
| | | export const mutations = { |
|---|
| | | SET_SYSTEM_INFO: (state, value) => { |
|---|
| | | state.systemInfo = value |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | export const actions = { |
|---|
| | | // è·åç¨æ·ç»ç«¯ç³»ç»ä¿¡æ¯ |
|---|
| | | SystemInfo ({ commit, state }) { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | if (state.info) { |
|---|
| | | resolve(res) |
|---|
| | | } else { |
|---|
| | | uni.getSystemInfo({ |
|---|
| | | success (res) { |
|---|
| | | commit('SET_SYSTEM_INFO', res) |
|---|
| | | // ä¿¡æ¯åå
¥ç¼åï¼æææ1å¤©ï¼ |
|---|
| | | storage.set('SYSTEM_INFO', res, 86400); |
|---|
| | | resolve(res) |
|---|
| | | }, |
|---|
| | | fail (err) { |
|---|
| | | reject(err) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | export const getters = { |
|---|
| | | |
|---|
| | | getSystemInfo (state) { |
|---|
| | | if (state.systemInfo) { |
|---|
| | | return state.systemInfo |
|---|
| | | } else if (storage.get('SYSTEM_INFO')) { |
|---|
| | | return JSON.parse(storage.get('SYSTEM_INFO')) |
|---|
| | | } |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { ACCESS_TOKEN } from '@/store/mutation-types' |
|---|
| | | import storage from '@/utils/storage' |
|---|
| | | import * as LoginApi from '@/api/login' |
|---|
| | | import * as UserApi from '@/api/user' |
|---|
| | | |
|---|
| | | // ç»éæååæ§è¡ |
|---|
| | | const loginSuccess = (commit, { token }) => { |
|---|
| | | // è¿ææ¶é´30天 |
|---|
| | | const expiryTime = 30 * 86400 |
|---|
| | | // ä¿åtokneåuserIdå°ç¼å |
|---|
| | | storage.set(ACCESS_TOKEN, token, expiryTime) |
|---|
| | | // è®°å½å°storeå
¨å±åé |
|---|
| | | commit('SET_TOKEN', token) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export const state = { |
|---|
| | | // ç¨æ·è®¤è¯token |
|---|
| | | token: '', |
|---|
| | | // ç¨æ·ä¿¡æ¯ |
|---|
| | | userInfo: null |
|---|
| | | } |
|---|
| | | |
|---|
| | | export const mutations = { |
|---|
| | | SET_TOKEN: (state, value) => { |
|---|
| | | state.token = value |
|---|
| | | }, |
|---|
| | | SET_USER: (state, value) => { |
|---|
| | | state.userInfo = value |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | |
|---|
| | | export const actions = { |
|---|
| | | |
|---|
| | | // ç¨æ·ç»å½(æ®éç»å½: è¾å
¥è´¦å·ãå¯ç åéªè¯ç ) |
|---|
| | | Login({ commit }, data) { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | LoginApi.login(data, { custom: { catch: true } }).then(response => { |
|---|
| | | const result = response; |
|---|
| | | loginSuccess(commit, result) |
|---|
| | | resolve(response) |
|---|
| | | }).catch(reject) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // ç¨æ·ä¿¡æ¯ |
|---|
| | | Info({ commit, state }) { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | if (state.userInfo) { |
|---|
| | | return resolve(state.userInfo) |
|---|
| | | } |
|---|
| | | UserApi.getInfo().then(response => { |
|---|
| | | const result = response; |
|---|
| | | commit('SET_USER', result) |
|---|
| | | resolve(response) |
|---|
| | | }).catch(reject) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // éåºç»å½ |
|---|
| | | Logout({ commit }, data) { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | LoginApi.logout(data, { custom: { catch: true } }).then(response => { |
|---|
| | | storage.remove(ACCESS_TOKEN) |
|---|
| | | commit('SET_TOKEN', '') |
|---|
| | | resolve(response) |
|---|
| | | }).catch(reject) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export const ACCESS_TOKEN = 'AccessToken' |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="zh-CN"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|---|
| | | <title> |
|---|
| | | <%= htmlWebpackPlugin.options.title %> |
|---|
| | | </title> |
|---|
| | | <!-- Open Graph data --> |
|---|
| | | <!-- <meta property="og:title" content="Title Here" /> --> |
|---|
| | | <!-- <meta property="og:url" content="http://www.example.com/" /> --> |
|---|
| | | <!-- <meta property="og:image" content="http://example.com/image.jpg" /> --> |
|---|
| | | <!-- <meta property="og:description" content="Description Here" /> --> |
|---|
| | | <script> |
|---|
| | | var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) |
|---|
| | | document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />') |
|---|
| | | </script> |
|---|
| | | <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <noscript> |
|---|
| | | <strong>Please enable JavaScript to continue.</strong> |
|---|
| | | </noscript> |
|---|
| | | <div id="app"></div> |
|---|
| | | <!-- built files will be auto injected --> |
|---|
| | | <script> |
|---|
| | | var _hmt = _hmt || []; |
|---|
| | | (function() { |
|---|
| | | var hm = document.createElement("script"); |
|---|
| | | hm.src = "https://hm.baidu.com/hm.js?8ae2d12e41f0fe8b183e2e97b5c8e3df"; |
|---|
| | | var s = document.getElementsByTagName("script")[0]; |
|---|
| | | s.parentNode.insertBefore(hm, s); |
|---|
| | | })(); |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** |
|---|
| | | * è¿éæ¯uni-appå
ç½®ç常ç¨æ ·å¼åé |
|---|
| | | * |
|---|
| | | * uni-app å®æ¹æ©å±æ件åæ件å¸åºï¼https://ext.dcloud.net.cnï¼ä¸å¾å¤ä¸æ¹æ件å使ç¨äºè¿äºæ ·å¼åé |
|---|
| | | * å¦æä½ æ¯æ件å¼åè
ï¼å»ºè®®ä½ 使ç¨scssé¢å¤çï¼å¹¶å¨æ件代ç ä¸ç´æ¥ä½¿ç¨è¿äºåéï¼æ é import è¿ä¸ªæ件ï¼ï¼æ¹ä¾¿ç¨æ·éè¿æ积æ¨çæ¹å¼å¼åæ´ä½é£æ ¼ä¸è´çApp |
|---|
| | | * |
|---|
| | | */ |
|---|
| | | @import '@/uni_modules/uview-ui/theme.scss'; |
|---|
| | | /** |
|---|
| | | * å¦æä½ æ¯Appå¼åè
ï¼æ件使ç¨è
ï¼ï¼ä½ å¯ä»¥éè¿ä¿®æ¹è¿äºåéæ¥å®å¶èªå·±çæ件主é¢ï¼å®ç°èªå®ä¹ä¸»é¢åè½ |
|---|
| | | * |
|---|
| | | * å¦æä½ ç项ç®åæ ·ä½¿ç¨äºscssé¢å¤çï¼ä½ ä¹å¯ä»¥ç´æ¥å¨ä½ ç scss 代ç ä¸ä½¿ç¨å¦ä¸åéï¼åæ¶æ é import è¿ä¸ªæ件 |
|---|
| | | */ |
|---|
| | | |
|---|
| | | /* é¢è²åé */ |
|---|
| | | |
|---|
| | | /* è¡ä¸ºç¸å
³é¢è² */ |
|---|
| | | $uni-color-primary: #007aff; |
|---|
| | | $uni-color-success: #4cd964; |
|---|
| | | $uni-color-warning: #f0ad4e; |
|---|
| | | $uni-color-error: #dd524d; |
|---|
| | | |
|---|
| | | /* æååºæ¬é¢è² */ |
|---|
| | | $uni-text-color:#333;//åºæ¬è² |
|---|
| | | $uni-text-color-inverse:#fff;//åè² |
|---|
| | | $uni-text-color-grey:#999;//è¾
å©ç°è²ï¼å¦å è½½æ´å¤çæç¤ºä¿¡æ¯ |
|---|
| | | $uni-text-color-placeholder: #808080; |
|---|
| | | $uni-text-color-disable:#c0c0c0; |
|---|
| | | |
|---|
| | | /* èæ¯é¢è² */ |
|---|
| | | $uni-bg-color:#ffffff; |
|---|
| | | $uni-bg-color-grey:#f8f8f8; |
|---|
| | | $uni-bg-color-hover:#f1f1f1;//ç¹å»ç¶æé¢è² |
|---|
| | | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//é®ç½©é¢è² |
|---|
| | | |
|---|
| | | /* è¾¹æ¡é¢è² */ |
|---|
| | | $uni-border-color:#c8c7cc; |
|---|
| | | |
|---|
| | | /* 尺寸åé */ |
|---|
| | | |
|---|
| | | /* æå尺寸 */ |
|---|
| | | $uni-font-size-sm:12px; |
|---|
| | | $uni-font-size-base:14px; |
|---|
| | | $uni-font-size-lg:16; |
|---|
| | | |
|---|
| | | /* å¾ç尺寸 */ |
|---|
| | | $uni-img-size-sm:20px; |
|---|
| | | $uni-img-size-base:26px; |
|---|
| | | $uni-img-size-lg:40px; |
|---|
| | | |
|---|
| | | /* Border Radius */ |
|---|
| | | $uni-border-radius-sm: 2px; |
|---|
| | | $uni-border-radius-base: 3px; |
|---|
| | | $uni-border-radius-lg: 6px; |
|---|
| | | $uni-border-radius-circle: 50%; |
|---|
| | | |
|---|
| | | /* æ°´å¹³é´è· */ |
|---|
| | | $uni-spacing-row-sm: 5px; |
|---|
| | | $uni-spacing-row-base: 10px; |
|---|
| | | $uni-spacing-row-lg: 15px; |
|---|
| | | |
|---|
| | | /* åç´é´è· */ |
|---|
| | | $uni-spacing-col-sm: 4px; |
|---|
| | | $uni-spacing-col-base: 8px; |
|---|
| | | $uni-spacing-col-lg: 12px; |
|---|
| | | |
|---|
| | | /* éæ度 */ |
|---|
| | | $uni-opacity-disabled: 0.3; // ç»ä»¶ç¦ç¨æçéæ度 |
|---|
| | | |
|---|
| | | /* æç« åºæ¯ç¸å
³ */ |
|---|
| | | $uni-color-title: #2C405A; // æç« æ é¢é¢è² |
|---|
| | | $uni-font-size-title:20px; |
|---|
| | | $uni-color-subtitle: #555555; // äºçº§æ é¢é¢è² |
|---|
| | | $uni-font-size-subtitle:26px; |
|---|
| | | $uni-color-paragraph: #3F536E; // æç« æ®µè½é¢è² |
|---|
| | | $uni-font-size-paragraph:15px; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 2.4.3-20220505ï¼2022-05-05ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤å¼å¯canvas2dåå°seriesèµå¼ä¸ºç©ºæ°ç»æ¾ç¤ºå è½½å¾æ æ¶ï¼å次èµå¼åç»å¸éªå¨çbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤å级hbxææ°çåEChartsçhighlightæ¹æ³æ¥éçbug |
|---|
| | | - uCharts.js é·è¾¾å¾æ°å¢åæ°opts.extra.radar.gridEvalï¼æ°æ®ç¹ä½ç½æ ¼æ½å¸ï¼é»è®¤1 |
|---|
| | | - uCharts.js é·è¾¾å¾æ°å¢åæ°opts.extra.radar.axisLabelï¼ æ¯å¦æ¾ç¤ºå»åº¦ç¹å¼ï¼é»è®¤false |
|---|
| | | - uCharts.js é·è¾¾å¾æ°å¢åæ°opts.extra.radar.axisLabelTofixï¼å»åº¦ç¹å¼å°æ°ä½æ°ï¼é»è®¤0 |
|---|
| | | - uCharts.js é·è¾¾å¾æ°å¢åæ°opts.extra.radar.labelPointShowï¼æ¯å¦æ¾ç¤ºæ«ç«¯å»åº¦åç¹ï¼é»è®¤false |
|---|
| | | - uCharts.js é·è¾¾å¾æ°å¢åæ°opts.extra.radar.labelPointRadiusï¼å»åº¦åç¹çåå¾ï¼é»è®¤3 |
|---|
| | | - uCharts.js é·è¾¾å¾æ°å¢åæ°opts.extra.radar.labelPointColorï¼å»åº¦åç¹çé¢è²ï¼é»è®¤#cccccc |
|---|
| | | - uCharts.js é·è¾¾å¾æ°å¢åæ°opts.extra.radar.linearTypeï¼æ¸åè²ç±»åï¼å¯éå¼"none"å
³éæ¸å,"custom"å¼å¯æ¸å |
|---|
| | | - uCharts.js é·è¾¾å¾æ°å¢åæ°opts.extra.radar.customColorï¼èªå®ä¹æ¸åé¢è²ï¼æ°ç»ç±»å对åºseriesçæ°ç»é¿åº¦ä»¥å¹é
ä¸åseriesé¢è²çä¸åé
è²æ¹æ¡ï¼ä¾å¦["#FA7D8D", "#EB88E2"] |
|---|
| | | - uCharts.js é·è¾¾å¾ä¼åæ¯æseries.textColorãseries.textSizeå±æ§ |
|---|
| | | - uCharts.js æ±ç¶å¾ä¸æ¸©åº¦è®¡å¼å¾æ ï¼ä¼åæ¯æå
¨åè§ç±»åï¼ä¿®å¤è¾¹æ¡æç¼éçbugï¼è¯¦è§å®ç½ãæ¼ç¤ºãä¸ç温度计å¾è¡¨ |
|---|
| | | - uCharts.js æ±ç¶å¾æ°å¢åæ°opts.extra.column.activeWidthï¼å½åç¹å»æ±ç¶å¾çèæ¯å®½åº¦ï¼é»è®¤ä¸ä¸ªåå
æ ¼åä½ |
|---|
| | | - uCharts.js æ··åå¾å¢å opts.extra.mix.area.gradient åºåå¾æ¯å¦å¼å¯æ¸åè² |
|---|
| | | - uCharts.js æ··åå¾å¢å opts.extra.mix.area.opacity åºåå¾éæ度ï¼é»è®¤0.2 |
|---|
| | | - uCharts.js 饼å¾ãåç¯å¾ãç«ç°å¾ãæ¼æå¾ï¼å¢å opts.series[0].data[i].labelTextï¼èªå®ä¹æ ç¾æåï¼é¿å
formatteræ ¼å¼åçç¹çï¼è¯¦è§å®ç½ãæ¼ç¤ºãä¸çé¥¼å¾ |
|---|
| | | - uCharts.js 饼å¾ãåç¯å¾ãç«ç°å¾ãæ¼æå¾ï¼å¢å opts.series[0].data[i].labelShowï¼èªå®ä¹æ¯å¦æ¾ç¤ºæä¸ä¸ªæ示æ ç¾ï¼é¿å
å 饼å¾ç±»å«å¤ªå¤å¯¼è´æ ç¾éå¤æè
å±
å¤å¯¼è´å¾å½¢åå½¢çé®é¢ï¼è¯¦è§å®ç½ãæ¼ç¤ºãä¸çé¥¼å¾ |
|---|
| | | - uCharts.js å¢å opts.series[i].legendText/opts.series[0].data[i].legendTextï¼ä¸series.nameå级ï¼èªå®ä¹å¾ä¾æ¾ç¤ºæåçæ¹æ³ |
|---|
| | | - uCharts.js ä¼åXè½´ãYè½´formatteræ ¼å¼åæ¹æ³å¢å å½¢åï¼ç»ä¸ä¸ºfromatter:function(value,index,opts){} |
|---|
| | | - uCharts.js ä¿®å¤æ¨ªå±æ¨¡å¼ä¸æ æ³ä½¿ç¨åæ缩æ¾æ¹æ³çbug |
|---|
| | | - uCharts.js ä¿®å¤å½åªæä¸æ¡æ°æ®æè
å¤æ¡æ°æ®å¼ç¸ççæ¶åYè½´èªå¨è®¡ç®çæ大å¼é误çbug |
|---|
| | | - ãå®ç½æ¨¡æ¿ãå¢å å¤é¨èªå®ä¹å¾ä¾ä¸å¾è¡¨äº¤äºçä¾åï¼[ç¹å»è·³è½¬](https://www.ucharts.cn/v2/#/layout/info?id=2) |
|---|
| | | |
|---|
| | | ## 注æï¼éunimodules çæ¬å¦å æ´æ° hbx è³ 3.4.7 导è´æ¥éå¦ä¸ï¼è¯·å°ç äºæ´æ°é unimodules çæ¬ç»ä»¶ï¼[ç¹å»è·³è½¬](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6) |
|---|
| | | > Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0" |
|---|
| | | ## 2.4.2-20220421ï¼2022-04-21ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤HBXå级3.4.6.20220420çæ¬åechartsæ¥éçé®é¢ |
|---|
| | | ## 2.4.2-20220420ï¼2022-04-20ï¼ |
|---|
| | | ## éè¦ï¼æ¤çæ¬uChartsæ°å¢äºå¾å¤åè½ï¼ä¿®å¤äºè¯¸å¤å·²ç¥é®é¢ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ æ°å¢onzoomå¼å¯åæ缩æ¾åè½ï¼ä»
uChartsï¼ï¼åæéè¦ç´è§åæ 系类å¾è¡¨ç±»åï¼å¹¶ä¸ontouch为trueãopts.enableScroll为trueï¼è¯¦è§å®ä¾é¡¹ç®Kçº¿å¾ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ æ°å¢optsWatchæ¯å¦çå¬optsååï¼å
³éoptsWatchåï¼å¨æä¿®æ¹optsä¸ä¼è§¦åå¾è¡¨éç» |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤å¼å¯canvas2dåè½åï¼å¨ææ´æ°æ°æ®åç»å¸éªå¨çbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ å»é¤directoryå±æ§ï¼æ¹ä¸ºèªå¨è·åecharts.min.jsè·¯å¾ï¼å级ä¸åå½±åï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ å¢å getImage()æ¹æ³å@getImageäºä»¶ï¼éè¿refè°ç¨getImage()æ¹æ³è·ï¼è§¦å@getImageäºä»¶è·åå½åç»å¸çbase64å¾çæ件æµã |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ æ¯ä»å®ãåèè·³å¨ãé£ä¹¦ãå¿«æå°ç¨åºæ¯æå¼å¯canvas2dåå±æ¸²æ设置ã |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ æ°å¢å ãéuniCloudãçæ¬ç»ä»¶ï¼é¿å
æäºä¸éè¦uniCloudç使ç¨ç»ä»¶åå¸è³å°ç¨åºéè¦æ交éç§å£°æé®é¢ï¼è¯·å°ç äº[ãéuniCloudçæ¬ã](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)ï¼ænpm[ãéuniCloudçæ¬ã](https://www.npmjs.com/package/@qiun/uni-ucharts)ä¸è½½ä½¿ç¨ã |
|---|
| | | - uCharts.js æ°å¢dobuleZoomåæ缩æ¾åè½ |
|---|
| | | - uCharts.js æ°å¢å±±å³°å¾type="mount"ï¼æ°æ®æ ¼å¼ä¸ºé¥¼å¾ç±»æ ¼å¼ï¼ä¸éè¦ä¼ å
¥categoriesï¼å
·ä½è¯¦è§æ°çå®ç½å¨çº¿æ¼ç¤º |
|---|
| | | - uCharts.js ä¿®å¤æ线å¾å½æ°æ®ä¸åå¨nullæ¶tooltipæ¥éçbug |
|---|
| | | - uCharts.js ä¿®å¤é¥¼å¾ç±»å½ç»å¸æ¯è¾å°æ¶èªå¨è®¡ç®çåå¾æ¯è´æ°æ¥éçbug |
|---|
| | | - uCharts.js ç»ä¸åå¾è¡¨ç±»åçseries.formatteræ ¼å¼åæ¹æ³çå½¢å为(val, index, series, opts)ï¼æ¹ä¾¿æ ¼å¼åæ¶ææ´å¤åæ°å¯ç¨ |
|---|
| | | - uCharts.js æ 记线åè½å¢å labelTextèªå®ä¹æ¾ç¤ºæåï¼å¢å labelAlignæ ç¾æ¾ç¤ºä½ç½®ï¼å·¦ä¾§æå³ä¾§ï¼ï¼å¢å æ ç¾æ¾ç¤ºä½ç½®å¾®è°labelOffsetXãlabelOffsetY |
|---|
| | | - uCharts.js ä¿®å¤æ¡ç¶å¾å½æ°å¼å¾å°æ¶å¼å¯åè§åæ ·å¼é误çbug |
|---|
| | | - uCharts.js ä¿®å¤Xè½´å¼å¯disabledåï¼Xè½´ä»å ç¨ç©ºé´çbug |
|---|
| | | - uCharts.js ä¿®å¤Xè½´å¼å¯æ»å¨æ¡å¹¶ä¸å¼å¯rotateLabelåï¼Xè½´æåä¸æ»å¨æ¡éå çbug |
|---|
| | | - uCharts.js å¢å Xè½´rotateAngleæåæ转èªå®ä¹è§åº¦ï¼åå¼èå´(-90è³90) |
|---|
| | | - uCharts.js ä¿®å¤å°å¾æåæ ç¾å±çº§æ¾ç¤ºä¸æ£ç¡®çbug |
|---|
| | | - uCharts.js ä¿®å¤é¥¼å¾ãåç¯å¾ãç«ç°å¾å½æ°æ®å
¨é¨ä¸º0çæ¶åä¸æ¾ç¤ºæ°æ®æ ç¾çbug |
|---|
| | | - uCharts.js ä¿®å¤å½opts.paddingä¸è¾¹è·ä¸º0æ¶ï¼Y轴顶é¨å»åº¦æ ç¾ä½ç½®ä¸æ£ç¡®çbug |
|---|
| | | |
|---|
| | | ## å¦å¤æ们è¿å¼åäºå大åçå°ç¨åºç»ä»¶ï¼å·²åå¸è³ç äºånpm |
|---|
| | | [https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts) |
|---|
| | | [https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun) |
|---|
| | | |
|---|
| | | ## 对äºåçuChartsææ¡£æ们已ä¸çº¿æ°çå®æ¹ç½ç«ï¼è¯¦æ
ç¹å»ä¸é¢é¾æ¥è¿å
¥å®ç½ |
|---|
| | | [https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/) |
|---|
| | | ## 2.3.7-20220122ï¼2022-01-22ï¼ |
|---|
| | | ## éè¦ï¼ä½¿ç¨vue3ç¼è¯ï¼è¯·ä½¿ç¨cli模å¼å¹¶å级è³ææ°ä¾èµï¼HbuilderXç¼è¯éè¦ä½¿ç¨3.3.8以ä¸çæ¬ |
|---|
| | | - uCharts.js ä¿®å¤uni-appå¹³å°ç»ä»¶æ¨¡å¼ä½¿ç¨vue3ç¼è¯å°å°ç¨åºæ¥éçbugã |
|---|
| | | ## 2.3.7-20220118ï¼2022-01-18ï¼ |
|---|
| | | ## 注æï¼ä½¿ç¨vue3çåææ¯éè¦3.3.8.20220114-alphaçæ¬çHBuilderï¼ |
|---|
| | | ## 2.3.67-20220118ï¼2022-01-18ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ç»ä»¶åæ¥æ¯ævue3ï¼å
¨ç«¯ç¼è¯ä¼æäºé®é¢ï¼å
·ä½è¯¦è§ä¸é¢ä¿®æ¹ï¼ |
|---|
| | | 1. å°ç¨åºç«¯è¿è¡æ¶ï¼å¨uni_modulesæ件夹çqiun-data-charts.jsä¸æç´¢ new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uChartsï¼å°.uChartså»æã |
|---|
| | | 2. å°ç¨åºç«¯åè¡æ¶ï¼å¨uni_modulesæ件夹çqiun-data-charts.jsä¸æç´¢ new e.uChartsï¼å°.uChartså»æï¼å为 new eã |
|---|
| | | 3. å¦æè§å¾ä¸è¿°æ¥éª¤æ¯è¾éº»ç¦ï¼å¦ææ¨ç项ç®åªç¼è¯å°å°ç¨åºç«¯ï¼å¯ä»¥ä¿®æ¹u-charts.jsæåä¸è¡å¯¼åºæ¹å¼ï¼å° export default uCharts;åæ´ä¸º export default { uCharts: uCharts }; è¿æ ·åæ´åï¼H5åApp端çrenderjsä¼æé®é¢ï¼è¯·å¼åè
èªè¡éæ©ãï¼æ¤é®é¢éç»ä»¶é®é¢ï¼è¯·çå¾
DCå®æ¹ä¿®å¤Vue3çå°ç¨åºç«¯ï¼ |
|---|
| | | ## 2.3.6-20220111ï¼2022-01-11ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®æ¹ç»ä»¶ props å±æ§ä¸ç background é»è®¤å¼ä¸º rgba(0,0,0,0) |
|---|
| | | ## 2.3.6-20211201ï¼2021-12-01ï¼ |
|---|
| | | - uCharts.js ä¿®å¤baræ¡ç¶å¾å¼å¯åè§æ¨¡å¼æ¶ï¼å¼å¾å°æ¶åè§æ¸²æé误çbug |
|---|
| | | ## 2.3.5-20211014ï¼2021-10-15ï¼ |
|---|
| | | - uCharts.js å¢å vue3çç¼è¯æ¯æï¼ä»
åçuChartsï¼qiun-data-chartsç»ä»¶åç»ä¼æ¯æï¼è¯·å
³æ³¨æ´æ°ï¼ |
|---|
| | | ## 2.3.4-20211012ï¼2021-10-12ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤ mac os x ç³»ç» mouseover äºä»¶ä¸¢å¤±ç bug |
|---|
| | | ## 2.3.3-20210706ï¼2021-07-06ï¼ |
|---|
| | | - uCharts.js å¢å é·è¾¾å¾å¼å¯æ°æ®ç¹å¼ï¼opts.dataLabelï¼çæ¾ç¤º |
|---|
| | | ## 2.3.2-20210627ï¼2021-06-27ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤tooltipCustom个å«æ
åµä¸ä¼ å¼ä¸æ£ç¡®æ¥éTypeError: Cannot read property 'name' of undefinedçbug |
|---|
| | | ## 2.3.1-20210616ï¼2021-06-16ï¼ |
|---|
| | | - uCharts.js ä¿®å¤åè§æ±ç¶å¾ä½¿ç¨4è§åè§æ¶ï¼å½æ°å¼è¿å¤§æ¶ä¸æ£ç¡®çbug |
|---|
| | | ## 2.3.0-20210612ï¼2021-06-12ï¼ |
|---|
| | | - uCharts.js ãéè¦ãuChartså¢å nvueå
¼å®¹ï¼å¯å¨nvue项ç®ä¸ä½¿ç¨gcanvasç»ä»¶æ¸²æuChartsï¼[详è§ç äºuCharts-demo-nvue](https://gitee.com/uCharts/uCharts) |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ å¢å tapLegendå±æ§ï¼æ¯å¦å¼å¯å¾ä¾ç¹å»äº¤äºäºä»¶ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ getIndexäºä»¶ä¸å¢å è¿åuChartså®ä¾ä¸çoptsåæ°ï¼ä»¥ä¾¿å¨é¡µé¢ä¸è°ç¨åæ° |
|---|
| | | - 示ä¾é¡¹ç® pages/other/other.vueå¢å app端èªå®ä¹tooltipçæ¹æ³ï¼è¯¦è§showOptsTooltipæ¹æ³ |
|---|
| | | ## 2.2.1-20210603ï¼2021-06-03ï¼ |
|---|
| | | - uCharts.js ä¿®å¤é¥¼å¾ãåç¯å¾ãç«ç°å¾ï¼å½èµ·å§è§åº¦ä¸ä¸º0æ¶ï¼tooltipä½ç½®ä¸åç¡®çbug |
|---|
| | | - uCharts.js å¢å 温度计å¼æ±ç¶å¾å¼å¯é¡¶é¨ååå½¢çé
ç½® |
|---|
| | | ## 2.2.0-20210529ï¼2021-05-29ï¼ |
|---|
| | | - uCharts.js å¢å æ¡ç¶å¾type="bar" |
|---|
| | | - 示ä¾é¡¹ç® pages/ucharts/ucharts.vueå¢å æ¡ç¶å¾çdemo |
|---|
| | | ## 2.1.7-20210524ï¼2021-05-24ï¼ |
|---|
| | | - uCharts.js ä¿®å¤å¤§æ°æ®é模å¼ä¸æ²çº¿å¾ä¸å¹³æ»çbug |
|---|
| | | ## 2.1.6-20210523ï¼2021-05-23ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤å°ç¨åºç«¯å¼å¯æ»å¨æ¡æ´æ°æ°æ®åæ»å¨æ¡ä½ç½®ä¸ç¬¦åé¢æçbug |
|---|
| | | ## 2.1.5-2021051702ï¼2021-05-17ï¼ |
|---|
| | | - uCharts.js ä¿®å¤èªå®ä¹Yè½´minåmaxå¼ä¸º0æ¶ä¸è½æ£ç¡®æ¾ç¤ºçbug |
|---|
| | | ## 2.1.5-20210517ï¼2021-05-17ï¼ |
|---|
| | | - uCharts.js ä¿®å¤Yè½´èªå®ä¹minåmaxæ¶ï¼æªææå®çæ大å¼æå°å¼æ¾ç¤ºåæ è½´å»åº¦çbug |
|---|
| | | ## 2.1.4-20210516ï¼2021-05-16ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¼åonWindowResizeé²ææ¹æ³ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤APP端uChartsæ´æ°æ°æ®æ¶ï¼æ¸
空seriesæ¾ç¤ºloadingå¾æ ååæ¾ç¤ºå¾è¡¨ï¼å¾è¡¨æå¨çbug |
|---|
| | | - uCharts.js ä¿®å¤å¼å¯canvas2dåï¼xè½´ãyè½´ãseriesèªå®ä¹åä½å¤§å°æªææ¯ä¾ç¼©æ¾çbug |
|---|
| | | - 示ä¾é¡¹ç® ä¿®å¤format-e.vueæ¼åé误导è´app端使ç¨uCharts渲æå¾è¡¨ |
|---|
| | | ## 2.1.3-20210513ï¼2021-05-13ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®æ¹uChartsåæ´chartDataæ°æ®ä¸ºupdateDataæ¹æ³ï¼æ¯æ带æ»å¨æ¡çæ°æ®å¨ææç¹ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ å¢å onWindowResizeé²ææ¹æ³ fix by ã©èªè¨ï¼å¦å°è¬æææµå¹´ã¥ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ H5æè
APPåæ´chartDataæ°æ®æ¾ç¤ºloadingå¾è¡¨æ¶ï¼åæ°æ®éªç°çbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ propså¢å errorReloadç¦ç¨é误ç¹å»éæ°å è½½çæ¹æ³ |
|---|
| | | - uCharts.js å¢å tooltipæ¾ç¤ºcategoryï¼x轴对åºç¹ä½ï¼æ é¢çåè½ï¼opts.extra.tooltip.showCategoryï¼é»è®¤ä¸ºfalse |
|---|
| | | - uCharts.js ä¿®å¤mixæ··åå¾åªææ±ç¶å¾æ¶ï¼tooltipçåå²çº¿æ¾ç¤ºä½ç½®ä¸æ£ç¡®çbug |
|---|
| | | - uCharts.js ä¿®å¤å¼å¯æ»å¨æ¡ï¼å¾è¡¨å¨æå¨ä¸å¨ææç¹ï¼æ»å¨æ¡ä½ç½®ä¸æ£ç¡®çbug |
|---|
| | | - uCharts.js ä¿®å¤é¥¼å¾ç±»æ°æ®æ ¼å¼ä¸ºechartsæ°æ®æ ¼å¼ï¼series为空æ°ç»æ¥éçbug |
|---|
| | | - 示ä¾é¡¹ç® ä¿®æ¹uCharts.jsæ´æ°å°v2.1.2çæ¬åï¼@getIndexæ¹æ³è·åç´¢å¼å¼åæ´ä¸ºe.currentIndex.index |
|---|
| | | - 示ä¾é¡¹ç® pages/updata/updata.vueå¢å æ»å¨æ¡æå¨æ´æ°ï¼æ°æ®å¨ææç¹ï¼çdemo |
|---|
| | | - 示ä¾é¡¹ç® pages/other/other.vueå¢å errorReloadç¦ç¨é误ç¹å»éæ°å è½½çdemo |
|---|
| | | ## 2.1.2-20210509ï¼2021-05-09ï¼ |
|---|
| | | ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤APP端åå§åæ¶å°±ä¼ å
¥chartDataælacaldataä¸æ¾ç¤ºå¾è¡¨çbug |
|---|
| | | ## 2.1.1-20210509ï¼2021-05-09ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ åæ´EChartsçeoptsé
ç½®å¨renderjså
æ§è¡ï¼æ¯æå¨config-echarts.jsé
ç½®æ件å
åfunctioné
ç½®ã |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤APP端æ¥éProp being mutated: "onmouse"é误çbugã |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤APP端æ¥éError: Not Foundï¼Page[6][-1,27] at view.umd.min.js:1çbugã |
|---|
| | | ## 2.1.0-20210507ï¼2021-05-07ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤åå§åæ¶å°±ææ°æ®æè
æ°æ®æ´æ°çæ¶åloadingå è½½å¨ç»éªå¨çbug |
|---|
| | | - uCharts.js ä¿®å¤xè½´formatæ¹æ³categories为å符串类åæ¶è¿åNaNçbug |
|---|
| | | - uCharts.js ä¿®å¤series.textColorãlegend.fontColoræªæ§è¡å
¨å±é»è®¤é¢è²çbug |
|---|
| | | ## 2.1.0-20210506ï¼2021-05-06ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤æ个å«æ
åµä¸æ¥éitem.properties undefinedçbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤æ个å«æ
åµä¸å
³éå è½½å¨ç»reshowä¸èµ·ä½ç¨ï¼æ æ³æ¾ç¤ºå¾è¡¨çbug |
|---|
| | | - 示ä¾é¡¹ç® pages/ucharts/ucharts.vue å¢å æ¶é´è½´æ线å¾ï¼type="tline"ï¼ãæ¶é´è½´åºåå¾ï¼type="tarea"ï¼ãæ£ç¹å¾ï¼type="scatter"ï¼ãæ°æ³¡å¾demoï¼type="bubble"ï¼ãåä¸è§å½¢æ¼æå¾ï¼opts.extra.funnel.type="triangle"ï¼ãéåå¡å½¢æ¼æå¾ï¼opts.extra.funnel.type="pyramid"ï¼ |
|---|
| | | - 示ä¾é¡¹ç® pages/format-u/format-u.vue å¢å Xè½´formatæ ¼å¼åç¤ºä¾ |
|---|
| | | - uCharts.js å级è³v2.1.0çæ¬ |
|---|
| | | - uCharts.js ä¿®å¤ ç«ç°å¾é¢ç§¯æ¨¡å¼ç¹å»tooltipä½ç½®ä¸æ£ç¡®çbug |
|---|
| | | - uCharts.js ä¿®å¤ ç«ç°å¾ç¹å»å¾ä¾ï¼åªå©ä¸ä¸ªç±»å«æ¾ç¤ºç©ºç½çbug |
|---|
| | | - uCharts.js ä¿®å¤ é¥¼å¾ç±»å¾ç¹å»å¾ä¾ï¼å
¶ä»å¾è¡¨tooltipä½ç½®æäºæ
åµä¸ä¸åçbug |
|---|
| | | - uCharts.js ä¿®å¤ x轴为ç¢éè½´ï¼æ¶é´è½´ï¼æ
åµä¸ï¼ç¹å»tooltipä½ç½®ä¸æ£ç¡®çbug |
|---|
| | | - uCharts.js ä¿®å¤ è¯äºå¾è·åç¹å»ç´¢å¼å¶å°ä¸åçbug |
|---|
| | | - uCharts.js å¢å ç´è§åæ ç³»å¾è¡¨Xè½´formatæ ¼å¼åæ¹æ³ï¼åçuCharts.jsç¨æ³è¯·ä½¿ç¨formatterï¼ |
|---|
| | | - uCharts.js å¢å æ¼æå¾æ©å±é
ç½®ï¼åä¸è§å½¢ï¼opts.extra.funnel.type="triangle"ï¼ï¼éåå¡å½¢ï¼opts.extra.funnel.type="pyramid"ï¼ |
|---|
| | | - uCharts.js å¢å æ£ç¹å¾ï¼opts.type="scatter"ï¼ãæ°æ³¡å¾ï¼opts.type="bubble"ï¼ |
|---|
| | | - åæ计å å®åæ£ç¹å¾ãæ°æ³¡å¾ï¼å¢å markPointsæ è®°ç¹ï¼å¢å 横åæ¡ç¶å¾ã |
|---|
| | | ## 2.0.0-20210502ï¼2021-05-02ï¼ |
|---|
| | | - uCharts.js ä¿®å¤è¯äºå¾è·åç¹å»ç´¢å¼ä¸æ£ç¡®çbug |
|---|
| | | ## 2.0.0-20210501ï¼2021-05-01ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤QQå°ç¨åºãç¾åº¦å°ç¨åºå¨å
³éå¨ç»æææ
åµä¸ï¼v-for循ç¯ä½¿ç¨å¾è¡¨ï¼æ¾ç¤ºä¸æ£ç¡®çbug |
|---|
| | | ## 2.0.0-20210426ï¼2021-04-26ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤QQå°ç¨åºä¸æ¯æcanvas2dçbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤ééå°ç¨åºæäºæ
åµç¹å»åæ 计ç®é误çbug |
|---|
| | | - uCharts.js å¢å extra.column.categoryGap åæ°ï¼æ±ç¶å¾ç±»æ¯ä¸ªcategoryç¹ä½ï¼Xè½´ç¹ï¼æ±åç»ä¹é´çé´è· |
|---|
| | | - uCharts.js å¢å yAxis.data[i].titleOffsetY åæ°ï¼æ é¢çºµåå移è·ç¦»ï¼è´æ°ä¸ºåä¸å移ï¼æ£æ°åä¸å移 |
|---|
| | | - uCharts.js å¢å yAxis.data[i].titleOffsetX åæ°ï¼æ é¢æ¨ªåå移è·ç¦»ï¼è´æ°ä¸ºåå·¦å移ï¼æ£æ°åå³å移 |
|---|
| | | - uCharts.js å¢å extra.gauge.labelOffset åæ°ï¼ä»ªè¡¨çæ ç¾æåå¾å便å®è·ç¦»ï¼é»è®¤13px |
|---|
| | | ## 2.0.0-20210422-2ï¼2021-04-22ï¼ |
|---|
| | | ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤ formatterAssign æªå¤æ args[key] == null çæ
åµå¯¼è´æ 溢åºç bug |
|---|
| | | ## 2.0.0-20210422ï¼2021-04-22ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤H5ãAPPãæ¯ä»å®å°ç¨åºã微信å°ç¨åºcanvas2d模å¼ä¸æ¨ªå±æ¨¡å¼çbug |
|---|
| | | ## 2.0.0-20210421ï¼2021-04-21ï¼ |
|---|
| | | - uCharts.js ä¿®å¤å¤è¡å¾ä¾çæ
åµä¸ï¼å¾ä¾å¨ä¸æ¹æè
ä¸æ¹æ¶ï¼å¾ä¾float为左侧æè
å³ä¾§æ¶ï¼ç¬¬äºè¡å以åçå¾ä¾å¯¹é½æ¹å¼ä¸æ£ç¡®çbug |
|---|
| | | ## 2.0.0-20210420ï¼2021-04-20ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤å¾®ä¿¡å°ç¨åºå¼å¯canvas2d模å¼åï¼windowsç微信å°ç¨åºä¸æ¯æcanvas2d模å¼çbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®æ¹éuni_modulesçæ¬ä¸ºv2.0çæ¬qiun-data-chartsç»ä»¶ |
|---|
| | | ## 2.0.0-20210419ï¼2021-04-19ï¼ |
|---|
| | | ## v1.0çæ¬å·²åæ´ï¼å»ºè®®è½¬uni_modulesçæ¬ç»ä»¶æ¹å¼è°ç¨ï¼ç¹å»å³ä¾§ç»¿è²ã使ç¨HBuilderX导å
¥æ件ãå³å¯ä½¿ç¨ï¼ç¤ºä¾é¡¹ç®è¯·ç¹å»å³ä¾§èè²æé®ã使ç¨HBuilderX导å
¥ç¤ºä¾é¡¹ç®ãã |
|---|
| | | ## å次使ç¨å¦ææ示æªæ³¨å<qiun-data-charts>ç»ä»¶ï¼è¯·éå¯HBuilderXï¼å¦ä»ä¸å¥½ç¨ï¼è¯·éå¯çµèï¼ |
|---|
| | | ## å¦ææ¯cli项ç®ï¼è¯·å°è¯æ¸
çnode_modulesï¼éæ°installï¼è¿ä¸è¡å°±å é¤é¡¹ç®ï¼åéæ°installã |
|---|
| | | ## æ¤é®é¢å·²äºDCloudå®æ¹ç¡®è®¤ï¼HBuilderXä¸ä¸ªçæ¬ä¼ä¿®å¤ã |
|---|
| | | ## å
¶ä»å¾è¡¨ä¸æ¾ç¤ºé®é¢è¯¦è§[常è§é®é¢é项å¡](https://demo.ucharts.cn) |
|---|
| | | ## <font color=#FF0000> æ°æ请å
å®æ´é
读帮å©ææ¡£å常è§é®é¢3éï¼å³ä¾§èè²æé®ç¤ºä¾é¡¹ç®è¯·ç2éï¼ </font> |
|---|
| | | ## [DEMOæ¼ç¤ºåå¨çº¿çæå·¥å
·ï¼v2.0ææ¡£ï¼https://demo.ucharts.cn](https://demo.ucharts.cn) |
|---|
| | | ## [å¾è¡¨ç»ä»¶å¨é¡¹ç®ä¸çåºç¨åè§ UReportæ°æ®æ¥è¡¨](https://ext.dcloud.net.cn/plugin?id=4651) |
|---|
| | | - uCharts.js ä¿®å¤æ··åå¾ä¸æ±ç¶å¾åç¬è®¾ç½®é¢è²ä¸çæçbug |
|---|
| | | - uCharts.js ä¿®å¤å¤Yè½´åç¬è®¾ç½®fontSizeæ¶ï¼å¼å¯canvas2dåï¼æªå¯¹åºæ¾å¤§åä½çbug |
|---|
| | | ## 2.0.0-20210418ï¼2021-04-18ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ å¢å directoryé
ç½®ï¼ä¿®å¤H5端history模å¼ä¸å¦æåå¸å°äºçº§ç®å½æ æ³æ£ç¡®å è½½echarts.min.jsçbug |
|---|
| | | ## 2.0.0-20210416ï¼2021-04-16ï¼ |
|---|
| | | ## v1.0çæ¬å·²åæ´ï¼å»ºè®®è½¬uni_modulesçæ¬ç»ä»¶æ¹å¼è°ç¨ï¼ç¹å»å³ä¾§ç»¿è²ã使ç¨HBuilderX导å
¥æ件ãå³å¯ä½¿ç¨ï¼ç¤ºä¾é¡¹ç®è¯·ç¹å»å³ä¾§èè²æé®ã使ç¨HBuilderX导å
¥ç¤ºä¾é¡¹ç®ãã |
|---|
| | | ## å次使ç¨å¦ææ示æªæ³¨å<qiun-data-charts>ç»ä»¶ï¼è¯·éå¯HBuilderXï¼å¦ä»ä¸å¥½ç¨ï¼è¯·éå¯çµèï¼ |
|---|
| | | ## å¦ææ¯cli项ç®ï¼è¯·å°è¯æ¸
çnode_modulesï¼éæ°installï¼è¿ä¸è¡å°±å é¤é¡¹ç®ï¼åéæ°installã |
|---|
| | | ## æ¤é®é¢å·²äºDCloudå®æ¹ç¡®è®¤ï¼HBuilderXä¸ä¸ªçæ¬ä¼ä¿®å¤ã |
|---|
| | | ## å
¶ä»å¾è¡¨ä¸æ¾ç¤ºé®é¢è¯¦è§[常è§é®é¢é项å¡](https://demo.ucharts.cn) |
|---|
| | | ## <font color=#FF0000> æ°æ请å
å®æ´é
读帮å©ææ¡£å常è§é®é¢3éï¼å³ä¾§èè²æé®ç¤ºä¾é¡¹ç®è¯·ç2éï¼ </font> |
|---|
| | | ## [DEMOæ¼ç¤ºåå¨çº¿çæå·¥å
·ï¼v2.0ææ¡£ï¼https://demo.ucharts.cn](https://demo.ucharts.cn) |
|---|
| | | ## [å¾è¡¨ç»ä»¶å¨é¡¹ç®ä¸çåºç¨åè§ UReportæ°æ®æ¥è¡¨](https://ext.dcloud.net.cn/plugin?id=4651) |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤APP端æäºæ
åµä¸æ¥é`Not Found Page`çbugï¼fix by é«çº§bugå¼åææ¯å |
|---|
| | | - 示ä¾é¡¹ç® ä¿®å¤APP端v-for循ç¯æäºæ
åµä¸æ¥é`Not Found Page`çbugï¼fix by é«çº§bugå¼åææ¯å |
|---|
| | | - uCharts.js ä¿®å¤éç´è§åæ ç³»tooltipæ示çªå³ä¾§è¶
åºæªåæ¢æ¹åæ¾ç¤ºçbug |
|---|
| | | ## 2.0.0-20210415ï¼2021-04-15ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤H5端åå¸å°äºçº§ç®å½ä¸echartsæ æ³å è½½çbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤æäºæ
åµä¸echarts.off('finished')移é¤çå¬äºä»¶æ¥éçbug |
|---|
| | | ## 2.0.0-20210414ï¼2021-04-14ï¼ |
|---|
| | | ## v1.0çæ¬å·²åæ´ï¼å»ºè®®è½¬uni_modulesçæ¬ç»ä»¶æ¹å¼è°ç¨ï¼ç¹å»å³ä¾§ç»¿è²ã使ç¨HBuilderX导å
¥æ件ãå³å¯ä½¿ç¨ï¼ç¤ºä¾é¡¹ç®è¯·ç¹å»å³ä¾§èè²æé®ã使ç¨HBuilderX导å
¥ç¤ºä¾é¡¹ç®ãã |
|---|
| | | ## å次使ç¨å¦ææ示æªæ³¨å<qiun-data-charts>ç»ä»¶ï¼è¯·éå¯HBuilderXï¼å¦ä»ä¸å¥½ç¨ï¼è¯·éå¯çµèï¼ |
|---|
| | | ## å¦ææ¯cli项ç®ï¼è¯·å°è¯æ¸
çnode_modulesï¼éæ°installï¼è¿ä¸è¡å°±å é¤é¡¹ç®ï¼åéæ°installã |
|---|
| | | ## æ¤é®é¢å·²äºDCloudå®æ¹ç¡®è®¤ï¼HBuilderXä¸ä¸ªçæ¬ä¼ä¿®å¤ã |
|---|
| | | ## å
¶ä»å¾è¡¨ä¸æ¾ç¤ºé®é¢è¯¦è§[常è§é®é¢é项å¡](https://demo.ucharts.cn) |
|---|
| | | ## <font color=#FF0000> æ°æ请å
å®æ´é
读帮å©ææ¡£å常è§é®é¢3éï¼å³ä¾§èè²æé®ç¤ºä¾é¡¹ç®è¯·ç2éï¼ </font> |
|---|
| | | ## [DEMOæ¼ç¤ºåå¨çº¿çæå·¥å
·ï¼v2.0ææ¡£ï¼https://demo.ucharts.cn](https://demo.ucharts.cn) |
|---|
| | | ## [å¾è¡¨ç»ä»¶å¨é¡¹ç®ä¸çåºç¨åè§ UReportæ°æ®æ¥è¡¨](https://ext.dcloud.net.cn/plugin?id=4651) |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤H5端å¨cli项ç®ä¸EChartså¼ç¨å°åé误çbug |
|---|
| | | - 示ä¾é¡¹ç® å¢å EChartsçformatterç¨æ³ç示ä¾(详è§ç¤ºä¾é¡¹ç®format-e.vue) |
|---|
| | | - uCharts.js å¢å åç¯å¾ä¸å¿èæ¯è²çé
ç½®extra.ring.centerColor |
|---|
| | | - uCharts.js ä¿®å¤å¾®ä¿¡å°ç¨åºå®å端æ±ç¶å¾å¼å¯éæè²åæ¾ç¤ºä¸æ£ç¡®çbug |
|---|
| | | ## 2.0.0-20210413ï¼2021-04-13ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤ç¾åº¦å°ç¨åºå¤ä¸ªå¾è¡¨çæºæªè½æ£ç¡®è·åæ ¹å
ç´ dom尺寸çbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤ç¾åº¦å°ç¨åºæ¨ªå±æ¨¡å¼æ¹åä¸æ£ç¡®çbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®æ¹ontouchæ¶ï¼@getTouchStart@getTouchMove@getTouchEndç触åæ¡ä»¶ |
|---|
| | | - uCharts.js ä¿®å¤é¥¼å¾ç±»æ°æ®æ ¼å¼serieså±æ§ä¸çæçbug |
|---|
| | | - uCharts.js å¢å æ¶åºåºåå¾ è¯¦è§ç¤ºä¾é¡¹ç®ä¸ucharts.vue |
|---|
| | | ## 2.0.0-20210412-2ï¼2021-04-12ï¼ |
|---|
| | | ## v1.0çæ¬å·²åæ´ï¼å»ºè®®è½¬uni_modulesçæ¬ç»ä»¶æ¹å¼è°ç¨ï¼ç¹å»å³ä¾§ç»¿è²ã使ç¨HBuilderX导å
¥æ件ãå³å¯ä½¿ç¨ï¼ç¤ºä¾é¡¹ç®è¯·ç¹å»å³ä¾§èè²æé®ã使ç¨HBuilderX导å
¥ç¤ºä¾é¡¹ç®ãã |
|---|
| | | ## å次使ç¨å¦ææ示æªæ³¨å<qiun-data-charts>ç»ä»¶ï¼è¯·éå¯HBuilderXãå¦ä»ä¸å¥½ç¨ï¼è¯·éå¯çµèï¼æ¤é®é¢å·²äºDCloudå®æ¹ç¡®è®¤ï¼HBuilderXä¸ä¸ªçæ¬ä¼ä¿®å¤ã |
|---|
| | | ## [DEMOæ¼ç¤ºåå¨çº¿çæå·¥å
·ï¼v2.0ææ¡£ï¼https://demo.ucharts.cn](https://demo.ucharts.cn) |
|---|
| | | ## [å¾è¡¨ç»ä»¶å¨uniCloudAdminä¸çåºç¨ UReportæ°æ®æ¥è¡¨](https://ext.dcloud.net.cn/plugin?id=4651) |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤uChartså¨APP端横å±æ¨¡å¼ä¸ä¸è½æ£ç¡®æ¸²æçbug |
|---|
| | | - 示ä¾é¡¹ç® å¢å EChartsæ±ç¶å¾æ¸åè²ãåè§æ±ç¶å¾ã横åæ±ç¶å¾ï¼æ¡ç¶å¾ï¼çç¤ºä¾ |
|---|
| | | ## 2.0.0-20210412ï¼2021-04-12ï¼ |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤createdä¸å¤æecharts导è´APP端æ æ³è¯å«ï¼æ¹åmountedä¸å¤æechartsåå§å |
|---|
| | | - uCharts.js ä¿®å¤2d模å¼ä¸series.textOffsetæªä¹åç´ æ¯çbug |
|---|
| | | ## 2.0.0-20210411ï¼2021-04-11ï¼ |
|---|
| | | ## v1.0çæ¬å·²åæ´ï¼å»ºè®®è½¬uni_modulesçæ¬ç»ä»¶æ¹å¼è°ç¨ï¼ç¹å»å³ä¾§ç»¿è²ã使ç¨HBuilderX导å
¥æ件ãå³å¯ä½¿ç¨ï¼ç¤ºä¾é¡¹ç®è¯·ç¹å»å³ä¾§èè²æé®ã使ç¨HBuilderX导å
¥ç¤ºä¾é¡¹ç®ãã |
|---|
| | | ## å次使ç¨å¦ææ示æªæ³¨å<qiun-data-charts>ç»ä»¶ï¼è¯·éå¯HBuilderXï¼å¹¶æ¸
空å°ç¨åºå¼åè
å·¥å
·ç¼åã |
|---|
| | | ## [DEMOæ¼ç¤ºåå¨çº¿çæå·¥å
·ï¼v2.0ææ¡£ï¼https://demo.ucharts.cn](https://demo.ucharts.cn) |
|---|
| | | ## [å¾è¡¨ç»ä»¶å¨uniCloudAdminä¸çåºç¨ UReportæ°æ®æ¥è¡¨](https://ext.dcloud.net.cn/plugin?id=4651) |
|---|
| | | - uCharts.js æ线å¾åºåå¾å¢å connectNullsæç¹ç»è¿çåè½ï¼è¯¦è§ç¤ºä¾é¡¹ç®ä¸ucharts.vue |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ åæ´åå§åæ¹æ³ä¸ºcreatedï¼åæ´type2dé»è®¤å¼ä¸ºtrueï¼ä¼å2d模å¼ä¸ç»ä»¶åå§åådomè·åä¸å°çbug |
|---|
| | | - ç§äºå¾è¡¨ç»ä»¶ ä¿®å¤å·¦å³å¸å±æ¶ï¼å³ä¾§å¾è¡¨ç¹å»åæ é误çbugï¼ä¿®å¤tooltipæ±ç¶å¾èªå®ä¹é¢è²æ¾ç¤ºobjectçbug |
|---|
| | | ## 2.0.0-20210410ï¼2021-04-10ï¼ |
|---|
| | | - ä¿®å¤å·¦å³å¸å±æ¶ï¼å³ä¾§å¾è¡¨ç¹å»åæ é误çbugï¼ä¿®å¤æ±ç¶å¾èªå®ä¹é¢è²tooltipæ¾ç¤ºobjectçbug |
|---|
| | | - å¢å æ 记线åæ±ç¶å¾èªå®ä¹é¢è²çdemo |
|---|
| | | ## 2.0.0-20210409ï¼2021-04-08ï¼ |
|---|
| | | ## v1.0çæ¬å·²åæ´ï¼å»ºè®®è½¬uni_modulesçæ¬ç»ä»¶æ¹å¼è°ç¨ï¼ç¹å»å³ä¾§ã使ç¨HBuilderX导å
¥æ件ãå³å¯ä½éªï¼DEMOæ¼ç¤ºåå¨çº¿çæå·¥å
·ï¼v2.0ææ¡£ï¼[https://demo.ucharts.cn](https://demo.ucharts.cn) |
|---|
| | | ## å¾è¡¨ç»ä»¶å¨uniCloudAdminä¸çåºç¨ [UReportæ°æ®æ¥è¡¨](https://ext.dcloud.net.cn/plugin?id=4651) |
|---|
| | | - uCharts.js ä¿®å¤ééå°ç¨åºç¾åº¦å°ç¨åºmeasureTextä¸åç¡®çbugï¼ä¿®å¤2d模å¼ä¸é¥¼å¾ç±»activeRadius为ææ¯ä¾æ¾å¤§çbug |
|---|
| | | - ä¿®å¤ç»ä»¶å¨æ¯ä»å®å°ç¨åºç«¯ç¹å»ä½ç½®ä¸åç¡®çbug |
|---|
| | | ## 2.0.0-20210408ï¼2021-04-07ï¼ |
|---|
| | | - ä¿®å¤ç»ä»¶å¨æ¯ä»å®å°ç¨åºç«¯ä¸è½æ¾ç¤ºçbugï¼ç®åæ¯ä»å®å°ç¨ä¸è½ç¹å»äº¤äºï¼åç»ä¿®å¤ï¼ |
|---|
| | | - uCharts.js ä¿®å¤é«åå±ä¸æ±ç¶å¾ç±»ï¼å弧è¿åº¦æ¡ èªå®ä¹å®½åº¦ä¸è½ææ¯ä¾æ¾å¤§çbug |
|---|
| | | ## 2.0.0-20210407ï¼2021-04-06ï¼ |
|---|
| | | ## v1.0çæ¬å·²åæ´ï¼å»ºè®®è½¬uni_modulesçæ¬ç»ä»¶æ¹å¼è°ç¨ï¼ç¹å»å³ä¾§ã使ç¨HBuilderX导å
¥æ件ãå³å¯ä½éªï¼DEMOæ¼ç¤ºåå¨çº¿çæå·¥å
·ï¼v2.0ææ¡£ï¼[https://demo.ucharts.cn](https://demo.ucharts.cn) |
|---|
| | | ## å¢å éè¿tofixåunitå¿«éæ ¼å¼åyè½´çdemo add by `howcode` |
|---|
| | | ## å¢å å¾è¡¨ç»ä»¶å¨uniCloudAdminä¸çåºç¨ [UReportæ°æ®æ¥è¡¨](https://ext.dcloud.net.cn/plugin?id=4651) |
|---|
| | | ## 2.0.0-20210406ï¼2021-04-05ï¼ |
|---|
| | | # ç§äºå¾è¡¨ç»ä»¶+uCharts v2.0çæ¬åæ¥ä¸çº¿ï¼ä½¿ç¨æ¹æ³è¯¦è§https://demo.ucharts.cn帮å©é¡µ |
|---|
| | | ## 2.0.0ï¼2021-04-05ï¼ |
|---|
| | | # ç§äºå¾è¡¨ç»ä»¶+uCharts v2.0çæ¬åæ¥ä¸çº¿ï¼ä½¿ç¨æ¹æ³è¯¦è§https://demo.ucharts.cn帮å©é¡µ |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!-- |
|---|
| | | * qiun-data-charts ç§äºé«æ§è½è·¨å
¨ç«¯å¾è¡¨ç»ä»¶ |
|---|
| | | * Copyright (c) 2021 QIUN® ç§äº https://www.ucharts.cn All rights reserved. |
|---|
| | | * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) |
|---|
| | | * å¤å¶ä½¿ç¨è¯·ä¿çæ¬æ®µæ³¨éï¼æè°¢æ¯æå¼æºï¼ |
|---|
| | | * 为æ¹ä¾¿æ´å¤å¼åè
使ç¨ï¼å¦ææ´å¥½ç建议请æ交ç äº Pull Requests ï¼ |
|---|
| | | * |
|---|
| | | * uCharts®å®æ¹ç½ç« |
|---|
| | | * https://www.uCharts.cn |
|---|
| | | * |
|---|
| | | * å¼æºå°å: |
|---|
| | | * https://gitee.com/uCharts/uCharts |
|---|
| | | * |
|---|
| | | * uni-appæ件å¸åºå°åï¼ |
|---|
| | | * http://ext.dcloud.net.cn/plugin?id=271 |
|---|
| | | * |
|---|
| | | --> |
|---|
| | | <template> |
|---|
| | | <view class="chartsview" :id="'ChartBoxId'+cid"> |
|---|
| | | <view v-if="mixinDatacomLoading"> |
|---|
| | | <!-- èªå®ä¹å è½½ç¶æï¼è¯·æ¹è¿é --> |
|---|
| | | <qiun-loading :loadingType="loadingType" /> |
|---|
| | | </view> |
|---|
| | | <view v-if="mixinDatacomErrorMessage && errorShow" @tap="reloading"> |
|---|
| | | <!-- èªå®ä¹é误æ示ï¼è¯·æ¹è¿é --> |
|---|
| | | <qiun-error :errorMessage="errorMessage" /> |
|---|
| | | </view> |
|---|
| | | <!-- APPåH5éç¨renderjs渲æå¾è¡¨ --> |
|---|
| | | <!-- #ifdef APP-VUE || H5 --> |
|---|
| | | <block v-if="echarts"> |
|---|
| | | <view |
|---|
| | | :style="{ background: background }" |
|---|
| | | style="width: 100%;height: 100%;" |
|---|
| | | :data-directory="directory" |
|---|
| | | :id="'EC'+cid" |
|---|
| | | :prop="echartsOpts" |
|---|
| | | :change:prop="rdcharts.ecinit" |
|---|
| | | :resize="echartsResize" |
|---|
| | | :change:resize="rdcharts.ecresize" |
|---|
| | | v-show="showchart" |
|---|
| | | /> |
|---|
| | | </block> |
|---|
| | | <block v-else> |
|---|
| | | <view |
|---|
| | | v-on:tap="rdcharts.tap" |
|---|
| | | v-on:mousemove="rdcharts.mouseMove" |
|---|
| | | v-on:mousedown="rdcharts.mouseDown" |
|---|
| | | v-on:mouseup="rdcharts.mouseUp" |
|---|
| | | v-on:touchstart="rdcharts.touchStart" |
|---|
| | | v-on:touchmove="rdcharts.touchMove" |
|---|
| | | v-on:touchend="rdcharts.touchEnd" |
|---|
| | | :id="'UC'+cid" |
|---|
| | | :prop="uchartsOpts" |
|---|
| | | :change:prop="rdcharts.ucinit" |
|---|
| | | > |
|---|
| | | <canvas |
|---|
| | | :id="cid" |
|---|
| | | :canvasId="cid" |
|---|
| | | :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }" |
|---|
| | | :disable-scroll="disableScroll" |
|---|
| | | @error="_error" |
|---|
| | | v-show="showchart" |
|---|
| | | /> |
|---|
| | | </view> |
|---|
| | | </block> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- æ¯ä»å®å°ç¨åº --> |
|---|
| | | <!-- #ifdef MP-ALIPAY --> |
|---|
| | | <block v-if="ontouch"> |
|---|
| | | <canvas |
|---|
| | | :id="cid" |
|---|
| | | :canvasId="cid" |
|---|
| | | :width="cWidth * pixel" |
|---|
| | | :height="cHeight * pixel" |
|---|
| | | :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }" |
|---|
| | | :disable-scroll="disScroll" |
|---|
| | | @tap="_tap" |
|---|
| | | @touchstart="_touchStart" |
|---|
| | | @touchmove="_touchMove" |
|---|
| | | @touchend="_touchEnd" |
|---|
| | | @error="_error" |
|---|
| | | v-show="showchart" |
|---|
| | | /> |
|---|
| | | </block> |
|---|
| | | <block v-if="!ontouch"> |
|---|
| | | <canvas |
|---|
| | | :id="cid" |
|---|
| | | :canvasId="cid" |
|---|
| | | :width="cWidth * pixel" |
|---|
| | | :height="cHeight * pixel" |
|---|
| | | :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }" |
|---|
| | | :disable-scroll="disScroll" |
|---|
| | | @tap="_tap" |
|---|
| | | @error="_error" |
|---|
| | | v-show="showchart" |
|---|
| | | /> |
|---|
| | | </block> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- å
¶ä»å°ç¨åºéè¿vue渲æå¾è¡¨ --> |
|---|
| | | <!-- #ifdef MP-360 || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-WEIXIN || MP-KUAISHOU || MP-LARK || MP-JD --> |
|---|
| | | <block v-if="type2d"> |
|---|
| | | <view v-if="ontouch" @tap="_tap"> |
|---|
| | | <canvas |
|---|
| | | :id="cid" |
|---|
| | | :canvasId="cid" |
|---|
| | | :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }" |
|---|
| | | type="2d" |
|---|
| | | :disable-scroll="disScroll" |
|---|
| | | @touchstart="_touchStart" |
|---|
| | | @touchmove="_touchMove" |
|---|
| | | @touchend="_touchEnd" |
|---|
| | | @error="_error" |
|---|
| | | v-show="showchart" |
|---|
| | | /> |
|---|
| | | </view> |
|---|
| | | <view v-if="!ontouch" @tap="_tap"> |
|---|
| | | <canvas |
|---|
| | | :id="cid" |
|---|
| | | :canvasId="cid" |
|---|
| | | :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }" |
|---|
| | | type="2d" |
|---|
| | | :disable-scroll="disScroll" |
|---|
| | | @error="_error" |
|---|
| | | v-show="showchart" |
|---|
| | | /> |
|---|
| | | </view> |
|---|
| | | </block> |
|---|
| | | <block v-if="!type2d"> |
|---|
| | | <view v-if="ontouch" @tap="_tap"> |
|---|
| | | <canvas |
|---|
| | | :id="cid" |
|---|
| | | :canvasId="cid" |
|---|
| | | :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }" |
|---|
| | | @touchstart="_touchStart" |
|---|
| | | @touchmove="_touchMove" |
|---|
| | | @touchend="_touchEnd" |
|---|
| | | :disable-scroll="disScroll" |
|---|
| | | @error="_error" |
|---|
| | | v-if="showchart" |
|---|
| | | /> |
|---|
| | | </view> |
|---|
| | | <view v-if="!ontouch" > |
|---|
| | | <canvas |
|---|
| | | :id="cid" |
|---|
| | | :canvasId="cid" |
|---|
| | | :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }" |
|---|
| | | :disable-scroll="disScroll" |
|---|
| | | @tap="_tap" |
|---|
| | | @error="_error" |
|---|
| | | v-if="showchart" |
|---|
| | | /> |
|---|
| | | </view> |
|---|
| | | </block> |
|---|
| | | <!-- #endif --> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import uCharts from '../../js_sdk/u-charts/u-charts.js'; |
|---|
| | | import cfu from '../../js_sdk/u-charts/config-ucharts.js'; |
|---|
| | | // #ifdef APP-VUE || H5 |
|---|
| | | import cfe from '../../js_sdk/u-charts/config-echarts.js'; |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | function deepCloneAssign(origin = {}, ...args) { |
|---|
| | | for (let i in args) { |
|---|
| | | for (let key in args[i]) { |
|---|
| | | if (args[i].hasOwnProperty(key)) { |
|---|
| | | origin[key] = args[i][key] && typeof args[i][key] === 'object' ? deepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key]; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return origin; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function formatterAssign(args,formatter) { |
|---|
| | | for (let key in args) { |
|---|
| | | if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){ |
|---|
| | | formatterAssign(args[key],formatter) |
|---|
| | | }else if(key === 'format' && typeof args[key] === 'string'){ |
|---|
| | | args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return args; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ¶é´è½¬æ¢å½æ°ï¼ä¸ºäºå¹é
uniClinetDB读ååºçæ¶é´ä¸categoriesä¸å |
|---|
| | | function getFormatDate(date) { |
|---|
| | | var seperator = "-"; |
|---|
| | | var year = date.getFullYear(); |
|---|
| | | var month = date.getMonth() + 1; |
|---|
| | | var strDate = date.getDate(); |
|---|
| | | if (month >= 1 && month <= 9) { |
|---|
| | | month = "0" + month; |
|---|
| | | } |
|---|
| | | if (strDate >= 0 && strDate <= 9) { |
|---|
| | | strDate = "0" + strDate; |
|---|
| | | } |
|---|
| | | var currentdate = year + seperator + month + seperator + strDate; |
|---|
| | | return currentdate; |
|---|
| | | } |
|---|
| | | |
|---|
| | | var lastMoveTime = null; |
|---|
| | | /** |
|---|
| | | * é²æ |
|---|
| | | * |
|---|
| | | * @param { Function } fn è¦æ§è¡çæ¹æ³ |
|---|
| | | * @param { Number } wait é²æå¤å°æ¯«ç§ |
|---|
| | | * |
|---|
| | | * å¨ vue ä¸ä½¿ç¨ï¼æ³¨æï¼ä¸è½ä½¿ç¨ç®å¤´å½æ°ï¼å¦åthisæåä¸å¯¹ï¼å¹¶ä¸ä¸è½å次å°è£
å¦ï¼ |
|---|
| | | * move(){ // é误è°ç¨æ¹å¼ |
|---|
| | | * debounce(function () { |
|---|
| | | * console.log(this.title); |
|---|
| | | * }, 1000)}ï¼; |
|---|
| | | * åºè¯¥ç´æ¥ä½¿ç¨ï¼// æ£ç¡®è°ç¨æ¹å¼ |
|---|
| | | * move: debounce(function () { |
|---|
| | | * console.log(this.title); |
|---|
| | | * }, 1000) |
|---|
| | | */ |
|---|
| | | function debounce(fn, wait) { |
|---|
| | | let timer = false; |
|---|
| | | return function() { |
|---|
| | | clearTimeout(timer); |
|---|
| | | timer && clearTimeout(timer); |
|---|
| | | timer = setTimeout(() => { |
|---|
| | | timer = false; |
|---|
| | | fn.apply(this, arguments); // æåæ°ä¼ è¿å» |
|---|
| | | }, wait); |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'qiun-data-charts', |
|---|
| | | mixins: [uniCloud.mixinDatacom], |
|---|
| | | props: { |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | canvasId: { |
|---|
| | | type: String, |
|---|
| | | default: 'uchartsid' |
|---|
| | | }, |
|---|
| | | canvas2d: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | background: { |
|---|
| | | type: String, |
|---|
| | | default: 'rgba(0,0,0,0)' |
|---|
| | | }, |
|---|
| | | animation: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | chartData: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return { |
|---|
| | | categories: [], |
|---|
| | | series: [] |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | opts: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {}; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | eopts: { |
|---|
| | | type: Object, |
|---|
| | | default() { |
|---|
| | | return {}; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | loadingType: { |
|---|
| | | type: Number, |
|---|
| | | default: 2 |
|---|
| | | }, |
|---|
| | | errorShow: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | errorReload: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | errorMessage: { |
|---|
| | | type: String, |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | inScrollView: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | reshow: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | reload: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | disableScroll: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | optsWatch: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | onzoom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | ontap: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | ontouch: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | onmouse: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | onmovetip: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | echartsH5: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | echartsApp: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | tooltipShow: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | tooltipFormat: { |
|---|
| | | type: String, |
|---|
| | | default: undefined |
|---|
| | | }, |
|---|
| | | tooltipCustom: { |
|---|
| | | type: Object, |
|---|
| | | default: undefined |
|---|
| | | }, |
|---|
| | | startDate: { |
|---|
| | | type: String, |
|---|
| | | default: undefined |
|---|
| | | }, |
|---|
| | | endDate: { |
|---|
| | | type: String, |
|---|
| | | default: undefined |
|---|
| | | }, |
|---|
| | | textEnum: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | groupEnum: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | pageScrollTop: { |
|---|
| | | type: Number, |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | directory: { |
|---|
| | | type: String, |
|---|
| | | default: '/' |
|---|
| | | }, |
|---|
| | | tapLegend: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | menus: { |
|---|
| | | type: Array, |
|---|
| | | default () { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | cid: 'uchartsid', |
|---|
| | | inWx: false, |
|---|
| | | inAli: false, |
|---|
| | | inTt: false, |
|---|
| | | inBd: false, |
|---|
| | | inH5: false, |
|---|
| | | inApp: false, |
|---|
| | | inWin: false, |
|---|
| | | type2d: true, |
|---|
| | | disScroll: false, |
|---|
| | | openmouse: false, |
|---|
| | | pixel: 1, |
|---|
| | | cWidth: 375, |
|---|
| | | cHeight: 250, |
|---|
| | | showchart: false, |
|---|
| | | echarts: false, |
|---|
| | | echartsResize:false, |
|---|
| | | uchartsOpts: {}, |
|---|
| | | echartsOpts: {}, |
|---|
| | | drawData:{}, |
|---|
| | | lastDrawTime:null, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | created(){ |
|---|
| | | this.cid = this.canvasId |
|---|
| | | if (this.canvasId == 'uchartsid' || this.canvasId == '') { |
|---|
| | | let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz' |
|---|
| | | let len = t.length |
|---|
| | | let id = '' |
|---|
| | | for (let i = 0; i < 32; i++) { |
|---|
| | | id += t.charAt(Math.floor(Math.random() * len)) |
|---|
| | | } |
|---|
| | | this.cid = id |
|---|
| | | } |
|---|
| | | const systemInfo = uni.getSystemInfoSync() |
|---|
| | | if(systemInfo.platform === 'windows' || systemInfo.platform === 'mac'){ |
|---|
| | | this.inWin = true; |
|---|
| | | } |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | this.inWx = true; |
|---|
| | | if (this.canvas2d === false || systemInfo.platform === 'windows' || systemInfo.platform === 'mac') { |
|---|
| | | this.type2d = false; |
|---|
| | | }else{ |
|---|
| | | this.type2d = true; |
|---|
| | | this.pixel = systemInfo.pixelRatio; |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | //é微信å°ç¨åºç«¯å¼ºå¶å
³écanvas2dæ¨¡å¼ |
|---|
| | | // #ifndef MP-WEIXIN |
|---|
| | | this.type2d = false; |
|---|
| | | // #endif |
|---|
| | | // #ifdef MP-TOUTIAO || MP-LARK || MP-ALIPAY |
|---|
| | | this.type2d = this.canvas2d; |
|---|
| | | // #endif |
|---|
| | | // #ifdef MP-ALIPAY |
|---|
| | | this.inAli = true; |
|---|
| | | this.pixel = systemInfo.pixelRatio; |
|---|
| | | // #endif |
|---|
| | | // #ifdef MP-BAIDU |
|---|
| | | this.inBd = true; |
|---|
| | | // #endif |
|---|
| | | // #ifdef MP-TOUTIAO |
|---|
| | | this.inTt = true; |
|---|
| | | // #endif |
|---|
| | | this.disScroll = this.disableScroll; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // #ifdef APP-VUE |
|---|
| | | this.inApp = true; |
|---|
| | | if (this.echartsApp === true) { |
|---|
| | | this.echarts = true; |
|---|
| | | this.openmouse = false; |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | this.inApp = true; |
|---|
| | | this.mixinDatacomLoading = false |
|---|
| | | this.mixinDatacomErrorMessage = "æä¸æ¯æNVUE" |
|---|
| | | // #endif |
|---|
| | | // #ifdef H5 |
|---|
| | | this.inH5 = true; |
|---|
| | | if(this.inWin === true){ |
|---|
| | | this.openmouse = this.onmouse; |
|---|
| | | } |
|---|
| | | if (this.echartsH5 === true) { |
|---|
| | | this.echarts = true; |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | this.$nextTick(()=>{ |
|---|
| | | this.beforeInit(); |
|---|
| | | }) |
|---|
| | | // #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || APP-VUE |
|---|
| | | const time = this.inH5 ? 500 : 200; |
|---|
| | | const _this = this; |
|---|
| | | uni.onWindowResize( |
|---|
| | | debounce(function(res) { |
|---|
| | | if (_this.mixinDatacomLoading == true) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | let errmsg = _this.mixinDatacomErrorMessage; |
|---|
| | | if (errmsg !== null && errmsg !== 'null' && errmsg !== '') { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (_this.echarts) { |
|---|
| | | _this.echartsResize = !_this.echartsResize; |
|---|
| | | } else { |
|---|
| | | _this.resizeHandler(); |
|---|
| | | } |
|---|
| | | }, time) |
|---|
| | | ); |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | destroyed(){ |
|---|
| | | if(this.echarts === true){ |
|---|
| | | delete cfe.option[this.cid] |
|---|
| | | delete cfe.instance[this.cid] |
|---|
| | | }else{ |
|---|
| | | delete cfu.option[this.cid] |
|---|
| | | delete cfu.instance[this.cid] |
|---|
| | | } |
|---|
| | | // #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO |
|---|
| | | uni.offWindowResize(()=>{}) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | chartDataProps: { |
|---|
| | | handler(val, oldval) { |
|---|
| | | if (typeof val === 'object') { |
|---|
| | | if (JSON.stringify(val) !== JSON.stringify(oldval)) { |
|---|
| | | this._clearChart(); |
|---|
| | | if (val.series && val.series.length > 0) { |
|---|
| | | this.beforeInit(); |
|---|
| | | }else{ |
|---|
| | | this.mixinDatacomLoading = true; |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this._clearChart(); |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = 'åæ°é误ï¼chartDataæ°æ®ç±»åé误'; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | immediate: false, |
|---|
| | | deep: true |
|---|
| | | }, |
|---|
| | | localdata:{ |
|---|
| | | handler(val, oldval) { |
|---|
| | | if (JSON.stringify(val) !== JSON.stringify(oldval)) { |
|---|
| | | if (val.length > 0) { |
|---|
| | | this.beforeInit(); |
|---|
| | | }else{ |
|---|
| | | this.mixinDatacomLoading = true; |
|---|
| | | this._clearChart(); |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | immediate: false, |
|---|
| | | deep: true |
|---|
| | | }, |
|---|
| | | optsProps: { |
|---|
| | | handler(val, oldval) { |
|---|
| | | if (typeof val === 'object') { |
|---|
| | | if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false && this.optsWatch == true) { |
|---|
| | | this.checkData(this.drawData); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this._clearChart(); |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = 'åæ°é误ï¼optsæ°æ®ç±»åé误'; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | immediate: false, |
|---|
| | | deep: true |
|---|
| | | }, |
|---|
| | | eoptsProps: { |
|---|
| | | handler(val, oldval) { |
|---|
| | | if (typeof val === 'object') { |
|---|
| | | if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === true) { |
|---|
| | | this.checkData(this.drawData); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = 'åæ°é误ï¼eoptsæ°æ®ç±»åé误'; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | immediate: false, |
|---|
| | | deep: true |
|---|
| | | }, |
|---|
| | | reshow(val, oldval) { |
|---|
| | | if (val === true && this.mixinDatacomLoading === false) { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | this.echartsResize = !this.echartsResize; |
|---|
| | | this.checkData(this.drawData); |
|---|
| | | }, 200); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | reload(val, oldval) { |
|---|
| | | if (val === true) { |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | this.reloading(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mixinDatacomErrorMessage(val, oldval) { |
|---|
| | | if (val) { |
|---|
| | | this.emitMsg({name: 'error', params: {type:"error", errorShow: this.errorShow, msg: val, id: this.cid}}); |
|---|
| | | if(this.errorShow){ |
|---|
| | | console.log('[ç§äºå¾è¡¨ç»ä»¶]' + val); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | errorMessage(val, oldval) { |
|---|
| | | if (val && this.errorShow && val !== null && val !== 'null' && val !== '') { |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.mixinDatacomErrorMessage = val; |
|---|
| | | } else { |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | this.reloading(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | optsProps() { |
|---|
| | | return JSON.parse(JSON.stringify(this.opts)); |
|---|
| | | }, |
|---|
| | | eoptsProps() { |
|---|
| | | return JSON.parse(JSON.stringify(this.eopts)); |
|---|
| | | }, |
|---|
| | | chartDataProps() { |
|---|
| | | return JSON.parse(JSON.stringify(this.chartData)); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | beforeInit(){ |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | if (typeof this.chartData === 'object' && this.chartData != null && this.chartData.series !== undefined && this.chartData.series.length > 0) { |
|---|
| | | //æ·è´ä¸ä¸chartDataï¼ä¸ºäºoptsåæ´åç»ä¸æ°æ®æ¥æº |
|---|
| | | this.drawData = deepCloneAssign({}, this.chartData); |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.showchart = true; |
|---|
| | | this.checkData(this.chartData); |
|---|
| | | }else if(this.localdata.length>0){ |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.showchart = true; |
|---|
| | | this.localdataInit(this.localdata); |
|---|
| | | }else if(this.collection !== ''){ |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.getCloudData(); |
|---|
| | | }else{ |
|---|
| | | this.mixinDatacomLoading = true; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | localdataInit(resdata){ |
|---|
| | | //æ¿æ¢enumç±»å为æ£ç¡®çæè¿° |
|---|
| | | if(this.groupEnum.length>0){ |
|---|
| | | for (let i = 0; i < resdata.length; i++) { |
|---|
| | | for (let j = 0; j < this.groupEnum.length; j++) { |
|---|
| | | if(resdata[i].group === this.groupEnum[j].value){ |
|---|
| | | resdata[i].group = this.groupEnum[j].text |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if(this.textEnum.length>0){ |
|---|
| | | for (let i = 0; i < resdata.length; i++) { |
|---|
| | | for (let j = 0; j < this.textEnum.length; j++) { |
|---|
| | | if(resdata[i].text === this.textEnum[j].value){ |
|---|
| | | resdata[i].text = this.textEnum[j].text |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let needCategories = false; |
|---|
| | | let tmpData = {categories:[], series:[]} |
|---|
| | | let tmpcategories = [] |
|---|
| | | let tmpseries = []; |
|---|
| | | //æ¼æ¥categories |
|---|
| | | if(this.echarts === true){ |
|---|
| | | needCategories = cfe.categories.includes(this.type) |
|---|
| | | }else{ |
|---|
| | | needCategories = cfu.categories.includes(this.type) |
|---|
| | | } |
|---|
| | | if(needCategories === true){ |
|---|
| | | //å¦æpropsä¸çchartData带æcategoriesï¼åä¼å
使ç¨chartDataçcategories |
|---|
| | | if(this.chartData && this.chartData.categories && this.chartData.categories.length>0){ |
|---|
| | | tmpcategories = this.chartData.categories |
|---|
| | | }else{ |
|---|
| | | //å¦ææ¯æ¥æç±»åçæ°æ®ï¼ä¸ç®¡æ¯æ¬å°æ°æ®è¿æ¯äºæ°æ®ï¼é½æèµ·æ¢æ¥æèªå¨æ¼æ¥categories |
|---|
| | | if(this.startDate && this.endDate){ |
|---|
| | | let idate = new Date(this.startDate) |
|---|
| | | let edate = new Date(this.endDate) |
|---|
| | | while (idate <= edate) { |
|---|
| | | tmpcategories.push(getFormatDate(idate)) |
|---|
| | | idate = idate.setDate(idate.getDate() + 1) |
|---|
| | | idate = new Date(idate) |
|---|
| | | } |
|---|
| | | //å¦åä»ç»æä¸å»é并æ¼æ¥categories |
|---|
| | | }else{ |
|---|
| | | let tempckey = {}; |
|---|
| | | resdata.map(function(item, index) { |
|---|
| | | if (item.text != undefined && !tempckey[item.text]) { |
|---|
| | | tmpcategories.push(item.text) |
|---|
| | | tempckey[item.text] = true |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | tmpData.categories = tmpcategories |
|---|
| | | } |
|---|
| | | //æ¼æ¥series |
|---|
| | | let tempskey = {}; |
|---|
| | | resdata.map(function(item, index) { |
|---|
| | | if (item.group != undefined && !tempskey[item.group]) { |
|---|
| | | tmpseries.push({ name: item.group, data: [] }); |
|---|
| | | tempskey[item.group] = true; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | //å¦æ没æè·åå°åç»å称(å¯è½æ¯å¸¦categoriesçæ°æ®ï¼ä¹å¯è½æ¯ä¸å¸¦ç饼å¾ç±») |
|---|
| | | if (tmpseries.length == 0) { |
|---|
| | | tmpseries = [{ name: 'é»è®¤åç»', data: [] }]; |
|---|
| | | //å¦ææ¯éè¦categoriesçå¾è¡¨ç±»å |
|---|
| | | if(needCategories === true){ |
|---|
| | | for (let j = 0; j < tmpcategories.length; j++) { |
|---|
| | | let seriesdata = 0; |
|---|
| | | for (let i = 0; i < resdata.length; i++) { |
|---|
| | | if (resdata[i].text == tmpcategories[j]) { |
|---|
| | | seriesdata = resdata[i].value; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | tmpseries[0].data.push(seriesdata); |
|---|
| | | } |
|---|
| | | //å¦ææ¯é¥¼å¾ç±»çå¾è¡¨ç±»å |
|---|
| | | }else{ |
|---|
| | | for (let i = 0; i < resdata.length; i++) { |
|---|
| | | tmpseries[0].data.push({"name": resdata[i].text,"value": resdata[i].value}); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //å¦ææåç»å |
|---|
| | | } else { |
|---|
| | | for (let k = 0; k < tmpseries.length; k++) { |
|---|
| | | //å¦ææcategories |
|---|
| | | if (tmpcategories.length > 0) { |
|---|
| | | for (let j = 0; j < tmpcategories.length; j++) { |
|---|
| | | let seriesdata = 0; |
|---|
| | | for (let i = 0; i < resdata.length; i++) { |
|---|
| | | if (tmpseries[k].name == resdata[i].group && resdata[i].text == tmpcategories[j]) { |
|---|
| | | seriesdata = resdata[i].value; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | tmpseries[k].data.push(seriesdata); |
|---|
| | | } |
|---|
| | | //å¦æä¼ äºgroupè没æä¼ textï¼å³æ²¡æcategoriesï¼æ£å¸¸æ
åµä¸è¿ç§æ°æ®æ¯ä¸ç¬¦åæ°æ®è¦æ±è§èçï¼ |
|---|
| | | } else { |
|---|
| | | for (let i = 0; i < resdata.length; i++) { |
|---|
| | | if (tmpseries[k].name == resdata[i].group) { |
|---|
| | | tmpseries[k].data.push(resdata[i].value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | tmpData.series = tmpseries |
|---|
| | | //æ·è´ä¸ä¸chartDataï¼ä¸ºäºoptsåæ´åç»ä¸æ°æ®æ¥æº |
|---|
| | | this.drawData = deepCloneAssign({}, tmpData); |
|---|
| | | this.checkData(tmpData) |
|---|
| | | }, |
|---|
| | | reloading() { |
|---|
| | | if(this.errorReload === false){ |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | if (this.collection !== '') { |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.onMixinDatacomPropsChange(true); |
|---|
| | | } else { |
|---|
| | | this.beforeInit(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | checkData(anyData) { |
|---|
| | | let cid = this.cid |
|---|
| | | //å¤ä½optsæeopts |
|---|
| | | if(this.echarts === true){ |
|---|
| | | cfe.option[cid] = deepCloneAssign({}, this.eopts); |
|---|
| | | cfe.option[cid].id = cid; |
|---|
| | | cfe.option[cid].type = this.type; |
|---|
| | | }else{ |
|---|
| | | if (this.type && cfu.type.includes(this.type)) { |
|---|
| | | cfu.option[cid] = deepCloneAssign({}, cfu[this.type], this.opts); |
|---|
| | | cfu.option[cid].canvasId = cid; |
|---|
| | | } else { |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = 'åæ°é误ï¼propsåæ°ä¸typeç±»åä¸æ£ç¡®'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //æè½½categoriesåseries |
|---|
| | | let newData = deepCloneAssign({}, anyData); |
|---|
| | | if (newData.series !== undefined && newData.series.length > 0) { |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | if (this.echarts === true) { |
|---|
| | | cfe.option[cid].chartData = newData; |
|---|
| | | this.$nextTick(()=>{ |
|---|
| | | this.init() |
|---|
| | | }) |
|---|
| | | }else{ |
|---|
| | | cfu.option[cid].categories = newData.categories; |
|---|
| | | cfu.option[cid].series = newData.series; |
|---|
| | | this.$nextTick(()=>{ |
|---|
| | | this.init() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | resizeHandler() { |
|---|
| | | //渲æé²æ |
|---|
| | | let currTime = Date.now(); |
|---|
| | | let lastDrawTime = this.lastDrawTime?this.lastDrawTime:currTime-3000; |
|---|
| | | let duration = currTime - lastDrawTime; |
|---|
| | | if (duration < 1000) return; |
|---|
| | | let chartdom = uni |
|---|
| | | .createSelectorQuery() |
|---|
| | | // #ifndef MP-ALIPAY |
|---|
| | | .in(this) |
|---|
| | | // #endif |
|---|
| | | .select('#ChartBoxId'+this.cid) |
|---|
| | | .boundingClientRect(data => { |
|---|
| | | this.showchart = true; |
|---|
| | | if (data.width > 0 && data.height > 0) { |
|---|
| | | if (data.width !== this.cWidth || data.height !== this.cHeight) { |
|---|
| | | this.checkData(this.drawData) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .exec(); |
|---|
| | | }, |
|---|
| | | getCloudData() { |
|---|
| | | if (this.mixinDatacomLoading == true) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.mixinDatacomLoading = true; |
|---|
| | | this.mixinDatacomGet() |
|---|
| | | .then(res => { |
|---|
| | | this.mixinDatacomResData = res.result.data; |
|---|
| | | this.localdataInit(this.mixinDatacomResData); |
|---|
| | | }) |
|---|
| | | .catch(err => { |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = '请æ±é误ï¼' + err; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | onMixinDatacomPropsChange(needReset, changed) { |
|---|
| | | if (needReset == true && this.collection !== '') { |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | this._clearChart(); |
|---|
| | | this.getCloudData(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | _clearChart() { |
|---|
| | | let cid = this.cid |
|---|
| | | if (this.echrts !== true && cfu.option[cid] && cfu.option[cid].context) { |
|---|
| | | const ctx = cfu.option[cid].context; |
|---|
| | | if(typeof ctx === "object" && !cfu.option[cid].update){ |
|---|
| | | ctx.clearRect(0, 0, this.cWidth, this.cHeight); |
|---|
| | | ctx.draw(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | init() { |
|---|
| | | let cid = this.cid |
|---|
| | | let chartdom = uni |
|---|
| | | .createSelectorQuery() |
|---|
| | | // #ifndef MP-ALIPAY |
|---|
| | | .in(this) |
|---|
| | | // #endif |
|---|
| | | .select('#ChartBoxId'+cid) |
|---|
| | | .boundingClientRect(data => { |
|---|
| | | if (data.width > 0 && data.height > 0) { |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.showchart = true; |
|---|
| | | this.lastDrawTime = Date.now(); |
|---|
| | | this.cWidth = data.width; |
|---|
| | | this.cHeight = data.height; |
|---|
| | | if(this.echarts !== true){ |
|---|
| | | cfu.option[cid].background = this.background == 'rgba(0,0,0,0)' ? '#FFFFFF' : this.background; |
|---|
| | | cfu.option[cid].canvas2d = this.type2d; |
|---|
| | | cfu.option[cid].pixelRatio = this.pixel; |
|---|
| | | cfu.option[cid].animation = this.animation; |
|---|
| | | cfu.option[cid].width = data.width * this.pixel; |
|---|
| | | cfu.option[cid].height = data.height * this.pixel; |
|---|
| | | cfu.option[cid].onzoom = this.onzoom; |
|---|
| | | cfu.option[cid].ontap = this.ontap; |
|---|
| | | cfu.option[cid].ontouch = this.ontouch; |
|---|
| | | cfu.option[cid].onmouse = this.openmouse; |
|---|
| | | cfu.option[cid].onmovetip = this.onmovetip; |
|---|
| | | cfu.option[cid].tooltipShow = this.tooltipShow; |
|---|
| | | cfu.option[cid].tooltipFormat = this.tooltipFormat; |
|---|
| | | cfu.option[cid].tooltipCustom = this.tooltipCustom; |
|---|
| | | cfu.option[cid].inScrollView = this.inScrollView; |
|---|
| | | cfu.option[cid].lastDrawTime = this.lastDrawTime; |
|---|
| | | cfu.option[cid].tapLegend = this.tapLegend; |
|---|
| | | } |
|---|
| | | //å¦ææ¯H5æè
App端ï¼éç¨renderjs渲æå¾è¡¨ |
|---|
| | | if (this.inH5 || this.inApp) { |
|---|
| | | if (this.echarts == true) { |
|---|
| | | cfe.option[cid].ontap = this.ontap; |
|---|
| | | cfe.option[cid].onmouse = this.openmouse; |
|---|
| | | cfe.option[cid].tooltipShow = this.tooltipShow; |
|---|
| | | cfe.option[cid].tooltipFormat = this.tooltipFormat; |
|---|
| | | cfe.option[cid].tooltipCustom = this.tooltipCustom; |
|---|
| | | cfe.option[cid].lastDrawTime = this.lastDrawTime; |
|---|
| | | this.echartsOpts = deepCloneAssign({}, cfe.option[cid]); |
|---|
| | | } else { |
|---|
| | | cfu.option[cid].rotateLock = cfu.option[cid].rotate; |
|---|
| | | this.uchartsOpts = deepCloneAssign({}, cfu.option[cid]); |
|---|
| | | } |
|---|
| | | //å¦ææ¯å°ç¨åºç«¯ï¼éç¨uCharts渲æ |
|---|
| | | } else { |
|---|
| | | cfu.option[cid] = formatterAssign(cfu.option[cid],cfu.formatter) |
|---|
| | | this.mixinDatacomErrorMessage = null; |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.showchart = true; |
|---|
| | | this.$nextTick(()=>{ |
|---|
| | | if (this.type2d === true) { |
|---|
| | | const query = uni.createSelectorQuery().in(this) |
|---|
| | | query |
|---|
| | | .select('#' + cid) |
|---|
| | | .fields({ node: true, size: true }) |
|---|
| | | .exec(res => { |
|---|
| | | if (res[0]) { |
|---|
| | | const canvas = res[0].node; |
|---|
| | | const ctx = canvas.getContext('2d'); |
|---|
| | | cfu.option[cid].context = ctx; |
|---|
| | | cfu.option[cid].rotateLock = cfu.option[cid].rotate; |
|---|
| | | if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){ |
|---|
| | | this._updataUChart(cid) |
|---|
| | | }else{ |
|---|
| | | canvas.width = data.width * this.pixel; |
|---|
| | | canvas.height = data.height * this.pixel; |
|---|
| | | canvas._width = data.width * this.pixel; |
|---|
| | | canvas._height = data.height * this.pixel; |
|---|
| | | setTimeout(()=>{ |
|---|
| | | cfu.option[cid].context.restore(); |
|---|
| | | cfu.option[cid].context.save(); |
|---|
| | | this._newChart(cid) |
|---|
| | | },100) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.showchart = false; |
|---|
| | | this.mixinDatacomErrorMessage = 'åæ°é误ï¼å¼å¯2d模å¼åï¼æªè·åå°domèç¹ï¼canvas-id:' + cid; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | if(this.inAli){ |
|---|
| | | cfu.option[cid].rotateLock = cfu.option[cid].rotate; |
|---|
| | | } |
|---|
| | | cfu.option[cid].context = uni.createCanvasContext(cid, this); |
|---|
| | | if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){ |
|---|
| | | this._updataUChart(cid) |
|---|
| | | }else{ |
|---|
| | | setTimeout(()=>{ |
|---|
| | | cfu.option[cid].context.restore(); |
|---|
| | | cfu.option[cid].context.save(); |
|---|
| | | this._newChart(cid) |
|---|
| | | },100) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.mixinDatacomLoading = false; |
|---|
| | | this.showchart = false; |
|---|
| | | if (this.reshow == true) { |
|---|
| | | this.mixinDatacomErrorMessage = 'å¸å±é误ï¼æªè·åå°ç¶å
ç´ å®½é«å°ºå¯¸ï¼canvas-id:' + cid; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .exec(); |
|---|
| | | }, |
|---|
| | | saveImage(){ |
|---|
| | | uni.canvasToTempFilePath({ |
|---|
| | | canvasId: this.cid, |
|---|
| | | success: res=>{ |
|---|
| | | //#ifdef H5 |
|---|
| | | var a = document.createElement("a"); |
|---|
| | | a.href = res.tempFilePath; |
|---|
| | | a.download = this.cid; |
|---|
| | | a.target = '_blank' |
|---|
| | | a.click(); |
|---|
| | | //#endif |
|---|
| | | //#ifndef H5 |
|---|
| | | uni.saveImageToPhotosAlbum({ |
|---|
| | | filePath: res.tempFilePath, |
|---|
| | | success: function () { |
|---|
| | | uni.showToast({ |
|---|
| | | title: 'ä¿åæå', |
|---|
| | | duration: 2000 |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | //#endif |
|---|
| | | } |
|---|
| | | },this); |
|---|
| | | }, |
|---|
| | | getImage(){ |
|---|
| | | if(this.type2d == false){ |
|---|
| | | uni.canvasToTempFilePath({ |
|---|
| | | canvasId: this.cid, |
|---|
| | | success: res=>{ |
|---|
| | | this.emitMsg({name: 'getImage', params: {type:"getImage", base64: res.tempFilePath}}); |
|---|
| | | } |
|---|
| | | },this); |
|---|
| | | }else{ |
|---|
| | | const query = uni.createSelectorQuery().in(this) |
|---|
| | | query |
|---|
| | | .select('#' + this.cid) |
|---|
| | | .fields({ node: true, size: true }) |
|---|
| | | .exec(res => { |
|---|
| | | if (res[0]) { |
|---|
| | | const canvas = res[0].node; |
|---|
| | | this.emitMsg({name: 'getImage', params: {type:"getImage", base64: canvas.toDataURL('image/png')}}); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // #ifndef APP-VUE || H5 |
|---|
| | | _newChart(cid) { |
|---|
| | | if (this.mixinDatacomLoading == true) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.showchart = true; |
|---|
| | | cfu.instance[cid] = new uCharts(cfu.option[cid]); |
|---|
| | | cfu.instance[cid].addEventListener('renderComplete', () => { |
|---|
| | | this.emitMsg({name: 'complete', params: {type:"complete", complete: true, id: cid}}); |
|---|
| | | cfu.instance[cid].delEventListener('renderComplete') |
|---|
| | | }); |
|---|
| | | cfu.instance[cid].addEventListener('scrollLeft', () => { |
|---|
| | | this.emitMsg({name: 'scrollLeft', params: {type:"scrollLeft", scrollLeft: true, id: cid}}); |
|---|
| | | }); |
|---|
| | | cfu.instance[cid].addEventListener('scrollRight', () => { |
|---|
| | | this.emitMsg({name: 'scrollRight', params: {type:"scrollRight", scrollRight: true, id: cid}}); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | _updataUChart(cid) { |
|---|
| | | cfu.instance[cid].updateData(cfu.option[cid]) |
|---|
| | | }, |
|---|
| | | _tooltipDefault(item, category, index, opts) { |
|---|
| | | if (category) { |
|---|
| | | let data = item.data |
|---|
| | | if(typeof item.data === "object"){ |
|---|
| | | data = item.data.value |
|---|
| | | } |
|---|
| | | return category + ' ' + item.name + ':' + data; |
|---|
| | | } else { |
|---|
| | | if (item.properties && item.properties.name) { |
|---|
| | | return item.properties.name; |
|---|
| | | } else { |
|---|
| | | return item.name + ':' + item.data; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | _showTooltip(e) { |
|---|
| | | let cid = this.cid |
|---|
| | | let tc = cfu.option[cid].tooltipCustom |
|---|
| | | if (tc && tc !== undefined && tc !== null) { |
|---|
| | | let offset = undefined; |
|---|
| | | if (tc.x >= 0 && tc.y >= 0) { |
|---|
| | | offset = { x: tc.x, y: tc.y + 10 }; |
|---|
| | | } |
|---|
| | | cfu.instance[cid].showToolTip(e, { |
|---|
| | | index: tc.index, |
|---|
| | | offset: offset, |
|---|
| | | textList: tc.textList, |
|---|
| | | formatter: (item, category, index, opts) => { |
|---|
| | | if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) { |
|---|
| | | return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts); |
|---|
| | | } else { |
|---|
| | | return this._tooltipDefault(item, category, index, opts); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | cfu.instance[cid].showToolTip(e, { |
|---|
| | | formatter: (item, category, index, opts) => { |
|---|
| | | if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) { |
|---|
| | | return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts); |
|---|
| | | } else { |
|---|
| | | return this._tooltipDefault(item, category, index, opts); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | _tap(e,move) { |
|---|
| | | let cid = this.cid |
|---|
| | | let currentIndex = null; |
|---|
| | | let legendIndex = null; |
|---|
| | | if (this.inScrollView === true || this.inAli) { |
|---|
| | | let chartdom = uni |
|---|
| | | .createSelectorQuery() |
|---|
| | | // #ifndef MP-ALIPAY |
|---|
| | | .in(this) |
|---|
| | | .select('#ChartBoxId'+cid) |
|---|
| | | // #endif |
|---|
| | | // #ifdef MP-ALIPAY |
|---|
| | | .select('#'+this.cid) |
|---|
| | | // #endif |
|---|
| | | .boundingClientRect(data => { |
|---|
| | | e.changedTouches=[]; |
|---|
| | | if (this.inAli) { |
|---|
| | | e.changedTouches.unshift({ x: e.detail.clientX - data.left, y: e.detail.clientY - data.top}); |
|---|
| | | }else{ |
|---|
| | | e.changedTouches.unshift({ x: e.detail.x - data.left, y: e.detail.y - data.top - this.pageScrollTop}); |
|---|
| | | } |
|---|
| | | if(move){ |
|---|
| | | if (this.tooltipShow === true) { |
|---|
| | | this._showTooltip(e); |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | currentIndex = cfu.instance[cid].getCurrentDataIndex(e); |
|---|
| | | legendIndex = cfu.instance[cid].getLegendDataIndex(e); |
|---|
| | | if(this.tapLegend === true){ |
|---|
| | | cfu.instance[cid].touchLegend(e); |
|---|
| | | } |
|---|
| | | if (this.tooltipShow === true) { |
|---|
| | | this._showTooltip(e); |
|---|
| | | } |
|---|
| | | this.emitMsg({name: 'getIndex', params: { type:"getIndex", event:{ x: e.detail.x - data.left, y: e.detail.y - data.top }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}}); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | .exec(); |
|---|
| | | } else { |
|---|
| | | if(move){ |
|---|
| | | if (this.tooltipShow === true) { |
|---|
| | | this._showTooltip(e); |
|---|
| | | } |
|---|
| | | }else{ |
|---|
| | | e.changedTouches=[]; |
|---|
| | | e.changedTouches.unshift({ x: e.detail.x - e.currentTarget.offsetLeft, y: e.detail.y - e.currentTarget.offsetTop }); |
|---|
| | | currentIndex = cfu.instance[cid].getCurrentDataIndex(e); |
|---|
| | | legendIndex = cfu.instance[cid].getLegendDataIndex(e); |
|---|
| | | if(this.tapLegend === true){ |
|---|
| | | cfu.instance[cid].touchLegend(e); |
|---|
| | | } |
|---|
| | | if (this.tooltipShow === true) { |
|---|
| | | this._showTooltip(e); |
|---|
| | | } |
|---|
| | | this.emitMsg({name: 'getIndex', params: {type:"getIndex", event:{ x: e.detail.x, y: e.detail.y - e.currentTarget.offsetTop }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}}); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | _touchStart(e) { |
|---|
| | | let cid = this.cid |
|---|
| | | lastMoveTime=Date.now(); |
|---|
| | | if(cfu.option[cid].enableScroll === true && e.touches.length == 1){ |
|---|
| | | cfu.instance[cid].scrollStart(e); |
|---|
| | | } |
|---|
| | | this.emitMsg({name:'getTouchStart', params:{type:"touchStart", event:e.changedTouches[0], id:cid}}); |
|---|
| | | }, |
|---|
| | | _touchMove(e) { |
|---|
| | | let cid = this.cid |
|---|
| | | let currMoveTime = Date.now(); |
|---|
| | | let duration = currMoveTime - lastMoveTime; |
|---|
| | | let touchMoveLimit = cfu.option[cid].touchMoveLimit || 24; |
|---|
| | | if (duration < Math.floor(1000 / touchMoveLimit)) return;//æ¯ç§60帧 |
|---|
| | | lastMoveTime = currMoveTime; |
|---|
| | | if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){ |
|---|
| | | cfu.instance[cid].scroll(e); |
|---|
| | | } |
|---|
| | | if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){ |
|---|
| | | this._tap(e,true) |
|---|
| | | } |
|---|
| | | if(this.ontouch === true && cfu.option[cid].enableScroll === true && this.onzoom === true && e.changedTouches.length == 2){ |
|---|
| | | cfu.instance[cid].dobuleZoom(e); |
|---|
| | | } |
|---|
| | | this.emitMsg({name: 'getTouchMove', params: {type:"touchMove", event:e.changedTouches[0], id: cid}}); |
|---|
| | | }, |
|---|
| | | _touchEnd(e) { |
|---|
| | | let cid = this.cid |
|---|
| | | if(cfu.option[cid].enableScroll === true && e.touches.length == 0){ |
|---|
| | | cfu.instance[cid].scrollEnd(e); |
|---|
| | | } |
|---|
| | | this.emitMsg({name:'getTouchEnd', params:{type:"touchEnd", event:e.changedTouches[0], id:cid}}); |
|---|
| | | if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){ |
|---|
| | | this._tap(e,true) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | _error(e) { |
|---|
| | | this.mixinDatacomErrorMessage = e.detail.errMsg; |
|---|
| | | }, |
|---|
| | | emitMsg(msg) { |
|---|
| | | this.$emit(msg.name, msg.params); |
|---|
| | | }, |
|---|
| | | getRenderType() { |
|---|
| | | //é²æ¢å¦æå¼å¯echartsä¸ç¶å
ç´ ä¸ºv-ifçæ
åµrenderjsçå¬ä¸å°propååçé®é¢ |
|---|
| | | if(this.echarts===true && this.mixinDatacomLoading===false){ |
|---|
| | | this.beforeInit() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | toJSON(){ |
|---|
| | | return this |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <!-- #ifdef APP-VUE || H5 --> |
|---|
| | | <script module="rdcharts" lang="renderjs"> |
|---|
| | | import uChartsRD from '../../js_sdk/u-charts/u-charts.js'; |
|---|
| | | import cfu from '../../js_sdk/u-charts/config-ucharts.js'; |
|---|
| | | import cfe from '../../js_sdk/u-charts/config-echarts.js'; |
|---|
| | | |
|---|
| | | var that = {}; |
|---|
| | | var rootdom = null; |
|---|
| | | |
|---|
| | | function rddeepCloneAssign(origin = {}, ...args) { |
|---|
| | | for (let i in args) { |
|---|
| | | for (let key in args[i]) { |
|---|
| | | if (args[i].hasOwnProperty(key)) { |
|---|
| | | origin[key] = args[i][key] && typeof args[i][key] === 'object' ? rddeepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key]; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return origin; |
|---|
| | | } |
|---|
| | | |
|---|
| | | function rdformatterAssign(args,formatter) { |
|---|
| | | for (let key in args) { |
|---|
| | | if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){ |
|---|
| | | rdformatterAssign(args[key],formatter) |
|---|
| | | }else if(key === 'format' && typeof args[key] === 'string'){ |
|---|
| | | args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return args; |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | rid:null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | rootdom = {top:0,left:0} |
|---|
| | | // #ifdef H5 |
|---|
| | | let dm = document.querySelectorAll('uni-main')[0] |
|---|
| | | if(dm === undefined){ |
|---|
| | | dm = document.querySelectorAll('uni-page-wrapper')[0] |
|---|
| | | } |
|---|
| | | rootdom = {top:dm.offsetTop,left:dm.offsetLeft} |
|---|
| | | // #endif |
|---|
| | | setTimeout(()=>{ |
|---|
| | | if(this.rid === null){ |
|---|
| | | this.$ownerInstance && this.$ownerInstance.callMethod('getRenderType') |
|---|
| | | } |
|---|
| | | },200) |
|---|
| | | }, |
|---|
| | | destroyed(){ |
|---|
| | | delete cfu.option[this.rid] |
|---|
| | | delete cfu.instance[this.rid] |
|---|
| | | delete cfe.option[this.rid] |
|---|
| | | delete cfe.instance[this.rid] |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | //==============以ä¸æ¯EChartsçæ¹æ³==================== |
|---|
| | | ecinit(newVal, oldVal, owner, instance){ |
|---|
| | | let cid = JSON.stringify(newVal.id) |
|---|
| | | this.rid = cid |
|---|
| | | that[cid] = this.$ownerInstance || instance |
|---|
| | | let eopts = JSON.parse(JSON.stringify(newVal)) |
|---|
| | | let type = eopts.type; |
|---|
| | | //è½½å
¥å¹¶è¦çé»è®¤é
ç½® |
|---|
| | | if (type && cfe.type.includes(type)) { |
|---|
| | | cfe.option[cid] = rddeepCloneAssign({}, cfe[type], eopts); |
|---|
| | | }else{ |
|---|
| | | cfe.option[cid] = rddeepCloneAssign({}, eopts); |
|---|
| | | } |
|---|
| | | let newData = eopts.chartData; |
|---|
| | | if(newData){ |
|---|
| | | //æè½½categoriesåseries |
|---|
| | | if(cfe.option[cid].xAxis && cfe.option[cid].xAxis.type && cfe.option[cid].xAxis.type === 'category'){ |
|---|
| | | cfe.option[cid].xAxis.data = newData.categories |
|---|
| | | } |
|---|
| | | if(cfe.option[cid].yAxis && cfe.option[cid].yAxis.type && cfe.option[cid].yAxis.type === 'category'){ |
|---|
| | | cfe.option[cid].yAxis.data = newData.categories |
|---|
| | | } |
|---|
| | | cfe.option[cid].series = [] |
|---|
| | | for (var i = 0; i < newData.series.length; i++) { |
|---|
| | | cfe.option[cid].seriesTemplate = cfe.option[cid].seriesTemplate ? cfe.option[cid].seriesTemplate : {} |
|---|
| | | let Template = rddeepCloneAssign({},cfe.option[cid].seriesTemplate,newData.series[i]) |
|---|
| | | cfe.option[cid].series.push(Template) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (typeof window.echarts === 'object') { |
|---|
| | | this.newEChart() |
|---|
| | | }else{ |
|---|
| | | const script = document.createElement('script') |
|---|
| | | // #ifdef APP-VUE |
|---|
| | | script.src = './uni_modules/qiun-data-charts/static/app-plus/echarts.min.js' |
|---|
| | | // #endif |
|---|
| | | // #ifdef H5 |
|---|
| | | const { origin, pathname } = window.location |
|---|
| | | const rooturl = origin + pathname |
|---|
| | | script.src = rooturl + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js' |
|---|
| | | // #endif |
|---|
| | | script.onload = this.newEChart |
|---|
| | | document.head.appendChild(script) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ecresize(newVal, oldVal, owner, instance){ |
|---|
| | | if(cfe.instance[this.rid]){ |
|---|
| | | cfe.instance[this.rid].resize() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | newEChart(){ |
|---|
| | | let cid = this.rid |
|---|
| | | if(cfe.instance[cid] === undefined){ |
|---|
| | | cfe.instance[cid] = echarts.init(that[cid].$el.children[0]) |
|---|
| | | //ontapå¼å¯åæ触åclickäºä»¶ |
|---|
| | | if(cfe.option[cid].ontap === true){ |
|---|
| | | cfe.instance[cid].on('click', resdata => { |
|---|
| | | let event = JSON.parse(JSON.stringify({ |
|---|
| | | x:resdata.event.offsetX,y:resdata.event.offsetY |
|---|
| | | })) |
|---|
| | | that[cid].callMethod('emitMsg',{name:"getIndex", params:{type:"getIndex", event:event, currentIndex:resdata.dataIndex, value:resdata.data, seriesName: resdata.seriesName,id:cid}}) |
|---|
| | | }) |
|---|
| | | // å¢å EChartsçhighlightæ¶æ¯ï¼å®ç°æä¸ç§»å¨è¿åç´¢å¼åè½ãadd by onefish åå»ºäº 2021-12-11 09:50 |
|---|
| | | cfe.instance[cid].on('highlight', resdata => { |
|---|
| | | that[cid].callMethod('emitMsg',{name:"getHighlight", params:{type:"highlight", res:resdata, id:cid}}) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | this.updataEChart(cid,cfe.option[cid]) |
|---|
| | | }else{ |
|---|
| | | this.updataEChart(cid,cfe.option[cid]) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | updataEChart(cid,option){ |
|---|
| | | //æ¿æ¢optionå
formatå±æ§ä¸ºformatterçé¢å®ä¹æ¹æ³ |
|---|
| | | option = rdformatterAssign(option,cfe.formatter) |
|---|
| | | if(option.tooltip){ |
|---|
| | | option.tooltip.show = option.tooltipShow?true:false; |
|---|
| | | option.tooltip.position = this.tooltipPosition() |
|---|
| | | //tooltipFormatæ¹æ³ï¼æ¿æ¢ç»ä»¶çtooltipFormat为config-echarts.jså
对åºçæ¹æ³ |
|---|
| | | if (typeof option.tooltipFormat === 'string' && cfe.formatter[option.tooltipFormat]) { |
|---|
| | | option.tooltip.formatter = option.tooltip.formatter ? option.tooltip.formatter : cfe.formatter[option.tooltipFormat] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // é¢è²æ¸åæ·»å çæ¹æ³ |
|---|
| | | if (option.series) { |
|---|
| | | for (let i in option.series) { |
|---|
| | | let linearGradient = option.series[i].linearGradient |
|---|
| | | if (linearGradient) { |
|---|
| | | option.series[i].color = new echarts.graphic.LinearGradient(linearGradient[0],linearGradient[1],linearGradient[2],linearGradient[3],linearGradient[4]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | cfe.instance[cid].setOption(option, option.notMerge) |
|---|
| | | cfe.instance[cid].on('finished', function(){ |
|---|
| | | that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid}}) |
|---|
| | | if(cfe.instance[cid]){ |
|---|
| | | cfe.instance[cid].off('finished') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | tooltipPosition(){ |
|---|
| | | return (point, params, dom, rect, size) => { |
|---|
| | | let x = point[0] |
|---|
| | | let y = point[1] |
|---|
| | | let viewWidth = size.viewSize[0] |
|---|
| | | let viewHeight = size.viewSize[1] |
|---|
| | | let boxWidth = size.contentSize[0] |
|---|
| | | let boxHeight = size.contentSize[1] |
|---|
| | | let posX = x + 30 |
|---|
| | | let posY = y + 30 |
|---|
| | | if (posX + boxWidth > viewWidth) { |
|---|
| | | posX = x - boxWidth - 30 |
|---|
| | | } |
|---|
| | | if (posY + boxHeight > viewHeight) { |
|---|
| | | posY = y - boxHeight - 30 |
|---|
| | | } |
|---|
| | | return [posX, posY] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | //==============以ä¸æ¯uChartsçæ¹æ³==================== |
|---|
| | | ucinit(newVal, oldVal, owner, instance){ |
|---|
| | | if(JSON.stringify(newVal) == JSON.stringify(oldVal)){ |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if(!newVal.canvasId){ |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | let cid = JSON.parse(JSON.stringify(newVal.canvasId)) |
|---|
| | | this.rid = cid |
|---|
| | | that[cid] = this.$ownerInstance || instance |
|---|
| | | cfu.option[cid] = JSON.parse(JSON.stringify(newVal)) |
|---|
| | | cfu.option[cid] = rdformatterAssign(cfu.option[cid],cfu.formatter) |
|---|
| | | let canvasdom = document.getElementById(cid) |
|---|
| | | if(canvasdom && canvasdom.children[0]){ |
|---|
| | | cfu.option[cid].context = canvasdom.children[0].getContext("2d") |
|---|
| | | if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){ |
|---|
| | | this.updataUChart() |
|---|
| | | }else{ |
|---|
| | | setTimeout(()=>{ |
|---|
| | | cfu.option[cid].context.restore(); |
|---|
| | | cfu.option[cid].context.save(); |
|---|
| | | this.newUChart() |
|---|
| | | },100) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | newUChart() { |
|---|
| | | let cid = this.rid |
|---|
| | | cfu.instance[cid] = new uChartsRD(cfu.option[cid]) |
|---|
| | | cfu.instance[cid].addEventListener('renderComplete', () => { |
|---|
| | | that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid}}) |
|---|
| | | cfu.instance[cid].delEventListener('renderComplete') |
|---|
| | | }); |
|---|
| | | cfu.instance[cid].addEventListener('scrollLeft', () => { |
|---|
| | | that[cid].callMethod('emitMsg',{name:"scrollLeft",params:{type:"scrollLeft",scrollLeft:true,id:cid}}) |
|---|
| | | }); |
|---|
| | | cfu.instance[cid].addEventListener('scrollRight', () => { |
|---|
| | | that[cid].callMethod('emitMsg',{name:"scrollRight",params:{type:"scrollRight",scrollRight:true,id:cid}}) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | updataUChart() { |
|---|
| | | let cid = this.rid |
|---|
| | | cfu.instance[cid].updateData(cfu.option[cid]) |
|---|
| | | }, |
|---|
| | | tooltipDefault(item, category, index, opts) { |
|---|
| | | if (category) { |
|---|
| | | let data = item.data |
|---|
| | | if(typeof item.data === "object"){ |
|---|
| | | data = item.data.value |
|---|
| | | } |
|---|
| | | return category + ' ' + item.name + ':' + data; |
|---|
| | | } else { |
|---|
| | | if (item.properties && item.properties.name) { |
|---|
| | | return item.properties.name ; |
|---|
| | | } else { |
|---|
| | | return item.name + ':' + item.data; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | showTooltip(e,cid) { |
|---|
| | | let tc = cfu.option[cid].tooltipCustom |
|---|
| | | if (tc && tc !== undefined && tc !== null) { |
|---|
| | | let offset = undefined; |
|---|
| | | if (tc.x >= 0 && tc.y >= 0) { |
|---|
| | | offset = { x: tc.x, y: tc.y + 10 }; |
|---|
| | | } |
|---|
| | | cfu.instance[cid].showToolTip(e, { |
|---|
| | | index: tc.index, |
|---|
| | | offset: offset, |
|---|
| | | textList: tc.textList, |
|---|
| | | formatter: (item, category, index, opts) => { |
|---|
| | | if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) { |
|---|
| | | return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts); |
|---|
| | | } else { |
|---|
| | | return this.tooltipDefault(item, category, index, opts); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | cfu.instance[cid].showToolTip(e, { |
|---|
| | | formatter: (item, category, index, opts) => { |
|---|
| | | if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) { |
|---|
| | | return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts); |
|---|
| | | } else { |
|---|
| | | return this.tooltipDefault(item, category, index, opts); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | tap(e) { |
|---|
| | | let cid = this.rid |
|---|
| | | let ontap = cfu.option[cid].ontap |
|---|
| | | let tooltipShow = cfu.option[cid].tooltipShow |
|---|
| | | let tapLegend = cfu.option[cid].tapLegend |
|---|
| | | if(ontap == false) return; |
|---|
| | | let currentIndex=null |
|---|
| | | let legendIndex=null |
|---|
| | | let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect() |
|---|
| | | let tmpe = {} |
|---|
| | | if(e.detail.x){//tapæè
clickçäºä»¶ |
|---|
| | | tmpe = { x: e.detail.x - rchartdom.left, y:e.detail.y - rchartdom.top + rootdom.top} |
|---|
| | | }else{//mouseçäºä»¶ |
|---|
| | | tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top} |
|---|
| | | } |
|---|
| | | e.changedTouches = []; |
|---|
| | | e.changedTouches.unshift(tmpe) |
|---|
| | | currentIndex=cfu.instance[cid].getCurrentDataIndex(e) |
|---|
| | | legendIndex=cfu.instance[cid].getLegendDataIndex(e) |
|---|
| | | if(tapLegend === true){ |
|---|
| | | cfu.instance[cid].touchLegend(e); |
|---|
| | | } |
|---|
| | | if(tooltipShow==true){ |
|---|
| | | this.showTooltip(e,cid) |
|---|
| | | } |
|---|
| | | that[cid].callMethod('emitMsg',{name:"getIndex",params:{type:"getIndex",event:tmpe,currentIndex:currentIndex,legendIndex:legendIndex,id:cid, opts: cfu.instance[cid].opts}}) |
|---|
| | | }, |
|---|
| | | touchStart(e) { |
|---|
| | | let cid = this.rid |
|---|
| | | let ontouch = cfu.option[cid].ontouch |
|---|
| | | if(ontouch == false) return; |
|---|
| | | if(cfu.option[cid].enableScroll === true && e.touches.length == 1){ |
|---|
| | | cfu.instance[cid].scrollStart(e); |
|---|
| | | } |
|---|
| | | that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"touchStart",event:e.changedTouches[0],id:cid}}) |
|---|
| | | }, |
|---|
| | | touchMove(e) { |
|---|
| | | let cid = this.rid |
|---|
| | | let ontouch = cfu.option[cid].ontouch |
|---|
| | | if(ontouch == false) return; |
|---|
| | | if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){ |
|---|
| | | cfu.instance[cid].scroll(e); |
|---|
| | | } |
|---|
| | | if(cfu.option[cid].ontap === true && cfu.option[cid].enableScroll === false && cfu.option[cid].onmovetip === true){ |
|---|
| | | let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect() |
|---|
| | | let tmpe = { x: e.changedTouches[0].clientX - rchartdom.left, y:e.changedTouches[0].clientY - rchartdom.top + rootdom.top} |
|---|
| | | e.changedTouches.unshift(tmpe) |
|---|
| | | if(cfu.option[cid].tooltipShow === true){ |
|---|
| | | this.showTooltip(e,cid) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if(ontouch === true && cfu.option[cid].enableScroll === true && cfu.option[cid].onzoom === true && e.changedTouches.length == 2){ |
|---|
| | | cfu.instance[cid].dobuleZoom(e); |
|---|
| | | } |
|---|
| | | that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"touchMove",event:e.changedTouches[0],id:cid}}) |
|---|
| | | }, |
|---|
| | | touchEnd(e) { |
|---|
| | | let cid = this.rid |
|---|
| | | let ontouch = cfu.option[cid].ontouch |
|---|
| | | if(ontouch == false) return; |
|---|
| | | if(cfu.option[cid].enableScroll === true && e.touches.length == 0){ |
|---|
| | | cfu.instance[cid].scrollEnd(e); |
|---|
| | | } |
|---|
| | | that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"touchEnd",event:e.changedTouches[0],id:cid}}) |
|---|
| | | }, |
|---|
| | | mouseDown(e) { |
|---|
| | | let cid = this.rid |
|---|
| | | let onmouse = cfu.option[cid].onmouse |
|---|
| | | if(onmouse == false) return; |
|---|
| | | let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect() |
|---|
| | | let tmpe = {} |
|---|
| | | tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top} |
|---|
| | | e.changedTouches = []; |
|---|
| | | e.changedTouches.unshift(tmpe) |
|---|
| | | cfu.instance[cid].scrollStart(e) |
|---|
| | | cfu.option[cid].mousedown=true; |
|---|
| | | that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"mouseDown",event:tmpe,id:cid}}) |
|---|
| | | }, |
|---|
| | | mouseMove(e) { |
|---|
| | | let cid = this.rid |
|---|
| | | let onmouse = cfu.option[cid].onmouse |
|---|
| | | let tooltipShow = cfu.option[cid].tooltipShow |
|---|
| | | if(onmouse == false) return; |
|---|
| | | let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect() |
|---|
| | | let tmpe = {} |
|---|
| | | tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top} |
|---|
| | | e.changedTouches = []; |
|---|
| | | e.changedTouches.unshift(tmpe) |
|---|
| | | if(cfu.option[cid].mousedown){ |
|---|
| | | cfu.instance[cid].scroll(e) |
|---|
| | | that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"mouseMove",event:tmpe,id:cid}}) |
|---|
| | | }else if(cfu.instance[cid]){ |
|---|
| | | if(tooltipShow==true){ |
|---|
| | | this.showTooltip(e,cid) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mouseUp(e) { |
|---|
| | | let cid = this.rid |
|---|
| | | let onmouse = cfu.option[cid].onmouse |
|---|
| | | if(onmouse == false) return; |
|---|
| | | let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect() |
|---|
| | | let tmpe = {} |
|---|
| | | tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top} |
|---|
| | | e.changedTouches = []; |
|---|
| | | e.changedTouches.unshift(tmpe) |
|---|
| | | cfu.instance[cid].scrollEnd(e) |
|---|
| | | cfu.option[cid].mousedown=false; |
|---|
| | | that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"mouseUp",event:tmpe,id:cid}}) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <!-- #endif --> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .chartsview { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | flex: 1; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /* |
|---|
| | | * uCharts® |
|---|
| | | * é«æ§è½è·¨å¹³å°å¾è¡¨åºï¼æ¯æH5ãAPPãå°ç¨åºï¼å¾®ä¿¡/æ¯ä»å®/ç¾åº¦/头æ¡/QQ/360ï¼ãVueãTaroçæ¯æcanvasçæ¡æ¶å¹³å° |
|---|
| | | * Copyright (c) 2021 QIUN®ç§äº https://www.ucharts.cn All rights reserved. |
|---|
| | | * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) |
|---|
| | | * å¤å¶ä½¿ç¨è¯·ä¿çæ¬æ®µæ³¨éï¼æè°¢æ¯æå¼æºï¼ |
|---|
| | | * |
|---|
| | | * uCharts®å®æ¹ç½ç« |
|---|
| | | * https://www.uCharts.cn |
|---|
| | | * |
|---|
| | | * å¼æºå°å: |
|---|
| | | * https://gitee.com/uCharts/uCharts |
|---|
| | | * |
|---|
| | | * uni-appæ件å¸åºå°åï¼ |
|---|
| | | * http://ext.dcloud.net.cn/plugin?id=271 |
|---|
| | | * |
|---|
| | | */ |
|---|
| | | |
|---|
| | | // 主é¢é¢è²é
ç½®ï¼å¦æ¯ä¸ªå¾è¡¨ç±»åéè¦ä¸å主é¢ï¼è¯·å¨å¯¹åºå¾è¡¨ç±»åä¸æ´æ¹colorå±æ§ |
|---|
| | | const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc']; |
|---|
| | | |
|---|
| | | //äºä»¶è½¬æ¢å½æ°ï¼ä¸»è¦ç¨ä½æ ¼å¼åx轴为æ¶é´è½´ï¼æ ¹æ®éæ±èªè¡ä¿®æ¹ |
|---|
| | | const formatDateTime = (timeStamp, returnType)=>{ |
|---|
| | | var date = new Date(); |
|---|
| | | date.setTime(timeStamp * 1000); |
|---|
| | | var y = date.getFullYear(); |
|---|
| | | var m = date.getMonth() + 1; |
|---|
| | | m = m < 10 ? ('0' + m) : m; |
|---|
| | | var d = date.getDate(); |
|---|
| | | d = d < 10 ? ('0' + d) : d; |
|---|
| | | var h = date.getHours(); |
|---|
| | | h = h < 10 ? ('0' + h) : h; |
|---|
| | | var minute = date.getMinutes(); |
|---|
| | | var second = date.getSeconds(); |
|---|
| | | minute = minute < 10 ? ('0' + minute) : minute; |
|---|
| | | second = second < 10 ? ('0' + second) : second; |
|---|
| | | if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;} |
|---|
| | | if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;} |
|---|
| | | if(returnType == 'h:m'){return h +':' + minute;} |
|---|
| | | if(returnType == 'h:m:s'){return h +':' + minute +':' + second;} |
|---|
| | | return [y, m, d, h, minute, second]; |
|---|
| | | } |
|---|
| | | |
|---|
| | | const cfu = { |
|---|
| | | //demotype为èªå®ä¹å¾è¡¨ç±»åï¼ä¸è¬ä¸éè¦èªå®ä¹å¾è¡¨ç±»åï¼åªéè¦æ¹æ ¹èç¹ä¸å¯¹åºçç±»åå³å¯ |
|---|
| | | "type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"], |
|---|
| | | "range":["饼ç¶å¾","åç¯å¾","ç«ç°å¾","è¯äºå¾","æ¼æå¾","å°å¾","å弧è¿åº¦æ¡","æ线å¾","æ±ç¶å¾","山峰å¾","æ¡ç¶å¾","åºåå¾","é·è¾¾å¾","仪表ç","K线å¾","æ··åå¾","æ¶é´è½´æ线","æ¶é´è½´åºå","æ£ç¹å¾","æ°æ³¡å¾","èªå®ä¹ç±»å"], |
|---|
| | | //å¢å èªå®ä¹å¾è¡¨ç±»åï¼å¦æéè¦categoriesï¼è¯·å¨è¿éå å
¥æ¨çå¾è¡¨ç±»åï¼ä¾å¦æåç"demotype" |
|---|
| | | //èªå®ä¹ç±»åæ¶éè¦æ³¨æ"tline","tarea","scatter","bubble"çæ¶é´è½´ï¼ç¢éxè½´ï¼ç±»å¾è¡¨ï¼æ²¡æcategoriesï¼ä¸éè¦å å
¥categories |
|---|
| | | "categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"], |
|---|
| | | //instance为å®ä¾åéæ¿è½½å±æ§ï¼ä¸è¦å é¤ |
|---|
| | | "instance":{}, |
|---|
| | | //option为optsåeoptsæ¿è½½å±æ§ï¼ä¸è¦å é¤ |
|---|
| | | "option":{}, |
|---|
| | | //ä¸é¢æ¯èªå®ä¹formaté
ç½®ï¼å é¤H5端å¤çå
¶ä»ç«¯æ æ³éè¿propsä¼ éå½æ°ï¼åªè½éè¿æ¤å±æ§å¯¹åºä¸æ çæ¹å¼æ¥æ¿æ¢ |
|---|
| | | "formatter":{ |
|---|
| | | "yAxisDemo1":function(val, index, opts){return val+'å
'}, |
|---|
| | | "yAxisDemo2":function(val, index, opts){return val.toFixed(2)}, |
|---|
| | | "xAxisDemo1":function(val, index, opts){return val+'å¹´';}, |
|---|
| | | "xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')}, |
|---|
| | | "seriesDemo1":function(val, index, series, opts){return val+'å
'}, |
|---|
| | | "tooltipDemo1":function(item, category, index, opts){ |
|---|
| | | if(index==0){ |
|---|
| | | return 'é便ç¨'+item.data+'å¹´' |
|---|
| | | }else{ |
|---|
| | | return 'å
¶ä»æ没æ¹'+item.data+'天' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "pieDemo":function(val, index, series, opts){ |
|---|
| | | if(index !== undefined){ |
|---|
| | | return series[index].name+'ï¼'+series[index].data+'å
' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | //è¿éæ¼ç¤ºäºèªå®ä¹æ¨çå¾è¡¨ç±»åçoptionï¼å¯ä»¥éæå½åï¼ä¹åå¨ç»ä»¶ä¸ type="demotype" åï¼ç»ä»¶ä¼è°ç¨è¿ä¸ªè±æ¬å·éçoptionï¼å¦æç»ä»¶ä¸è¿åå¨optsåæ°ï¼ä¼å°demotypeä¸optsä¸optionå并å渲æå¾è¡¨ã |
|---|
| | | "demotype":{ |
|---|
| | | //æè¿éææ²çº¿å¾å½åäºèªå®ä¹å¾è¡¨ç±»åï¼æ¨å¯ä»¥æ ¹æ®éè¦éææå®ç±»åæé
ç½® |
|---|
| | | "type": "line", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,10,0,15], |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": true, |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "gridType": "dash", |
|---|
| | | "dashLength": 2, |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "line": { |
|---|
| | | "type": "curve", |
|---|
| | | "width": 2 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | //ä¸é¢æ¯èªå®ä¹é
ç½®ï¼è¯·æ·»å 项ç®æéçéç¨é
ç½® |
|---|
| | | "pie":{ |
|---|
| | | "type": "pie", |
|---|
| | | "color": color, |
|---|
| | | "padding": [5,5,5,5], |
|---|
| | | "extra": { |
|---|
| | | "pie": { |
|---|
| | | "activeOpacity": 0.5, |
|---|
| | | "activeRadius": 10, |
|---|
| | | "offsetAngle": 0, |
|---|
| | | "labelWidth": 15, |
|---|
| | | "border": true, |
|---|
| | | "borderWidth": 3, |
|---|
| | | "borderColor": "#FFFFFF" |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "ring":{ |
|---|
| | | "type": "ring", |
|---|
| | | "color": color, |
|---|
| | | "padding": [5,5,5,5], |
|---|
| | | "rotate": false, |
|---|
| | | "dataLabel": true, |
|---|
| | | "legend": { |
|---|
| | | "show": true, |
|---|
| | | "position": "right", |
|---|
| | | "lineHeight": 25, |
|---|
| | | }, |
|---|
| | | "title": { |
|---|
| | | "name": "æ¶çç", |
|---|
| | | "fontSize": 15, |
|---|
| | | "color": "#666666" |
|---|
| | | }, |
|---|
| | | "subtitle": { |
|---|
| | | "name": "70%", |
|---|
| | | "fontSize": 25, |
|---|
| | | "color": "#7cb5ec" |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "ring": { |
|---|
| | | "ringWidth":30, |
|---|
| | | "activeOpacity": 0.5, |
|---|
| | | "activeRadius": 10, |
|---|
| | | "offsetAngle": 0, |
|---|
| | | "labelWidth": 15, |
|---|
| | | "border": true, |
|---|
| | | "borderWidth": 3, |
|---|
| | | "borderColor": "#FFFFFF" |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | "rose":{ |
|---|
| | | "type": "rose", |
|---|
| | | "color": color, |
|---|
| | | "padding": [5,5,5,5], |
|---|
| | | "legend": { |
|---|
| | | "show": true, |
|---|
| | | "position": "left", |
|---|
| | | "lineHeight": 25, |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "rose": { |
|---|
| | | "type": "area", |
|---|
| | | "minRadius": 50, |
|---|
| | | "activeOpacity": 0.5, |
|---|
| | | "activeRadius": 10, |
|---|
| | | "offsetAngle": 0, |
|---|
| | | "labelWidth": 15, |
|---|
| | | "border": false, |
|---|
| | | "borderWidth": 2, |
|---|
| | | "borderColor": "#FFFFFF" |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "word":{ |
|---|
| | | "type": "word", |
|---|
| | | "color": color, |
|---|
| | | "extra": { |
|---|
| | | "word": { |
|---|
| | | "type": "normal", |
|---|
| | | "autoColors": false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "funnel":{ |
|---|
| | | "type": "funnel", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,15,0,15], |
|---|
| | | "extra": { |
|---|
| | | "funnel": { |
|---|
| | | "activeOpacity": 0.3, |
|---|
| | | "activeWidth": 10, |
|---|
| | | "border": true, |
|---|
| | | "borderWidth": 2, |
|---|
| | | "borderColor": "#FFFFFF", |
|---|
| | | "fillOpacity": 1, |
|---|
| | | "labelAlign": "right" |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "map":{ |
|---|
| | | "type": "map", |
|---|
| | | "color": color, |
|---|
| | | "padding": [0,0,0,0], |
|---|
| | | "dataLabel": true, |
|---|
| | | "extra": { |
|---|
| | | "map": { |
|---|
| | | "border": true, |
|---|
| | | "borderWidth": 1, |
|---|
| | | "borderColor": "#666666", |
|---|
| | | "fillOpacity": 0.6, |
|---|
| | | "activeBorderColor": "#F04864", |
|---|
| | | "activeFillColor": "#FACC14", |
|---|
| | | "activeFillOpacity": 1 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "arcbar":{ |
|---|
| | | "type": "arcbar", |
|---|
| | | "color": color, |
|---|
| | | "title": { |
|---|
| | | "name": "ç¾åæ¯", |
|---|
| | | "fontSize": 25, |
|---|
| | | "color": "#00FF00" |
|---|
| | | }, |
|---|
| | | "subtitle": { |
|---|
| | | "name": "é»è®¤æ é¢", |
|---|
| | | "fontSize": 15, |
|---|
| | | "color": "#666666" |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "arcbar": { |
|---|
| | | "type": "default", |
|---|
| | | "width": 12, |
|---|
| | | "backgroundColor": "#E9E9E9", |
|---|
| | | "startAngle": 0.75, |
|---|
| | | "endAngle": 0.25, |
|---|
| | | "gap": 2 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "line":{ |
|---|
| | | "type": "line", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,10,0,15], |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": true, |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "gridType": "dash", |
|---|
| | | "dashLength": 2, |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "line": { |
|---|
| | | "type": "straight", |
|---|
| | | "width": 2 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "tline":{ |
|---|
| | | "type": "line", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,10,0,15], |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": false, |
|---|
| | | "boundaryGap":"justify", |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "gridType": "dash", |
|---|
| | | "dashLength": 2, |
|---|
| | | "data":[ |
|---|
| | | { |
|---|
| | | "min":0, |
|---|
| | | "max":80 |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "line": { |
|---|
| | | "type": "curve", |
|---|
| | | "width": 2 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "tarea":{ |
|---|
| | | "type": "area", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,10,0,15], |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": true, |
|---|
| | | "boundaryGap":"justify", |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "gridType": "dash", |
|---|
| | | "dashLength": 2, |
|---|
| | | "data":[ |
|---|
| | | { |
|---|
| | | "min":0, |
|---|
| | | "max":80 |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "area": { |
|---|
| | | "type": "curve", |
|---|
| | | "opacity": 0.2, |
|---|
| | | "addLine": true, |
|---|
| | | "width": 2, |
|---|
| | | "gradient": true |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "column":{ |
|---|
| | | "type": "column", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,15,0,5], |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": true, |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "data":[{"min":0}] |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "column": { |
|---|
| | | "type": "group", |
|---|
| | | "width": 30, |
|---|
| | | "activeBgColor": "#000000", |
|---|
| | | "activeBgOpacity": 0.08 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "mount":{ |
|---|
| | | "type": "mount", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,15,0,5], |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": true, |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "data":[{"min":0}] |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "mount": { |
|---|
| | | "type": "mount", |
|---|
| | | "widthRatio": 1.5, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "bar":{ |
|---|
| | | "type": "bar", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,30,0,5], |
|---|
| | | "xAxis": { |
|---|
| | | "boundaryGap":"justify", |
|---|
| | | "disableGrid":false, |
|---|
| | | "min":0, |
|---|
| | | "axisLine":false |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "bar": { |
|---|
| | | "type": "group", |
|---|
| | | "width": 30, |
|---|
| | | "meterBorde": 1, |
|---|
| | | "meterFillColor": "#FFFFFF", |
|---|
| | | "activeBgColor": "#000000", |
|---|
| | | "activeBgOpacity": 0.08 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "area":{ |
|---|
| | | "type": "area", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,15,0,15], |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": true, |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "gridType": "dash", |
|---|
| | | "dashLength": 2, |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "area": { |
|---|
| | | "type": "straight", |
|---|
| | | "opacity": 0.2, |
|---|
| | | "addLine": true, |
|---|
| | | "width": 2, |
|---|
| | | "gradient": false |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "radar":{ |
|---|
| | | "type": "radar", |
|---|
| | | "color": color, |
|---|
| | | "padding": [5,5,5,5], |
|---|
| | | "dataLabel": false, |
|---|
| | | "legend": { |
|---|
| | | "show": true, |
|---|
| | | "position": "right", |
|---|
| | | "lineHeight": 25, |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "radar": { |
|---|
| | | "gridType": "radar", |
|---|
| | | "gridColor": "#CCCCCC", |
|---|
| | | "gridCount": 3, |
|---|
| | | "opacity": 0.2, |
|---|
| | | "max": 200 |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "gauge":{ |
|---|
| | | "type": "gauge", |
|---|
| | | "color": color, |
|---|
| | | "title": { |
|---|
| | | "name": "66Km/H", |
|---|
| | | "fontSize": 25, |
|---|
| | | "color": "#2fc25b", |
|---|
| | | "offsetY": 50 |
|---|
| | | }, |
|---|
| | | "subtitle": { |
|---|
| | | "name": "å®æ¶é度", |
|---|
| | | "fontSize": 15, |
|---|
| | | "color": "#1890ff", |
|---|
| | | "offsetY": -50 |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "gauge": { |
|---|
| | | "type": "default", |
|---|
| | | "width": 30, |
|---|
| | | "labelColor": "#666666", |
|---|
| | | "startAngle": 0.75, |
|---|
| | | "endAngle": 0.25, |
|---|
| | | "startNumber": 0, |
|---|
| | | "endNumber": 100, |
|---|
| | | "labelFormat": "", |
|---|
| | | "splitLine": { |
|---|
| | | "fixRadius": 0, |
|---|
| | | "splitNumber": 10, |
|---|
| | | "width": 30, |
|---|
| | | "color": "#FFFFFF", |
|---|
| | | "childNumber": 5, |
|---|
| | | "childWidth": 12 |
|---|
| | | }, |
|---|
| | | "pointer": { |
|---|
| | | "width": 24, |
|---|
| | | "color": "auto" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "candle":{ |
|---|
| | | "type": "candle", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,15,0,15], |
|---|
| | | "enableScroll": true, |
|---|
| | | "enableMarkLine": true, |
|---|
| | | "dataLabel": false, |
|---|
| | | "xAxis": { |
|---|
| | | "labelCount": 4, |
|---|
| | | "itemCount": 40, |
|---|
| | | "disableGrid": true, |
|---|
| | | "gridColor": "#CCCCCC", |
|---|
| | | "gridType": "solid", |
|---|
| | | "dashLength": 4, |
|---|
| | | "scrollShow": true, |
|---|
| | | "scrollAlign": "left", |
|---|
| | | "scrollColor": "#A6A6A6", |
|---|
| | | "scrollBackgroundColor": "#EFEBEF" |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "candle": { |
|---|
| | | "color": { |
|---|
| | | "upLine": "#f04864", |
|---|
| | | "upFill": "#f04864", |
|---|
| | | "downLine": "#2fc25b", |
|---|
| | | "downFill": "#2fc25b" |
|---|
| | | }, |
|---|
| | | "average": { |
|---|
| | | "show": true, |
|---|
| | | "name": ["MA5","MA10","MA30"], |
|---|
| | | "day": [5,10,20], |
|---|
| | | "color": ["#1890ff","#2fc25b","#facc14"] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "markLine": { |
|---|
| | | "type": "dash", |
|---|
| | | "dashLength": 5, |
|---|
| | | "data": [ |
|---|
| | | { |
|---|
| | | "value": 2150, |
|---|
| | | "lineColor": "#f04864", |
|---|
| | | "showLabel": true |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "value": 2350, |
|---|
| | | "lineColor": "#f04864", |
|---|
| | | "showLabel": true |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "mix":{ |
|---|
| | | "type": "mix", |
|---|
| | | "color": color, |
|---|
| | | "padding": [15,15,0,15], |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": true, |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "disabled": false, |
|---|
| | | "disableGrid": false, |
|---|
| | | "splitNumber": 5, |
|---|
| | | "gridType": "dash", |
|---|
| | | "dashLength": 4, |
|---|
| | | "gridColor": "#CCCCCC", |
|---|
| | | "padding": 10, |
|---|
| | | "showTitle": true, |
|---|
| | | "data": [] |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "mix": { |
|---|
| | | "column": { |
|---|
| | | "width": 20 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "scatter":{ |
|---|
| | | "type": "scatter", |
|---|
| | | "color":color, |
|---|
| | | "padding":[15,15,0,15], |
|---|
| | | "dataLabel":false, |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": false, |
|---|
| | | "gridType":"dash", |
|---|
| | | "splitNumber":5, |
|---|
| | | "boundaryGap":"justify", |
|---|
| | | "min":0 |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "disableGrid": false, |
|---|
| | | "gridType":"dash", |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "scatter": { |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "bubble":{ |
|---|
| | | "type": "bubble", |
|---|
| | | "color":color, |
|---|
| | | "padding":[15,15,0,15], |
|---|
| | | "xAxis": { |
|---|
| | | "disableGrid": false, |
|---|
| | | "gridType":"dash", |
|---|
| | | "splitNumber":5, |
|---|
| | | "boundaryGap":"justify", |
|---|
| | | "min":0, |
|---|
| | | "max":250 |
|---|
| | | }, |
|---|
| | | "yAxis": { |
|---|
| | | "disableGrid": false, |
|---|
| | | "gridType":"dash", |
|---|
| | | "data":[{ |
|---|
| | | "min":0, |
|---|
| | | "max":150 |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | "legend": { |
|---|
| | | }, |
|---|
| | | "extra": { |
|---|
| | | "bubble": { |
|---|
| | | "border":2, |
|---|
| | | "opacity": 0.5, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default cfu; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /* |
|---|
| | | * uCharts (R) |
|---|
| | | * é«æ§è½è·¨å¹³å°å¾è¡¨åºï¼æ¯æH5ãAPPãå°ç¨åºï¼å¾®ä¿¡/æ¯ä»å®/ç¾åº¦/头æ¡/QQ/360/å¿«æï¼ãVueãTaroçæ¯æcanvasçæ¡æ¶å¹³å° |
|---|
| | | * Copyright (C) 2021 QIUN (R) ç§äº https://www.ucharts.cn All rights reserved. |
|---|
| | | * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) |
|---|
| | | * å¤å¶ä½¿ç¨è¯·ä¿çæ¬æ®µæ³¨éï¼æè°¢æ¯æå¼æºï¼ |
|---|
| | | * |
|---|
| | | * uCharts (R) å®æ¹ç½ç« |
|---|
| | | * https://www.uCharts.cn |
|---|
| | | * |
|---|
| | | * å¼æºå°å: |
|---|
| | | * https://gitee.com/uCharts/uCharts |
|---|
| | | * |
|---|
| | | * uni-appæ件å¸åºå°åï¼ |
|---|
| | | * http://ext.dcloud.net.cn/plugin?id=271 |
|---|
| | | * |
|---|
| | | */ |
|---|
| | | "use strict";var config={version:"v2.4.3-20220505",yAxisWidth:15,xAxisHeight:22,xAxisTextPadding:3,padding:[10,10,10,10],pixelRatio:1,rotate:false,fontSize:13,fontColor:"#666666",dataPointShape:["circle","circle","circle","circle"],color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],linearColor:["#0EE2F8","#2BDCA8","#FA7D8D","#EB88E2","#2AE3A0","#0EE2F8","#EB88E2","#6773E3","#F78A85"],pieChartLinePadding:15,pieChartTextPadding:5,titleFontSize:20,subtitleFontSize:15,toolTipPadding:3,toolTipBackground:"#000000",toolTipOpacity:.7,toolTipLineHeight:20,radarLabelTextMargin:13};var assign=function(e,...t){if(e==null){throw new TypeError("[uCharts] Cannot convert undefined or null to object")}if(!t||t.length<=0){return e}function i(e,a){for(let t in a){e[t]=e[t]&&e[t].toString()==="[object Object]"?i(e[t],a[t]):e[t]=a[t]}return e}t.forEach(t=>{e=i(e,t)});return e};var util={toFixed:function t(e,a){a=a||2;if(this.isFloat(e)){e=e.toFixed(a)}return e},isFloat:function t(e){return e%1!==0},approximatelyEqual:function t(e,a){return Math.abs(e-a)<1e-10},isSameSign:function t(e,a){return Math.abs(e)===e&&Math.abs(a)===a||Math.abs(e)!==e&&Math.abs(a)!==a},isSameXCoordinateArea:function t(e,a){return this.isSameSign(e.x,a.x)},isCollision:function t(e,a){e.end={};e.end.x=e.start.x+e.width;e.end.y=e.start.y-e.height;a.end={};a.end.x=a.start.x+a.width;a.end.y=a.start.y-a.height;var i=a.start.x>e.end.x||a.end.x<e.start.x||a.end.y>e.start.y||a.start.y<e.end.y;return!i}};function getH5Offset(t){t.mp={changedTouches:[]};t.mp.changedTouches.push({x:t.offsetX,y:t.offsetY});return t}function hexToRgb(t,e){var a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;var i=t.replace(a,function(t,e,a,i){return e+e+a+a+i+i});var r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(i);var o=parseInt(r[1],16);var n=parseInt(r[2],16);var l=parseInt(r[3],16);return"rgba("+o+","+n+","+l+","+e+")"}function findRange(t,e,a){if(isNaN(t)){throw new Error("[uCharts] seriesæ°æ®é为Numberæ ¼å¼")}a=a||10;e=e?e:"upper";var i=1;while(a<1){a*=10;i*=10}if(e==="upper"){t=Math.ceil(t*i)}else{t=Math.floor(t*i)}while(t%a!==0){if(e==="upper"){if(t==t+1){break}t++}else{t--}}return t/i}function calCandleMA(o,t,e,n){let a=[];for(let r=0;r<o.length;r++){let i={data:[],name:t[r],color:e[r]};for(let a=0,t=n.length;a<t;a++){if(a<o[r]){i.data.push(null);continue}let e=0;for(let t=0;t<o[r];t++){e+=n[a-t][1]}i.data.push(+(e/o[r]).toFixed(3))}a.push(i)}return a}function calValidDistance(t,e,a,i,r){var o=r.width-r.area[1]-r.area[3];var n=a.eachSpacing*(r.chartData.xAxisData.xAxisPoints.length-1);if(r.type=="mount"&&r.extra&&r.extra.mount&&r.extra.mount.widthRatio&&r.extra.mount.widthRatio>1){if(r.extra.mount.widthRatio>2)r.extra.mount.widthRatio=2;n+=(r.extra.mount.widthRatio-1)*a.eachSpacing}var l=e;if(e>=0){l=0;t.uevent.trigger("scrollLeft");t.scrollOption.position="left";r.xAxis.scrollPosition="left"}else if(Math.abs(e)>=n-o){l=o-n;t.uevent.trigger("scrollRight");t.scrollOption.position="right";r.xAxis.scrollPosition="right"}else{t.scrollOption.position=e;r.xAxis.scrollPosition=e}return l}function isInAngleRange(t,e,a){function i(t){while(t<0){t+=2*Math.PI}while(t>2*Math.PI){t-=2*Math.PI}return t}t=i(t);e=i(e);a=i(a);if(e>a){a+=2*Math.PI;if(t<e){t+=2*Math.PI}}return t>=e&&t<=a}function createCurveControlPoints(t,e){function a(t,e){if(t[e-1]&&t[e+1]){return t[e].y>=Math.max(t[e-1].y,t[e+1].y)||t[e].y<=Math.min(t[e-1].y,t[e+1].y)}else{return false}}function c(t,e){if(t[e-1]&&t[e+1]){return t[e].x>=Math.max(t[e-1].x,t[e+1].x)||t[e].x<=Math.min(t[e-1].x,t[e+1].x)}else{return false}}var i=.2;var r=.2;var o=null;var n=null;var l=null;var s=null;if(e<1){o=t[0].x+(t[1].x-t[0].x)*i;n=t[0].y+(t[1].y-t[0].y)*i}else{o=t[e].x+(t[e+1].x-t[e-1].x)*i;n=t[e].y+(t[e+1].y-t[e-1].y)*i}if(e>t.length-3){var h=t.length-1;l=t[h].x-(t[h].x-t[h-1].x)*r;s=t[h].y-(t[h].y-t[h-1].y)*r}else{l=t[e+1].x-(t[e+2].x-t[e].x)*r;s=t[e+1].y-(t[e+2].y-t[e].y)*r}if(a(t,e+1)){s=t[e+1].y}if(a(t,e)){n=t[e].y}if(c(t,e+1)){l=t[e+1].x}if(c(t,e)){o=t[e].x}if(n>=Math.max(t[e].y,t[e+1].y)||n<=Math.min(t[e].y,t[e+1].y)){n=t[e].y}if(s>=Math.max(t[e].y,t[e+1].y)||s<=Math.min(t[e].y,t[e+1].y)){s=t[e+1].y}if(o>=Math.max(t[e].x,t[e+1].x)||o<=Math.min(t[e].x,t[e+1].x)){o=t[e].x}if(l>=Math.max(t[e].x,t[e+1].x)||l<=Math.min(t[e].x,t[e+1].x)){l=t[e+1].x}return{ctrA:{x:o,y:n},ctrB:{x:l,y:s}}}function convertCoordinateOrigin(t,e,a){return{x:a.x+t,y:a.y-e}}function avoidCollision(t,e){if(e){while(util.isCollision(t,e)){if(t.start.x>0){t.start.y--}else if(t.start.x<0){t.start.y++}else{if(t.start.y>0){t.start.y++}else{t.start.y--}}}}return t}function fixPieSeries(e,a,t){let i=[];if(e.length>0&&e[0].data.constructor.toString().indexOf("Array")>-1){a._pieSeries_=e;let t=e[0].data;for(var r=0;r<t.length;r++){t[r].formatter=e[0].formatter;t[r].data=t[r].value;i.push(t[r])}a.series=i}else{i=e}return i}function fillSeries(e,a,i){var r=0;for(var o=0;o<e.length;o++){let t=e[o];if(!t.color){t.color=i.color[r];r=(r+1)%i.color.length}if(!t.linearIndex){t.linearIndex=o}if(!t.index){t.index=0}if(!t.type){t.type=a.type}if(typeof t.show=="undefined"){t.show=true}if(!t.type){t.type=a.type}if(!t.pointShape){t.pointShape="circle"}if(!t.legendShape){switch(t.type){case"line":t.legendShape="line";break;case"column":case"bar":t.legendShape="rect";break;case"area":case"mount":t.legendShape="triangle";break;default:t.legendShape="circle"}}}return e}function fillCustomColor(t,e,a,i){var r=e||[];if(t=="custom"&&r.length==0){r=i.linearColor}if(t=="custom"&&r.length<a.length){let t=a.length-r.length;for(var o=0;o<t;o++){r.push(i.linearColor[(o+1)%i.linearColor.length])}}return r}function getDataRange(t,e){var a=0;var i=e-t;if(i>=1e4){a=1e3}else if(i>=1e3){a=100}else if(i>=100){a=10}else if(i>=10){a=5}else if(i>=1){a=1}else if(i>=.1){a=.1}else if(i>=.01){a=.01}else if(i>=.001){a=.001}else if(i>=1e-4){a=1e-4}else if(i>=1e-5){a=1e-5}else{a=1e-6}return{minRange:findRange(t,"lower",a),maxRange:findRange(e,"upper",a)}}function measureText(a,t,e){var i=0;a=String(a);e=false;if(e!==false&&e!==undefined&&e.setFontSize&&e.measureText){e.setFontSize(t);return e.measureText(a).width}else{var a=a.split("");for(let e=0;e<a.length;e++){let t=a[e];if(/[a-zA-Z]/.test(t)){i+=7}else if(/[0-9]/.test(t)){i+=5.5}else if(/\./.test(t)){i+=2.7}else if(/-/.test(t)){i+=3.25}else if(/:/.test(t)){i+=2.5}else if(/[\u4e00-\u9fa5]/.test(t)){i+=10}else if(/\(|\)/.test(t)){i+=3.73}else if(/\s/.test(t)){i+=2.5}else if(/%/.test(t)){i+=8}else{i+=10}}return i*t/10}}function dataCombine(t){return t.reduce(function(t,e){return(t.data?t.data:t).concat(e.data)},[])}function dataCombineStack(t,e){var a=new Array(e);for(var i=0;i<a.length;i++){a[i]=0}for(var r=0;r<t.length;r++){for(var i=0;i<a.length;i++){a[i]+=t[r].data[i]}}return t.reduce(function(t,e){return(t.data?t.data:t).concat(e.data).concat(a)},[])}function getTouches(t,e,a){let i,r;if(t.clientX){if(e.rotate){r=e.height-t.clientX*e.pix;i=(t.pageY-a.currentTarget.offsetTop-e.height/e.pix/2*(e.pix-1))*e.pix}else{i=t.clientX*e.pix;r=(t.pageY-a.currentTarget.offsetTop-e.height/e.pix/2*(e.pix-1))*e.pix}}else{if(e.rotate){r=e.height-t.x*e.pix;i=t.y*e.pix}else{i=t.x*e.pix;r=t.y*e.pix}}return{x:i,y:r}}function getSeriesDataItem(e,i,a){var r=[];var o=[];var n=i.constructor.toString().indexOf("Array")>-1;if(n){let t=filterSeries(e);for(var l=0;l<a.length;l++){o.push(t[a[l]])}}else{o=e}for(let t=0;t<o.length;t++){let e=o[t];let a=-1;if(n){a=i[t]}else{a=i}if(e.data[a]!==null&&typeof e.data[a]!=="undefined"&&e.show){let t={};t.color=e.color;t.type=e.type;t.style=e.style;t.pointShape=e.pointShape;t.disableLegend=e.disableLegend;t.name=e.name;t.show=e.show;t.data=e.formatter?e.formatter(e.data[a]):e.data[a];r.push(t)}}return r}function getMaxTextListLength(t,e,a){var i=t.map(function(t){return measureText(t,e,a)});return Math.max.apply(null,i)}function getRadarCoordinateSeries(t){var e=2*Math.PI/t;var a=[];for(var i=0;i<t;i++){a.push(e*i)}return a.map(function(t){return-1*t+Math.PI/2})}function getToolTipData(t,a,i,r,o){var n=arguments.length>5&&arguments[5]!==undefined?arguments[5]:{};var l=a.chartData.calPoints?a.chartData.calPoints:[];let s={};if(r.length>0){let e=[];for(let t=0;t<r.length;t++){e.push(l[r[t]])}s=e[0][i[0]]}else{for(let t=0;t<l.length;t++){if(l[t][i]){s=l[t][i];break}}}var e=t.map(function(t){let e=null;if(a.categories&&a.categories.length>0){e=o[i]}return{text:n.formatter?n.formatter(t,e,i,a):t.name+": "+t.data,color:t.color}});var h={x:Math.round(s.x),y:Math.round(s.y)};return{textList:e,offset:h}}function getMixToolTipData(t,e,a,i){var r=arguments.length>4&&arguments[4]!==undefined?arguments[4]:{};var o=e.chartData.xAxisPoints[a]+e.chartData.eachSpacing/2;var n=t.map(function(t){return{text:r.formatter?r.formatter(t,i[a],a,e):t.name+": "+t.data,color:t.color,disableLegend:t.disableLegend?true:false}});n=n.filter(function(t){if(t.disableLegend!==true){return t}});var l={x:Math.round(o),y:0};return{textList:n,offset:l}}function getCandleToolTipData(o,e,r,n,d,t){var x=arguments.length>6&&arguments[6]!==undefined?arguments[6]:{};var a=r.chartData.calPoints;let l=t.color.upFill;let s=t.color.downFill;let h=[l,l,s,l];var c=[];e.map(function(t){if(n==0){if(t.data[1]-t.data[0]<0){h[1]=s}else{h[1]=l}}else{if(t.data[0]<o[n-1][1]){h[0]=s}if(t.data[1]<t.data[0]){h[1]=s}if(t.data[2]>o[n-1][1]){h[2]=l}if(t.data[3]<o[n-1][1]){h[3]=s}}let e={text:"å¼çï¼"+t.data[0],color:h[0]};let a={text:"æ¶çï¼"+t.data[1],color:h[1]};let i={text:"æä½ï¼"+t.data[2],color:h[2]};let r={text:"æé«ï¼"+t.data[3],color:h[3]};c.push(e,a,i,r)});var i=[];var f={x:0,y:0};for(let e=0;e<a.length;e++){let t=a[e];if(typeof t[n]!=="undefined"&&t[n]!==null){i.push(t[n])}}f.x=Math.round(i[0][0].x);return{textList:c,offset:f}}function filterSeries(e){let a=[];for(let t=0;t<e.length;t++){if(e[t].show==true){a.push(e[t])}}return a}function findCurrentIndex(o,n,e,t){var a=arguments.length>4&&arguments[4]!==undefined?arguments[4]:0;var l={index:-1,group:[]};var i=e.chartData.eachSpacing/2;let r=[];if(n&&n.length>0){if(!e.categories){i=0}else{for(let t=1;t<e.chartData.xAxisPoints.length;t++){r.push(e.chartData.xAxisPoints[t]-i)}if((e.type=="line"||e.type=="area")&&e.xAxis.boundaryGap=="justify"){r=e.chartData.xAxisPoints}}if(isInExactChartArea(o,e,t)){if(!e.categories){let a=Array(n.length);for(let e=0;e<n.length;e++){a[e]=Array(n[e].length);for(let t=0;t<n[e].length;t++){a[e][t]=Math.abs(n[e][t].x-o.x)}}let e=Array(a.length);let i=Array(a.length);for(let t=0;t<a.length;t++){e[t]=Math.min.apply(null,a[t]);i[t]=a[t].indexOf(e[t])}let r=Math.min.apply(null,e);l.index=[];for(let t=0;t<e.length;t++){if(e[t]==r){l.group.push(t);l.index.push(i[t])}}}else{r.forEach(function(t,e){if(o.x+a+i>t){l.index=e}})}}}return l}function findBarChartCurrentIndex(a,t,e,i){var r=arguments.length>4&&arguments[4]!==undefined?arguments[4]:0;var o={index:-1,group:[]};var n=e.chartData.eachSpacing/2;let l=e.chartData.yAxisPoints;if(t&&t.length>0){if(isInExactChartArea(a,e,i)){l.forEach(function(t,e){if(a.y+r+n>t){o.index=e}})}}return o}function findLegendIndex(o,t,e){let n=-1;let l=0;if(isInExactLegendArea(o,t.area)){let i=t.points;let r=-1;for(let t=0,e=i.length;t<e;t++){let a=i[t];for(let e=0;e<a.length;e++){r+=1;let t=a[e]["area"];if(t&&o.x>t[0]-l&&o.x<t[2]+l&&o.y>t[1]-l&&o.y<t[3]+l){n=r;break}}}return n}return n}function isInExactLegendArea(t,e){return t.x>e.start.x&&t.x<e.end.x&&t.y>e.start.y&&t.y<e.end.y}function isInExactChartArea(t,e,a){return t.x<=e.width-e.area[1]+10&&t.x>=e.area[3]-10&&t.y>=e.area[0]&&t.y<=e.height-e.area[2]}function findRadarChartCurrentIndex(t,e,a){var r=2*Math.PI/a;var o=-1;if(isInExactPieChartArea(t,e.center,e.radius)){var n=function t(e){if(e<0){e+=2*Math.PI}if(e>2*Math.PI){e-=2*Math.PI}return e};var l=Math.atan2(e.center.y-t.y,t.x-e.center.x);l=-1*l;if(l<0){l+=2*Math.PI}var i=e.angleList.map(function(t){t=n(-1*t);return t});i.forEach(function(t,e){var a=n(t-r/2);var i=n(t+r/2);if(i<a){i+=2*Math.PI}if(l>=a&&l<=i||l+2*Math.PI>=a&&l+2*Math.PI<=i){o=e}})}return o}function findFunnelChartCurrentIndex(t,e){var a=-1;for(var i=0,r=e.series.length;i<r;i++){var o=e.series[i];if(t.x>o.funnelArea[0]&&t.x<o.funnelArea[2]&&t.y>o.funnelArea[1]&&t.y<o.funnelArea[3]){a=i;break}}return a}function findWordChartCurrentIndex(t,e){var a=-1;for(var i=0,r=e.length;i<r;i++){var o=e[i];if(t.x>o.area[0]&&t.x<o.area[2]&&t.y>o.area[1]&&t.y<o.area[3]){a=i;break}}return a}function findMapChartCurrentIndex(t,e){var a=-1;var i=e.chartData.mapData;var r=e.series;var o=pointToCoordinate(t.y,t.x,i.bounds,i.scale,i.xoffset,i.yoffset);var n=[o.x,o.y];for(var l=0,s=r.length;l<s;l++){var h=r[l].geometry.coordinates;if(isPoiWithinPoly(n,h,e.chartData.mapData.mercator)){a=l;break}}return a}function findRoseChartCurrentIndex(t,e,a){var i=-1;var r=getRoseDataPoints(a._series_,a.extra.rose.type,e.radius,e.radius);if(e&&e.center&&isInExactPieChartArea(t,e.center,e.radius)){var o=Math.atan2(e.center.y-t.y,t.x-e.center.x);o=-o;if(a.extra.rose&&a.extra.rose.offsetAngle){o=o-a.extra.rose.offsetAngle*Math.PI/180}for(var n=0,l=r.length;n<l;n++){if(isInAngleRange(o,r[n]._start_,r[n]._start_+r[n]._rose_proportion_*2*Math.PI)){i=n;break}}}return i}function findPieChartCurrentIndex(t,e,a){var i=-1;var r=getPieDataPoints(e.series);if(e&&e.center&&isInExactPieChartArea(t,e.center,e.radius)){var o=Math.atan2(e.center.y-t.y,t.x-e.center.x);o=-o;if(a.extra.pie&&a.extra.pie.offsetAngle){o=o-a.extra.pie.offsetAngle*Math.PI/180}if(a.extra.ring&&a.extra.ring.offsetAngle){o=o-a.extra.ring.offsetAngle*Math.PI/180}for(var n=0,l=r.length;n<l;n++){if(isInAngleRange(o,r[n]._start_,r[n]._start_+r[n]._proportion_*2*Math.PI)){i=n;break}}}return i}function isInExactPieChartArea(t,e,a){return Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)<=Math.pow(a,2)}function splitPoints(t,a){var i=[];var r=[];t.forEach(function(t,e){if(a.connectNulls){if(t!==null){r.push(t)}}else{if(t!==null){r.push(t)}else{if(r.length){i.push(r)}r=[]}}});if(r.length){i.push(r)}return i}function calLegendData(l,s,e,t,h){let c={area:{start:{x:0,y:0},end:{x:0,y:0},width:0,height:0,wholeWidth:0,wholeHeight:0},points:[],widthArr:[],heightArr:[]};if(s.legend.show===false){t.legendData=c;return c}let d=s.legend.padding*s.pix;let x=s.legend.margin*s.pix;let f=s.legend.fontSize?s.legend.fontSize*s.pix:e.fontSize;let p=15*s.pix;let u=5*s.pix;let g=Math.max(s.legend.lineHeight*s.pix,f);if(s.legend.position=="top"||s.legend.position=="bottom"){let i=[];let r=0;let o=[];let n=[];for(let a=0;a<l.length;a++){let t=l[a];const y=t.legendText?t.legendText:t.name;let e=p+u+measureText(y||"undefined",f,h)+s.legend.itemGap*s.pix;if(r+e>s.width-s.area[1]-s.area[3]){i.push(n);o.push(r-s.legend.itemGap*s.pix);r=e;n=[t]}else{r+=e;n.push(t)}}if(n.length){i.push(n);o.push(r-s.legend.itemGap*s.pix);c.widthArr=o;let t=Math.max.apply(null,o);switch(s.legend.float){case"left":c.area.start.x=s.area[3];c.area.end.x=s.area[3]+t+2*d;break;case"right":c.area.start.x=s.width-s.area[1]-t-2*d;c.area.end.x=s.width-s.area[1];break;default:c.area.start.x=(s.width-t)/2-d;c.area.end.x=(s.width+t)/2+d}c.area.width=t+2*d;c.area.wholeWidth=t+2*d;c.area.height=i.length*g+2*d;c.area.wholeHeight=i.length*g+2*d+2*x;c.points=i}}else{let t=l.length;let e=s.height-s.area[0]-s.area[2]-2*x-2*d;let a=Math.min(Math.floor(e/g),t);c.area.height=a*g+d*2;c.area.wholeHeight=a*g+d*2;switch(s.legend.float){case"top":c.area.start.y=s.area[0]+x;c.area.end.y=s.area[0]+x+c.area.height;break;case"bottom":c.area.start.y=s.height-s.area[2]-x-c.area.height;c.area.end.y=s.height-s.area[2]-x;break;default:c.area.start.y=(s.height-c.area.height)/2;c.area.end.y=(s.height+c.area.height)/2}let i=t%a===0?t/a:Math.floor(t/a+1);let r=[];for(let e=0;e<i;e++){let t=l.slice(e*a,e*a+a);r.push(t)}c.points=r;if(r.length){for(let t=0;t<r.length;t++){let a=r[t];let i=0;for(let e=0;e<a.length;e++){let t=p+u+measureText(a[e].name||"undefined",f,h)+s.legend.itemGap*s.pix;if(t>i){i=t}}c.widthArr.push(i);c.heightArr.push(a.length*g+d*2)}let e=0;for(let t=0;t<c.widthArr.length;t++){e+=c.widthArr[t]}c.area.width=e-s.legend.itemGap*s.pix+2*d;c.area.wholeWidth=c.area.width+d}}switch(s.legend.position){case"top":c.area.start.y=s.area[0]+x;c.area.end.y=s.area[0]+x+c.area.height;break;case"bottom":c.area.start.y=s.height-s.area[2]-c.area.height-x;c.area.end.y=s.height-s.area[2]-x;break;case"left":c.area.start.x=s.area[3];c.area.end.x=s.area[3]+c.area.width;break;case"right":c.area.start.x=s.width-s.area[1]-c.area.width;c.area.end.x=s.width-s.area[1];break}t.legendData=c;return c}function calCategoriesData(t,i,e,a,r){var o={angle:0,xAxisHeight:e.xAxisHeight};var n=i.xAxis.fontSize*i.pix||e.fontSize;var l=t.map(function(t,e){var a=i.xAxis.formatter?i.xAxis.formatter(t,e,i):t;return measureText(String(a),n,r)});var s=Math.max.apply(this,l);if(i.xAxis.rotateLabel==true){o.angle=i.xAxis.rotateAngle*Math.PI/180;let t=2*e.xAxisTextPadding+Math.abs(s*Math.sin(o.angle));t=t<n+2*e.xAxisTextPadding?t+2*e.xAxisTextPadding:t;if(i.enableScroll==true&&i.xAxis.scrollShow==true){t+=12*i.pix}o.xAxisHeight=t}if(i.xAxis.disabled){o.xAxisHeight=0}return o}function getXAxisTextList(t,e,h,c){var a=arguments.length>4&&arguments[4]!==undefined?arguments[4]:-1;var i;if(c=="stack"){i=dataCombineStack(t,e.categories.length)}else{i=dataCombine(t)}var r=[];i=i.filter(function(t){if(typeof t==="object"&&t!==null){if(t.constructor.toString().indexOf("Array")>-1){return t!==null}else{return t.value!==null}}else{return t!==null}});i.map(function(t){if(typeof t==="object"){if(t.constructor.toString().indexOf("Array")>-1){if(e.type=="candle"){t.map(function(t){r.push(t)})}else{r.push(t[0])}}else{r.push(t.value)}}else{r.push(t)}});var o=0;var n=0;if(r.length>0){o=Math.min.apply(this,r);n=Math.max.apply(this,r)}if(a>-1){if(typeof e.xAxis.data[a].min==="number"){o=Math.min(e.xAxis.data[a].min,o)}if(typeof e.xAxis.data[a].max==="number"){n=Math.max(e.xAxis.data[a].max,n)}}else{if(typeof e.xAxis.min==="number"){o=Math.min(e.xAxis.min,o)}if(typeof e.xAxis.max==="number"){n=Math.max(e.xAxis.max,n)}}if(o===n){var d=n||10;n+=d}var l=o;var x=n;var f=[];var p=(x-l)/e.xAxis.splitNumber;for(var s=0;s<=e.xAxis.splitNumber;s++){f.push(l+p*s)}return f}function calXAxisData(t,e,a,i){var r=assign({},{type:""},e.extra.bar);var o={angle:0,xAxisHeight:a.xAxisHeight};o.ranges=getXAxisTextList(t,e,a,r.type);o.rangesFormat=o.ranges.map(function(t){t=util.toFixed(t,2);return t});var n=o.ranges.map(function(t){t=util.toFixed(t,2);return t});o=Object.assign(o,getXAxisPoints(n,e,a));var l=o.eachSpacing;var s=n.map(function(t){return measureText(t,e.xAxis.fontSize*e.pix||a.fontSize,i)});var h=Math.max.apply(this,s);if(h+2*a.xAxisTextPadding>l){o.angle=45*Math.PI/180;o.xAxisHeight=2*a.xAxisTextPadding+h*Math.sin(o.angle)}if(e.xAxis.disabled===true){o.xAxisHeight=0}return o}function getRadarDataPoints(r,o,n,a,t){var l=arguments.length>5&&arguments[5]!==undefined?arguments[5]:1;var e=t.extra.radar||{};e.max=e.max||0;var s=Math.max(e.max,Math.max.apply(null,dataCombine(a)));var h=[];for(let e=0;e<a.length;e++){let t=a[e];let i={};i.color=t.color;i.legendShape=t.legendShape;i.pointShape=t.pointShape;i.data=[];t.data.forEach(function(t,e){let a={};a.angle=r[e];a.proportion=t/s;a.value=t;a.position=convertCoordinateOrigin(n*a.proportion*l*Math.cos(a.angle),n*a.proportion*l*Math.sin(a.angle),o);i.data.push(a)});h.push(i)}return h}function getPieDataPoints(a,i){var r=arguments.length>2&&arguments[2]!==undefined?arguments[2]:1;var o=0;var n=0;for(let e=0;e<a.length;e++){let t=a[e];t.data=t.data===null?0:t.data;o+=t.data}for(let e=0;e<a.length;e++){let t=a[e];t.data=t.data===null?0:t.data;if(o===0){t._proportion_=1/a.length*r}else{t._proportion_=t.data/o*r}t._radius_=i}for(let e=0;e<a.length;e++){let t=a[e];t._start_=n;n+=2*t._proportion_*Math.PI}return a}function getFunnelDataPoints(e,a,i,r){var o=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;e=e.sort(function(t,e){return parseInt(e.data)-parseInt(t.data)});for(let t=0;t<e.length;t++){if(i=="funnel"){e[t].radius=e[t].data/e[0].data*a*o}else{e[t].radius=r*(e.length-t)/(r*e.length)*a*o}e[t]._proportion_=e[t].data/e[0].data}if(i!=="pyramid"){e.reverse()}return e}function getRoseDataPoints(a,i,r,o){var n=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var l=0;var s=0;var h=[];for(let e=0;e<a.length;e++){let t=a[e];t.data=t.data===null?0:t.data;l+=t.data;h.push(t.data)}var c=Math.min.apply(null,h);var d=Math.max.apply(null,h);var x=o-r;for(let e=0;e<a.length;e++){let t=a[e];t.data=t.data===null?0:t.data;if(l===0){t._proportion_=1/a.length*n;t._rose_proportion_=1/a.length*n}else{t._proportion_=t.data/l*n;if(i=="area"){t._rose_proportion_=1/a.length*n}else{t._rose_proportion_=t.data/l*n}}t._radius_=r+x*((t.data-c)/(d-c))||o}for(let e=0;e<a.length;e++){let t=a[e];t._start_=s;s+=2*t._rose_proportion_*Math.PI}return a}function getArcbarDataPoints(i,r){var o=arguments.length>2&&arguments[2]!==undefined?arguments[2]:1;if(o==1){o=.999999}for(let a=0;a<i.length;a++){let t=i[a];t.data=t.data===null?0:t.data;let e;if(r.type=="circle"){e=2}else{if(r.endAngle<r.startAngle){e=2+r.endAngle-r.startAngle}else{e=r.startAngle-r.endAngle}}t._proportion_=e*t.data*o+r.startAngle;if(t._proportion_>=2){t._proportion_=t._proportion_%2}}return i}function getGaugeArcbarDataPoints(i,r){var o=arguments.length>2&&arguments[2]!==undefined?arguments[2]:1;if(o==1){o=.999999}for(let a=0;a<i.length;a++){let t=i[a];t.data=t.data===null?0:t.data;let e;if(r.type=="circle"){e=2}else{if(r.endAngle<r.startAngle){e=2+r.endAngle-r.startAngle}else{e=r.startAngle-r.endAngle}}t._proportion_=e*t.data*o+r.startAngle;if(t._proportion_>=2){t._proportion_=t._proportion_%2}}return i}function getGaugeAxisPoints(e,a,t){let i=a-t+1;let r=a;for(let t=0;t<e.length;t++){e[t].value=e[t].value===null?0:e[t].value;e[t]._startAngle_=r;e[t]._endAngle_=i*e[t].value+a;if(e[t]._endAngle_>=2){e[t]._endAngle_=e[t]._endAngle_%2}r=e[t]._endAngle_}return e}function getGaugeDataPoints(i,r,o){let n=arguments.length>3&&arguments[3]!==undefined?arguments[3]:1;for(let a=0;a<i.length;a++){let e=i[a];e.data=e.data===null?0:e.data;if(o.pointer.color=="auto"){for(let t=0;t<r.length;t++){if(e.data<=r[t].value){e.color=r[t].color;break}}}else{e.color=o.pointer.color}let t=o.startAngle-o.endAngle+1;e._endAngle_=t*e.data+o.startAngle;e._oldAngle_=o.oldAngle;if(o.oldAngle<o.endAngle){e._oldAngle_+=2}if(e.data>=o.oldData){e._proportion_=(e._endAngle_-e._oldAngle_)*n+o.oldAngle}else{e._proportion_=e._oldAngle_-(e._oldAngle_-e._endAngle_)*n}if(e._proportion_>=2){e._proportion_=e._proportion_%2}}return i}function getPieTextMaxLength(i,r,o,n){i=getPieDataPoints(i);let l=0;for(let a=0;a<i.length;a++){let t=i[a];let e=t.formatter?t.formatter(+t._proportion_.toFixed(2)):util.toFixed(t._proportion_*100)+"%";l=Math.max(l,measureText(e,t.textSize*n.pix||r.fontSize,o))}return l}function fixColumeData(t,i,r,o,e,n){return t.map(function(t){if(t===null){return null}var e=0;var a=0;if(n.type=="mix"){e=n.extra.mix.column.seriesGap*n.pix||0;a=n.extra.mix.column.categoryGap*n.pix||0}else{e=n.extra.column.seriesGap*n.pix||0;a=n.extra.column.categoryGap*n.pix||0}e=Math.min(e,i/r);a=Math.min(a,i/r);t.width=Math.ceil((i-2*a-e*(r-1))/r);if(n.extra.mix&&n.extra.mix.column.width&&+n.extra.mix.column.width>0){t.width=Math.min(t.width,+n.extra.mix.column.width*n.pix)}if(n.extra.column&&n.extra.column.width&&+n.extra.column.width>0){t.width=Math.min(t.width,+n.extra.column.width*n.pix)}if(t.width<=0){t.width=1}t.x+=(o+.5-r/2)*(t.width+e);return t})}function fixBarData(t,i,r,o,e,n){return t.map(function(t){if(t===null){return null}var e=0;var a=0;e=n.extra.bar.seriesGap*n.pix||0;a=n.extra.bar.categoryGap*n.pix||0;e=Math.min(e,i/r);a=Math.min(a,i/r);t.width=Math.ceil((i-2*a-e*(r-1))/r);if(n.extra.bar&&n.extra.bar.width&&+n.extra.bar.width>0){t.width=Math.min(t.width,+n.extra.bar.width*n.pix)}if(t.width<=0){t.width=1}t.y+=(o+.5-r/2)*(t.width+e);return t})}function fixColumeMeterData(t,e,a,i,r,o,n){var l=o.extra.column.categoryGap*o.pix||0;return t.map(function(t){if(t===null){return null}t.width=e-2*l;if(o.extra.column&&o.extra.column.width&&+o.extra.column.width>0){t.width=Math.min(t.width,+o.extra.column.width*o.pix)}if(i>0){t.width-=n}return t})}function fixColumeStackData(t,a,e,i,r,o,n){var l=o.extra.column.categoryGap*o.pix||0;return t.map(function(t,e){if(t===null){return null}t.width=Math.ceil(a-2*l);if(o.extra.column&&o.extra.column.width&&+o.extra.column.width>0){t.width=Math.min(t.width,+o.extra.column.width*o.pix)}if(t.width<=0){t.width=1}return t})}function fixBarStackData(t,a,e,i,r,o,n){var l=o.extra.bar.categoryGap*o.pix||0;return t.map(function(t,e){if(t===null){return null}t.width=Math.ceil(a-2*l);if(o.extra.bar&&o.extra.bar.width&&+o.extra.bar.width>0){t.width=Math.min(t.width,+o.extra.bar.width*o.pix)}if(t.width<=0){t.width=1}return t})}function getXAxisPoints(t,e,h){var a=e.width-e.area[1]-e.area[3];var i=e.enableScroll?Math.min(e.xAxis.itemCount,t.length):t.length;if((e.type=="line"||e.type=="area"||e.type=="scatter"||e.type=="bubble"||e.type=="bar")&&i>1&&e.xAxis.boundaryGap=="justify"){i-=1}var r=0;if(e.type=="mount"&&e.extra&&e.extra.mount&&e.extra.mount.widthRatio&&e.extra.mount.widthRatio>1){if(e.extra.mount.widthRatio>2)e.extra.mount.widthRatio=2;r=e.extra.mount.widthRatio-1;i+=r}var o=a/i;var n=[];var l=e.area[3];var s=e.width-e.area[1];t.forEach(function(t,e){n.push(l+r/2*o+e*o)});if(e.xAxis.boundaryGap!=="justify"){if(e.enableScroll===true){n.push(l+r*o+t.length*o)}else{n.push(s)}}return{xAxisPoints:n,startX:l,endX:s,eachSpacing:o}}function getCandleDataPoints(t,l,s,h,c,d,a){var x=arguments.length>7&&arguments[7]!==undefined?arguments[7]:1;var e=[];var f=d.height-d.area[0]-d.area[2];t.forEach(function(t,o){if(t===null){e.push(null)}else{var n=[];t.forEach(function(t,e){var a={};a.x=h[o]+Math.round(c/2);var i=t.value||t;var r=f*(i-l)/(s-l);r*=x;a.y=d.height-Math.round(r)-d.area[2];n.push(a)});e.push(n)}});return e}function getDataPoints(t,a,n,l,s,h,e){var c=arguments.length>7&&arguments[7]!==undefined?arguments[7]:1;var d="center";if(h.type=="line"||h.type=="area"||h.type=="scatter"||h.type=="bubble"){d=h.xAxis.boundaryGap}var x=[];var f=h.height-h.area[0]-h.area[2];var p=h.width-h.area[1]-h.area[3];t.forEach(function(i,t){if(i===null){x.push(null)}else{var r={};r.color=i.color;r.x=l[t];var o=i;if(typeof i==="object"&&i!==null){if(i.constructor.toString().indexOf("Array")>-1){let t,e,a;t=[].concat(h.chartData.xAxisData.ranges);e=t.shift();a=t.pop();o=i[1];r.x=h.area[3]+p*(i[0]-e)/(a-e);if(h.type=="bubble"){r.r=i[2];r.t=i[3]}}else{o=i.value}}if(d=="center"){r.x+=s/2}var e=f*(o-a)/(n-a);e*=c;r.y=h.height-e-h.area[2];x.push(r)}});return x}function getMountDataPoints(t,o,n,l,s,h,e){var c=arguments.length>7&&arguments[7]!==undefined?arguments[7]:1;var d=[];var x=h.height-h.area[0]-h.area[2];var a=h.width-h.area[1]-h.area[3];var f=s*e.widthRatio;t.forEach(function(t,e){if(t===null){d.push(null)}else{var a={};a.color=t.color;a.x=l[e];a.x+=s/2;var i=t.data;var r=x*(i-o)/(n-o);r*=c;a.y=h.height-r-h.area[2];a.value=i;a.width=f;d.push(a)}});return d}function getBarDataPoints(t,o,n,l,e,s,a){var h=arguments.length>7&&arguments[7]!==undefined?arguments[7]:1;var c=[];var i=s.height-s.area[0]-s.area[2];var d=s.width-s.area[1]-s.area[3];t.forEach(function(t,e){if(t===null){c.push(null)}else{var a={};a.color=t.color;a.y=l[e];var i=t;if(typeof t==="object"&&t!==null){i=t.value}var r=d*(i-o)/(n-o);r*=h;a.height=r;a.value=i;a.x=r+s.area[3];c.push(a)}});return c}function getStackDataPoints(t,s,h,c,u,d,e,x,y){var f=arguments.length>9&&arguments[9]!==undefined?arguments[9]:1;var p=[];var g=d.height-d.area[0]-d.area[2];t.forEach(function(t,e){if(t===null){p.push(null)}else{var a={};a.color=t.color;a.x=c[e]+Math.round(u/2);if(x>0){var i=0;for(let t=0;t<=x;t++){i+=y[t].data[e]}var r=i-t;var o=g*(i-s)/(h-s);var n=g*(r-s)/(h-s)}else{var i=t;var o=g*(i-s)/(h-s);var n=0}var l=n;o*=f;l*=f;a.y=d.height-Math.round(o)-d.area[2];a.y0=d.height-Math.round(l)-d.area[2];p.push(a)}});return p}function getBarStackDataPoints(t,s,h,c,e,d,a,x,u){var f=arguments.length>9&&arguments[9]!==undefined?arguments[9]:1;var p=[];var g=d.width-d.area[1]-d.area[3];t.forEach(function(t,e){if(t===null){p.push(null)}else{var a={};a.color=t.color;a.y=c[e];if(x>0){var i=0;for(let t=0;t<=x;t++){i+=u[t].data[e]}var r=i-t;var o=g*(i-s)/(h-s);var n=g*(r-s)/(h-s)}else{var i=t;var o=g*(i-s)/(h-s);var n=0}var l=n;o*=f;l*=f;a.height=o-l;a.x=d.area[3]+o;a.x0=d.area[3]+l;p.push(a)}});return p}function getYAxisTextList(t,e,h,c,a){var d=arguments.length>5&&arguments[5]!==undefined?arguments[5]:-1;var i;if(c=="stack"){i=dataCombineStack(t,e.categories.length)}else{i=dataCombine(t)}var r=[];i=i.filter(function(t){if(typeof t==="object"&&t!==null){if(t.constructor.toString().indexOf("Array")>-1){return t!==null}else{return t.value!==null}}else{return t!==null}});i.map(function(t){if(typeof t==="object"){if(t.constructor.toString().indexOf("Array")>-1){if(e.type=="candle"){t.map(function(t){r.push(t)})}else{r.push(t[1])}}else{r.push(t.value)}}else{r.push(t)}});var o=a.min||0;var n=a.max||0;if(r.length>0){o=Math.min.apply(this,r);n=Math.max.apply(this,r)}if(o===n){if(n==0){n=10}else{o=0}}var l=getDataRange(o,n);var x=a.min===undefined||a.min===null?l.minRange:a.min;var f=a.max===undefined||a.max===null?l.maxRange:a.max;var p=[];var g=(f-x)/e.yAxis.splitNumber;for(var s=0;s<=e.yAxis.splitNumber;s++){p.push(x+g*s)}return p.reverse()}function calYAxisData(a,o,e,n){var l=assign({},{type:""},o.extra.column);var t=o.yAxis.data.length;var s=new Array(t);if(t>0){for(let e=0;e<t;e++){s[e]=[];for(let t=0;t<a.length;t++){if(a[t].index==e){s[e].push(a[t])}}}var h=new Array(t);var c=new Array(t);var d=new Array(t);for(let r=0;r<t;r++){let i=o.yAxis.data[r];if(o.yAxis.disabled==true){i.disabled=true}if(i.type==="categories"){if(!i.formatter){i.formatter=(t,e,a)=>{return t+(i.unit||"")}}i.categories=i.categories||o.categories;h[r]=i.categories}else{if(!i.formatter){i.formatter=(t,e,a)=>{return t.toFixed(i.tofix)+(i.unit||"")}}h[r]=getYAxisTextList(s[r],o,e,l.type,i,r)}let a=i.fontSize*o.pix||e.fontSize;d[r]={position:i.position?i.position:"left",width:0};c[r]=h[r].map(function(t,e){t=i.formatter(t,e,o);d[r].width=Math.max(d[r].width,measureText(t,a,n)+5);return t});let t=i.calibration?4*o.pix:0;d[r].width+=t+3*o.pix;if(i.disabled===true){d[r].width=0}}}else{var h=new Array(1);var c=new Array(1);var d=new Array(1);if(o.type==="bar"){h[0]=o.categories;if(!o.yAxis.formatter){o.yAxis.formatter=(t,e,a)=>{return t+(a.yAxis.unit||"")}}}else{if(!o.yAxis.formatter){o.yAxis.formatter=(t,e,a)=>{return t.toFixed(a.yAxis.tofix)+(a.yAxis.unit||"")}}h[0]=getYAxisTextList(a,o,e,l.type,{})}d[0]={position:"left",width:0};var i=o.yAxis.fontSize*o.pix||e.fontSize;c[0]=h[0].map(function(t,e){t=o.yAxis.formatter(t,e,o);d[0].width=Math.max(d[0].width,measureText(t,i,n)+5);return t});d[0].width+=3*o.pix;if(o.yAxis.disabled===true){d[0]={position:"left",width:0};o.yAxis.data[0]={disabled:true}}else{o.yAxis.data[0]={disabled:false,position:"left",max:o.yAxis.max,min:o.yAxis.min,formatter:o.yAxis.formatter};if(o.type==="bar"){o.yAxis.data[0].categories=o.categories;o.yAxis.data[0].type="categories"}}}return{rangesFormat:c,ranges:h,yAxisWidth:d}}function calTooltipYAxisData(r,t,o,e,a){let n=[].concat(o.chartData.yAxisData.ranges);let l=o.height-o.area[0]-o.area[2];let s=o.area[0];let h=[];for(let i=0;i<n.length;i++){let t=n[i].shift();let e=n[i].pop();let a=t-(t-e)*(r-s)/l;a=o.yAxis.data[i].formatter?o.yAxis.data[i].formatter(a):a.toFixed(0);h.push(String(a))}return h}function calMarkLineData(i,r){let o,n;let l=r.height-r.area[0]-r.area[2];for(let a=0;a<i.length;a++){i[a].yAxisIndex=i[a].yAxisIndex?i[a].yAxisIndex:0;let t=[].concat(r.chartData.yAxisData.ranges[i[a].yAxisIndex]);o=t.pop();n=t.shift();let e=l*(i[a].value-o)/(n-o);i[a].y=r.height-Math.round(e)-r.area[2]}return i}function contextRotate(t,e){if(e.rotateLock!==true){t.translate(e.height,0);t.rotate(90*Math.PI/180)}else if(e._rotate_!==true){t.translate(e.height,0);t.rotate(90*Math.PI/180);e._rotate_=true}}function drawPointShape(t,e,a,i,r){i.beginPath();if(r.dataPointShapeType=="hollow"){i.setStrokeStyle(e);i.setFillStyle(r.background);i.setLineWidth(2*r.pix)}else{i.setStrokeStyle("#ffffff");i.setFillStyle(e);i.setLineWidth(1*r.pix)}if(a==="diamond"){t.forEach(function(t,e){if(t!==null){i.moveTo(t.x,t.y-4.5);i.lineTo(t.x-4.5,t.y);i.lineTo(t.x,t.y+4.5);i.lineTo(t.x+4.5,t.y);i.lineTo(t.x,t.y-4.5)}})}else if(a==="circle"){t.forEach(function(t,e){if(t!==null){i.moveTo(t.x+2.5*r.pix,t.y);i.arc(t.x,t.y,3*r.pix,0,2*Math.PI,false)}})}else if(a==="square"){t.forEach(function(t,e){if(t!==null){i.moveTo(t.x-3.5,t.y-3.5);i.rect(t.x-3.5,t.y-3.5,7,7)}})}else if(a==="triangle"){t.forEach(function(t,e){if(t!==null){i.moveTo(t.x,t.y-4.5);i.lineTo(t.x-4.5,t.y+4.5);i.lineTo(t.x+4.5,t.y+4.5);i.lineTo(t.x,t.y-4.5)}})}else if(a==="triangle"){return}i.closePath();i.fill();i.stroke()}function drawRingTitle(t,e,a,i){var r=t.title.fontSize||e.titleFontSize;var o=t.subtitle.fontSize||e.subtitleFontSize;var n=t.title.name||"";var l=t.subtitle.name||"";var c=t.title.color||t.fontColor;var d=t.subtitle.color||t.fontColor;var x=n?r:0;var f=l?o:0;var s=5;if(l){var p=measureText(l,o*t.pix,a);var g=i.x-p/2+(t.subtitle.offsetX||0)*t.pix;var h=i.y+o*t.pix/2+(t.subtitle.offsetY||0)*t.pix;if(n){h+=(x*t.pix+s)/2}a.beginPath();a.setFontSize(o*t.pix);a.setFillStyle(d);a.fillText(l,g,h);a.closePath();a.stroke()}if(n){var u=measureText(n,r*t.pix,a);var y=i.x-u/2+(t.title.offsetX||0);var v=i.y+r*t.pix/2+(t.title.offsetY||0)*t.pix;if(l){v-=(f*t.pix+s)/2}a.beginPath();a.setFontSize(r*t.pix);a.setFillStyle(c);a.fillText(n,y,v);a.closePath();a.stroke()}}function drawPointText(t,o,n,l,s){var h=o.data;var c=o.textOffset?o.textOffset:0;t.forEach(function(t,e){if(t!==null){l.beginPath();var a=o.textSize?o.textSize*s.pix:n.fontSize;l.setFontSize(a);l.setFillStyle(o.textColor||s.fontColor);var i=h[e];if(typeof h[e]==="object"&&h[e]!==null){if(h[e].constructor.toString().indexOf("Array")>-1){i=h[e][1]}else{i=h[e].value}}var r=o.formatter?o.formatter(i,e,o,s):i;l.setTextAlign("center");l.fillText(String(r),t.x,t.y-4+c*s.pix);l.closePath();l.stroke();l.setTextAlign("left")}})}function drawMountPointText(t,o,n,l,s){var e=o.data;var h=o.textOffset?o.textOffset:0;t.forEach(function(t,e){if(t!==null){l.beginPath();var a=o[e].textSize?o[e].textSize*s.pix:n.fontSize;l.setFontSize(a);l.setFillStyle(o[e].textColor||s.fontColor);var i=t.value;var r=o[e].formatter?o[e].formatter(i,e,o,s):i;l.setTextAlign("center");l.fillText(String(r),t.x,t.y-4+h*s.pix);l.closePath();l.stroke();l.setTextAlign("left")}})}function drawBarPointText(t,o,n,l,s){var h=o.data;var e=o.textOffset?o.textOffset:0;t.forEach(function(t,e){if(t!==null){l.beginPath();var a=o.textSize?o.textSize*s.pix:n.fontSize;l.setFontSize(a);l.setFillStyle(o.textColor||s.fontColor);var i=h[e];if(typeof h[e]==="object"&&h[e]!==null){i=h[e].value}var r=o.formatter?o.formatter(i,e,o,s):i;l.setTextAlign("left");l.fillText(String(r),t.x+4*s.pix,t.y+a/2-3);l.closePath();l.stroke()}})}function drawGaugeLabel(e,a,i,r,o,n){a-=e.width/2+e.labelOffset*r.pix;a=a<10?10:a;let t=e.startAngle-e.endAngle+1;let d=t/e.splitLine.splitNumber;let x=e.endNumber-e.startNumber;let f=x/e.splitLine.splitNumber;let l=e.startAngle;let s=e.startNumber;for(let t=0;t<e.splitLine.splitNumber+1;t++){var h={x:a*Math.cos(l*Math.PI),y:a*Math.sin(l*Math.PI)};var c=e.formatter?e.formatter(s,t,r):s;h.x+=i.x-measureText(c,o.fontSize,n)/2;h.y+=i.y;var p=h.x;var g=h.y;n.beginPath();n.setFontSize(o.fontSize);n.setFillStyle(e.labelColor||r.fontColor);n.fillText(c,p,g+o.fontSize/2);n.closePath();n.stroke();l+=d;if(l>=2){l=l%2}s+=f}}function drawRadarLabel(t,s,h,c,d,x){var f=c.extra.radar||{};t.forEach(function(t,e){if(f.labelPointShow===true&&c.categories[e]!==""){var a={x:s*Math.cos(t),y:s*Math.sin(t)};var i=convertCoordinateOrigin(a.x,a.y,h);x.setFillStyle(f.labelPointColor);x.beginPath();x.arc(i.x,i.y,f.labelPointRadius*c.pix,0,2*Math.PI,false);x.closePath();x.fill()}var r={x:(s+d.radarLabelTextMargin*c.pix)*Math.cos(t),y:(s+d.radarLabelTextMargin*c.pix)*Math.sin(t)};var o=convertCoordinateOrigin(r.x,r.y,h);var n=o.x;var l=o.y;if(util.approximatelyEqual(r.x,0)){n-=measureText(c.categories[e]||"",d.fontSize,x)/2}else if(r.x<0){n-=measureText(c.categories[e]||"",d.fontSize,x)}x.beginPath();x.setFontSize(d.fontSize);x.setFillStyle(f.labelColor||c.fontColor);x.fillText(c.categories[e]||"",n,l+d.fontSize/2);x.closePath();x.stroke()})}function drawPieText(n,d,x,f,t,l){var p=x.pieChartLinePadding;var g=[];var u=null;var y=n.map(function(t,e){var a=t.formatter?t.formatter(t,e,n,d):util.toFixed(t._proportion_.toFixed(4)*100)+"%";a=t.labelText?t.labelText:a;var i=2*Math.PI-(t._start_+2*Math.PI*t._proportion_/2);if(t._rose_proportion_){i=2*Math.PI-(t._start_+2*Math.PI*t._rose_proportion_/2)}var r=t.color;var o=t._radius_;return{arc:i,text:a,color:r,radius:o,textColor:t.textColor,textSize:t.textSize,labelShow:t.labelShow}});for(let c=0;c<y.length;c++){let t=y[c];let e=Math.cos(t.arc)*(t.radius+p);let a=Math.sin(t.arc)*(t.radius+p);let i=Math.cos(t.arc)*t.radius;let r=Math.sin(t.arc)*t.radius;let o=e>=0?e+x.pieChartTextPadding:e-x.pieChartTextPadding;let n=a;let l=measureText(t.text,t.textSize*d.pix||x.fontSize,f);let s=n;if(u&&util.isSameXCoordinateArea(u.start,{x:o})){if(o>0){s=Math.min(n,u.start.y)}else if(e<0){s=Math.max(n,u.start.y)}else{if(n>0){s=Math.max(n,u.start.y)}else{s=Math.min(n,u.start.y)}}}if(o<0){o-=l}let h={lineStart:{x:i,y:r},lineEnd:{x:e,y:a},start:{x:o,y:s},width:l,height:x.fontSize,text:t.text,color:t.color,textColor:t.textColor,textSize:t.textSize};u=avoidCollision(h,u);g.push(u)}for(let n=0;n<g.length;n++){if(y[n].labelShow===false){continue}let t=g[n];let e=convertCoordinateOrigin(t.lineStart.x,t.lineStart.y,l);let a=convertCoordinateOrigin(t.lineEnd.x,t.lineEnd.y,l);let i=convertCoordinateOrigin(t.start.x,t.start.y,l);f.setLineWidth(1*d.pix);f.setFontSize(t.textSize*d.pix||x.fontSize);f.beginPath();f.setStrokeStyle(t.color);f.setFillStyle(t.color);f.moveTo(e.x,e.y);let r=t.start.x<0?i.x+t.width:i.x;let o=t.start.x<0?i.x-5:i.x+5;f.quadraticCurveTo(a.x,a.y,r,i.y);f.moveTo(e.x,e.y);f.stroke();f.closePath();f.beginPath();f.moveTo(i.x+t.width,i.y);f.arc(r,i.y,2*d.pix,0,2*Math.PI);f.closePath();f.fill();f.beginPath();f.setFontSize(t.textSize*d.pix||x.fontSize);f.setFillStyle(t.textColor||d.fontColor);f.fillText(t.text,o,i.y+3);f.closePath();f.stroke();f.closePath()}}function drawToolTipSplitLine(r,o,n,l){var s=o.extra.tooltip||{};s.gridType=s.gridType==undefined?"solid":s.gridType;s.dashLength=s.dashLength==undefined?4:s.dashLength;var t=o.area[0];var h=o.height-o.area[2];if(s.gridType=="dash"){l.setLineDash([s.dashLength,s.dashLength])}l.setStrokeStyle(s.gridColor||"#cccccc");l.setLineWidth(1*o.pix);l.beginPath();l.moveTo(r,t);l.lineTo(r,h);l.stroke();l.setLineDash([]);if(s.xAxisLabel){let t=o.categories[o.tooltip.index];l.setFontSize(n.fontSize);let e=measureText(t,n.fontSize,l);let a=r-.5*e;let i=h;l.beginPath();l.setFillStyle(hexToRgb(s.labelBgColor||n.toolTipBackground,s.labelBgOpacity||n.toolTipOpacity));l.setStrokeStyle(s.labelBgColor||n.toolTipBackground);l.setLineWidth(1*o.pix);l.rect(a-n.toolTipPadding,i,e+2*n.toolTipPadding,n.fontSize+2*n.toolTipPadding);l.closePath();l.stroke();l.fill();l.beginPath();l.setFontSize(n.fontSize);l.setFillStyle(s.labelFontColor||o.fontColor);l.fillText(String(t),a,i+n.toolTipPadding+n.fontSize);l.closePath();l.stroke()}}function drawMarkLine(s,h,c){let e=assign({},{type:"solid",dashLength:4,data:[]},s.extra.markLine);let a=s.area[3];let i=s.width-s.area[1];let r=calMarkLineData(e.data,s);for(let t=0;t<r.length;t++){let l=assign({},{lineColor:"#DE4A42",showLabel:false,labelFontColor:"#666666",labelBgColor:"#DFE8FF",labelBgOpacity:.8,labelAlign:"left",labelOffsetX:0,labelOffsetY:0},r[t]);if(e.type=="dash"){c.setLineDash([e.dashLength,e.dashLength])}c.setStrokeStyle(l.lineColor);c.setLineWidth(1*s.pix);c.beginPath();c.moveTo(a,l.y);c.lineTo(i,l.y);c.stroke();c.setLineDash([]);if(l.showLabel){let t=l.labelText?l.labelText:l.value;c.setFontSize(h.fontSize);let e=measureText(t,h.fontSize,c);let a=e+h.toolTipPadding*2;let i=l.labelAlign=="left"?s.area[3]-a:s.width-s.area[1];i+=l.labelOffsetX;let r=l.y-.5*h.fontSize-h.toolTipPadding;r+=l.labelOffsetY;let o=i+h.toolTipPadding;let n=l.y;c.setFillStyle(hexToRgb(l.labelBgColor,l.labelBgOpacity));c.setStrokeStyle(l.labelBgColor);c.setLineWidth(1*s.pix);c.beginPath();c.rect(i,r,a,h.fontSize+2*h.toolTipPadding);c.closePath();c.stroke();c.fill();c.setFontSize(h.fontSize);c.setTextAlign("left");c.setFillStyle(l.labelFontColor);c.fillText(String(t),o,r+h.fontSize+h.toolTipPadding/2);c.stroke();c.setTextAlign("left")}}}function drawToolTipHorizentalLine(d,x,f,t,e){var p=assign({},{gridType:"solid",dashLength:4},d.extra.tooltip);var a=d.area[3];var i=d.width-d.area[1];if(p.gridType=="dash"){f.setLineDash([p.dashLength,p.dashLength])}f.setStrokeStyle(p.gridColor||"#cccccc");f.setLineWidth(1*d.pix);f.beginPath();f.moveTo(a,d.tooltip.offset.y);f.lineTo(i,d.tooltip.offset.y);f.stroke();f.setLineDash([]);if(p.yAxisLabel){let l=calTooltipYAxisData(d.tooltip.offset.y,d.series,d,x,t);let s=d.chartData.yAxisData.yAxisWidth;let h=d.area[3];let c=d.width-d.area[1];for(let n=0;n<l.length;n++){f.setFontSize(x.fontSize);let t=measureText(l[n],x.fontSize,f);let e,a,i;if(s[n].position=="left"){e=h-s[n].width;a=Math.max(e,e+t+x.toolTipPadding*2)}else{e=c;a=Math.max(e+s[n].width,e+t+x.toolTipPadding*2)}i=a-e;let r=e+(i-t)/2;let o=d.tooltip.offset.y;f.beginPath();f.setFillStyle(hexToRgb(p.labelBgColor||x.toolTipBackground,p.labelBgOpacity||x.toolTipOpacity));f.setStrokeStyle(p.labelBgColor||x.toolTipBackground);f.setLineWidth(1*d.pix);f.rect(e,o-.5*x.fontSize-x.toolTipPadding,i,x.fontSize+2*x.toolTipPadding);f.closePath();f.stroke();f.fill();f.beginPath();f.setFontSize(x.fontSize);f.setFillStyle(p.labelFontColor||d.fontColor);f.fillText(l[n],r,o+.5*x.fontSize);f.closePath();f.stroke();if(s[n].position=="left"){h-=s[n].width+d.yAxis.padding*d.pix}else{c+=s[n].width+d.yAxis.padding*d.pix}}}}function drawToolTipSplitArea(t,e,a,i,r){var o=assign({},{activeBgColor:"#000000",activeBgOpacity:.08,activeWidth:r},e.extra.column);o.activeWidth=o.activeWidth>r?r:o.activeWidth;var n=e.area[0];var l=e.height-e.area[2];i.beginPath();i.setFillStyle(hexToRgb(o.activeBgColor,o.activeBgOpacity));i.rect(t-o.activeWidth/2,n,o.activeWidth,l-n);i.closePath();i.fill();i.setFillStyle("#FFFFFF")}function drawBarToolTipSplitArea(t,e,a,i,r){var o=assign({},{activeBgColor:"#000000",activeBgOpacity:.08},e.extra.bar);var n=e.area[3];var l=e.width-e.area[1];i.beginPath();i.setFillStyle(hexToRgb(o.activeBgColor,o.activeBgOpacity));i.rect(n,t-r/2,l-n,r);i.closePath();i.fill();i.setFillStyle("#FFFFFF")}function drawToolTip(t,r,e,o,n,c,d){var l=assign({},{showBox:true,showArrow:true,showCategory:false,bgColor:"#000000",bgOpacity:.7,borderColor:"#000000",borderWidth:0,borderRadius:0,borderOpacity:.7,fontColor:"#FFFFFF",splitLine:true},e.extra.tooltip);if(l.showCategory==true&&e.categories){t.unshift({text:e.categories[e.tooltip.index],color:null})}var x=4*e.pix;var f=5*e.pix;var s=l.showArrow?8*e.pix:0;var p=false;if(e.type=="line"||e.type=="mount"||e.type=="area"||e.type=="candle"||e.type=="mix"){if(l.splitLine==true){drawToolTipSplitLine(e.tooltip.offset.x,e,o,n)}}r=assign({x:0,y:0},r);r.y-=8*e.pix;var g=t.map(function(t){return measureText(t.text,o.fontSize,n)});var h=x+f+4*o.toolTipPadding+Math.max.apply(null,g);var a=2*o.toolTipPadding+t.length*o.toolTipLineHeight;if(l.showBox==false){return}if(r.x-Math.abs(e._scrollDistance_||0)+s+h>e.width){p=true}if(a+r.y>e.height){r.y=e.height-a}n.beginPath();n.setFillStyle(hexToRgb(l.bgColor||o.toolTipBackground,l.bgOpacity||o.toolTipOpacity));n.setLineWidth(l.borderWidth*e.pix);n.setStrokeStyle(hexToRgb(l.borderColor,l.borderOpacity));var i=l.borderRadius;if(p){if(l.showArrow){n.moveTo(r.x,r.y+10*e.pix);n.lineTo(r.x-s,r.y+10*e.pix+5*e.pix)}n.arc(r.x-s-i,r.y+a-i,i,0,Math.PI/2,false);n.arc(r.x-s-Math.round(h)+i,r.y+a-i,i,Math.PI/2,Math.PI,false);n.arc(r.x-s-Math.round(h)+i,r.y+i,i,-Math.PI,-Math.PI/2,false);n.arc(r.x-s-i,r.y+i,i,-Math.PI/2,0,false);if(l.showArrow){n.lineTo(r.x-s,r.y+10*e.pix-5*e.pix);n.lineTo(r.x,r.y+10*e.pix)}}else{if(l.showArrow){n.moveTo(r.x,r.y+10*e.pix);n.lineTo(r.x+s,r.y+10*e.pix-5*e.pix)}n.arc(r.x+s+i,r.y+i,i,-Math.PI,-Math.PI/2,false);n.arc(r.x+s+Math.round(h)-i,r.y+i,i,-Math.PI/2,0,false);n.arc(r.x+s+Math.round(h)-i,r.y+a-i,i,0,Math.PI/2,false);n.arc(r.x+s+i,r.y+a-i,i,Math.PI/2,Math.PI,false);if(l.showArrow){n.lineTo(r.x+s,r.y+10*e.pix+5*e.pix);n.lineTo(r.x,r.y+10*e.pix)}}n.closePath();n.fill();if(l.borderWidth>0){n.stroke()}t.forEach(function(t,e){if(t.color!==null){n.beginPath();n.setFillStyle(t.color);var a=r.x+s+2*o.toolTipPadding;var i=r.y+(o.toolTipLineHeight-o.fontSize)/2+o.toolTipLineHeight*e+o.toolTipPadding+1;if(p){a=r.x-h-s+2*o.toolTipPadding}n.fillRect(a,i,x,o.fontSize);n.closePath()}});t.forEach(function(t,e){var a=r.x+s+2*o.toolTipPadding+x+f;if(p){a=r.x-h-s+2*o.toolTipPadding+ +x+f}var i=r.y+(o.toolTipLineHeight-o.fontSize)/2+o.toolTipLineHeight*e+o.toolTipPadding;n.beginPath();n.setFontSize(o.fontSize);n.setFillStyle(l.fontColor);n.fillText(t.text,a,i+o.fontSize);n.closePath();n.stroke()})}function drawColumnDataPoints(y,v,m,T){let b=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let t=v.chartData.xAxisData,P=t.xAxisPoints,w=t.eachSpacing;let S=assign({},{type:"group",width:w/2,meterBorder:4,meterFillColor:"#FFFFFF",barBorderCircle:false,barBorderRadius:[],seriesGap:2,linearType:"none",linearOpacity:1,customColor:[],colorStop:0},v.extra.column);let A=[];T.save();let C=-2;let D=P.length+2;if(v._scrollDistance_&&v._scrollDistance_!==0&&v.enableScroll===true){T.translate(v._scrollDistance_,0);C=Math.floor(-v._scrollDistance_/w)-2;D=C+v.xAxis.itemCount+4}if(v.tooltip&&v.tooltip.textList&&v.tooltip.textList.length&&b===1){drawToolTipSplitArea(v.tooltip.offset.x,v,m,T,w)}S.customColor=fillCustomColor(S.linearType,S.customColor,y,m);y.forEach(function(a,i){let t,o,x;t=[].concat(v.chartData.yAxisData.ranges[a.index]);o=t.pop();x=t.shift();var f=a.data;switch(S.type){case"group":var r=getDataPoints(f,o,x,P,w,v,m,b);var p=getStackDataPoints(f,o,x,P,w,v,m,i,y,b);A.push(p);r=fixColumeData(r,w,y.length,i,m,v);for(let t=0;t<r.length;t++){let o=r[t];if(o!==null&&t>C&&t<D){var n=o.x-o.width/2;var l=v.height-o.y-v.area[2];T.beginPath();var s=o.color||a.color;var g=o.color||a.color;if(S.linearType!=="none"){var e=T.createLinearGradient(n,o.y,n,v.height-v.area[2]);if(S.linearType=="opacity"){e.addColorStop(0,hexToRgb(s,S.linearOpacity));e.addColorStop(1,hexToRgb(s,1))}else{e.addColorStop(0,hexToRgb(S.customColor[a.linearIndex],S.linearOpacity));e.addColorStop(S.colorStop,hexToRgb(S.customColor[a.linearIndex],S.linearOpacity));e.addColorStop(1,hexToRgb(s,1))}s=e}if(S.barBorderRadius&&S.barBorderRadius.length===4||S.barBorderCircle===true){const h=n;const c=o.y;const d=o.width;const l=v.height-v.area[2]-o.y;if(S.barBorderCircle){S.barBorderRadius=[d/2,d/2,0,0]}let[t,e,a,i]=S.barBorderRadius;let r=Math.min(d/2,l/2);t=t>r?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;T.arc(h+t,c+t,t,-Math.PI,-Math.PI/2);T.arc(h+d-e,c+e,e,-Math.PI/2,0);T.arc(h+d-a,c+l-a,a,0,Math.PI/2);T.arc(h+i,c+l-i,i,Math.PI/2,Math.PI)}else{T.moveTo(n,o.y);T.lineTo(n+o.width,o.y);T.lineTo(n+o.width,v.height-v.area[2]);T.lineTo(n,v.height-v.area[2]);T.lineTo(n,o.y);T.setLineWidth(1);T.setStrokeStyle(g)}T.setFillStyle(s);T.closePath();T.fill()}};break;case"stack":var r=getStackDataPoints(f,o,x,P,w,v,m,i,y,b);A.push(r);r=fixColumeStackData(r,w,y.length,i,m,v,y);for(let e=0;e<r.length;e++){let t=r[e];if(t!==null&&e>C&&e<D){T.beginPath();var s=t.color||a.color;var n=t.x-t.width/2+1;var l=v.height-t.y-v.area[2];var u=v.height-t.y0-v.area[2];if(i>0){l-=u}T.setFillStyle(s);T.moveTo(n,t.y);T.fillRect(n,t.y,t.width,l);T.closePath();T.fill()}};break;case"meter":var r=getDataPoints(f,o,x,P,w,v,m,b);A.push(r);r=fixColumeMeterData(r,w,y.length,i,m,v,S.meterBorder);for(let t=0;t<r.length;t++){let o=r[t];if(o!==null&&t>C&&t<D){T.beginPath();if(i==0&&S.meterBorder>0){T.setStrokeStyle(a.color);T.setLineWidth(S.meterBorder*v.pix)}if(i==0){T.setFillStyle(S.meterFillColor)}else{T.setFillStyle(o.color||a.color)}var n=o.x-o.width/2;var l=v.height-o.y-v.area[2];if(S.barBorderRadius&&S.barBorderRadius.length===4||S.barBorderCircle===true){const h=n;const c=o.y;const d=o.width;const l=v.height-v.area[2]-o.y;if(S.barBorderCircle){S.barBorderRadius=[d/2,d/2,0,0]}let[t,e,a,i]=S.barBorderRadius;let r=Math.min(d/2,l/2);t=t>r?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;T.arc(h+t,c+t,t,-Math.PI,-Math.PI/2);T.arc(h+d-e,c+e,e,-Math.PI/2,0);T.arc(h+d-a,c+l-a,a,0,Math.PI/2);T.arc(h+i,c+l-i,i,Math.PI/2,Math.PI);T.fill()}else{T.moveTo(n,o.y);T.lineTo(n+o.width,o.y);T.lineTo(n+o.width,v.height-v.area[2]);T.lineTo(n,v.height-v.area[2]);T.lineTo(n,o.y);T.fill()}if(i==0&&S.meterBorder>0){T.closePath();T.stroke()}}}break}});if(v.dataLabel!==false&&b===1){y.forEach(function(t,e){let a,i,r;a=[].concat(v.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;switch(S.type){case"group":var n=getDataPoints(o,i,r,P,w,v,m,b);n=fixColumeData(n,w,y.length,e,m,v);drawPointText(n,t,m,T,v);break;case"stack":var n=getStackDataPoints(o,i,r,P,w,v,m,e,y,b);drawPointText(n,t,m,T,v);break;case"meter":var n=getDataPoints(o,i,r,P,w,v,m,b);drawPointText(n,t,m,T,v);break}})}T.restore();return{xAxisPoints:P,calPoints:A,eachSpacing:w}}function drawMountDataPoints(i,n,o,l){let f=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let t=n.chartData.xAxisData,p=t.xAxisPoints,r=t.eachSpacing;let s=assign({},{type:"mount",widthRatio:1,borderWidth:1,barBorderCircle:false,barBorderRadius:[],linearType:"none",linearOpacity:1,customColor:[],colorStop:0},n.extra.mount);s.widthRatio=s.widthRatio<=0?0:s.widthRatio;s.widthRatio=s.widthRatio>=2?2:s.widthRatio;let e=[];l.save();let a=-2;let g=p.length+2;if(n._scrollDistance_&&n._scrollDistance_!==0&&n.enableScroll===true){l.translate(n._scrollDistance_,0);a=Math.floor(-n._scrollDistance_/r)-2;g=a+n.xAxis.itemCount+4}s.customColor=fillCustomColor(s.linearType,s.customColor,i,o);let u,y,v;u=[].concat(n.chartData.yAxisData.ranges[0]);y=u.pop();v=u.shift();var h=getMountDataPoints(i,y,v,p,r,n,s,f);switch(s.type){case"bar":for(let t=0;t<h.length;t++){let o=h[t];if(o!==null&&t>a&&t<g){var c=o.x-r*s.widthRatio/2;var m=n.height-o.y-n.area[2];l.beginPath();var d=o.color||i[t].color;var T=o.color||i[t].color;if(s.linearType!=="none"){var x=l.createLinearGradient(c,o.y,c,n.height-n.area[2]);if(s.linearType=="opacity"){x.addColorStop(0,hexToRgb(d,s.linearOpacity));x.addColorStop(1,hexToRgb(d,1))}else{x.addColorStop(0,hexToRgb(s.customColor[i[t].linearIndex],s.linearOpacity));x.addColorStop(s.colorStop,hexToRgb(s.customColor[i[t].linearIndex],s.linearOpacity));x.addColorStop(1,hexToRgb(d,1))}d=x}if(s.barBorderRadius&&s.barBorderRadius.length===4||s.barBorderCircle===true){const b=c;const P=o.y;const w=o.width;const m=n.height-n.area[2]-o.y-s.borderWidth*n.pix/2;if(s.barBorderCircle){s.barBorderRadius=[w/2,w/2,0,0]}let[t,e,a,i]=s.barBorderRadius;let r=Math.min(w/2,m/2);t=t>r?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;l.arc(b+t,P+t,t,-Math.PI,-Math.PI/2);l.arc(b+w-e,P+e,e,-Math.PI/2,0);l.arc(b+w-a,P+m-a,a,0,Math.PI/2);l.arc(b+i,P+m-i,i,Math.PI/2,Math.PI)}else{l.moveTo(c,o.y);l.lineTo(c+o.width,o.y);l.lineTo(c+o.width,n.height-n.area[2]);l.lineTo(c,n.height-n.area[2]);l.lineTo(c,o.y)}l.setStrokeStyle(T);l.setFillStyle(d);if(s.borderWidth>0){l.setLineWidth(s.borderWidth*n.pix);l.closePath();l.stroke()}l.fill()}};break;case"triangle":for(let e=0;e<h.length;e++){let t=h[e];if(t!==null&&e>a&&e<g){var c=t.x-r*s.widthRatio/2;var m=n.height-t.y-n.area[2];l.beginPath();var d=t.color||i[e].color;var T=t.color||i[e].color;if(s.linearType!=="none"){var x=l.createLinearGradient(c,t.y,c,n.height-n.area[2]);if(s.linearType=="opacity"){x.addColorStop(0,hexToRgb(d,s.linearOpacity));x.addColorStop(1,hexToRgb(d,1))}else{x.addColorStop(0,hexToRgb(s.customColor[i[e].linearIndex],s.linearOpacity));x.addColorStop(s.colorStop,hexToRgb(s.customColor[i[e].linearIndex],s.linearOpacity));x.addColorStop(1,hexToRgb(d,1))}d=x}l.moveTo(c,n.height-n.area[2]);l.lineTo(t.x,t.y);l.lineTo(c+t.width,n.height-n.area[2]);l.setStrokeStyle(T);l.setFillStyle(d);if(s.borderWidth>0){l.setLineWidth(s.borderWidth*n.pix);l.stroke()}l.fill()}};break;case"mount":for(let e=0;e<h.length;e++){let t=h[e];if(t!==null&&e>a&&e<g){var c=t.x-r*s.widthRatio/2;var m=n.height-t.y-n.area[2];l.beginPath();var d=t.color||i[e].color;var T=t.color||i[e].color;if(s.linearType!=="none"){var x=l.createLinearGradient(c,t.y,c,n.height-n.area[2]);if(s.linearType=="opacity"){x.addColorStop(0,hexToRgb(d,s.linearOpacity));x.addColorStop(1,hexToRgb(d,1))}else{x.addColorStop(0,hexToRgb(s.customColor[i[e].linearIndex],s.linearOpacity));x.addColorStop(s.colorStop,hexToRgb(s.customColor[i[e].linearIndex],s.linearOpacity));x.addColorStop(1,hexToRgb(d,1))}d=x}l.moveTo(c,n.height-n.area[2]);l.bezierCurveTo(t.x-t.width/4,n.height-n.area[2],t.x-t.width/4,t.y,t.x,t.y);l.bezierCurveTo(t.x+t.width/4,t.y,t.x+t.width/4,n.height-n.area[2],c+t.width,n.height-n.area[2]);l.setStrokeStyle(T);l.setFillStyle(d);if(s.borderWidth>0){l.setLineWidth(s.borderWidth*n.pix);l.stroke()}l.fill()}};break;case"sharp":for(let e=0;e<h.length;e++){let t=h[e];if(t!==null&&e>a&&e<g){var c=t.x-r*s.widthRatio/2;var m=n.height-t.y-n.area[2];l.beginPath();var d=t.color||i[e].color;var T=t.color||i[e].color;if(s.linearType!=="none"){var x=l.createLinearGradient(c,t.y,c,n.height-n.area[2]);if(s.linearType=="opacity"){x.addColorStop(0,hexToRgb(d,s.linearOpacity));x.addColorStop(1,hexToRgb(d,1))}else{x.addColorStop(0,hexToRgb(s.customColor[i[e].linearIndex],s.linearOpacity));x.addColorStop(s.colorStop,hexToRgb(s.customColor[i[e].linearIndex],s.linearOpacity));x.addColorStop(1,hexToRgb(d,1))}d=x}l.moveTo(c,n.height-n.area[2]);l.quadraticCurveTo(t.x-0,n.height-n.area[2]-m/4,t.x,t.y);l.quadraticCurveTo(t.x+0,n.height-n.area[2]-m/4,c+t.width,n.height-n.area[2]);l.setStrokeStyle(T);l.setFillStyle(d);if(s.borderWidth>0){l.setLineWidth(s.borderWidth*n.pix);l.stroke()}l.fill()}};break}if(n.dataLabel!==false&&f===1){let t,e,a;t=[].concat(n.chartData.yAxisData.ranges[0]);e=t.pop();a=t.shift();var h=getMountDataPoints(i,e,a,p,r,n,s,f);drawMountPointText(h,i,o,l,n)}l.restore();return{xAxisPoints:p,calPoints:h,eachSpacing:r}}function drawBarDataPoints(y,v,m,T){let b=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let P=[];let w=(v.height-v.area[0]-v.area[2])/v.categories.length;for(let t=0;t<v.categories.length;t++){P.push(v.area[0]+w/2+w*t)}let S=assign({},{type:"group",width:w/2,meterBorder:4,meterFillColor:"#FFFFFF",barBorderCircle:false,barBorderRadius:[],seriesGap:2,linearType:"none",linearOpacity:1,customColor:[],colorStop:0},v.extra.bar);let A=[];T.save();let C=-2;let D=P.length+2;if(v.tooltip&&v.tooltip.textList&&v.tooltip.textList.length&&b===1){drawBarToolTipSplitArea(v.tooltip.offset.y,v,m,T,w)}S.customColor=fillCustomColor(S.linearType,S.customColor,y,m);y.forEach(function(a,t){let o,e,d;o=[].concat(v.chartData.xAxisData.ranges);d=o.pop();e=o.shift();var x=a.data;switch(S.type){case"group":var i=getBarDataPoints(x,e,d,P,w,v,m,b);var f=getBarStackDataPoints(x,e,d,P,w,v,m,t,y,b);A.push(f);i=fixBarData(i,w,y.length,t,m,v);for(let t=0;t<i.length;t++){let o=i[t];if(o!==null&&t>C&&t<D){var n=v.area[3];var r=o.y-o.width/2;var p=o.height;T.beginPath();var l=o.color||a.color;var g=o.color||a.color;if(S.linearType!=="none"){var s=T.createLinearGradient(n,o.y,o.x,o.y);if(S.linearType=="opacity"){s.addColorStop(0,hexToRgb(l,S.linearOpacity));s.addColorStop(1,hexToRgb(l,1))}else{s.addColorStop(0,hexToRgb(S.customColor[a.linearIndex],S.linearOpacity));s.addColorStop(S.colorStop,hexToRgb(S.customColor[a.linearIndex],S.linearOpacity));s.addColorStop(1,hexToRgb(l,1))}l=s}if(S.barBorderRadius&&S.barBorderRadius.length===4||S.barBorderCircle===true){const u=n;const h=o.width;const c=o.y-o.width/2;const p=o.height;if(S.barBorderCircle){S.barBorderRadius=[h/2,h/2,0,0]}let[t,e,a,i]=S.barBorderRadius;let r=Math.min(h/2,p/2);t=t>r?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;T.arc(u+i,c+i,i,-Math.PI,-Math.PI/2);T.arc(o.x-t,c+t,t,-Math.PI/2,0);T.arc(o.x-e,c+h-e,e,0,Math.PI/2);T.arc(u+a,c+h-a,a,Math.PI/2,Math.PI)}else{T.moveTo(n,r);T.lineTo(o.x,r);T.lineTo(o.x,r+o.width);T.lineTo(n,r+o.width);T.lineTo(n,r);T.setLineWidth(1);T.setStrokeStyle(g)}T.setFillStyle(l);T.closePath();T.fill()}};break;case"stack":var i=getBarStackDataPoints(x,e,d,P,w,v,m,t,y,b);A.push(i);i=fixBarStackData(i,w,y.length,t,m,v,y);for(let e=0;e<i.length;e++){let t=i[e];if(t!==null&&e>C&&e<D){T.beginPath();var l=t.color||a.color;var n=t.x0;T.setFillStyle(l);T.moveTo(n,t.y-t.width/2);T.fillRect(n,t.y-t.width/2,t.height,t.width);T.closePath();T.fill()}};break}});if(v.dataLabel!==false&&b===1){y.forEach(function(t,e){let a,i,r;a=[].concat(v.chartData.xAxisData.ranges);r=a.pop();i=a.shift();var o=t.data;switch(S.type){case"group":var n=getBarDataPoints(o,i,r,P,w,v,m,b);n=fixBarData(n,w,y.length,e,m,v);drawBarPointText(n,t,m,T,v);break;case"stack":var n=getBarStackDataPoints(o,i,r,P,w,v,m,e,y,b);drawBarPointText(n,t,m,T,v);break}})}return{yAxisPoints:P,calPoints:A,eachSpacing:w}}function drawCandleDataPoints(e,t,h,c,d){var u=arguments.length>5&&arguments[5]!==undefined?arguments[5]:1;var s=assign({},{color:{},average:{}},h.extra.candle);s.color=assign({},{upLine:"#f04864",upFill:"#f04864",downLine:"#2fc25b",downFill:"#2fc25b"},s.color);s.average=assign({},{show:false,name:[],day:[],color:c.color},s.average);h.extra.candle=s;let a=h.chartData.xAxisData,x=a.xAxisPoints,f=a.eachSpacing;let y=[];d.save();let p=-2;let v=x.length+2;let g=0;let m=h.width+f;if(h._scrollDistance_&&h._scrollDistance_!==0&&h.enableScroll===true){d.translate(h._scrollDistance_,0);p=Math.floor(-h._scrollDistance_/f)-2;v=p+h.xAxis.itemCount+4;g=-h._scrollDistance_-f*2+h.area[3];m=g+(h.xAxis.itemCount+4)*f}if(s.average.show||t){t.forEach(function(e,t){let a,i,r;a=[].concat(h.chartData.yAxisData.ranges[e.index]);i=a.pop();r=a.shift();var o=e.data;var n=getDataPoints(o,i,r,x,f,h,c,u);var l=splitPoints(n,e);for(let t=0;t<l.length;t++){let i=l[t];d.beginPath();d.setStrokeStyle(e.color);d.setLineWidth(1);if(i.length===1){d.moveTo(i[0].x,i[0].y);d.arc(i[0].x,i[0].y,1,0,2*Math.PI)}else{d.moveTo(i[0].x,i[0].y);let a=0;for(let e=0;e<i.length;e++){let t=i[e];if(a==0&&t.x>g){d.moveTo(t.x,t.y);a=1}if(e>0&&t.x>g&&t.x<m){var s=createCurveControlPoints(i,e-1);d.bezierCurveTo(s.ctrA.x,s.ctrA.y,s.ctrB.x,s.ctrB.y,t.x,t.y)}}d.moveTo(i[0].x,i[0].y)}d.closePath();d.stroke()}})}e.forEach(function(t,e){let a,i,r;a=[].concat(h.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;var n=getCandleDataPoints(o,i,r,x,f,h,c,u);y.push(n);var l=splitPoints(n,t);for(let e=0;e<l[0].length;e++){if(e>p&&e<v){let t=l[0][e];d.beginPath();if(o[e][1]-o[e][0]>0){d.setStrokeStyle(s.color.upLine);d.setFillStyle(s.color.upFill);d.setLineWidth(1*h.pix);d.moveTo(t[3].x,t[3].y);d.lineTo(t[1].x,t[1].y);d.lineTo(t[1].x-f/4,t[1].y);d.lineTo(t[0].x-f/4,t[0].y);d.lineTo(t[0].x,t[0].y);d.lineTo(t[2].x,t[2].y);d.lineTo(t[0].x,t[0].y);d.lineTo(t[0].x+f/4,t[0].y);d.lineTo(t[1].x+f/4,t[1].y);d.lineTo(t[1].x,t[1].y);d.moveTo(t[3].x,t[3].y)}else{d.setStrokeStyle(s.color.downLine);d.setFillStyle(s.color.downFill);d.setLineWidth(1*h.pix);d.moveTo(t[3].x,t[3].y);d.lineTo(t[0].x,t[0].y);d.lineTo(t[0].x-f/4,t[0].y);d.lineTo(t[1].x-f/4,t[1].y);d.lineTo(t[1].x,t[1].y);d.lineTo(t[2].x,t[2].y);d.lineTo(t[1].x,t[1].y);d.lineTo(t[1].x+f/4,t[1].y);d.lineTo(t[0].x+f/4,t[0].y);d.lineTo(t[0].x,t[0].y);d.moveTo(t[3].x,t[3].y)}d.closePath();d.fill();d.stroke()}}});d.restore();return{xAxisPoints:x,calPoints:y,eachSpacing:f}}function drawAreaDataPoints(t,s,h,c){var d=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var x=assign({},{type:"straight",opacity:.2,addLine:false,width:2,gradient:false},s.extra.area);let e=s.chartData.xAxisData,y=e.xAxisPoints,f=e.eachSpacing;let p=s.height-s.area[2];let v=[];c.save();let g=0;let u=s.width+f;if(s._scrollDistance_&&s._scrollDistance_!==0&&s.enableScroll===true){c.translate(s._scrollDistance_,0);g=-s._scrollDistance_-f*2+s.area[3];u=g+(s.xAxis.itemCount+4)*f}t.forEach(function(e,t){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[e.index]);i=a.pop();r=a.shift();let o=e.data;let n=getDataPoints(o,i,r,y,f,s,h,d);v.push(n);let l=splitPoints(n,e);for(let t=0;t<l.length;t++){let r=l[t];c.beginPath();c.setStrokeStyle(hexToRgb(e.color,x.opacity));if(x.gradient){let t=c.createLinearGradient(0,s.area[0],0,s.height-s.area[2]);t.addColorStop("0",hexToRgb(e.color,x.opacity));t.addColorStop("1.0",hexToRgb("#FFFFFF",.1));c.setFillStyle(t)}else{c.setFillStyle(hexToRgb(e.color,x.opacity))}c.setLineWidth(x.width*s.pix);if(r.length>1){let t=r[0];let e=r[r.length-1];c.moveTo(t.x,t.y);let i=0;if(x.type==="curve"){for(let a=0;a<r.length;a++){let e=r[a];if(i==0&&e.x>g){c.moveTo(e.x,e.y);i=1}if(a>0&&e.x>g&&e.x<u){let t=createCurveControlPoints(r,a-1);c.bezierCurveTo(t.ctrA.x,t.ctrA.y,t.ctrB.x,t.ctrB.y,e.x,e.y)}}}if(x.type==="straight"){for(let e=0;e<r.length;e++){let t=r[e];if(i==0&&t.x>g){c.moveTo(t.x,t.y);i=1}if(e>0&&t.x>g&&t.x<u){c.lineTo(t.x,t.y)}}}if(x.type==="step"){for(let e=0;e<r.length;e++){let t=r[e];if(i==0&&t.x>g){c.moveTo(t.x,t.y);i=1}if(e>0&&t.x>g&&t.x<u){c.lineTo(t.x,r[e-1].y);c.lineTo(t.x,t.y)}}}c.lineTo(e.x,p);c.lineTo(t.x,p);c.lineTo(t.x,t.y)}else{let t=r[0];c.moveTo(t.x-f/2,t.y);c.lineTo(t.x+f/2,t.y);c.lineTo(t.x+f/2,p);c.lineTo(t.x-f/2,p);c.moveTo(t.x-f/2,t.y)}c.closePath();c.fill();if(x.addLine){if(e.lineType=="dash"){let t=e.dashLength?e.dashLength:8;t*=s.pix;c.setLineDash([t,t])}c.beginPath();c.setStrokeStyle(e.color);c.setLineWidth(x.width*s.pix);if(r.length===1){c.moveTo(r[0].x,r[0].y);c.arc(r[0].x,r[0].y,1,0,2*Math.PI)}else{c.moveTo(r[0].x,r[0].y);let i=0;if(x.type==="curve"){for(let a=0;a<r.length;a++){let e=r[a];if(i==0&&e.x>g){c.moveTo(e.x,e.y);i=1}if(a>0&&e.x>g&&e.x<u){let t=createCurveControlPoints(r,a-1);c.bezierCurveTo(t.ctrA.x,t.ctrA.y,t.ctrB.x,t.ctrB.y,e.x,e.y)}}}if(x.type==="straight"){for(let e=0;e<r.length;e++){let t=r[e];if(i==0&&t.x>g){c.moveTo(t.x,t.y);i=1}if(e>0&&t.x>g&&t.x<u){c.lineTo(t.x,t.y)}}}if(x.type==="step"){for(let e=0;e<r.length;e++){let t=r[e];if(i==0&&t.x>g){c.moveTo(t.x,t.y);i=1}if(e>0&&t.x>g&&t.x<u){c.lineTo(t.x,r[e-1].y);c.lineTo(t.x,t.y)}}}c.moveTo(r[0].x,r[0].y)}c.stroke();c.setLineDash([])}}if(s.dataPointShape!==false){drawPointShape(n,e.color,e.pointShape,c,s)}});if(s.dataLabel!==false&&d===1){t.forEach(function(t,e){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;var n=getDataPoints(o,i,r,y,f,s,h,d);drawPointText(n,t,h,c,s)})}c.restore();return{xAxisPoints:y,calPoints:v,eachSpacing:f}}function drawScatterDataPoints(t,s,h,c){var d=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var i=assign({},{type:"circle"},s.extra.scatter);let e=s.chartData.xAxisData,x=e.xAxisPoints,f=e.eachSpacing;var r=[];c.save();let a=0;let o=s.width+f;if(s._scrollDistance_&&s._scrollDistance_!==0&&s.enableScroll===true){c.translate(s._scrollDistance_,0);a=-s._scrollDistance_-f*2+s.area[3];o=a+(s.xAxis.itemCount+4)*f}t.forEach(function(t,e){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;var n=getDataPoints(o,i,r,x,f,s,h,d);c.beginPath();c.setStrokeStyle(t.color);c.setFillStyle(t.color);c.setLineWidth(1*s.pix);var l=t.pointShape;if(l==="diamond"){n.forEach(function(t,e){if(t!==null){c.moveTo(t.x,t.y-4.5);c.lineTo(t.x-4.5,t.y);c.lineTo(t.x,t.y+4.5);c.lineTo(t.x+4.5,t.y);c.lineTo(t.x,t.y-4.5)}})}else if(l==="circle"){n.forEach(function(t,e){if(t!==null){c.moveTo(t.x+2.5*s.pix,t.y);c.arc(t.x,t.y,3*s.pix,0,2*Math.PI,false)}})}else if(l==="square"){n.forEach(function(t,e){if(t!==null){c.moveTo(t.x-3.5,t.y-3.5);c.rect(t.x-3.5,t.y-3.5,7,7)}})}else if(l==="triangle"){n.forEach(function(t,e){if(t!==null){c.moveTo(t.x,t.y-4.5);c.lineTo(t.x-4.5,t.y+4.5);c.lineTo(t.x+4.5,t.y+4.5);c.lineTo(t.x,t.y-4.5)}})}else if(l==="triangle"){return}c.closePath();c.fill();c.stroke()});if(s.dataLabel!==false&&d===1){t.forEach(function(t,e){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;var n=getDataPoints(o,i,r,x,f,s,h,d);drawPointText(n,t,h,c,s)})}c.restore();return{xAxisPoints:x,calPoints:r,eachSpacing:f}}function drawBubbleDataPoints(l,s,h,c){var d=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var x=assign({},{opacity:1,border:2},s.extra.bubble);let t=s.chartData.xAxisData,f=t.xAxisPoints,p=t.eachSpacing;var e=[];c.save();let a=0;let i=s.width+p;if(s._scrollDistance_&&s._scrollDistance_!==0&&s.enableScroll===true){c.translate(s._scrollDistance_,0);a=-s._scrollDistance_-p*2+s.area[3];i=a+(s.xAxis.itemCount+4)*p}l.forEach(function(t,e){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;var n=getDataPoints(o,i,r,f,p,s,h,d);c.beginPath();c.setStrokeStyle(t.color);c.setLineWidth(x.border*s.pix);c.setFillStyle(hexToRgb(t.color,x.opacity));n.forEach(function(t,e){c.moveTo(t.x+t.r,t.y);c.arc(t.x,t.y,t.r*s.pix,0,2*Math.PI,false)});c.closePath();c.fill();c.stroke();if(s.dataLabel!==false&&d===1){n.forEach(function(t,e){c.beginPath();var a=l.textSize*s.pix||h.fontSize;c.setFontSize(a);c.setFillStyle(l.textColor||"#FFFFFF");c.setTextAlign("center");c.fillText(String(t.t),t.x,t.y+a/2);c.closePath();c.stroke();c.setTextAlign("left")})}});c.restore();return{xAxisPoints:f,calPoints:e,eachSpacing:p}}function drawLineDataPoints(t,s,h,c){var d=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var x=assign({},{type:"straight",width:2},s.extra.line);x.width*=s.pix;let e=s.chartData.xAxisData,f=e.xAxisPoints,p=e.eachSpacing;var y=[];c.save();let g=0;let u=s.width+p;if(s._scrollDistance_&&s._scrollDistance_!==0&&s.enableScroll===true){c.translate(s._scrollDistance_,0);g=-s._scrollDistance_-p*2+s.area[3];u=g+(s.xAxis.itemCount+4)*p}t.forEach(function(e,t){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[e.index]);i=a.pop();r=a.shift();var o=e.data;var n=getDataPoints(o,i,r,f,p,s,h,d);y.push(n);var l=splitPoints(n,e);if(e.lineType=="dash"){let t=e.dashLength?e.dashLength:8;t*=s.pix;c.setLineDash([t,t])}c.beginPath();c.setStrokeStyle(e.color);c.setLineWidth(x.width);l.forEach(function(i,t){if(i.length===1){c.moveTo(i[0].x,i[0].y);c.arc(i[0].x,i[0].y,1,0,2*Math.PI)}else{c.moveTo(i[0].x,i[0].y);let a=0;if(x.type==="curve"){for(let e=0;e<i.length;e++){let t=i[e];if(a==0&&t.x>g){c.moveTo(t.x,t.y);a=1}if(e>0&&t.x>g&&t.x<u){var r=createCurveControlPoints(i,e-1);c.bezierCurveTo(r.ctrA.x,r.ctrA.y,r.ctrB.x,r.ctrB.y,t.x,t.y)}}}if(x.type==="straight"){for(let e=0;e<i.length;e++){let t=i[e];if(a==0&&t.x>g){c.moveTo(t.x,t.y);a=1}if(e>0&&t.x>g&&t.x<u){c.lineTo(t.x,t.y)}}}if(x.type==="step"){for(let e=0;e<i.length;e++){let t=i[e];if(a==0&&t.x>g){c.moveTo(t.x,t.y);a=1}if(e>0&&t.x>g&&t.x<u){c.lineTo(t.x,i[e-1].y);c.lineTo(t.x,t.y)}}}c.moveTo(i[0].x,i[0].y)}});c.stroke();c.setLineDash([]);if(s.dataPointShape!==false){drawPointShape(n,e.color,e.pointShape,c,s)}});if(s.dataLabel!==false&&d===1){t.forEach(function(t,e){let a,i,r;a=[].concat(s.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;var n=getDataPoints(o,i,r,f,p,s,h,d);drawPointText(n,t,h,c,s)})}c.restore();return{xAxisPoints:f,calPoints:y,eachSpacing:p}}function drawMixDataPoints(t,v,m,T){let D=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let e=v.chartData.xAxisData,b=e.xAxisPoints,P=e.eachSpacing;let w=assign({},{width:P/2,barBorderCircle:false,barBorderRadius:[],seriesGap:2,linearType:"none",linearOpacity:1,customColor:[],colorStop:0},v.extra.mix.column);let S=assign({},{opacity:.2,gradient:false},v.extra.mix.area);let M=v.height-v.area[2];let L=[];var _=0;var F=0;t.forEach(function(t,e){if(t.type=="column"){F+=1}});T.save();let k=-2;let R=b.length+2;let A=0;let C=v.width+P;if(v._scrollDistance_&&v._scrollDistance_!==0&&v.enableScroll===true){T.translate(v._scrollDistance_,0);k=Math.floor(-v._scrollDistance_/P)-2;R=k+v.xAxis.itemCount+4;A=-v._scrollDistance_-P*2+v.area[3];C=A+(v.xAxis.itemCount+4)*P}w.customColor=fillCustomColor(w.linearType,w.customColor,t,m);t.forEach(function(n,t){let o,x,f;o=[].concat(v.chartData.yAxisData.ranges[n.index]);x=o.pop();f=o.shift();var p=n.data;var a=getDataPoints(p,x,f,b,P,v,m,D);L.push(a);if(n.type=="column"){a=fixColumeData(a,P,F,_,m,v);for(let t=0;t<a.length;t++){let o=a[t];if(o!==null&&t>k&&t<R){var l=o.x-o.width/2;var s=v.height-o.y-v.area[2];T.beginPath();var e=o.color||n.color;var g=o.color||n.color;if(w.linearType!=="none"){var i=T.createLinearGradient(l,o.y,l,v.height-v.area[2]);if(w.linearType=="opacity"){i.addColorStop(0,hexToRgb(e,w.linearOpacity));i.addColorStop(1,hexToRgb(e,1))}else{i.addColorStop(0,hexToRgb(w.customColor[n.linearIndex],w.linearOpacity));i.addColorStop(w.colorStop,hexToRgb(w.customColor[n.linearIndex],w.linearOpacity));i.addColorStop(1,hexToRgb(e,1))}e=i}if(w.barBorderRadius&&w.barBorderRadius.length===4||w.barBorderCircle){const h=l;const c=o.y;const d=o.width;const s=v.height-v.area[2]-o.y;if(w.barBorderCircle){w.barBorderRadius=[d/2,d/2,0,0]}let[t,e,a,i]=w.barBorderRadius;let r=Math.min(d/2,s/2);t=t>r?r:t;e=e>r?r:e;a=a>r?r:a;i=i>r?r:i;t=t<0?0:t;e=e<0?0:e;a=a<0?0:a;i=i<0?0:i;T.arc(h+t,c+t,t,-Math.PI,-Math.PI/2);T.arc(h+d-e,c+e,e,-Math.PI/2,0);T.arc(h+d-a,c+s-a,a,0,Math.PI/2);T.arc(h+i,c+s-i,i,Math.PI/2,Math.PI)}else{T.moveTo(l,o.y);T.lineTo(l+o.width,o.y);T.lineTo(l+o.width,v.height-v.area[2]);T.lineTo(l,v.height-v.area[2]);T.lineTo(l,o.y);T.setLineWidth(1);T.setStrokeStyle(g)}T.setFillStyle(e);T.closePath();T.fill()}}_+=1}if(n.type=="area"){let e=splitPoints(a,n);for(let t=0;t<e.length;t++){let i=e[t];T.beginPath();T.setStrokeStyle(n.color);T.setStrokeStyle(hexToRgb(n.color,S.opacity));if(S.gradient){let t=T.createLinearGradient(0,v.area[0],0,v.height-v.area[2]);t.addColorStop("0",hexToRgb(n.color,S.opacity));t.addColorStop("1.0",hexToRgb("#FFFFFF",.1));T.setFillStyle(t)}else{T.setFillStyle(hexToRgb(n.color,S.opacity))}T.setLineWidth(2*v.pix);if(i.length>1){var r=i[0];let t=i[i.length-1];T.moveTo(r.x,r.y);let a=0;if(n.style==="curve"){for(let e=0;e<i.length;e++){let t=i[e];if(a==0&&t.x>A){T.moveTo(t.x,t.y);a=1}if(e>0&&t.x>A&&t.x<C){var u=createCurveControlPoints(i,e-1);T.bezierCurveTo(u.ctrA.x,u.ctrA.y,u.ctrB.x,u.ctrB.y,t.x,t.y)}}}else{for(let e=0;e<i.length;e++){let t=i[e];if(a==0&&t.x>A){T.moveTo(t.x,t.y);a=1}if(e>0&&t.x>A&&t.x<C){T.lineTo(t.x,t.y)}}}T.lineTo(t.x,M);T.lineTo(r.x,M);T.lineTo(r.x,r.y)}else{let t=i[0];T.moveTo(t.x-P/2,t.y);T.lineTo(t.x+P/2,t.y);T.lineTo(t.x+P/2,M);T.lineTo(t.x-P/2,M);T.moveTo(t.x-P/2,t.y)}T.closePath();T.fill()}}if(n.type=="line"){var y=splitPoints(a,n);y.forEach(function(i,t){if(n.lineType=="dash"){let t=n.dashLength?n.dashLength:8;t*=v.pix;T.setLineDash([t,t])}T.beginPath();T.setStrokeStyle(n.color);T.setLineWidth(2*v.pix);if(i.length===1){T.moveTo(i[0].x,i[0].y);T.arc(i[0].x,i[0].y,1,0,2*Math.PI)}else{T.moveTo(i[0].x,i[0].y);let a=0;if(n.style=="curve"){for(let e=0;e<i.length;e++){let t=i[e];if(a==0&&t.x>A){T.moveTo(t.x,t.y);a=1}if(e>0&&t.x>A&&t.x<C){var r=createCurveControlPoints(i,e-1);T.bezierCurveTo(r.ctrA.x,r.ctrA.y,r.ctrB.x,r.ctrB.y,t.x,t.y)}}}else{for(let e=0;e<i.length;e++){let t=i[e];if(a==0&&t.x>A){T.moveTo(t.x,t.y);a=1}if(e>0&&t.x>A&&t.x<C){T.lineTo(t.x,t.y)}}}T.moveTo(i[0].x,i[0].y)}T.stroke();T.setLineDash([])})}if(n.type=="point"){n.addPoint=true}if(n.addPoint==true&&n.type!=="column"){drawPointShape(a,n.color,n.pointShape,T,v)}});if(v.dataLabel!==false&&D===1){var _=0;t.forEach(function(t,e){let a,i,r;a=[].concat(v.chartData.yAxisData.ranges[t.index]);i=a.pop();r=a.shift();var o=t.data;var n=getDataPoints(o,i,r,b,P,v,m,D);if(t.type!=="column"){drawPointText(n,t,m,T,v)}else{n=fixColumeData(n,P,F,_,m,v);drawPointText(n,t,m,T,v);_+=1}})}T.restore();return{xAxisPoints:b,calPoints:L,eachSpacing:P}}function drawToolTipBridge(t,e,a,i,r,o){var n=t.extra.tooltip||{};if(n.horizentalLine&&t.tooltip&&i===1&&(t.type=="line"||t.type=="area"||t.type=="column"||t.type=="mount"||t.type=="candle"||t.type=="mix")){drawToolTipHorizentalLine(t,e,a,r,o)}a.save();if(t._scrollDistance_&&t._scrollDistance_!==0&&t.enableScroll===true){a.translate(t._scrollDistance_,0)}if(t.tooltip&&t.tooltip.textList&&t.tooltip.textList.length&&i===1){drawToolTip(t.tooltip.textList,t.tooltip.offset,t,e,a,r,o)}a.restore()}function drawXAxis(r,l,s,h){let t=l.chartData.xAxisData,c=t.xAxisPoints,e=t.startX,a=t.endX,d=t.eachSpacing;var p="center";if(l.type=="bar"||l.type=="line"||l.type=="area"||l.type=="scatter"||l.type=="bubble"){p=l.xAxis.boundaryGap}var x=l.height-l.area[2];var i=l.area[0];if(l.enableScroll&&l.xAxis.scrollShow){var o=l.height-l.area[2]+s.xAxisHeight;var n=a-e;var g=d*(c.length-1);if(l.type=="mount"&&l.extra&&l.extra.mount&&l.extra.mount.widthRatio&&l.extra.mount.widthRatio>1){if(l.extra.mount.widthRatio>2)l.extra.mount.widthRatio=2;g+=(l.extra.mount.widthRatio-1)*d}var u=n*n/g;var y=0;if(l._scrollDistance_){y=-l._scrollDistance_*n/g}h.beginPath();h.setLineCap("round");h.setLineWidth(6*l.pix);h.setStrokeStyle(l.xAxis.scrollBackgroundColor||"#EFEBEF");h.moveTo(e,o);h.lineTo(a,o);h.stroke();h.closePath();h.beginPath();h.setLineCap("round");h.setLineWidth(6*l.pix);h.setStrokeStyle(l.xAxis.scrollColor||"#A6A6A6");h.moveTo(e+y,o);h.lineTo(e+y+u,o);h.stroke();h.closePath();h.setLineCap("butt")}h.save();if(l._scrollDistance_&&l._scrollDistance_!==0){h.translate(l._scrollDistance_,0)}if(l.xAxis.calibration===true){h.setStrokeStyle(l.xAxis.gridColor||"#cccccc");h.setLineCap("butt");h.setLineWidth(1*l.pix);c.forEach(function(t,e){if(e>0){h.beginPath();h.moveTo(t-d/2,x);h.lineTo(t-d/2,x+3*l.pix);h.closePath();h.stroke()}})}if(l.xAxis.disableGrid!==true){h.setStrokeStyle(l.xAxis.gridColor||"#cccccc");h.setLineCap("butt");h.setLineWidth(1*l.pix);if(l.xAxis.gridType=="dash"){h.setLineDash([l.xAxis.dashLength*l.pix,l.xAxis.dashLength*l.pix])}l.xAxis.gridEval=l.xAxis.gridEval||1;c.forEach(function(t,e){if(e%l.xAxis.gridEval==0){h.beginPath();h.moveTo(t,x);h.lineTo(t,i);h.stroke()}});h.setLineDash([])}if(l.xAxis.disabled!==true){let t=r.length;if(l.xAxis.labelCount){if(l.xAxis.itemCount){t=Math.ceil(r.length/l.xAxis.itemCount*l.xAxis.labelCount)}else{t=l.xAxis.labelCount}t-=1}let e=Math.ceil(r.length/t);let a=[];let i=r.length;for(let t=0;t<i;t++){if(t%e!==0){a.push("")}else{a.push(r[t])}}a[i-1]=r[i-1];var f=l.xAxis.fontSize*l.pix||s.fontSize;if(s._xAxisTextAngle_===0){a.forEach(function(t,e){var a=l.xAxis.formatter?l.xAxis.formatter(t,e,l):t;var i=-measureText(String(a),f,h)/2;if(p=="center"){i+=d/2}var r=0;if(l.xAxis.scrollShow){r=6*l.pix}h.beginPath();h.setFontSize(f);h.setFillStyle(l.xAxis.fontColor||l.fontColor);h.fillText(String(a),c[e]+i,x+f+(s.xAxisHeight-r-f)/2);h.closePath();h.stroke()})}else{a.forEach(function(t,e){var a=l.xAxis.formatter?l.xAxis.formatter(t):t;h.save();h.beginPath();h.setFontSize(f);h.setFillStyle(l.xAxis.fontColor||l.fontColor);var i=measureText(String(a),f,h);var r=c[e];if(p=="center"){r=c[e]+d/2}var o=0;if(l.xAxis.scrollShow){o=6*l.pix}var n=x+6*l.pix+f-f*Math.abs(Math.sin(s._xAxisTextAngle_));if(l.xAxis.rotateAngle<0){r-=f/2;i=0}else{r+=f/2;i=-i}h.translate(r,n);h.rotate(-1*s._xAxisTextAngle_);h.fillText(String(a),i,0);h.closePath();h.stroke();h.restore()})}}h.restore();if(l.xAxis.axisLine){h.beginPath();h.setStrokeStyle(l.xAxis.axisLineColor);h.setLineWidth(1*l.pix);h.moveTo(e,l.height-l.area[2]);h.lineTo(a,l.height-l.area[2]);h.stroke()}}function drawYAxisGrid(c,e,d,a){if(e.yAxis.disableGrid===true){return}let t=e.height-e.area[0]-e.area[2];let i=t/e.yAxis.splitNumber;let r=e.area[3];let o=e.chartData.xAxisData.xAxisPoints,n=e.chartData.xAxisData.eachSpacing;let l=n*(o.length-1);if(e.type=="mount"&&e.extra&&e.extra.mount&&e.extra.mount.widthRatio&&e.extra.mount.widthRatio>1){if(e.extra.mount.widthRatio>2)e.extra.mount.widthRatio=2;l+=(e.extra.mount.widthRatio-1)*n}let x=r+l;let s=[];let h=1;if(e.xAxis.axisLine===false){h=0}for(let t=h;t<e.yAxis.splitNumber+1;t++){s.push(e.height-e.area[2]-i*t)}a.save();if(e._scrollDistance_&&e._scrollDistance_!==0){a.translate(e._scrollDistance_,0)}if(e.yAxis.gridType=="dash"){a.setLineDash([e.yAxis.dashLength*e.pix,e.yAxis.dashLength*e.pix])}a.setStrokeStyle(e.yAxis.gridColor);a.setLineWidth(1*e.pix);s.forEach(function(t,e){a.beginPath();a.moveTo(r,t);a.lineTo(x,t);a.stroke()});a.setLineDash([]);a.restore()}function drawYAxis(e,h,a,c){if(h.yAxis.disabled===true){return}var i=h.height-h.area[0]-h.area[2];var r=i/h.yAxis.splitNumber;var o=h.area[3];var n=h.width-h.area[1];var l=h.height-h.area[2];var t=l+a.xAxisHeight;if(h.xAxis.scrollShow){t-=3*h.pix}if(h.xAxis.rotateLabel){t=h.height-h.area[2]+h.fontSize*h.pix/2}c.beginPath();c.setFillStyle(h.background);if(h.enableScroll==true&&h.xAxis.scrollPosition&&h.xAxis.scrollPosition!=="left"){c.fillRect(0,0,o,t)}if(h.enableScroll==true&&h.xAxis.scrollPosition&&h.xAxis.scrollPosition!=="right"){c.fillRect(n,0,h.width,t)}c.closePath();c.stroke();let d=h.area[3];let x=h.width-h.area[1];let f=h.area[3]+(h.width-h.area[1]-h.area[3])/2;if(h.yAxis.data){for(let e=0;e<h.yAxis.data.length;e++){let s=h.yAxis.data[e];var p=[];if(s.type==="categories"){for(let t=0;t<=s.categories.length;t++){p.push(h.area[0]+i/s.categories.length/2+i/s.categories.length*t)}}else{for(let t=0;t<=h.yAxis.splitNumber;t++){p.push(h.area[0]+r*t)}}if(s.disabled!==true){let t=h.chartData.yAxisData.rangesFormat[e];let o=s.fontSize?s.fontSize*h.pix:a.fontSize;let n=h.chartData.yAxisData.yAxisWidth[e];let l=s.textAlign||"right";t.forEach(function(t,e){var a=p[e];c.beginPath();c.setFontSize(o);c.setLineWidth(1*h.pix);c.setStrokeStyle(s.axisLineColor||"#cccccc");c.setFillStyle(s.fontColor||h.fontColor);let i=0;let r=4*h.pix;if(n.position=="left"){if(s.calibration==true){c.moveTo(d,a);c.lineTo(d-3*h.pix,a);r+=3*h.pix}switch(l){case"left":c.setTextAlign("left");i=d-n.width;break;case"right":c.setTextAlign("right");i=d-r;break;default:c.setTextAlign("center");i=d-n.width/2}c.fillText(String(t),i,a+o/2-3*h.pix)}else if(n.position=="right"){if(s.calibration==true){c.moveTo(x,a);c.lineTo(x+3*h.pix,a);r+=3*h.pix}switch(l){case"left":c.setTextAlign("left");i=x+r;break;case"right":c.setTextAlign("right");i=x+n.width;break;default:c.setTextAlign("center");i=x+n.width/2}c.fillText(String(t),i,a+o/2-3*h.pix)}else if(n.position=="center"){if(s.calibration==true){c.moveTo(f,a);c.lineTo(f-3*h.pix,a);r+=3*h.pix}switch(l){case"left":c.setTextAlign("left");i=f-n.width;break;case"right":c.setTextAlign("right");i=f-r;break;default:c.setTextAlign("center");i=f-n.width/2}c.fillText(String(t),i,a+o/2-3*h.pix)}c.closePath();c.stroke();c.setTextAlign("left")});if(s.axisLine!==false){c.beginPath();c.setStrokeStyle(s.axisLineColor||"#cccccc");c.setLineWidth(1*h.pix);if(n.position=="left"){c.moveTo(d,h.height-h.area[2]);c.lineTo(d,h.area[0])}else if(n.position=="right"){c.moveTo(x,h.height-h.area[2]);c.lineTo(x,h.area[0])}else if(n.position=="center"){c.moveTo(f,h.height-h.area[2]);c.lineTo(f,h.area[0])}c.stroke()}if(h.yAxis.showTitle){let t=s.titleFontSize*h.pix||a.fontSize;let e=s.title;c.beginPath();c.setFontSize(t);c.setFillStyle(s.titleFontColor||h.fontColor);if(n.position=="left"){c.fillText(e,d-measureText(e,t,c)/2+(s.titleOffsetX||0),h.area[0]-(10-(s.titleOffsetY||0))*h.pix)}else if(n.position=="right"){c.fillText(e,x-measureText(e,t,c)/2+(s.titleOffsetX||0),h.area[0]-(10-(s.titleOffsetY||0))*h.pix)}else if(n.position=="center"){c.fillText(e,f-measureText(e,t,c)/2+(s.titleOffsetX||0),h.area[0]-(10-(s.titleOffsetY||0))*h.pix)}c.closePath();c.stroke()}if(n.position=="left"){d-=n.width+h.yAxis.padding*h.pix}else{x+=n.width+h.yAxis.padding*h.pix}}}}}function drawLegend(t,l,y,s,e){if(l.legend.show===false){return}let h=e.legendData;let a=h.points;let c=h.area;let d=l.legend.padding*l.pix;let x=l.legend.fontSize*l.pix;let f=15*l.pix;let p=5*l.pix;let g=l.legend.itemGap*l.pix;let u=Math.max(l.legend.lineHeight*l.pix,x);s.beginPath();s.setLineWidth(l.legend.borderWidth*l.pix);s.setStrokeStyle(l.legend.borderColor);s.setFillStyle(l.legend.backgroundColor);s.moveTo(c.start.x,c.start.y);s.rect(c.start.x,c.start.y,c.width,c.height);s.closePath();s.fill();s.stroke();a.forEach(function(i,t){let e=0;let a=0;e=h.widthArr[t];a=h.heightArr[t];let r=0;let o=0;if(l.legend.position=="top"||l.legend.position=="bottom"){switch(l.legend.float){case"left":r=c.start.x+d;break;case"right":r=c.start.x+c.width-e;break;default:r=c.start.x+(c.width-e)/2}o=c.start.y+d+t*u}else{if(t==0){e=0}else{e=h.widthArr[t-1]}r=c.start.x+d+e;o=c.start.y+d+(c.height-a)/2}s.setFontSize(y.fontSize);for(let a=0;a<i.length;a++){let t=i[a];t.area=[0,0,0,0];t.area[0]=r;t.area[1]=o;t.area[3]=o+u;s.beginPath();s.setLineWidth(1*l.pix);s.setStrokeStyle(t.show?t.color:l.legend.hiddenColor);s.setFillStyle(t.show?t.color:l.legend.hiddenColor);switch(t.legendShape){case"line":s.moveTo(r,o+.5*u-2*l.pix);s.fillRect(r,o+.5*u-2*l.pix,15*l.pix,4*l.pix);break;case"triangle":s.moveTo(r+7.5*l.pix,o+.5*u-5*l.pix);s.lineTo(r+2.5*l.pix,o+.5*u+5*l.pix);s.lineTo(r+12.5*l.pix,o+.5*u+5*l.pix);s.lineTo(r+7.5*l.pix,o+.5*u-5*l.pix);break;case"diamond":s.moveTo(r+7.5*l.pix,o+.5*u-5*l.pix);s.lineTo(r+2.5*l.pix,o+.5*u);s.lineTo(r+7.5*l.pix,o+.5*u+5*l.pix);s.lineTo(r+12.5*l.pix,o+.5*u);s.lineTo(r+7.5*l.pix,o+.5*u-5*l.pix);break;case"circle":s.moveTo(r+7.5*l.pix,o+.5*u);s.arc(r+7.5*l.pix,o+.5*u,5*l.pix,0,2*Math.PI);break;case"rect":s.moveTo(r,o+.5*u-5*l.pix);s.fillRect(r,o+.5*u-5*l.pix,15*l.pix,10*l.pix);break;case"square":s.moveTo(r+5*l.pix,o+.5*u-5*l.pix);s.fillRect(r+5*l.pix,o+.5*u-5*l.pix,10*l.pix,10*l.pix);break;case"none":break;default:s.moveTo(r,o+.5*u-5*l.pix);s.fillRect(r,o+.5*u-5*l.pix,15*l.pix,10*l.pix)}s.closePath();s.fill();s.stroke();r+=f+p;let e=.5*u+.5*x-2;const n=t.legendText?t.legendText:t.name;s.beginPath();s.setFontSize(x);s.setFillStyle(t.show?l.legend.fontColor:l.legend.hiddenColor);s.fillText(n,r,o+e);s.closePath();s.stroke();if(l.legend.position=="top"||l.legend.position=="bottom"){r+=measureText(n,x,s)+g;t.area[2]=r}else{t.area[2]=r+measureText(n,x,s)+g;r-=f+p;o+=u}}})}function drawPieDataPoints(t,r,e,o){var a=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var n=assign({},{activeOpacity:.5,activeRadius:10,offsetAngle:0,labelWidth:15,ringWidth:30,customRadius:0,border:false,borderWidth:2,borderColor:"#FFFFFF",centerColor:"#FFFFFF",linearType:"none",customColor:[]},r.type=="pie"?r.extra.pie:r.extra.ring);var l={x:r.area[3]+(r.width-r.area[1]-r.area[3])/2,y:r.area[0]+(r.height-r.area[0]-r.area[2])/2};if(e.pieChartLinePadding==0){e.pieChartLinePadding=n.activeRadius*r.pix}var i=Math.min((r.width-r.area[1]-r.area[3])/2-e.pieChartLinePadding-e.pieChartTextPadding-e._pieTextMaxLength_,(r.height-r.area[0]-r.area[2])/2-e.pieChartLinePadding-e.pieChartTextPadding);i=i<10?10:i;if(n.customRadius>0){i=n.customRadius*r.pix}t=getPieDataPoints(t,i,a);var h=n.activeRadius*r.pix;n.customColor=fillCustomColor(n.linearType,n.customColor,t,e);t=t.map(function(t){t._start_+=n.offsetAngle*Math.PI/180;return t});t.forEach(function(t,e){if(r.tooltip){if(r.tooltip.index==e){o.beginPath();o.setFillStyle(hexToRgb(t.color,n.activeOpacity||.5));o.moveTo(l.x,l.y);o.arc(l.x,l.y,t._radius_+h,t._start_,t._start_+2*t._proportion_*Math.PI);o.closePath();o.fill()}}o.beginPath();o.setLineWidth(n.borderWidth*r.pix);o.lineJoin="round";o.setStrokeStyle(n.borderColor);var a=t.color;if(n.linearType=="custom"){var i;if(o.createCircularGradient){i=o.createCircularGradient(l.x,l.y,t._radius_)}else{i=o.createRadialGradient(l.x,l.y,0,l.x,l.y,t._radius_)}i.addColorStop(0,hexToRgb(n.customColor[t.linearIndex],1));i.addColorStop(1,hexToRgb(t.color,1));a=i}o.setFillStyle(a);o.moveTo(l.x,l.y);o.arc(l.x,l.y,t._radius_,t._start_,t._start_+2*t._proportion_*Math.PI);o.closePath();o.fill();if(n.border==true){o.stroke()}});if(r.type==="ring"){var s=i*.6;if(typeof n.ringWidth==="number"&&n.ringWidth>0){s=Math.max(0,i-n.ringWidth*r.pix)}o.beginPath();o.setFillStyle(n.centerColor);o.moveTo(l.x,l.y);o.arc(l.x,l.y,s,0,2*Math.PI);o.closePath();o.fill()}if(r.dataLabel!==false&&a===1){drawPieText(t,r,e,o,i,l)}if(a===1&&r.type==="ring"){drawRingTitle(r,e,o,l)}return{center:l,radius:i,series:t}}function drawRoseDataPoints(t,r,e,o){var a=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var n=assign({},{type:"area",activeOpacity:.5,activeRadius:10,offsetAngle:0,labelWidth:15,border:false,borderWidth:2,borderColor:"#FFFFFF",linearType:"none",customColor:[]},r.extra.rose);if(e.pieChartLinePadding==0){e.pieChartLinePadding=n.activeRadius*r.pix}var l={x:r.area[3]+(r.width-r.area[1]-r.area[3])/2,y:r.area[0]+(r.height-r.area[0]-r.area[2])/2};var i=Math.min((r.width-r.area[1]-r.area[3])/2-e.pieChartLinePadding-e.pieChartTextPadding-e._pieTextMaxLength_,(r.height-r.area[0]-r.area[2])/2-e.pieChartLinePadding-e.pieChartTextPadding);i=i<10?10:i;var s=n.minRadius||i*.5;t=getRoseDataPoints(t,n.type,s,i,a);var h=n.activeRadius*r.pix;n.customColor=fillCustomColor(n.linearType,n.customColor,t,e);t=t.map(function(t){t._start_+=(n.offsetAngle||0)*Math.PI/180;return t});t.forEach(function(t,e){if(r.tooltip){if(r.tooltip.index==e){o.beginPath();o.setFillStyle(hexToRgb(t.color,n.activeOpacity||.5));o.moveTo(l.x,l.y);o.arc(l.x,l.y,h+t._radius_,t._start_,t._start_+2*t._rose_proportion_*Math.PI);o.closePath();o.fill()}}o.beginPath();o.setLineWidth(n.borderWidth*r.pix);o.lineJoin="round";o.setStrokeStyle(n.borderColor);var a=t.color;if(n.linearType=="custom"){var i;if(o.createCircularGradient){i=o.createCircularGradient(l.x,l.y,t._radius_)}else{i=o.createRadialGradient(l.x,l.y,0,l.x,l.y,t._radius_)}i.addColorStop(0,hexToRgb(n.customColor[t.linearIndex],1));i.addColorStop(1,hexToRgb(t.color,1));a=i}o.setFillStyle(a);o.moveTo(l.x,l.y);o.arc(l.x,l.y,t._radius_,t._start_,t._start_+2*t._rose_proportion_*Math.PI);o.closePath();o.fill();if(n.border==true){o.stroke()}});if(r.dataLabel!==false&&a===1){drawPieText(t,r,e,o,i,l)}return{center:l,radius:i,series:t}}function drawArcbarDataPoints(a,i,t,r){var e=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var o=assign({},{startAngle:.75,endAngle:.25,type:"default",lineCap:"round",width:12,gap:2,linearType:"none",customColor:[]},i.extra.arcbar);a=getArcbarDataPoints(a,o,e);var n;if(o.centerX||o.centerY){n={x:o.centerX?o.centerX:i.width/2,y:o.centerY?o.centerY:i.height/2}}else{n={x:i.width/2,y:i.height/2}}var l;if(o.radius){l=o.radius}else{l=Math.min(n.x,n.y);l-=5*i.pix;l-=o.width/2}l=l<10?10:l;o.customColor=fillCustomColor(o.linearType,o.customColor,a,t);for(let e=0;e<a.length;e++){let t=a[e];r.setLineWidth(o.width*i.pix);r.setStrokeStyle(o.backgroundColor||"#E9E9E9");r.setLineCap(o.lineCap);r.beginPath();if(o.type=="default"){r.arc(n.x,n.y,l-(o.width*i.pix+o.gap*i.pix)*e,o.startAngle*Math.PI,o.endAngle*Math.PI,false)}else{r.arc(n.x,n.y,l-(o.width*i.pix+o.gap*i.pix)*e,0,2*Math.PI,false)}r.stroke();var s=t.color;if(o.linearType=="custom"){var h=r.createLinearGradient(n.x-l,n.y,n.x+l,n.y);h.addColorStop(1,hexToRgb(o.customColor[t.linearIndex],1));h.addColorStop(0,hexToRgb(t.color,1));s=h}r.setLineWidth(o.width*i.pix);r.setStrokeStyle(s);r.setLineCap(o.lineCap);r.beginPath();r.arc(n.x,n.y,l-(o.width*i.pix+o.gap*i.pix)*e,o.startAngle*Math.PI,t._proportion_*Math.PI,false);r.stroke()}drawRingTitle(i,t,r,n);return{center:n,radius:l,series:a}}function drawGaugeDataPoints(n,h,c,t,d){var x=arguments.length>5&&arguments[5]!==undefined?arguments[5]:1;var f=assign({},{type:"default",startAngle:.75,endAngle:.25,width:15,labelOffset:13,splitLine:{fixRadius:0,splitNumber:10,width:15,color:"#FFFFFF",childNumber:5,childWidth:5},pointer:{width:15,color:"auto"}},c.extra.gauge);if(f.oldAngle==undefined){f.oldAngle=f.startAngle}if(f.oldData==undefined){f.oldData=0}n=getGaugeAxisPoints(n,f.startAngle,f.endAngle);var p={x:c.width/2,y:c.height/2};var g=Math.min(p.x,p.y);g-=5*c.pix;g-=f.width/2;g=g<10?10:g;var u=g-f.width;var y=0;if(f.type=="progress"){var v=g-f.width*3;d.beginPath();let t=d.createLinearGradient(p.x,p.y-v,p.x,p.y+v);t.addColorStop("0",hexToRgb(h[0].color,.3));t.addColorStop("1.0",hexToRgb("#FFFFFF",.1));d.setFillStyle(t);d.arc(p.x,p.y,v,0,2*Math.PI,false);d.fill();d.setLineWidth(f.width);d.setStrokeStyle(hexToRgb(h[0].color,.3));d.setLineCap("round");d.beginPath();d.arc(p.x,p.y,u,f.startAngle*Math.PI,f.endAngle*Math.PI,false);d.stroke();y=f.startAngle-f.endAngle+1;let e=y/f.splitLine.splitNumber;let a=y/f.splitLine.splitNumber/f.splitLine.childNumber;let i=-g-f.width*.5-f.splitLine.fixRadius;let r=-g-f.width-f.splitLine.fixRadius+f.splitLine.width;d.save();d.translate(p.x,p.y);d.rotate((f.startAngle-1)*Math.PI);let o=f.splitLine.splitNumber*f.splitLine.childNumber+1;let n=h[0].data*x;for(let t=0;t<o;t++){d.beginPath();if(n>t/o){d.setStrokeStyle(hexToRgb(h[0].color,1))}else{d.setStrokeStyle(hexToRgb(h[0].color,.3))}d.setLineWidth(3*c.pix);d.moveTo(i,0);d.lineTo(r,0);d.stroke();d.rotate(a*Math.PI)}d.restore();h=getGaugeArcbarDataPoints(h,f,x);d.setLineWidth(f.width);d.setStrokeStyle(h[0].color);d.setLineCap("round");d.beginPath();d.arc(p.x,p.y,u,f.startAngle*Math.PI,h[0]._proportion_*Math.PI,false);d.stroke();let l=g-f.width*2.5;d.save();d.translate(p.x,p.y);d.rotate((h[0]._proportion_-1)*Math.PI);d.beginPath();d.setLineWidth(f.width/3);let s=d.createLinearGradient(0,-l*.6,0,l*.6);s.addColorStop("0",hexToRgb("#FFFFFF",0));s.addColorStop("0.5",hexToRgb(h[0].color,1));s.addColorStop("1.0",hexToRgb("#FFFFFF",0));d.setStrokeStyle(s);d.arc(0,0,l,.85*Math.PI,1.15*Math.PI,false);d.stroke();d.beginPath();d.setLineWidth(1);d.setStrokeStyle(h[0].color);d.setFillStyle(h[0].color);d.moveTo(-l-f.width/3/2,-4);d.lineTo(-l-f.width/3/2-4,0);d.lineTo(-l-f.width/3/2,4);d.lineTo(-l-f.width/3/2,-4);d.stroke();d.fill();d.restore()}else{d.setLineWidth(f.width);d.setLineCap("butt");for(let e=0;e<n.length;e++){let t=n[e];d.beginPath();d.setStrokeStyle(t.color);d.arc(p.x,p.y,g,t._startAngle_*Math.PI,t._endAngle_*Math.PI,false);d.stroke()}d.save();y=f.startAngle-f.endAngle+1;let e=y/f.splitLine.splitNumber;let a=y/f.splitLine.splitNumber/f.splitLine.childNumber;let i=-g-f.width*.5-f.splitLine.fixRadius;let r=-g-f.width*.5-f.splitLine.fixRadius+f.splitLine.width;let o=-g-f.width*.5-f.splitLine.fixRadius+f.splitLine.childWidth;d.translate(p.x,p.y);d.rotate((f.startAngle-1)*Math.PI);for(let t=0;t<f.splitLine.splitNumber+1;t++){d.beginPath();d.setStrokeStyle(f.splitLine.color);d.setLineWidth(2*c.pix);d.moveTo(i,0);d.lineTo(r,0);d.stroke();d.rotate(e*Math.PI)}d.restore();d.save();d.translate(p.x,p.y);d.rotate((f.startAngle-1)*Math.PI);for(let t=0;t<f.splitLine.splitNumber*f.splitLine.childNumber+1;t++){d.beginPath();d.setStrokeStyle(f.splitLine.color);d.setLineWidth(1*c.pix);d.moveTo(i,0);d.lineTo(o,0);d.stroke();d.rotate(a*Math.PI)}d.restore();h=getGaugeDataPoints(h,n,f,x);for(let e=0;e<h.length;e++){let t=h[e];d.save();d.translate(p.x,p.y);d.rotate((t._proportion_-1)*Math.PI);d.beginPath();d.setFillStyle(t.color);d.moveTo(f.pointer.width,0);d.lineTo(0,-f.pointer.width/2);d.lineTo(-u,0);d.lineTo(0,f.pointer.width/2);d.lineTo(f.pointer.width,0);d.closePath();d.fill();d.beginPath();d.setFillStyle("#FFFFFF");d.arc(0,0,f.pointer.width/6,0,2*Math.PI,false);d.fill();d.restore()}if(c.dataLabel!==false){drawGaugeLabel(f,g,p,c,t,d)}}drawRingTitle(c,t,d,p);if(x===1&&c.type==="gauge"){c.extra.gauge.oldAngle=h[0]._proportion_;c.extra.gauge.oldData=h[0].data}return{center:p,radius:g,innerRadius:u,categories:n,totalAngle:y}}function drawRadarDataPoints(o,n,i,l){var t=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;var s=assign({},{gridColor:"#cccccc",gridType:"radar",gridEval:1,axisLabel:false,axisLabelTofix:0,labelColor:"#666666",labelPointShow:false,labelPointRadius:3,labelPointColor:"#cccccc",opacity:.2,gridCount:3,border:false,borderWidth:2,linearType:"none",customColor:[]},n.extra.radar);var a=getRadarCoordinateSeries(n.categories.length);var h={x:n.area[3]+(n.width-n.area[1]-n.area[3])/2,y:n.area[0]+(n.height-n.area[0]-n.area[2])/2};var r=(n.width-n.area[1]-n.area[3])/2;var d=(n.height-n.area[0]-n.area[2])/2;var c=Math.min(r-(getMaxTextListLength(n.categories,i.fontSize,l)+i.radarLabelTextMargin),d-i.radarLabelTextMargin);c-=i.radarLabelTextMargin*n.pix;c=c<10?10:c;l.beginPath();l.setLineWidth(1*n.pix);l.setStrokeStyle(s.gridColor);a.forEach(function(t,e){var a=convertCoordinateOrigin(c*Math.cos(t),c*Math.sin(t),h);l.moveTo(h.x,h.y);if(e%s.gridEval==0){l.lineTo(a.x,a.y)}});l.stroke();l.closePath();var x=function t(i){var r={};l.beginPath();l.setLineWidth(1*n.pix);l.setStrokeStyle(s.gridColor);if(s.gridType=="radar"){a.forEach(function(t,e){var a=convertCoordinateOrigin(c/s.gridCount*i*Math.cos(t),c/s.gridCount*i*Math.sin(t),h);if(e===0){r=a;l.moveTo(a.x,a.y)}else{l.lineTo(a.x,a.y)}});l.lineTo(r.x,r.y)}else{var e=convertCoordinateOrigin(c/s.gridCount*i*Math.cos(1.5),c/s.gridCount*i*Math.sin(1.5),h);l.arc(h.x,h.y,h.y-e.y,0,2*Math.PI,false)}l.stroke();l.closePath()};for(var e=1;e<=s.gridCount;e++){x(e)}s.customColor=fillCustomColor(s.linearType,s.customColor,o,i);var f=getRadarDataPoints(a,h,c,o,n,t);f.forEach(function(t,e){l.beginPath();l.setLineWidth(s.borderWidth*n.pix);l.setStrokeStyle(t.color);var a=hexToRgb(t.color,s.opacity);if(s.linearType=="custom"){var i;if(l.createCircularGradient){i=l.createCircularGradient(h.x,h.y,c)}else{i=l.createRadialGradient(h.x,h.y,0,h.x,h.y,c)}i.addColorStop(0,hexToRgb(s.customColor[o[e].linearIndex],s.opacity));i.addColorStop(1,hexToRgb(t.color,s.opacity));a=i}l.setFillStyle(a);t.data.forEach(function(t,e){if(e===0){l.moveTo(t.position.x,t.position.y)}else{l.lineTo(t.position.x,t.position.y)}});l.closePath();l.fill();if(s.border===true){l.stroke()}l.closePath();if(n.dataPointShape!==false){var r=t.data.map(function(t){return t.position});drawPointShape(r,t.color,t.pointShape,l,n)}});if(s.axisLabel===true){const p=Math.max(s.max,Math.max.apply(null,dataCombine(o)));const g=c/s.gridCount;const u=n.fontSize*n.pix;l.setFontSize(u);l.setFillStyle(n.fontColor);l.setTextAlign("left");for(var e=0;e<s.gridCount+1;e++){let t=e*p/s.gridCount;t=t.toFixed(s.axisLabelTofix);l.fillText(String(t),h.x+3*n.pix,h.y-e*g+u/2)}}drawRadarLabel(a,c,h,n,i,l);if(n.dataLabel!==false&&t===1){f.forEach(function(t,e){l.beginPath();var a=t.textSize*n.pix||i.fontSize;l.setFontSize(a);l.setFillStyle(t.textColor||n.fontColor);t.data.forEach(function(t,e){if(Math.abs(t.position.x-h.x)<2){if(t.position.y<h.y){l.setTextAlign("center");l.fillText(t.value,t.position.x,t.position.y-4)}else{l.setTextAlign("center");l.fillText(t.value,t.position.x,t.position.y+a+2)}}else{if(t.position.x<h.x){l.setTextAlign("right");l.fillText(t.value,t.position.x-4,t.position.y+a/2-2)}else{l.setTextAlign("left");l.fillText(t.value,t.position.x+4,t.position.y+a/2-2)}}});l.closePath();l.stroke()});l.setTextAlign("left")}return{center:h,radius:c,angleList:a}}function lonlat2mercator(t,e){var a=Array(2);var i=t*20037508.34/180;var r=Math.log(Math.tan((90+e)*Math.PI/360))/(Math.PI/180);r=r*20037508.34/180;a[0]=i;a[1]=r;return a}function mercator2lonlat(t,e){var a=Array(2);var i=t/20037508.34*180;var r=e/20037508.34*180;r=180/Math.PI*(2*Math.atan(Math.exp(r*Math.PI/180))-Math.PI/2);a[0]=i;a[1]=r;return a}function getBoundingBox(t){var e={},a;e.xMin=180;e.xMax=0;e.yMin=90;e.yMax=0;for(var i=0;i<t.length;i++){var r=t[i].geometry.coordinates;for(var o=0;o<r.length;o++){a=r[o];if(a.length==1){a=a[0]}for(var n=0;n<a.length;n++){var l=a[n][0];var s=a[n][1];var h={x:l,y:s};e.xMin=e.xMin<h.x?e.xMin:h.x;e.xMax=e.xMax>h.x?e.xMax:h.x;e.yMin=e.yMin<h.y?e.yMin:h.y;e.yMax=e.yMax>h.y?e.yMax:h.y}}}return e}function coordinateToPoint(t,e,a,i,r,o){return{x:(e-a.xMin)*i+r,y:(a.yMax-t)*i+o}}function pointToCoordinate(t,e,a,i,r,o){return{x:(e-r)/i+a.xMin,y:a.yMax-(t-o)/i}}function isRayIntersectsSegment(t,e,a){if(e[1]==a[1]){return false}if(e[1]>t[1]&&a[1]>t[1]){return false}if(e[1]<t[1]&&a[1]<t[1]){return false}if(e[1]==t[1]&&a[1]>t[1]){return false}if(a[1]==t[1]&&e[1]>t[1]){return false}if(e[0]<t[0]&&a[1]<t[1]){return false}let i=a[0]-(a[0]-e[0])*(a[1]-t[1])/(a[1]-e[1]);if(i<t[0]){return false}else{return true}}function isPoiWithinPoly(r,e,o){let n=0;for(let t=0;t<e.length;t++){let i=e[t][0];if(e.length==1){i=e[t][0]}for(let a=0;a<i.length-1;a++){let t=i[a];let e=i[a+1];if(o){t=lonlat2mercator(i[a][0],i[a][1]);e=lonlat2mercator(i[a+1][0],i[a+1][1])}if(isRayIntersectsSegment(r,t,e)){n+=1}}}if(n%2==1){return true}else{return false}}function drawMapDataPoints(c,a,d,i){var r=assign({},{border:true,mercator:false,borderWidth:1,borderColor:"#666666",fillOpacity:.6,activeBorderColor:"#f04864",activeFillColor:"#facc14",activeFillOpacity:1},a.extra.map);var t,o;var n=c;var l=getBoundingBox(n);if(r.mercator){var x=lonlat2mercator(l.xMax,l.yMax);var f=lonlat2mercator(l.xMin,l.yMin);l.xMax=x[0];l.yMax=x[1];l.xMin=f[0];l.yMin=f[1]}var p=a.width/Math.abs(l.xMax-l.xMin);var g=a.height/Math.abs(l.yMax-l.yMin);var s=p<g?p:g;var u=a.width/2-Math.abs(l.xMax-l.xMin)/2*s;var y=a.height/2-Math.abs(l.yMax-l.yMin)/2*s;for(var h=0;h<n.length;h++){i.beginPath();i.setLineWidth(r.borderWidth*a.pix);i.setStrokeStyle(r.borderColor);i.setFillStyle(hexToRgb(c[h].color,r.fillOpacity));if(a.tooltip){if(a.tooltip.index==h){i.setStrokeStyle(r.activeBorderColor);i.setFillStyle(hexToRgb(r.activeFillColor,r.activeFillOpacity))}}var v=n[h].geometry.coordinates;for(var m=0;m<v.length;m++){t=v[m];if(t.length==1){t=t[0]}for(var e=0;e<t.length;e++){var T=Array(2);if(r.mercator){T=lonlat2mercator(t[e][0],t[e][1])}else{T=t[e]}o=coordinateToPoint(T[1],T[0],l,s,u,y);if(e===0){i.beginPath();i.moveTo(o.x,o.y)}else{i.lineTo(o.x,o.y)}}i.fill();if(r.border==true){i.stroke()}}}if(a.dataLabel==true){for(var h=0;h<n.length;h++){var b=n[h].properties.centroid;if(b){if(r.mercator){b=lonlat2mercator(n[h].properties.centroid[0],n[h].properties.centroid[1])}o=coordinateToPoint(b[1],b[0],l,s,u,y);let t=n[h].textSize*a.pix||d.fontSize;let e=n[h].properties.name;i.beginPath();i.setFontSize(t);i.setFillStyle(n[h].textColor||a.fontColor);i.fillText(e,o.x-measureText(e,t,i)/2,o.y+t/2);i.closePath();i.stroke()}}}a.chartData.mapData={bounds:l,scale:s,xoffset:u,yoffset:y,mercator:r.mercator};drawToolTipBridge(a,d,i,1);i.draw()}function normalInt(t,e,a){a=a==0?1:a;var i=[];for(var r=0;r<a;r++){i[r]=Math.random()}return Math.floor(i.reduce(function(t,e){return t+e})/a*(e-t))+t}function collisionNew(e,a,i,r){var o=false;for(let t=0;t<a.length;t++){if(a[t].area){if(e[3]<a[t].area[1]||e[0]>a[t].area[2]||e[1]>a[t].area[3]||e[2]<a[t].area[0]){if(e[0]<0||e[1]<0||e[2]>i||e[3]>r){o=true;break}else{o=false}}else{o=true;break}}}return o}function getWordCloudPoint(c,t,d){let x=c.series;switch(t){case"normal":for(let l=0;l<x.length;l++){let t=x[l].name;let e=x[l].textSize*c.pix;let a=measureText(t,e,d);let i,r;let o;let n=0;while(true){n++;i=normalInt(-c.width/2,c.width/2,5)-a/2;r=normalInt(-c.height/2,c.height/2,5)+e/2;o=[i-5+c.width/2,r-5-e+c.height/2,i+a+5+c.width/2,r+5+c.height/2];let t=collisionNew(o,x,c.width,c.height);if(!t)break;if(n==1e3){o=[-100,-100,-100,-100];break}}x[l].area=o}break;case"vertical":function f(){if(Math.random()>.7){return true}else{return false}};for(let h=0;h<x.length;h++){let t=x[h].name;let e=x[h].textSize*c.pix;let a=measureText(t,e,d);let i=f();let r,o,n,l;let s=0;while(true){s++;let t;if(i){r=normalInt(-c.width/2,c.width/2,5)-a/2;o=normalInt(-c.height/2,c.height/2,5)+e/2;n=[o-5-a+c.width/2,-r-5+c.height/2,o+5+c.width/2,-r+e+5+c.height/2];l=[c.width-(c.width/2-c.height/2)-(-r+e+5+c.height/2)-5,c.height/2-c.width/2+(o-5-a+c.width/2)-5,c.width-(c.width/2-c.height/2)-(-r+e+5+c.height/2)+e,c.height/2-c.width/2+(o-5-a+c.width/2)+a+5];t=collisionNew(l,x,c.height,c.width)}else{r=normalInt(-c.width/2,c.width/2,5)-a/2;o=normalInt(-c.height/2,c.height/2,5)+e/2;n=[r-5+c.width/2,o-5-e+c.height/2,r+a+5+c.width/2,o+5+c.height/2];t=collisionNew(n,x,c.width,c.height)}if(!t)break;if(s==1e3){n=[-1e3,-1e3,-1e3,-1e3];break}}if(i){x[h].area=l;x[h].areav=n}else{x[h].area=n}x[h].rotate=i};break}return x}function drawWordCloudDataPoints(t,r,e,o){let n=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let a=assign({},{type:"normal",autoColors:true},r.extra.word);if(!r.chartData.wordCloudData){r.chartData.wordCloudData=getWordCloudPoint(r,a.type,o)}o.beginPath();o.setFillStyle(r.background);o.rect(0,0,r.width,r.height);o.fill();o.save();let l=r.chartData.wordCloudData;o.translate(r.width/2,r.height/2);for(let i=0;i<l.length;i++){o.save();if(l[i].rotate){o.rotate(90*Math.PI/180)}let t=l[i].name;let e=l[i].textSize*r.pix;let a=measureText(t,e,o);o.beginPath();o.setStrokeStyle(l[i].color);o.setFillStyle(l[i].color);o.setFontSize(e);if(l[i].rotate){if(l[i].areav[0]>0){if(r.tooltip){if(r.tooltip.index==i){o.strokeText(t,(l[i].areav[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].areav[1]+5+e-r.height/2)*n)}else{o.fillText(t,(l[i].areav[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].areav[1]+5+e-r.height/2)*n)}}else{o.fillText(t,(l[i].areav[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].areav[1]+5+e-r.height/2)*n)}}}else{if(l[i].area[0]>0){if(r.tooltip){if(r.tooltip.index==i){o.strokeText(t,(l[i].area[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].area[1]+5+e-r.height/2)*n)}else{o.fillText(t,(l[i].area[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].area[1]+5+e-r.height/2)*n)}}else{o.fillText(t,(l[i].area[0]+5-r.width/2)*n-a*(1-n)/2,(l[i].area[1]+5+e-r.height/2)*n)}}}o.stroke();o.restore()}o.restore()}function drawFunnelDataPoints(e,a,t,i){let c=arguments.length>4&&arguments[4]!==undefined?arguments[4]:1;let r=assign({},{type:"funnel",activeWidth:10,activeOpacity:.3,border:false,borderWidth:2,borderColor:"#FFFFFF",fillOpacity:1,labelAlign:"right",linearType:"none",customColor:[]},a.extra.funnel);let o=(a.height-a.area[0]-a.area[2])/e.length;let n={x:a.area[3]+(a.width-a.area[1]-a.area[3])/2,y:a.height-a.area[2]};let l=r.activeWidth*a.pix;let d=Math.min((a.width-a.area[1]-a.area[3])/2-l,(a.height-a.area[0]-a.area[2])/2-l);e=getFunnelDataPoints(e,d,r.type,o,c);i.save();i.translate(n.x,n.y);r.customColor=fillCustomColor(r.linearType,r.customColor,e,t);if(r.type=="pyramid"){for(let t=0;t<e.length;t++){if(t==e.length-1){if(a.tooltip){if(a.tooltip.index==t){i.beginPath();i.setFillStyle(hexToRgb(e[t].color,r.activeOpacity));i.moveTo(-l,-o);i.lineTo(-e[t].radius-l,0);i.lineTo(e[t].radius+l,0);i.lineTo(l,-o);i.lineTo(-l,-o);i.closePath();i.fill()}}e[t].funnelArea=[n.x-e[t].radius,n.y-o*(t+1),n.x+e[t].radius,n.y-o*t];i.beginPath();i.setLineWidth(r.borderWidth*a.pix);i.setStrokeStyle(r.borderColor);var s=hexToRgb(e[t].color,r.fillOpacity);if(r.linearType=="custom"){var h=i.createLinearGradient(e[t].radius,-o,-e[t].radius,-o);h.addColorStop(0,hexToRgb(e[t].color,r.fillOpacity));h.addColorStop(.5,hexToRgb(r.customColor[e[t].linearIndex],r.fillOpacity));h.addColorStop(1,hexToRgb(e[t].color,r.fillOpacity));s=h}i.setFillStyle(s);i.moveTo(0,-o);i.lineTo(-e[t].radius,0);i.lineTo(e[t].radius,0);i.lineTo(0,-o);i.closePath();i.fill();if(r.border==true){i.stroke()}}else{if(a.tooltip){if(a.tooltip.index==t){i.beginPath();i.setFillStyle(hexToRgb(e[t].color,r.activeOpacity));i.moveTo(0,0);i.lineTo(-e[t].radius-l,0);i.lineTo(-e[t+1].radius-l,-o);i.lineTo(e[t+1].radius+l,-o);i.lineTo(e[t].radius+l,0);i.lineTo(0,0);i.closePath();i.fill()}}e[t].funnelArea=[n.x-e[t].radius,n.y-o*(t+1),n.x+e[t].radius,n.y-o*t];i.beginPath();i.setLineWidth(r.borderWidth*a.pix);i.setStrokeStyle(r.borderColor);var s=hexToRgb(e[t].color,r.fillOpacity);if(r.linearType=="custom"){var h=i.createLinearGradient(e[t].radius,-o,-e[t].radius,-o);h.addColorStop(0,hexToRgb(e[t].color,r.fillOpacity));h.addColorStop(.5,hexToRgb(r.customColor[e[t].linearIndex],r.fillOpacity));h.addColorStop(1,hexToRgb(e[t].color,r.fillOpacity));s=h}i.setFillStyle(s);i.moveTo(0,0);i.lineTo(-e[t].radius,0);i.lineTo(-e[t+1].radius,-o);i.lineTo(e[t+1].radius,-o);i.lineTo(e[t].radius,0);i.lineTo(0,0);i.closePath();i.fill();if(r.border==true){i.stroke()}}i.translate(0,-o)}}else{for(let t=0;t<e.length;t++){if(t==0){if(a.tooltip){if(a.tooltip.index==t){i.beginPath();i.setFillStyle(hexToRgb(e[t].color,r.activeOpacity));i.moveTo(-l,0);i.lineTo(-e[t].radius-l,-o);i.lineTo(e[t].radius+l,-o);i.lineTo(l,0);i.lineTo(-l,0);i.closePath();i.fill()}}e[t].funnelArea=[n.x-e[t].radius,n.y-o,n.x+e[t].radius,n.y];i.beginPath();i.setLineWidth(r.borderWidth*a.pix);i.setStrokeStyle(r.borderColor);var s=hexToRgb(e[t].color,r.fillOpacity);if(r.linearType=="custom"){var h=i.createLinearGradient(e[t].radius,-o,-e[t].radius,-o);h.addColorStop(0,hexToRgb(e[t].color,r.fillOpacity));h.addColorStop(.5,hexToRgb(r.customColor[e[t].linearIndex],r.fillOpacity));h.addColorStop(1,hexToRgb(e[t].color,r.fillOpacity));s=h}i.setFillStyle(s);i.moveTo(0,0);i.lineTo(-e[t].radius,-o);i.lineTo(e[t].radius,-o);i.lineTo(0,0);i.closePath();i.fill();if(r.border==true){i.stroke()}}else{if(a.tooltip){if(a.tooltip.index==t){i.beginPath();i.setFillStyle(hexToRgb(e[t].color,r.activeOpacity));i.moveTo(0,0);i.lineTo(-e[t-1].radius-l,0);i.lineTo(-e[t].radius-l,-o);i.lineTo(e[t].radius+l,-o);i.lineTo(e[t-1].radius+l,0);i.lineTo(0,0);i.closePath();i.fill()}}e[t].funnelArea=[n.x-e[t].radius,n.y-o*(t+1),n.x+e[t].radius,n.y-o*t];i.beginPath();i.setLineWidth(r.borderWidth*a.pix);i.setStrokeStyle(r.borderColor);var s=hexToRgb(e[t].color,r.fillOpacity);if(r.linearType=="custom"){var h=i.createLinearGradient(e[t].radius,-o,-e[t].radius,-o);h.addColorStop(0,hexToRgb(e[t].color,r.fillOpacity));h.addColorStop(.5,hexToRgb(r.customColor[e[t].linearIndex],r.fillOpacity));h.addColorStop(1,hexToRgb(e[t].color,r.fillOpacity));s=h}i.setFillStyle(s);i.moveTo(0,0);i.lineTo(-e[t-1].radius,0);i.lineTo(-e[t].radius,-o);i.lineTo(e[t].radius,-o);i.lineTo(e[t-1].radius,0);i.lineTo(0,0);i.closePath();i.fill();if(r.border==true){i.stroke()}}i.translate(0,-o)}}i.restore();if(a.dataLabel!==false&&c===1){drawFunnelText(e,a,i,o,r.labelAlign,l,n)}return{center:n,radius:d,series:e}}function drawFunnelText(l,s,h,c,d,x,f){for(let n=0;n<l.length;n++){let t=l[n];if(t.labelShow===false){continue}let e,a,i,r;let o=t.formatter?t.formatter(t,n,l,s):util.toFixed(t._proportion_*100)+"%";o=t.labelText?t.labelText:o;if(d=="right"){if(s.extra.funnel.type==="pyramid"){if(n==l.length-1){e=(t.funnelArea[2]+f.x)/2}else{e=(t.funnelArea[2]+l[n+1].funnelArea[2])/2}}else{if(n==0){e=(t.funnelArea[2]+f.x)/2}else{e=(t.funnelArea[2]+l[n-1].funnelArea[2])/2}}a=e+x*2;i=t.funnelArea[1]+c/2;r=t.textSize*s.pix||s.fontSize*s.pix;h.setLineWidth(1*s.pix);h.setStrokeStyle(t.color);h.setFillStyle(t.color);h.beginPath();h.moveTo(e,i);h.lineTo(a,i);h.stroke();h.closePath();h.beginPath();h.moveTo(a,i);h.arc(a,i,2*s.pix,0,2*Math.PI);h.closePath();h.fill();h.beginPath();h.setFontSize(r);h.setFillStyle(t.textColor||s.fontColor);h.fillText(o,a+5,i+r/2-2);h.closePath();h.stroke();h.closePath()}else{if(s.extra.funnel.type==="pyramid"){if(n==l.length-1){e=(t.funnelArea[0]+f.x)/2}else{e=(t.funnelArea[0]+l[n+1].funnelArea[0])/2}}else{if(n==0){e=(t.funnelArea[0]+f.x)/2}else{e=(t.funnelArea[0]+l[n-1].funnelArea[0])/2}}a=e-x*2;i=t.funnelArea[1]+c/2;r=t.textSize*s.pix||s.fontSize*s.pix;h.setLineWidth(1*s.pix);h.setStrokeStyle(t.color);h.setFillStyle(t.color);h.beginPath();h.moveTo(e,i);h.lineTo(a,i);h.stroke();h.closePath();h.beginPath();h.moveTo(a,i);h.arc(a,i,2,0,2*Math.PI);h.closePath();h.fill();h.beginPath();h.setFontSize(r);h.setFillStyle(t.textColor||s.fontColor);h.fillText(o,a-5-measureText(o,r,h),i+r/2-2);h.closePath();h.stroke();h.closePath()}}}function drawCanvas(t,e){e.draw()}var Timing={easeIn:function t(e){return Math.pow(e,3)},easeOut:function t(e){return Math.pow(e-1,3)+1},easeInOut:function t(e){if((e/=.5)<1){return.5*Math.pow(e,3)}else{return.5*(Math.pow(e-2,3)+2)}},linear:function t(e){return e}};function Animation(r){this.isStop=false;r.duration=typeof r.duration==="undefined"?1e3:r.duration;r.timing=r.timing||"easeInOut";var o=17;function t(){if(typeof setTimeout!=="undefined"){return function(e,t){setTimeout(function(){var t=+new Date;e(t)},t)}}else if(typeof requestAnimationFrame!=="undefined"){return requestAnimationFrame}else{return function(t){t(null)}}}var n=t();var l=null;var s=function t(e){if(e===null||this.isStop===true){r.onProcess&&r.onProcess(1);r.onAnimationFinish&&r.onAnimationFinish();return}if(l===null){l=e}if(e-l<r.duration){var a=(e-l)/r.duration;var i=Timing[r.timing];a=i(a);r.onProcess&&r.onProcess(a);n(s,o)}else{r.onProcess&&r.onProcess(1);r.onAnimationFinish&&r.onAnimationFinish()}};s=s.bind(this);n(s,o)}Animation.prototype.stop=function(){this.isStop=true};function drawCharts(t,l,n,s){var h=this;var c=l.series;if(t==="pie"||t==="ring"||t==="mount"||t==="rose"||t==="funnel"){c=fixPieSeries(c,l,n)}var d=l.categories;if(t==="mount"){d=[];for(let t=0;t<c.length;t++){if(c[t].show!==false)d.push(c[t].name)}l.categories=d}c=fillSeries(c,l,n);var e=l.animation?l.duration:0;h.animationInstance&&h.animationInstance.stop();var x=null;if(t=="candle"){let t=assign({},l.extra.candle.average);if(t.show){x=calCandleMA(t.day,t.name,t.color,c[0].data);x=fillSeries(x,l,n);l.seriesMA=x}else if(l.seriesMA){x=l.seriesMA=fillSeries(l.seriesMA,l,n)}else{x=c}}else{x=c}l._series_=c=filterSeries(c);l.area=new Array(4);for(let t=0;t<4;t++){l.area[t]=l.padding[t]*l.pix}var a=calLegendData(x,l,n,l.chartData,s),r=a.area.wholeHeight,o=a.area.wholeWidth;switch(l.legend.position){case"top":l.area[0]+=r;break;case"bottom":l.area[2]+=r;break;case"left":l.area[3]+=o;break;case"right":l.area[1]+=o;break}let f={},i=0;if(l.type==="line"||l.type==="column"||l.type==="mount"||l.type==="area"||l.type==="mix"||l.type==="candle"||l.type==="scatter"||l.type==="bubble"||l.type==="bar"){f=calYAxisData(c,l,n,s);i=f.yAxisWidth;if(l.yAxis.showTitle){let e=0;for(let t=0;t<l.yAxis.data.length;t++){e=Math.max(e,l.yAxis.data[t].titleFontSize?l.yAxis.data[t].titleFontSize*l.pix:n.fontSize)}l.area[0]+=e}let e=0,a=0;for(let t=0;t<i.length;t++){if(i[t].position=="left"){if(a>0){l.area[3]+=i[t].width+l.yAxis.padding*l.pix}else{l.area[3]+=i[t].width}a+=1}else if(i[t].position=="right"){if(e>0){l.area[1]+=i[t].width+l.yAxis.padding*l.pix}else{l.area[1]+=i[t].width}e+=1}}}else{n.yAxisWidth=i}l.chartData.yAxisData=f;if(l.categories&&l.categories.length&&l.type!=="radar"&&l.type!=="gauge"&&l.type!=="bar"){l.chartData.xAxisData=getXAxisPoints(l.categories,l,n);let t=calCategoriesData(l.categories,l,n,l.chartData.xAxisData.eachSpacing,s),e=t.xAxisHeight,a=t.angle;n.xAxisHeight=e;n._xAxisTextAngle_=a;l.area[2]+=e;l.chartData.categoriesData=t}else{if(l.type==="line"||l.type==="area"||l.type==="scatter"||l.type==="bubble"||l.type==="bar"){l.chartData.xAxisData=calXAxisData(c,l,n,s);d=l.chartData.xAxisData.rangesFormat;let t=calCategoriesData(d,l,n,l.chartData.xAxisData.eachSpacing,s),e=t.xAxisHeight,a=t.angle;n.xAxisHeight=e;n._xAxisTextAngle_=a;l.area[2]+=e;l.chartData.categoriesData=t}else{l.chartData.xAxisData={xAxisPoints:[]}}}if(l.enableScroll&&l.xAxis.scrollAlign=="right"&&l._scrollDistance_===undefined){let t=0,e=l.chartData.xAxisData.xAxisPoints,a=l.chartData.xAxisData.startX,i=l.chartData.xAxisData.endX,r=l.chartData.xAxisData.eachSpacing;let o=r*(e.length-1);let n=i-a;t=n-o;h.scrollOption.currentOffset=t;h.scrollOption.startTouchX=t;h.scrollOption.distance=0;h.scrollOption.lastMoveTime=0;l._scrollDistance_=t}if(t==="pie"||t==="ring"||t==="rose"){n._pieTextMaxLength_=l.dataLabel===false?0:getPieTextMaxLength(x,n,s,l)}switch(t){case"word":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function(t){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawWordCloudDataPoints(c,l,n,s,t);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"map":s.clearRect(0,0,l.width,l.height);drawMapDataPoints(c,l,n,s);break;case"funnel":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function(t){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.funnelData=drawFunnelDataPoints(c,l,n,s,t);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,t);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"line":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawLineDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"scatter":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawScatterDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"bubble":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawBubbleDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"mix":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawMixDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"column":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawColumnDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"mount":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawMountDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"bar":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawXAxis(d,l,n,s);var a=drawBarDataPoints(c,l,n,s,e),i=a.yAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.yAxisPoints=i;l.chartData.xAxisPoints=l.chartData.xAxisData.xAxisPoints;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"area":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawAreaDataPoints(c,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"ring":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.pieData=drawPieDataPoints(c,l,n,s,e);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"pie":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.pieData=drawPieDataPoints(c,l,n,s,e);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"rose":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.pieData=drawRoseDataPoints(c,l,n,s,e);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"radar":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.radarData=drawRadarDataPoints(c,l,n,s,e);drawLegend(l.series,l,n,s,l.chartData);drawToolTipBridge(l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"arcbar":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.arcbarData=drawArcbarDataPoints(c,l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"gauge":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}l.chartData.gaugeData=drawGaugeDataPoints(d,c,l,n,s,e);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break;case"candle":this.animationInstance=new Animation({timing:l.timing,duration:e,onProcess:function t(e){s.clearRect(0,0,l.width,l.height);if(l.rotate){contextRotate(s,l)}drawYAxisGrid(d,l,n,s);drawXAxis(d,l,n,s);var a=drawCandleDataPoints(c,x,l,n,s,e),i=a.xAxisPoints,r=a.calPoints,o=a.eachSpacing;l.chartData.xAxisPoints=i;l.chartData.calPoints=r;l.chartData.eachSpacing=o;drawYAxis(c,l,n,s);if(l.enableMarkLine!==false&&e===1){drawMarkLine(l,n,s)}if(x){drawLegend(x,l,n,s,l.chartData)}else{drawLegend(l.series,l,n,s,l.chartData)}drawToolTipBridge(l,n,s,e,o,i);drawCanvas(l,s)},onAnimationFinish:function t(){h.uevent.trigger("renderComplete")}});break}}function uChartsEvent(){this.events={}}uChartsEvent.prototype.addEventListener=function(t,e){this.events[t]=this.events[t]||[];this.events[t].push(e)};uChartsEvent.prototype.delEventListener=function(t){this.events[t]=[]};uChartsEvent.prototype.trigger=function(){for(var t=arguments.length,e=Array(t),a=0;a<t;a++){e[a]=arguments[a]}var i=e[0];var r=e.slice(1);if(!!this.events[i]){this.events[i].forEach(function(t){try{t.apply(null,r)}catch(t){}})}};var uCharts=function t(a){a.pix=a.pixelRatio?a.pixelRatio:1;a.fontSize=a.fontSize?a.fontSize:13;a.fontColor=a.fontColor?a.fontColor:config.fontColor;if(a.background==""||a.background=="none"){a.background="#FFFFFF"}a.title=assign({},a.title);a.subtitle=assign({},a.subtitle);a.duration=a.duration?a.duration:1e3;a.yAxis=assign({},{data:[],showTitle:false,disabled:false,disableGrid:false,splitNumber:5,gridType:"solid",dashLength:4*a.pix,gridColor:"#cccccc",padding:10,fontColor:"#666666"},a.yAxis);a.xAxis=assign({},{rotateLabel:false,rotateAngle:45,disabled:false,disableGrid:false,splitNumber:5,calibration:false,gridType:"solid",dashLength:4,scrollAlign:"left",boundaryGap:"center",axisLine:true,axisLineColor:"#cccccc"},a.xAxis);a.xAxis.scrollPosition=a.xAxis.scrollAlign;a.legend=assign({},{show:true,position:"bottom",float:"center",backgroundColor:"rgba(0,0,0,0)",borderColor:"rgba(0,0,0,0)",borderWidth:0,padding:5,margin:5,itemGap:10,fontSize:a.fontSize,lineHeight:a.fontSize,fontColor:a.fontColor,formatter:{},hiddenColor:"#CECECE"},a.legend);a.extra=assign({},a.extra);a.rotate=a.rotate?true:false;a.animation=a.animation?true:false;a.rotate=a.rotate?true:false;a.canvas2d=a.canvas2d?true:false;let e=assign({},config);e.color=a.color?a.color:e.color;if(a.type=="pie"){e.pieChartLinePadding=a.dataLabel===false?0:a.extra.pie.labelWidth*a.pix||e.pieChartLinePadding*a.pix}if(a.type=="ring"){e.pieChartLinePadding=a.dataLabel===false?0:a.extra.ring.labelWidth*a.pix||e.pieChartLinePadding*a.pix}if(a.type=="rose"){e.pieChartLinePadding=a.dataLabel===false?0:a.extra.rose.labelWidth*a.pix||e.pieChartLinePadding*a.pix}e.pieChartTextPadding=a.dataLabel===false?0:e.pieChartTextPadding*a.pix;e.rotate=a.rotate;if(a.rotate){let t=a.width;let e=a.height;a.width=e;a.height=t}a.padding=a.padding?a.padding:e.padding;e.yAxisWidth=config.yAxisWidth*a.pix;e.xAxisHeight=config.xAxisHeight*a.pix;if(a.enableScroll&&a.xAxis.scrollShow){e.xAxisHeight+=6*a.pix}e.fontSize=a.fontSize*a.pix;e.titleFontSize=config.titleFontSize*a.pix;e.subtitleFontSize=config.subtitleFontSize*a.pix;e.toolTipPadding=config.toolTipPadding*a.pix;e.toolTipLineHeight=config.toolTipLineHeight*a.pix;if(!a.context){throw new Error("[uCharts] æªè·åå°contextï¼æ³¨æï¼v2.0çæ¬åï¼éè¦èªè¡è·åcanvasçç»å¾ä¸ä¸æå¹¶ä¼ å
¥opts.contextï¼")}this.context=a.context;if(!this.context.setTextAlign){this.context.setStrokeStyle=function(t){return this.strokeStyle=t};this.context.setLineWidth=function(t){return this.lineWidth=t};this.context.setLineCap=function(t){return this.lineCap=t};this.context.setFontSize=function(t){return this.font=t+"px sans-serif"};this.context.setFillStyle=function(t){return this.fillStyle=t};this.context.setTextAlign=function(t){return this.textAlign=t};this.context.draw=function(){}}if(!this.context.setLineDash){this.context.setLineDash=function(t){}}a.chartData={};this.uevent=new uChartsEvent;this.scrollOption={currentOffset:0,startTouchX:0,distance:0,lastMoveTime:0};this.opts=a;this.config=e;drawCharts.call(this,a.type,a,e,this.context)};uCharts.prototype.updateData=function(){let t=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};this.opts=assign({},this.opts,t);this.opts.updateData=true;let c=t.scrollPosition||"current";switch(c){case"current":this.opts._scrollDistance_=this.scrollOption.currentOffset;break;case"left":this.opts._scrollDistance_=0;this.scrollOption={currentOffset:0,startTouchX:0,distance:0,lastMoveTime:0};break;case"right":let t=calYAxisData(this.opts.series,this.opts,this.config,this.context),e=t.yAxisWidth;this.config.yAxisWidth=e;let a=0;let i=getXAxisPoints(this.opts.categories,this.opts,this.config),r=i.xAxisPoints,o=i.startX,n=i.endX,l=i.eachSpacing;let s=l*(r.length-1);let h=n-o;a=h-s;this.scrollOption={currentOffset:a,startTouchX:a,distance:0,lastMoveTime:0};this.opts._scrollDistance_=a;break}drawCharts.call(this,this.opts.type,this.opts,this.config,this.context)};uCharts.prototype.zoom=function(){var t=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.opts.xAxis.itemCount;if(this.opts.enableScroll!==true){console.log("[uCharts] 请å¯ç¨æ»å¨æ¡å使ç¨");return}let e=Math.round(Math.abs(this.scrollOption.currentOffset)/this.opts.chartData.eachSpacing)+Math.round(this.opts.xAxis.itemCount/2);this.opts.animation=false;this.opts.xAxis.itemCount=t.itemCount;let a=calYAxisData(this.opts.series,this.opts,this.config,this.context),i=a.yAxisWidth;this.config.yAxisWidth=i;let r=0;let o=getXAxisPoints(this.opts.categories,this.opts,this.config),h=o.xAxisPoints,c=o.startX,d=o.endX,n=o.eachSpacing;let x=n*e;let l=d-c;let s=l-n*(h.length-1);r=l/2-x;if(r>0){r=0}if(r<s){r=s}this.scrollOption={currentOffset:r,startTouchX:0,distance:0,lastMoveTime:0};calValidDistance(this,r,this.opts.chartData,this.config,this.opts);this.opts._scrollDistance_=r;drawCharts.call(this,this.opts.type,this.opts,this.config,this.context)};uCharts.prototype.dobuleZoom=function(t){if(this.opts.enableScroll!==true){console.log("[uCharts] 请å¯ç¨æ»å¨æ¡å使ç¨");return}const a=t.changedTouches;if(a.length<2){return}for(var e=0;e<a.length;e++){a[e].x=a[e].x?a[e].x:a[e].clientX;a[e].y=a[e].y?a[e].y:a[e].clientY}const i=[getTouches(a[0],this.opts,t),getTouches(a[1],this.opts,t)];const c=Math.abs(i[0].x-i[1].x);if(!this.scrollOption.moveCount){let t={changedTouches:[{x:a[0].x,y:this.opts.area[0]/this.opts.pix+2}]};let e={changedTouches:[{x:a[1].x,y:this.opts.area[0]/this.opts.pix+2}]};if(this.opts.rotate){t={changedTouches:[{x:this.opts.height/this.opts.pix-this.opts.area[0]/this.opts.pix-2,y:a[0].y}]};e={changedTouches:[{x:this.opts.height/this.opts.pix-this.opts.area[0]/this.opts.pix-2,y:a[1].y}]}}const s=this.getCurrentDataIndex(t).index;const h=this.getCurrentDataIndex(e).index;const v=Math.abs(s-h);this.scrollOption.moveCount=v;this.scrollOption.moveCurrent1=Math.min(s,h);this.scrollOption.moveCurrent2=Math.max(s,h);return}let d=c/this.scrollOption.moveCount;let r=(this.opts.width-this.opts.area[1]-this.opts.area[3])/d;r=r<=2?2:r;r=r>=this.opts.categories.length?this.opts.categories.length:r;this.opts.animation=false;this.opts.xAxis.itemCount=r;let o=0;let n=getXAxisPoints(this.opts.categories,this.opts,this.config),x=n.xAxisPoints,f=n.startX,p=n.endX,l=n.eachSpacing;let g=l*this.scrollOption.moveCurrent1;let u=p-f;let y=u-l*(x.length-1);o=-g+Math.min(i[0].x,i[1].x)-this.opts.area[3]-l;if(o>0){o=0}if(o<y){o=y}this.scrollOption.currentOffset=o;this.scrollOption.startTouchX=0;this.scrollOption.distance=0;calValidDistance(this,o,this.opts.chartData,this.config,this.opts);this.opts._scrollDistance_=o;drawCharts.call(this,this.opts.type,this.opts,this.config,this.context)};uCharts.prototype.stopAnimation=function(){this.animationInstance&&this.animationInstance.stop()};uCharts.prototype.addEventListener=function(t,e){this.uevent.addEventListener(t,e)};uCharts.prototype.delEventListener=function(t){this.uevent.delEventListener(t)};uCharts.prototype.getCurrentDataIndex=function(e){var a=null;if(e.changedTouches){a=e.changedTouches[0]}else{a=e.mp.changedTouches[0]}if(a){let t=getTouches(a,this.opts,e);if(this.opts.type==="pie"||this.opts.type==="ring"){return findPieChartCurrentIndex({x:t.x,y:t.y},this.opts.chartData.pieData,this.opts)}else if(this.opts.type==="rose"){return findRoseChartCurrentIndex({x:t.x,y:t.y},this.opts.chartData.pieData,this.opts)}else if(this.opts.type==="radar"){return findRadarChartCurrentIndex({x:t.x,y:t.y},this.opts.chartData.radarData,this.opts.categories.length)}else if(this.opts.type==="funnel"){return findFunnelChartCurrentIndex({x:t.x,y:t.y},this.opts.chartData.funnelData)}else if(this.opts.type==="map"){return findMapChartCurrentIndex({x:t.x,y:t.y},this.opts)}else if(this.opts.type==="word"){return findWordChartCurrentIndex({x:t.x,y:t.y},this.opts.chartData.wordCloudData)}else if(this.opts.type==="bar"){return findBarChartCurrentIndex({x:t.x,y:t.y},this.opts.chartData.calPoints,this.opts,this.config,Math.abs(this.scrollOption.currentOffset))}else{return findCurrentIndex({x:t.x,y:t.y},this.opts.chartData.calPoints,this.opts,this.config,Math.abs(this.scrollOption.currentOffset))}}return-1};uCharts.prototype.getLegendDataIndex=function(e){var a=null;if(e.changedTouches){a=e.changedTouches[0]}else{a=e.mp.changedTouches[0]}if(a){let t=getTouches(a,this.opts,e);return findLegendIndex({x:t.x,y:t.y},this.opts.chartData.legendData)}return-1};uCharts.prototype.touchLegend=function(t){var e=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var a=null;if(t.changedTouches){a=t.changedTouches[0]}else{a=t.mp.changedTouches[0]}if(a){var i=getTouches(a,this.opts,t);var r=this.getLegendDataIndex(t);if(r>=0){if(this.opts.type=="candle"){this.opts.seriesMA[r].show=!this.opts.seriesMA[r].show}else{this.opts.series[r].show=!this.opts.series[r].show}this.opts.animation=e.animation?true:false;this.opts._scrollDistance_=this.scrollOption.currentOffset;drawCharts.call(this,this.opts.type,this.opts,this.config,this.context)}}};uCharts.prototype.showToolTip=function(t){var e=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var c=null;if(t.changedTouches){c=t.changedTouches[0]}else{c=t.mp.changedTouches[0]}if(!c){console.log("[uCharts] æªè·åå°eventåæ ä¿¡æ¯")}var a=getTouches(c,this.opts,t);var d=this.scrollOption.currentOffset;var i=assign({},this.opts,{_scrollDistance_:d,animation:false});if(this.opts.type==="line"||this.opts.type==="area"||this.opts.type==="column"||this.opts.type==="scatter"||this.opts.type==="bubble"){var r=this.getCurrentDataIndex(t);var o=e.index==undefined?r.index:e.index;if(o>-1||o.length>0){var n=getSeriesDataItem(this.opts.series,o,r.group);if(n.length!==0){var l=getToolTipData(n,this.opts,o,r.group,this.opts.categories,e),s=l.textList,h=l.offset;h.y=a.y;i.tooltip={textList:e.textList!==undefined?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="mount"){var o=e.index==undefined?this.getCurrentDataIndex(t).index:e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=assign({},i._series_[o]);var s=[{text:e.formatter?e.formatter(n,undefined,o,i):n.name+": "+n.data,color:n.color}];var h={x:i.chartData.calPoints[o].x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="bar"){var r=this.getCurrentDataIndex(t);var o=e.index==undefined?r.index:e.index;if(o>-1||o.length>0){var n=getSeriesDataItem(this.opts.series,o,r.group);if(n.length!==0){var l=getToolTipData(n,this.opts,o,r.group,this.opts.categories,e),s=l.textList,h=l.offset;h.x=a.x;i.tooltip={textList:e.textList!==undefined?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="mix"){var r=this.getCurrentDataIndex(t);var o=e.index==undefined?r.index:e.index;if(o>-1){var d=this.scrollOption.currentOffset;var i=assign({},this.opts,{_scrollDistance_:d,animation:false});var n=getSeriesDataItem(this.opts.series,o);if(n.length!==0){var x=getMixToolTipData(n,this.opts,o,this.opts.categories,e),s=x.textList,h=x.offset;h.y=a.y;i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="candle"){var r=this.getCurrentDataIndex(t);var o=e.index==undefined?r.index:e.index;if(o>-1){var d=this.scrollOption.currentOffset;var i=assign({},this.opts,{_scrollDistance_:d,animation:false});var n=getSeriesDataItem(this.opts.series,o);if(n.length!==0){var l=getCandleToolTipData(this.opts.series[0].data,n,this.opts,o,this.opts.categories,this.opts.extra.candle,e),s=l.textList,h=l.offset;h.y=a.y;i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="pie"||this.opts.type==="ring"||this.opts.type==="rose"||this.opts.type==="funnel"){var o=e.index==undefined?this.getCurrentDataIndex(t):e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=assign({},i._series_[o]);var s=[{text:e.formatter?e.formatter(n,undefined,o,i):n.name+": "+n.data,color:n.color}];var h={x:a.x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="map"){var o=e.index==undefined?this.getCurrentDataIndex(t):e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=assign({},this.opts.series[o]);n.name=n.properties.name;var s=[{text:e.formatter?e.formatter(n,undefined,o,this.opts):n.name,color:n.color}];var h={x:a.x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}i.updateData=false;drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="word"){var o=e.index==undefined?this.getCurrentDataIndex(t):e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=assign({},this.opts.series[o]);var s=[{text:e.formatter?e.formatter(n,undefined,o,this.opts):n.name,color:n.color}];var h={x:a.x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}i.updateData=false;drawCharts.call(this,i.type,i,this.config,this.context)}if(this.opts.type==="radar"){var o=e.index==undefined?this.getCurrentDataIndex(t):e.index;if(o>-1){var i=assign({},this.opts,{animation:false});var n=getSeriesDataItem(this.opts.series,o);if(n.length!==0){var s=n.map(t=>{return{text:e.formatter?e.formatter(t,this.opts.categories[o],o,this.opts):t.name+": "+t.data,color:t.color}});var h={x:a.x,y:a.y};i.tooltip={textList:e.textList?e.textList:s,offset:e.offset!==undefined?e.offset:h,option:e,index:o}}}drawCharts.call(this,i.type,i,this.config,this.context)}};uCharts.prototype.translate=function(t){this.scrollOption={currentOffset:t,startTouchX:t,distance:0,lastMoveTime:0};let e=assign({},this.opts,{_scrollDistance_:t,animation:false});drawCharts.call(this,this.opts.type,e,this.config,this.context)};uCharts.prototype.scrollStart=function(t){var e=null;if(t.changedTouches){e=t.changedTouches[0]}else{e=t.mp.changedTouches[0]}var a=getTouches(e,this.opts,t);if(e&&this.opts.enableScroll===true){this.scrollOption.startTouchX=a.x}};uCharts.prototype.scroll=function(t){if(this.scrollOption.lastMoveTime===0){this.scrollOption.lastMoveTime=Date.now()}let e=this.opts.touchMoveLimit||60;let a=Date.now();let i=a-this.scrollOption.lastMoveTime;if(i<Math.floor(1e3/e))return;if(this.scrollOption.startTouchX==0)return;this.scrollOption.lastMoveTime=a;var r=null;if(t.changedTouches){r=t.changedTouches[0]}else{r=t.mp.changedTouches[0]}if(r&&this.opts.enableScroll===true){var o=getTouches(r,this.opts,t);var n;n=o.x-this.scrollOption.startTouchX;var l=this.scrollOption.currentOffset;var s=calValidDistance(this,l+n,this.opts.chartData,this.config,this.opts);this.scrollOption.distance=n=s-l;var h=assign({},this.opts,{_scrollDistance_:l+n,animation:false});this.opts=h;drawCharts.call(this,h.type,h,this.config,this.context);return l+n}};uCharts.prototype.scrollEnd=function(t){if(this.opts.enableScroll===true){var e=this.scrollOption,a=e.currentOffset,i=e.distance;this.scrollOption.currentOffset=a+i;this.scrollOption.distance=0;this.scrollOption.moveCount=0}};export default uCharts; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "id": "qiun-data-charts", |
|---|
| | | "displayName": "ç§äº ucharts echarts é«æ§è½è·¨å
¨ç«¯å¾è¡¨ç»ä»¶", |
|---|
| | | "version": "2.4.3-20220505", |
|---|
| | | "description": "uCharts æ°å¢åæ缩æ¾ãæ°å¢å±±å³°å¾ï¼æ¯æH5åAPPç¨ ucharts echarts 渲æå¾è¡¨ï¼uniappå¯è§åé¦éç»ä»¶", |
|---|
| | | "keywords": [ |
|---|
| | | "ucharts", |
|---|
| | | "echarts", |
|---|
| | | "f2", |
|---|
| | | "å¾è¡¨", |
|---|
| | | "å¯è§å" |
|---|
| | | ], |
|---|
| | | "repository": "https://gitee.com/uCharts/uCharts", |
|---|
| | | "engines": { |
|---|
| | | "HBuilderX": "^3.3.8" |
|---|
| | | }, |
|---|
| | | "dcloudext": { |
|---|
| | | "category": [ |
|---|
| | | "å端ç»ä»¶", |
|---|
| | | "éç¨ç»ä»¶" |
|---|
| | | ], |
|---|
| | | "sale": { |
|---|
| | | "regular": { |
|---|
| | | "price": "0.00" |
|---|
| | | }, |
|---|
| | | "sourcecode": { |
|---|
| | | "price": "0.00" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "contact": { |
|---|
| | | "qq": "474119" |
|---|
| | | }, |
|---|
| | | "declaration": { |
|---|
| | | "ads": "æ ", |
|---|
| | | "data": "æ件ä¸ééä»»ä½æ°æ®", |
|---|
| | | "permissions": "æ " |
|---|
| | | }, |
|---|
| | | "npmurl": "https://www.npmjs.com/~qiun" |
|---|
| | | }, |
|---|
| | | "uni_modules": { |
|---|
| | | "dependencies": [], |
|---|
| | | "encrypt": [], |
|---|
| | | "platforms": { |
|---|
| | | "cloud": { |
|---|
| | | "tcb": "y", |
|---|
| | | "aliyun": "y" |
|---|
| | | }, |
|---|
| | | "client": { |
|---|
| | | "App": { |
|---|
| | | "app-vue": "y", |
|---|
| | | "app-nvue": "y" |
|---|
| | | }, |
|---|
| | | "H5-mobile": { |
|---|
| | | "Safari": "y", |
|---|
| | | "Android Browser": "y", |
|---|
| | | "微信æµè§å¨(Android)": "y", |
|---|
| | | "QQæµè§å¨(Android)": "y" |
|---|
| | | }, |
|---|
| | | "H5-pc": { |
|---|
| | | "Chrome": "y", |
|---|
| | | "IE": "y", |
|---|
| | | "Edge": "y", |
|---|
| | | "Firefox": "y", |
|---|
| | | "Safari": "y" |
|---|
| | | }, |
|---|
| | | "å°ç¨åº": { |
|---|
| | | "微信": "y", |
|---|
| | | "é¿é": "y", |
|---|
| | | "ç¾åº¦": "y", |
|---|
| | | "åèè·³å¨": "y", |
|---|
| | | "QQ": "y" |
|---|
| | | }, |
|---|
| | | "å¿«åºç¨": { |
|---|
| | | "å为": "y", |
|---|
| | | "èç": "y" |
|---|
| | | }, |
|---|
| | | "Vue": { |
|---|
| | | "vue2": "y", |
|---|
| | | "vue3": "y" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## <font color='red'>åç»uCharts使ç¨è
çä¸å°ä¿¡</font> |
|---|
| | | <font color='red'> |
|---|
| | | 亲ç±çç¨æ·ï¼ |
|---|
| | | |
|---|
| | | - ç±äºæè¿ä¸çº¿çå®ç½ä¸å®è¡äºé¨åæ¶è´¹ä½éªï¼æ¶å°äºè®¸å¤ç¨æ·ç使ç¨åé¦ï¼å¤§è´åé¦çé®é¢é½æååä¸ç头ï¼ä¸ºä½æ°å®ç½çå¨çº¿å·¥å
·ä¹è¦æ¶è´¹ï¼å¯¹äºè¿ä»¶äºï¼æ们深表ææãç±äºæ°å®ç½æ¬èº«æªæä¾ææ¯ææ¡£ï¼ä½¿å¾ç¨æ·è¯¯ä»¥ä¸ºæ们对ææ¡£å®è¡äºæ¶è´¹ãç»æ们è¿å¤æ´æ¹ï¼æ°å®ç½ç®åå·²ç»å°ææ¯ææ¡£å¼æ¾åºæ¥ä¾å¤§å®¶é
读使ç¨ï¼å¹¶å
费对å¤å¼æ¾äºãæ¼ç¤ºãä¸çæ¥çå
¨ç«¯å
¨å¹³å°ç代ç çåè½ï¼ä¸ºæ¤å次åæåå½±åçç¨æ·ä»¬è´ä»¥è¯æ³çææã |
|---|
| | | |
|---|
| | | - å
¶æ¬¡ï¼æ们须æ¾æ¸
å ç¹ï¼å¦ä¸ï¼ |
|---|
| | | 1. uChartsçæ件æ¬èº«éµå¾ªå¼æºååï¼å¹¶ä¸æ¶è´¹ï¼ç¨æ·å¯èªè¡å°DCloudå¸åºä¸Giteeç äºä¸è·åæºç |
|---|
| | | 2. uChartsçææ¯æ档永ä¹
对ç¨æ·å¼æ¾ |
|---|
| | | 3. æ¶è´¹å
容ä»
é对åçå·¥å
·ãç»ä»¶å·¥å
·ãå®å¶åè½ä»¥å模æ¿å¸åºçé¨åæ¶è´¹æ¨¡æ¿ |
|---|
| | | |
|---|
| | | - uCharts为ä»ä¹å®è¡æ¶è´¹ååï¼ |
|---|
| | | 1. æå¡å¨çè´¹ç¨æ¯æ |
|---|
| | | 2. å¢éçè¿è¥æ¯åºï¼æ£å¦ä½ æè§ï¼æ们ç群éæ大éçç¨æ·å¨è¯·æå¾è¡¨é
ç½®ä¸åé¦é®é¢ï¼ç¾¤éçæ¯ä¸ä½ç®¡çåé½å¨è±è´¹ä¸å°ç²¾åå¨ç§¯æ解å³ç¨æ·çé®é¢ï¼ç¶èéå°å·¨å¤§çå¨è¯¢éæ¶ï¼æ们æ æ³åæ¶ãç²¾å解çåå¤ï¼å æ¤ï¼æ们æ¨åºäºä¼åä¼å
æå¡ |
|---|
| | | 3. ä¸å
¶è¯´æ¨¡æ¿å¸åºæ¯æ¶è´¹ï¼åä¸å¦è¯´ç»éçç¨æ·æä¾äºåé ä»·å¼çæºä¼ï¼ç¨æ·æ¢å¯ä»¥å¨ä¸é¢åå¸æ¨¡æ¿èµåè´¹ç¨ï¼éå°å¿å¨ç模æ¿ä¹è½å
è´¹/ä»è´¹ä½¿ç¨ |
|---|
| | | |
|---|
| | | - æ¶è´¹ä¸æ¯ç®çï¼æ£å¦ä½ 们æè§ï¼ç¨æ·å¯ä»¥ç³è¯·æ为[ãå¼åè
ã](https://www.ucharts.cn/v2/#/agreement/developer)ï¼å¼åè
ä¸éå¶ä»»ä½å®ç½åè½ï¼å¹¶äº«æå®æ¹æ导ãå¼åãæ¹é uChartsçæåï¼å¹¶ä¸æ´»å¨æé´ãè¿è¿è¶
级ä¼åè´¹ç¨ãï¼æ们æ³è¯´çæ¯ï¼æ们æ°çå®ç½ä¸çº¿æ¨å¨å¸ææ´å¤çç¨æ·å å
¥å°å¼åè
çéä¼ï¼æ们å
±åå»ç»´æ¤uChartsï¼ |
|---|
| | | |
|---|
| | | æ们ç¸ä¿¡ï¼ææä¹ç«å¯ä»¥çåï¼ |
|---|
| | | |
|---|
| | | uChartsææ¯å¢é |
|---|
| | | |
|---|
| | | 2022.4.23 |
|---|
| | | |
|---|
| | | </font> |
|---|
| | | |
|---|
| | | |
|---|
| | |  |
|---|
| | | |
|---|
| | | |
|---|
| | | [](https://gitee.com/uCharts/uCharts/stargazers) |
|---|
| | | [](https://gitee.com/uCharts/uCharts/members) |
|---|
| | | [](https://www.apache.org/licenses/LICENSE-2.0.html) |
|---|
| | | [](https://www.npmjs.com/~qiun) |
|---|
| | | |
|---|
| | | |
|---|
| | | ## uChartsç®ä» |
|---|
| | | |
|---|
| | | `uCharts`æ¯ä¸æ¬¾åºäº`canvas API`å¼åçéç¨äºææå端åºç¨çå¾è¡¨åºï¼å¼åè
ç¼åä¸å¥ä»£ç ï¼å¯è¿è¡å° WebãiOSãAndroidï¼åºäº uni-app / taro ï¼ã以ååç§å°ç¨åºï¼å¾®ä¿¡/æ¯ä»å®/ç¾åº¦/头æ¡/é£ä¹¦/QQ/å¿«æ/éé/æ·å®ï¼ãå¿«åºç¨çæ´å¤æ¯æ canvas API çå¹³å°ã |
|---|
| | | |
|---|
| | | ## å®æ¹ç½ç« |
|---|
| | | |
|---|
| | | ## [https://www.ucharts.cn](https://www.ucharts.cn) |
|---|
| | | |
|---|
| | | ## å¿«éä½éª |
|---|
| | | |
|---|
| | | ä¸å¥ä»£ç ç¼å°å¤ä¸ªå¹³å°ï¼ä¾æ¬¡æ«æäºç»´ç ï¼äº²èªä½éªuChartså¾è¡¨è·¨å¹³å°ææï¼å
¶ä»å¹³å°è¯·èªè¡ç¼è¯ã |
|---|
| | | |
|---|
| | |  |
|---|
| | | |
|---|
| | | ## è´å¼åè
|
|---|
| | | |
|---|
| | | æè°¢åä½å¼åè
`åå¹´`æ¥å¯¹ç§äºåuChartsçæ¯æï¼uChartsçè¿æ¥ç¦»ä¸å¼åä½å¼åè
çé¼å±ä¸è´¡ç®ã为æ´å¥½ç帮å©åä½å¼åè
使ç¨å¾è¡¨å·¥å
·ï¼æ们æ¨åºäºæ°çå®ç½ï¼å¢å äºå¨çº¿å®å¶ãé®ç社åºãå¨çº¿é
ç½®çä¸äºå¢å¼æå¡ï¼ä¸ºç¡®ä¿æ¨è½æ´å¥½çåºç¨å¾è¡¨ç»ä»¶ï¼å»ºè®®æ¨å
`ä»ç»é
读æ¬é¡µæå`以å`常è§é®é¢`ï¼èä¸æ¯ä¸è½½ä¸æ¥`ç´æ¥ä½¿ç¨`ãå¦ä»ç¶ä¸è½è§£å³ï¼è¯·å°`å®ç½ç¤¾åº`æå¼éä¼ååå å
¥`ä¸å±VIPä¼å群`æé®å°ä¼å¾å¿«å¾å°åçã |
|---|
| | | |
|---|
| | | ## 社群æ¯æ |
|---|
| | | |
|---|
| | | uChartså®æ¹æ¥æ4个2000人çQQ群åä¸å±VIPä¼å群æ¯æï¼åºå¤§çç¨æ·éè¯ææ们ä¸ç´å¨åªåï¼è¯·åä½æ¾å¿ä½¿ç¨ï¼uChartsçå¼æºå¾è¡¨ç»ä»¶çå¼åï¼å¢éä»åºäºå¤§éçæ¶é´ä¸ç²¾åï¼ç»è¿åæ¥çèéªï¼ä¸ä¼ææ¯è¾ææ¾çbugï¼è¯·åä½æ¾å¿ä½¿ç¨ãå¦ææ¨ææ´å¥½çæ³æ³ï¼å¯ä»¥å¨`ç äºæ交Pull Requests`以帮å©æ´å¤å¼åè
å®æéæ±ï¼å次æè°¢åä½å¯¹uChartsçé¼å±ä¸æ¯æï¼ |
|---|
| | | |
|---|
| | | #### å®æ¹äº¤æµç¾¤ |
|---|
| | | - 交æµç¾¤1ï¼371774600ï¼å·²æ»¡ï¼ |
|---|
| | | - 交æµç¾¤2ï¼619841586ï¼å·²æ»¡ï¼ |
|---|
| | | - 交æµç¾¤3ï¼955340127ï¼å·²æ»¡ï¼ |
|---|
| | | - 交æµç¾¤4ï¼641669795 |
|---|
| | | - å£ä»¤`uniapp` |
|---|
| | | |
|---|
| | | #### ä¸å±VIPä¼å群 |
|---|
| | | - å¼éä¼åå详è§ãè´¦å·è¯¦æ
ã页é¢ä¸é¡¶é¨çæ»å¨éç¥ |
|---|
| | | - å£ä»¤`æ¨çç¨æ·ID` |
|---|
| | | |
|---|
| | | ## çæä¿¡æ¯ |
|---|
| | | |
|---|
| | | uChartså§ç»åæå¼æºï¼éµå¾ª [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) å¼æºåè®®ï¼æå³çæ¨æ éæ¯ä»ä»»ä½è´¹ç¨ï¼å³å¯å°uChartsåºç¨å°æ¨ç产åä¸ã |
|---|
| | | |
|---|
| | | 注æï¼è¿å¹¶ä¸æå³çæ¨å¯ä»¥å°uChartsåºç¨å°éæ³çé¢åï¼æ¯å¦æ¶åèµåï¼æ´åçæ¹é¢ãå¦å æ¤äº§ççº çº·ææ³å¾é®é¢ï¼uChartsç¸å
³æ¹åç§äºç§æä¸æ¿æ
ä»»ä½è´£ä»»ã |
|---|
| | | |
|---|
| | | ## åä½ä¼ä¼´ |
|---|
| | | |
|---|
| | | [](https://www.diygw.com/) |
|---|
| | | [](https://gitee.com/howcode/has-chat) |
|---|
| | | [](https://www.uviewui.com/) |
|---|
| | | [](https://ext.dcloud.net.cn/plugin?id=7088) |
|---|
| | | [](https://ext.dcloud.net.cn/publisher?id=202) |
|---|
| | | [](https://www.firstui.cn/) |
|---|
| | | [](https://ext.dcloud.net.cn/plugin?id=5169) |
|---|
| | | [](https://www.graceui.com/) |
|---|
| | | |
|---|
| | | |
|---|
| | | ## æ´æ°è®°å½ |
|---|
| | | |
|---|
| | | 详è§å®ç½æåä¸è¯´æï¼[ç¹å»æ¤å¤æ¥ç](https://www.ucharts.cn/v2/#/guide/index?id=100) |
|---|
| | | |
|---|
| | | |
|---|
| | | ## ç¸å
³é¾æ¥ |
|---|
| | | - [uChartså®ç½](https://www.ucharts.cn) |
|---|
| | | - [DCloudæ件å¸åºå°å](https://ext.dcloud.net.cn/plugin?id=271) |
|---|
| | | - [uChartsç äºå¼æºæ管å°å](https://gitee.com/uCharts/uCharts) [](https://gitee.com/uCharts/uCharts/stargazers) |
|---|
| | | - [uCharts npmå¼æºå°å](https://www.ucharts.cn) |
|---|
| | | - [EChartså®ç½](https://echarts.apache.org/zh/index.html) |
|---|
| | | - [EChartsé
ç½®æå](https://echarts.apache.org/zh/option.html) |
|---|
| | | - [å¾è¡¨ç»ä»¶å¨é¡¹ç®ä¸çåºç¨ ReportPlusæ°æ®æ¥è¡¨](https://www.ucharts.cn/v2/#/layout/info?id=1) |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | MIT License |
|---|
| | | |
|---|
| | | Copyright (c) 2020 www.uviewui.com |
|---|
| | | |
|---|
| | | Permission is hereby granted, free of charge, to any person obtaining a copy |
|---|
| | | of this software and associated documentation files (the "Software"), to deal |
|---|
| | | in the Software without restriction, including without limitation the rights |
|---|
| | | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|---|
| | | copies of the Software, and to permit persons to whom the Software is |
|---|
| | | furnished to do so, subject to the following conditions: |
|---|
| | | |
|---|
| | | The above copyright notice and this permission notice shall be included in all |
|---|
| | | copies or substantial portions of the Software. |
|---|
| | | |
|---|
| | | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|---|
| | | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|---|
| | | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|---|
| | | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|---|
| | | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|---|
| | | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|---|
| | | SOFTWARE. |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <p align="center"> |
|---|
| | | <img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;"> |
|---|
| | | </p> |
|---|
| | | <h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3> |
|---|
| | | <h3 align="center">å¤å¹³å°å¿«éå¼åçUIæ¡æ¶</h3> |
|---|
| | | |
|---|
| | | ## 说æ |
|---|
| | | |
|---|
| | | uView UIï¼æ¯[uni-app](https://uniapp.dcloud.io/)çæä¼ç§çUIæ¡æ¶ï¼å
¨é¢çç»ä»¶å便æ·çå·¥å
·ä¼è®©æ¨ä¿¡æææ¥ï¼å¦é±¼å¾æ°´ |
|---|
| | | |
|---|
| | | ## ç¹æ§ |
|---|
| | | |
|---|
| | | - å
¼å®¹å®åï¼iOSï¼å¾®ä¿¡å°ç¨åºï¼H5ï¼QQå°ç¨åºï¼ç¾åº¦å°ç¨åºï¼æ¯ä»å®å°ç¨åºï¼å¤´æ¡å°ç¨åº |
|---|
| | | - 60+ç²¾éç»ä»¶ï¼åè½ä¸°å¯ï¼å¤ç«¯å
¼å®¹ï¼è®©æ¨å¿«ééæï¼å¼ç®±å³ç¨ |
|---|
| | | - ä¼å¤è´´å¿çJSå©å¨ï¼è®©æ¨é£éå¨æï¼å¬ä¹å³æ¥ï¼ç¾æ¥ç©¿æ¨ |
|---|
| | | - ä¼å¤ç常ç¨é¡µé¢åå¸å±ï¼è®©æ¨ä¸æ³¨é»è¾ï¼äºååå |
|---|
| | | - 详尽çææ¡£æ¯æï¼ç°ä»£åçæ¼ç¤ºææ |
|---|
| | | - æéå¼å
¥ï¼ç²¾ç®æå
ä½ç§¯ |
|---|
| | | |
|---|
| | | |
|---|
| | | ## å®è£
|
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | # npmæ¹å¼å®è£
ï¼æ件å¸åºå¯¼å
¥æ éæ§è¡æ¤å½ä»¤ |
|---|
| | | npm i uview-ui |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ## å¿«éä¸æ |
|---|
| | | |
|---|
| | | 1. `main.js`å¼å
¥uViewåº |
|---|
| | | ```js |
|---|
| | | // main.js |
|---|
| | | import uView from 'uview-ui'; |
|---|
| | | Vue.use(uView); |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 2. `App.vue`å¼å
¥åºç¡æ ·å¼(注æstyleæ ç¾é声æscsså±æ§æ¯æ) |
|---|
| | | ```css |
|---|
| | | /* App.vue */ |
|---|
| | | <style lang="scss"> |
|---|
| | | @import "uview-ui/index.scss"; |
|---|
| | | </style> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 3. `uni.scss`å¼å
¥å
¨å±scssåéæ件 |
|---|
| | | ```css |
|---|
| | | /* uni.scss */ |
|---|
| | | @import "uview-ui/theme.scss"; |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 4. `pages.json`é
ç½®easycomè§å(æéå¼å
¥) |
|---|
| | | |
|---|
| | | ```js |
|---|
| | | // pages.json |
|---|
| | | { |
|---|
| | | "easycom": { |
|---|
| | | // npmå®è£
çæ¹å¼ä¸éè¦åé¢ç"@/"ï¼ä¸è½½å®è£
çæ¹å¼éè¦"@/" |
|---|
| | | // npmå®è£
æ¹å¼ |
|---|
| | | "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" |
|---|
| | | // ä¸è½½å®è£
æ¹å¼ |
|---|
| | | // "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" |
|---|
| | | }, |
|---|
| | | // æ¤ä¸ºæ¬èº«å·²æçå
容 |
|---|
| | | "pages": [ |
|---|
| | | // ...... |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 请éè¿[å¿«éä¸æ](https://www.uviewui.com/components/quickstart.html)äºè§£æ´è¯¦ç»çå
容 |
|---|
| | | |
|---|
| | | ## 使ç¨æ¹æ³ |
|---|
| | | é
ç½®easycomè§ååï¼èªå¨æéå¼å
¥ï¼æ é`import`ç»ä»¶ï¼ç´æ¥å¼ç¨å³å¯ã |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | <template> |
|---|
| | | <u-button text="æé®"></u-button> |
|---|
| | | </template> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 请éè¿[å¿«éä¸æ](https://www.uviewui.com/components/quickstart.html)äºè§£æ´è¯¦ç»çå
容 |
|---|
| | | |
|---|
| | | ## é¾æ¥ |
|---|
| | | |
|---|
| | | - [å®æ¹ææ¡£](https://www.uviewui.com/) |
|---|
| | | - [æ´æ°æ¥å¿](https://www.www.uviewui.com/components/changelog.html) |
|---|
| | | - [å级æå](https://www.uviewui.com/components/changelog.html) |
|---|
| | | - [å
³äºæ们](https://www.uviewui.com/cooperation/about.html) |
|---|
| | | |
|---|
| | | ## é¢è§ |
|---|
| | | |
|---|
| | | æ¨å¯ä»¥éè¿**微信**æ«ç ï¼æ¥çæä½³çæ¼ç¤ºææã |
|---|
| | | <br> |
|---|
| | | <br> |
|---|
| | | <img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" > |
|---|
| | | |
|---|
| | | ## æèµ uViewçç å |
|---|
| | | |
|---|
| | | uViewææ¡£åæºç å
¨é¨å¼æºå
è´¹ï¼å¦ææ¨è®¤ä¸ºuView帮å°äºæ¨çå¼åå·¥ä½ï¼æ¨å¯ä»¥æèµ uViewçç åå·¥ä½ï¼æèµ æ é¨æ§ï¼åªææ¯ä¸æ¯å¯ä¹ä¹å¥½(ç¸ä¿¡è¿æ¯æèµä¸»ææ´ææä¹)ã |
|---|
| | | |
|---|
| | | <img src="https://uviewui.com/common/alipay.png" width="220" ><img style="margin-left: 100px;" src="https://uviewui.com/common/wechat.png" width="220" > |
|---|
| | | |
|---|
| | | ## çæä¿¡æ¯ |
|---|
| | | uViewéµå¾ª[MIT](https://en.wikipedia.org/wiki/MIT_License)å¼æºåè®®ï¼æå³çæ¨æ éæ¯ä»ä»»ä½è´¹ç¨ï¼ä¹æ éææï¼å³å¯å°uViewåºç¨å°æ¨ç产åä¸ã |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | ## 2.0.31ï¼2022-04-19ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤`upload`å¨`vue`页é¢ä¸ä¼ æåå没ææåæ å¿çé®é¢ |
|---|
| | | 2. 解å³æ¼ç¤ºé¡¹ç®ä¸å¾®ä¿¡å°ç¨åºæ¨¡æä¸ä¼ å¾çä¸ç´åºäºä¸ä¼ ä¸é®é¢ |
|---|
| | | 3. ä¿®å¤`u-code-input`ç»ä»¶å¨`nvue`页é¢ç¼è¯å°`app`å¹³å°ä¸å
æ å¼å¸¸é®é¢ï¼`app`å»é¤æ¤åè½ï¼ |
|---|
| | | 4. ä¿®å¤`actionSheet`ç»ä»¶æ é¢å
³éæé®ç¹å»äºä»¶å称é误çé®é¢ |
|---|
| | | 5. å
¶ä»ä¿®å¤ |
|---|
| | | ## 2.0.30ï¼2022-04-04ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. `u-rate`å¢å `readonly`å±æ§ |
|---|
| | | 2. `tabs`æ»åæ¯æ设置èæ¯å¾ç |
|---|
| | | 3. ä¿®å¤`u-subsection` `mode`为`subsection`æ¶ï¼æ»åæ ·å¼ä¸æ£ç¡®çé®é¢ |
|---|
| | | 4. `u-code-input`æ·»å å
æ ææå¨ç» |
|---|
| | | 5. ä¿®å¤`popup`ç`open`äºä»¶ä¸è§¦å |
|---|
| | | 6. ä¿®å¤`u-flex-column`æ æçé®é¢ |
|---|
| | | 7. ä¿®å¤`u-datetime-picker`ç´¢å¼å¨ç¹å®åºåå¼å¸¸é®é¢ |
|---|
| | | 8. ä¿®å¤`u-datetime-picker`æå°æ¶é´å符串模æ¿é误é®é¢ |
|---|
| | | 9. `u-swiper`æ·»å `m3u8`éªè¯ |
|---|
| | | 10. `u-swiper`ä¿®æ¹å¤æimageåvideoé»è¾ |
|---|
| | | 11. ä¿®å¤`swiper`æ æ³ä½¿ç¨æ¬å°å¾çé®é¢ï¼å¢å `type`åæ° |
|---|
| | | 12. ä¿®å¤`u-row-notice`æ ¼å¼é误é®é¢ |
|---|
| | | 13. ä¿®å¤`u-switch`ç»ä»¶å½`unit`为`rpx`æ¶,`nodeStyle`æ¶å¤±çé®é¢ |
|---|
| | | 14. ä¿®å¤`datetime-picker`ç»ä»¶`showToolbar`ä¸`visibleItemCount`å±æ§æ æçé®é¢ |
|---|
| | | 15. ä¿®å¤`upload`ç»ä»¶æ¡ä»¶ç¼è¯ä½ç½®å¤æé误ï¼å¯¼è´`previewImage`å±æ§è®¾ç½®ä¸º`false`æ¶ï¼æ´ä¸ªç»ä»¶é½ä¼è¢«éèçé®é¢ |
|---|
| | | 16. ä¿®å¤`u-checkbox-group`设置`shape`å±æ§æ æçé®é¢ |
|---|
| | | 17. ä¿®å¤`u-upload`ç`capture`ä¼ å
¥å符串çæ¶åä¸çæçé®é¢ |
|---|
| | | 18. ä¿®å¤`u-action-sheet`ç»ä»¶ï¼å
³éäºä»¶é»è¾é误çé®é¢ |
|---|
| | | 19. ä¿®å¤`u-list`触顶äºä»¶ç触åé误çé®é¢ |
|---|
| | | 20. ä¿®å¤`u-text`åªæææºå·å¯æ¨æçé®é¢ |
|---|
| | | 21. ä¿®å¤`u-textarea`ä¸è½æ¢è¡çé®é¢ |
|---|
| | | 22. å
¶ä»ä¿®å¤ |
|---|
| | | ## 2.0.29ï¼2022-03-13ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤`u--text`ç»ä»¶è®¾ç½®`decoration`å±æ§æªçæçé®é¢ |
|---|
| | | 2. ä¿®å¤`u-datetime-picker`使ç¨`formatter`åè¿åå¼ä¸æ£ç¡® |
|---|
| | | 3. ä¿®å¤`u-datetime-picker` `intercept` å¯è½ä¸ºundefined |
|---|
| | | 4. ä¿®å¤å·²è®¾ç½®åä½ uni..config.unit = 'rpx'æ¶ï¼çº¿åæç¤ºå¨ `transform` çä½ç½®ç¿»åï¼å¯¼è´æ示å¨è¶
åºå®½åº¦ |
|---|
| | | 5. ä¿®å¤mixinä¸bemæ¹æ³çæçç±»åå¨æ¯ä»å®ååèå°ç¨åºä¸å¤±æ |
|---|
| | | 6. ä¿®å¤é»è®¤å¼ä¼ å¼ä¸ºç©ºçæ¶åï¼æå¼`u-datetime-picker`æ¥éï¼ä¸è½éä¸ç¬¬ä¸åæ¶é´çbug |
|---|
| | | 7. ä¿®å¤`u-datetime-picker`使ç¨`formatter`åè¿åå¼ä¸æ£ç¡® |
|---|
| | | 8. ä¿®å¤`u-image`ç»ä»¶`loading`æ ææçé®é¢ |
|---|
| | | 9. ä¿®å¤`config.unit`å±æ§è®¾ä¸º`rpx`æ¶ï¼å¯¼èªæ å ç¨é«åº¦ä¸è¶³å¯¼è´å¡é·çé®é¢ |
|---|
| | | 10. ä¿®å¤`u-datetime-picker`ç»ä»¶`itemHeight`æ æé®é¢ |
|---|
| | | 11. å
¶ä»ä¿®å¤ |
|---|
| | | ## 2.0.28ï¼2022-02-22ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. searchç»ä»¶æ°å¢searchIconSizeå±æ§ |
|---|
| | | 2. å
¼å®¹Safari/Webkitä¸ä¼ å
¥æ¶é´æ ¼å¼å¦2022-02-17 12:00:56 |
|---|
| | | 3. ä¿®å¤text value.js å¤ææ¥æåºformaté误é®é¢ |
|---|
| | | 4. priceFormatæ ¼å¼åéé¢åºç°ç²¾åº¦é误 |
|---|
| | | 5. priceFormatå¨é¨åæ
åµä¸åºç°ç²¾åº¦æ失é®é¢ |
|---|
| | | 6. ä¼å表årulesæ示 |
|---|
| | | 7. ä¿®å¤avatarç»ä»¶src为空æ¶ï¼å±ç¤ºç¶æä¸å¯¹ |
|---|
| | | 8. å
¶ä»ä¿®å¤ |
|---|
| | | ## 2.0.27ï¼2022-01-28ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1.æ ·å¼ä¿®å¤ |
|---|
| | | ## 2.0.26ï¼2022-01-28ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1.æ ·å¼ä¿®å¤ |
|---|
| | | ## 2.0.25ï¼2022-01-27ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤textç»ä»¶mode=priceæ¶ï¼å¯è½ä¼å¯¼è´ç²¾åº¦é误çé®é¢ |
|---|
| | | 2. æ·»å $u.setConfig()æ¹æ³ï¼å¯è®¾ç½®uViewå
ç½®çconfig, props, zIndex, colorå±æ§ï¼è¯¦è§ï¼[ä¿®æ¹uViewå
ç½®é
ç½®æ¹æ¡](https://uviewui.com/components/setting.html#%E9%BB%98%E8%AE%A4%E5%8D%95%E4%BD%8D%E9%85%8D%E7%BD%AE) |
|---|
| | | 3. ä¼åformç»ä»¶å¨errorType=toastæ¶ï¼å¦æè¾å
¥é误页é¢ä¼ææå¨çé®é¢ |
|---|
| | | 4. ä¿®å¤$u.addUnit()对é
ç½®é»è®¤åä½å¯è½æ æçé®é¢ |
|---|
| | | ## 2.0.24ï¼2022-01-25ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤swiperå¨currentæå®é0æ¶ç¼©æ¾æ误 |
|---|
| | | 2. ä¿®å¤u-iconæ·»å stopå±æ§çæ¶åæ¥é |
|---|
| | | 3. ä¼åéççéè¿æ£åå¤ærpxåä½çé®é¢ |
|---|
| | | 4. ä¼åLayoutå¸å± vue使ç¨gutteræ¶ï¼ä¼è¶
åºåºå®åºå |
|---|
| | | 5. ä¼åsearchç»ä»¶é«åº¦åä½é®é¢ï¼rpx -> pxï¼ |
|---|
| | | 6. ä¿®å¤u-image slot å è½½åé误çå¾ç失å»äºé«åº¦ |
|---|
| | | 7. ä¿®å¤u-index-listä¸footeræ槽ä¸headeræ槽åå¨æ§å¤æé误 |
|---|
| | | 8. ä¿®å¤é¨åæºåä¸u-popupå
³éæ¶ä¼éªç |
|---|
| | | 9. ä¿®å¤u-imageå¨nvue-appä¸å¤±å»å®½é« |
|---|
| | | 10. ä¿®å¤u-popupè¿è¡æ¥é |
|---|
| | | 11. ä¿®å¤u-tooltipæ¥é |
|---|
| | | 12. ä¿®å¤box-sizingå¨appä¸çè¦å |
|---|
| | | 13. ä¿®å¤u-navbarå¨å°ç¨åºä¸æ¥è¿è¡æ¶é误 |
|---|
| | | 14. å
¶ä»ä¿®å¤ |
|---|
| | | ## 2.0.23ï¼2022-01-24ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤imageç»ä»¶å¨hx3.3.9çnvueä¸å¯è½ä¼æ¾ç¤ºå¼å¸¸çé®é¢ |
|---|
| | | 2. ä¿®å¤colç»ä»¶gutteråæ°å¸¦rpxåä½å¤çä¸æ£ç¡®çé®é¢ |
|---|
| | | 3. ä¿®å¤textç»ä»¶åè¡æ¶æ æ³æ¾ç¤ºçç¥å·çé®é¢ |
|---|
| | | 4. navbaræ·»å titleStyleåæ° |
|---|
| | | 5. å级å°hx3.3.9å¯æ¶é¤nvueä¸æ§å¶å°æ ·å¼è¦åçé®é¢ |
|---|
| | | ## 2.0.22ï¼2022-01-19ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. $u.page()æ¹æ³ä¼åï¼é¿å
å¨ç¹æ®åºæ¯å¯è½æ¥éçé®é¢ |
|---|
| | | 2. pickerç»ä»¶æ·»å immediateChangeåæ° |
|---|
| | | 3. æ°å¢$u.pages()æ¹æ³ |
|---|
| | | ## 2.0.21ï¼2022-01-19ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¼åï¼formç»ä»¶å¨ç¨æ·è®¾ç½®rulesçæ¶åæ示ç¨æ·modelå¿
ä¼ |
|---|
| | | 2. ä¼åéççéè¿æ£åå¤ærpxåä½çé®é¢ |
|---|
| | | 3. ä¿®å¤å¾®ä¿¡å°ç¨åºç¯å¢ä¸tabbarç»ä»¶å¼å¯safeAreaInsetBottomå±æ§åï¼placeholderé«åº¦å¡«å
ä¸æ£ç¡® |
|---|
| | | 4. ä¿®å¤swiperå¨currentæå®é0æ¶ç¼©æ¾æ误 |
|---|
| | | 5. ä¿®å¤u-iconæ·»å stopå±æ§çæ¶åæ¥é |
|---|
| | | 6. ä¿®å¤uploadç»ä»¶å¨accept=allçæ¶å没æä½ç¨ |
|---|
| | | 7. ä¿®å¤å¨textç»ä»¶mode为phoneæ¶callå±æ§æ æçé®é¢ |
|---|
| | | 8. å¤çu-form clearValidateæ¹æ³ |
|---|
| | | 9. å
¶ä»ä¿®å¤ |
|---|
| | | ## 2.0.20ï¼2022-01-14ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤calendaré»è®¤ä¼éæ©ä¸ä¸ªæ¥æï¼å¦æç´æ¥ç¹ç¡®å®çè¯ï¼æ æ³åå°å¼çé®é¢ |
|---|
| | | 2. ä¿®å¤Slider缺å°disabled props è¿æ注é |
|---|
| | | 3. ä¿®å¤u-notice-barç¹å»äºä»¶æ æ³æ¿å°indexç´¢å¼å¼çé®é¢ |
|---|
| | | 4. ä¿®å¤u-collapse-itemå¨vueæ件ä¸ï¼app端èªå®ä¹æ槽ä¸çæçé®é¢ |
|---|
| | | 5. ä¼å头å为空æ¶æ¾ç¤ºé»è®¤å¤´å |
|---|
| | | 6. ä¿®å¤å¾çå°åèµå¼åå¤æå è½½ç¶æ为å®æé®é¢ |
|---|
| | | 7. ä¿®å¤æ¥åæ»å¨å°é»è®¤æ¥ææ份åºå |
|---|
| | | 8. searchç»ä»¶æ´é²ç¹å»å·¦è¾¹iconäºä»¶ |
|---|
| | | 9. ä¿®å¤u-form clearValidateæ¹æ³ä¸çæ |
|---|
| | | 10. upload h5端å¢å è¿åæ件åæ°ï¼æ件çnameåæ°ï¼ |
|---|
| | | 11. å¤çuploadéæ©æ件åurl为blobç±»åæ æ³é¢è§çé®é¢ |
|---|
| | | 12. u-code-input ä¿®å¤è¾å
¥æ¡æ²¡æå¾å·¦ç§»åºä¸åå±å¹ |
|---|
| | | 13. ä¿®å¤Uploadä¸ä¼ disabled为trueæ¶ï¼æ§å¶å°æ¥hoverClassç±»åé误 |
|---|
| | | 14. 临æ¶å¤çios appä¸gridç¹å»åå¡é®é¢ |
|---|
| | | 15. å
¶ä»ä¿®å¤ |
|---|
| | | ## 2.0.19ï¼2021-12-29ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¼å微信å°ç¨åºå
ä½ç§¯å¯å¨å¾®ä¿¡ä¸é¢è§ï¼è¯·å级HbuilderX3.3.4ï¼åæ¶å¨âè¿è¡->è¿è¡å°å°ç¨åºæ¨¡æå¨âä¸å¾éâè¿è¡æ¶æ¯å¦å缩代ç â |
|---|
| | | 2. ä¼å微信å°ç¨åºsetDataæ§è½ï¼å¤çæäºæ¹æ³å¦$u.route()æ æ³å¨æ¨¡æ¿ä¸ä½¿ç¨çé®é¢ |
|---|
| | | 3. navbaræ·»å autoBackåæ° |
|---|
| | | 4. å
许avatarç»ä»¶çäºä»¶å泡 |
|---|
| | | 5. ä¿®å¤cellç»ä»¶æ¥éé®é¢ |
|---|
| | | 6. å
¶ä»ä¿®å¤ |
|---|
| | | ## 2.0.18ï¼2021-12-28ï¼ |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤app端ç¼è¯æ¥éé®é¢ |
|---|
| | | 2. éæ°å¤ç微信å°ç¨åºç«¯setDataè¿å¤§çæ§è½é®é¢ |
|---|
| | | 3. ä¿®å¤è¾¹æ¡é®é¢ |
|---|
| | | 4. ä¿®å¤æ大æå°æ份ä¸å¤§äº0å没ææ°æ®åºç°çé®é¢ |
|---|
| | | 5. ä¿®å¤SwipeAction微信å°ç¨åºç«¯æ æ³ä¸ä¸æ»å¨é®é¢ |
|---|
| | | 6. ä¿®å¤inputçplaceholderå¨å°ç¨åºç«¯é»è®¤æ¾ç¤ºä¸ºtrueé®é¢ |
|---|
| | | 7. ä¿®å¤dividerç»ä»¶clickäºä»¶æ æé®é¢ |
|---|
| | | 8. ä¿®å¤u-code-input maxlength å±æ§å¼ä¸º String ç±»åæ¶æ¾ç¤ºå¼å¸¸ |
|---|
| | | 9. ä¿®å¤å½ gridåªæ 1å°2æ¶ å¨å°ç¨åºç«¯algin设置æ æçé®é¢ |
|---|
| | | 10. å¤çform-itemçlabel为topæ¶ï¼åæ¶é误æ示çå·¦è¾¹è· |
|---|
| | | 11. å
¶ä»ä¿®å¤ |
|---|
| | | ## 2.0.17ï¼2021-12-26ï¼ |
|---|
| | | ## uViewæ£å¨åä¸å¼æºä¸å½çâ年度æ佳项ç®âè¯éï¼ä¹åæè¿ç¥¨çç°å¨ä¹å¯ä»¥æ票ï¼æ³è¯·åå¦ä»¬æä¸ç¥¨ï¼[ç¹æ¤å¸®å©uView](https://www.oschina.net/project/top_cn_2021/?id=583) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. 解å³HBuilderX3.3.3.20211225çæ¬å¯¼è´çæ ·å¼é®é¢ |
|---|
| | | 2. calendaræ¥åæ·»å monthNumåæ° |
|---|
| | | 3. navbaræ·»å center slot |
|---|
| | | ## 2.0.16ï¼2021-12-25ï¼ |
|---|
| | | ## uViewæ£å¨åä¸å¼æºä¸å½çâ年度æ佳项ç®âè¯éï¼ä¹åæè¿ç¥¨çç°å¨ä¹å¯ä»¥æ票ï¼æ³è¯·åå¦ä»¬æä¸ç¥¨ï¼[ç¹æ¤å¸®å©uView](https://www.oschina.net/project/top_cn_2021/?id=583) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. 解å³å¾®ä¿¡å°ç¨åºsetDataæ§è½é®é¢ |
|---|
| | | 2. ä¿®å¤count-downç»ä»¶changeäºä»¶ä¸è§¦åé®é¢ |
|---|
| | | ## 2.0.15ï¼2021-12-21ï¼ |
|---|
| | | ## uViewæ£å¨åä¸å¼æºä¸å½çâ年度æ佳项ç®âè¯éï¼ä¹åæè¿ç¥¨çç°å¨ä¹å¯ä»¥æ票ï¼æ³è¯·åå¦ä»¬æä¸ç¥¨ï¼[ç¹æ¤å¸®å©uView](https://www.oschina.net/project/top_cn_2021/?id=583) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤Cellåå
æ ¼titleWidthæ æ |
|---|
| | | 2. ä¿®å¤cheakboxç»ä»¶ischeckedä¸æ´æ° |
|---|
| | | 3. ä¿®å¤keyboardæ¯å¦æ¾ç¤º"."æé®é»è®¤å¼é®é¢ |
|---|
| | | 4. ä¿®å¤number-keyboardæ¯å¦æ¾ç¤ºé®çç"."符å·é®é¢ |
|---|
| | | 5. ä¿®å¤Inputè¾å
¥æ¡ readonlyæ æ |
|---|
| | | 6. ä¿®å¤u-avatar 导è´æå
appãH5æ¶åæ¥éé®é¢ |
|---|
| | | 7. ä¿®å¤Uploadä¸ä¼ deletableæ æ |
|---|
| | | 8. ä¿®å¤uploadå½è®¾ç½®maxSizeæ¶æ æçé®é¢ |
|---|
| | | 9. ä¿®å¤tabs lineWidthä¼ å
¥å¸¦åä½çå符串çæ¶åå移é计ç®é误é®é¢ |
|---|
| | | 10. ä¿®å¤rateç»ä»¶å¨æpaddingçviewå
ï¼æ¾ç¤ºçææä½ç½®åå¯è§¦æ¸åºåä¸å¹é
ï¼æ æ³æ£å¸¸éä¸ææ |
|---|
| | | ## 2.0.13ï¼2021-12-14ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤é
ç½®é»è®¤åä½ä¸ºrpxå¯è½ä¼å¯¼è´èªå®ä¹å¯¼èªæ é«åº¦å¼å¸¸çé®é¢ |
|---|
| | | ## 2.0.12ï¼2021-12-14ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤tabsç»ä»¶å¨vueç¯å¢ä¸å线æ¶å¤±çé®é¢ |
|---|
| | | 2. ä¿®å¤uploadç»ä»¶å¨å®åå°ç¨åºæ æ³éæ©è§é¢çé®é¢ |
|---|
| | | 3. æ·»å uni.$u.config.unité
ç½®ï¼ç¨äºé
ç½®åæ°é»è®¤åä½ï¼è¯¦è§ï¼[é»è®¤åä½é
ç½®](https://www.uviewui.com/components/setting.html#%E9%BB%98%E8%AE%A4%E5%8D%95%E4%BD%8D%E9%85%8D%E7%BD%AE) |
|---|
| | | 4. ä¿®å¤textareaç»ä»¶å¨æ²¡ç»å®v-modelæ¶ï¼å符ç»è®¡ä¸çæé®é¢ |
|---|
| | | 5. ä¿®å¤nvueä¸æ§å¶æ¯å¦åºç°æ»å¨æ¡å¤±æé®é¢ |
|---|
| | | ## 2.0.11ï¼2021-12-13ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. textç»ä»¶alignåæ°æ æçé®é¢ |
|---|
| | | 2. subsectionç»ä»¶æ·»å keyNameåæ° |
|---|
| | | 3. uploadç»ä»¶æ æ³å¤æ[Object file]ç±»åçé®é¢ |
|---|
| | | 4. å¤çnotifyå±çº§è¿ä½é®é¢ |
|---|
| | | 5. codeInputç»ä»¶æ·»å disabledDotåæ° |
|---|
| | | 6. å¤çactionSheetç»ä»¶roundåæ°æ æçé®é¢ |
|---|
| | | 7. calendarç»ä»¶æ·»å roundåæ°ç¨äºæ§å¶åè§å¼ |
|---|
| | | 8. å¤çswipeActionç»ä»¶å¨vueç¯å¢ä¸é»è®¤è¢«æå¼çé®é¢ |
|---|
| | | 9. buttonç»ä»¶çthrottleTimeèæµåæ°æ æçé®é¢ |
|---|
| | | 10. 解å³u-notifyæå¨å
³éæ¹æ³close()æ æçé®é¢ |
|---|
| | | 11. inputç»ä»¶readonlyä¸çæé®é¢ |
|---|
| | | 12. tagç»ä»¶typeåæ°ä¸ºinfoä¸çæé®é¢ |
|---|
| | | ## 2.0.10ï¼2021-12-08ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤button sendMessagePathå±æ§ä¸çæ |
|---|
| | | 2. ä¿®å¤DatetimePickeréæ©å¨titleæ æ |
|---|
| | | 3. ä¿®å¤u-toast设置loading=trueä¸çæ |
|---|
| | | 4. ä¿®å¤u-textéé¢æ¨¡å¼ä¼ 0æ¥é |
|---|
| | | 5. ä¿®å¤u-toastç»ä»¶çiconå±æ§é
ç½®ä¸çæ |
|---|
| | | 6. buttonçiconå¨ç¹æ®åºæ¯ä¸çé¢è²ä¼å |
|---|
| | | 7. IndexListä¼åï¼å¢å # |
|---|
| | | ## 2.0.9ï¼2021-12-01ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¼åswiperçheightæ¯æ100%å¼(ä»
vueææ)ï¼ä¿®å¤åµå
¥è§é¢æ¶clickäºä»¶æ æ³è§¦åçé®é¢ |
|---|
| | | 2. ä¼åtabsç»ä»¶å¯¹listå¼ä¸ºç©ºçå¤æï¼æè
å¨æåålistæ¶éæ°è®¡ç®ç¸å
³å°ºå¯¸çé®é¢ |
|---|
| | | 3. ä¼ådatetime-pickerç»ä»¶é»è¾ï¼è®©å
¶åç»æå¼çé»è®¤å¼ä¸ºä¸ä¸æ¬¡çéä¸å¼ï¼éè¦éè¿v-modelç»å®å¼æææ |
|---|
| | | 4. ä¿®å¤uploadå
åµå¨å
¶ä»ç»ä»¶ä¸ï¼éæ©å¾çå¯è½ä¸ä¼æ¢è¡çé®é¢ |
|---|
| | | ## 2.0.8ï¼2021-12-01ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤toastçpositionåæ°æ æé®é¢ |
|---|
| | | 2. å¤çinputå¨ios nvueä¸æ æ³è·å¾ç¦ç¹çé®é¢ |
|---|
| | | 3. avatar-groupç»ä»¶æ·»å extraValueåæ°ï¼è®©å©ä½å±ç¤ºæ°éå¯æå¨æ§å¶ |
|---|
| | | 4. tabsç»ä»¶æ·»å keyNameåæ°ç¨äºé
ç½®ä»å¯¹è±¡ä¸è¯»åçé®å |
|---|
| | | 5. å¤çtextç»ä»¶ååè±æé»è®¤é
ç½®æ æçé®é¢ |
|---|
| | | 6. å¤çpickerç»ä»¶itemææ¬å¤ªé¿æ¢è¡é®é¢ |
|---|
| | | ## 2.0.7ï¼2021-11-30ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. ä¿®å¤radioåcheckboxå¨ææ¹åv-modelæ æçé®é¢ã |
|---|
| | | 2. ä¼åformè§åvalidatorå¨å¾®ä¿¡å°ç¨åºç¨æ³ |
|---|
| | | 3. ä¿®å¤backtopç»ä»¶modeåæ°å¨å¾®ä¿¡å°ç¨åºæ æçé®é¢ |
|---|
| | | 4. å¤çAlbumçpreviewFullImageå±æ§æ æçé®é¢ |
|---|
| | | 5. å¤çu-datetime-pickerç»ä»¶mode='time'å¨éæ©æ¹åæ¶é´æ¶ï¼æ§å¶å°æ¥éçé®é¢ |
|---|
| | | ## 2.0.6ï¼2021-11-27ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. å¤çtagç»ä»¶å¨vueä¸è¾¹æ¡æ æçé®é¢ã |
|---|
| | | 2. å¤çpopupç»ä»¶åè§åæ°å¯è½æ æçé®é¢ã |
|---|
| | | 3. å¤çtabsç»ä»¶lineColoråæ°å¯è½æ æçé®é¢ã |
|---|
| | | 4. propgressç»ä»¶å¨å¼å¾å°æ¶ï¼æ¾ç¤ºå¼å¸¸çé®é¢ã |
|---|
| | | ## 2.0.5ï¼2021-11-25ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. calendarå¨vueä¸æ¾ç¤ºå¼å¸¸é®é¢ã |
|---|
| | | 2. formç»ä»¶labelPositionåerrorTypeåæ°æ æçé®é¢ |
|---|
| | | 3. inputç»ä»¶inputAlignæ æçé®é¢ |
|---|
| | | 4. å
¶ä»ä¸äºä¿®å¤ |
|---|
| | | ## 2.0.4ï¼2021-11-23ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 0. inputç»ä»¶ç¼ºå¤±@confirmäºä»¶ï¼ä»¥åsubfixåprefixæ æé®é¢ |
|---|
| | | 1. component.scssæä»¶æ ·å¼å¨vueä¸å¹²æ°å
¨å±å¸å±é®é¢ |
|---|
| | | 2. ä¿®å¤subsectionå¨vueç¯å¢ä¸è¡¨ç°å¼å¸¸çé®é¢ |
|---|
| | | 3. tagç»ä»¶çbgColorçåæ°æ æçé®é¢ |
|---|
| | | 4. uploadç»ä»¶ä¸æ¢è¡çé®é¢ |
|---|
| | | 5. å
¶ä»çä¸äºä¿®å¤å¤ç |
|---|
| | | ## 2.0.3ï¼2021-11-16ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼1129077272](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. uView2.0å·²å®ç°å
¨é¢å
¼å®¹nvue |
|---|
| | | 2. uView2.0对1.xè¿è¡äºæ¶æéæï¼ç»èåæ§è½é½ææ大æå |
|---|
| | | 3. ç®åuView2.0为å
¬æµé¶æ®µï¼ç¸å
³ç»èå¯è½ä¼æåå¨ |
|---|
| | | 4. æ们åäºä¸ä»½ä¸1.xç对æ¯æåï¼è¯¦è§[对æ¯1.x](https://www.uviewui.com/components/diff1.x.html) |
|---|
| | | 5. å¤çmodalçconfirmåè°äºä»¶æ¼åé误é®é¢ |
|---|
| | | 6. å¤çinputç»ä»¶@inputäºä»¶åæ°é误é®é¢ |
|---|
| | | 7. å
¶ä»ä¸äºä¿®å¤ |
|---|
| | | ## 2.0.2ï¼2021-11-16ï¼ |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼1129077272](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. uView2.0å·²å®ç°å
¨é¢å
¼å®¹nvue |
|---|
| | | 2. uView2.0对1.xè¿è¡äºæ¶æéæï¼ç»èåæ§è½é½ææ大æå |
|---|
| | | 3. ç®åuView2.0为å
¬æµé¶æ®µï¼ç¸å
³ç»èå¯è½ä¼æåå¨ |
|---|
| | | 4. æ们åäºä¸ä»½ä¸1.xç对æ¯æåï¼è¯¦è§[对æ¯1.x](https://www.uviewui.com/components/diff1.x.html) |
|---|
| | | 5. ä¿®å¤inputç»ä»¶formatteråæ°ç¼ºå¤±é®é¢ |
|---|
| | | 6. ä¼åloading-iconç»ä»¶çscssåæ³é®é¢ï¼é²æ¢ä¸å
¼å®¹æ°çæ¬scss |
|---|
| | | ## 2.0.0(2020-11-15) |
|---|
| | | ## [ç¹å»å 群交æµåé¦ï¼1129077272](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|---|
| | | |
|---|
| | | # uView2.0éç£
åå¸ï¼å©ååºéï¼ä¸ç»æ±æ¹ |
|---|
| | | |
|---|
| | | 1. uView2.0å·²å®ç°å
¨é¢å
¼å®¹nvue |
|---|
| | | 2. uView2.0对1.xè¿è¡äºæ¶æéæï¼ç»èåæ§è½é½ææ大æå |
|---|
| | | 3. ç®åuView2.0为å
¬æµé¶æ®µï¼ç¸å
³ç»èå¯è½ä¼æåå¨ |
|---|
| | | 4. æ们åäºä¸ä»½ä¸1.xç对æ¯æåï¼è¯¦è§[对æ¯1.x](https://www.uviewui.com/components/diff1.x.html) |
|---|
| | | 5. ä¿®å¤inputç»ä»¶formatteråæ°ç¼ºå¤±é®é¢ |
|---|
| | | |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <uvForm |
|---|
| | | ref="uForm" |
|---|
| | | :model="model" |
|---|
| | | :rules="rules" |
|---|
| | | :errorType="errorType" |
|---|
| | | :borderBottom="borderBottom" |
|---|
| | | :labelPosition="labelPosition" |
|---|
| | | :labelWidth="labelWidth" |
|---|
| | | :labelAlign="labelAlign" |
|---|
| | | :labelStyle="labelStyle" |
|---|
| | | :customStyle="customStyle" |
|---|
| | | > |
|---|
| | | <slot /> |
|---|
| | | </uvForm> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * æ¤ç»ä»¶åå¨ççç±æ¯ï¼å¨nvueä¸ï¼u-form被uni-appå®æ¹å ç¨äºï¼u-formå¨nvueä¸ç¸å½äºformç»ä»¶ |
|---|
| | | * æ以å¨nvueä¸ï¼åå为u--formï¼å
é¨å
¶å®è¿æ¯u-form.vueï¼åªä¸è¿åä¸å±ä¸è½¬ |
|---|
| | | */ |
|---|
| | | import uvForm from '../u-form/u-form.vue'; |
|---|
| | | import props from '../u-form/props.js' |
|---|
| | | export default { |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | name: 'u-form', |
|---|
| | | // #endif |
|---|
| | | // #ifndef MP-WEIXIN |
|---|
| | | name: 'u--form', |
|---|
| | | // #endif |
|---|
| | | mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
|---|
| | | components: { |
|---|
| | | uvForm |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.children = [] |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æå¨è®¾ç½®æ ¡éªçè§åï¼å¦æè§åä¸æå½æ°çè¯ï¼å¾®ä¿¡å°ç¨åºä¸ä¼è¿æ»¤æï¼æ以åªè½æå¨è°ç¨è®¾ç½®è§å |
|---|
| | | setRules(rules) { |
|---|
| | | this.$refs.uForm.setRules(rules) |
|---|
| | | }, |
|---|
| | | validate() { |
|---|
| | | /** |
|---|
| | | * å¨å¾®ä¿¡å°ç¨åºä¸ï¼éè¿this.$parentæ¿å°çç¶ç»ä»¶æ¯u--formï¼èä¸æ¯å
¶å
åµçu-form |
|---|
| | | * 导è´å¨u-formç»ä»¶ä¸ï¼æ¿ä¸å°å¯¹åºçchildrenæ°ç»ï¼ä»èæ ¡éªæ æï¼æ以è¿éæ¯æ¬¡è°ç¨u-formç»ä»¶ä¸ç |
|---|
| | | * 对åºæ¹æ³çæ¶åï¼å¨å°ç¨åºä¸é½å
å°u--formçchildrenèµå¼ç»u-formä¸çchildren |
|---|
| | | */ |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | this.setMpData() |
|---|
| | | // #endif |
|---|
| | | return this.$refs.uForm.validate() |
|---|
| | | }, |
|---|
| | | validateField(value, callback) { |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | this.setMpData() |
|---|
| | | // #endif |
|---|
| | | return this.$refs.uForm.validateField(value, callback) |
|---|
| | | }, |
|---|
| | | resetFields() { |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | this.setMpData() |
|---|
| | | // #endif |
|---|
| | | return this.$refs.uForm.resetFields() |
|---|
| | | }, |
|---|
| | | clearValidate(props) { |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | this.setMpData() |
|---|
| | | // #endif |
|---|
| | | return this.$refs.uForm.clearValidate(props) |
|---|
| | | }, |
|---|
| | | setMpData() { |
|---|
| | | this.$refs.uForm.children = this.children |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <uvImage |
|---|
| | | :src="src" |
|---|
| | | :mode="mode" |
|---|
| | | :width="width" |
|---|
| | | :height="height" |
|---|
| | | :shape="shape" |
|---|
| | | :radius="radius" |
|---|
| | | :lazyLoad="lazyLoad" |
|---|
| | | :showMenuByLongpress="showMenuByLongpress" |
|---|
| | | :loadingIcon="loadingIcon" |
|---|
| | | :errorIcon="errorIcon" |
|---|
| | | :showLoading="showLoading" |
|---|
| | | :showError="showError" |
|---|
| | | :fade="fade" |
|---|
| | | :webp="webp" |
|---|
| | | :duration="duration" |
|---|
| | | :bgColor="bgColor" |
|---|
| | | :customStyle="customStyle" |
|---|
| | | @click="$emit('click')" |
|---|
| | | @error="$emit('error')" |
|---|
| | | @load="$emit('load')" |
|---|
| | | > |
|---|
| | | <template v-slot:loading> |
|---|
| | | <slot name="loading"></slot> |
|---|
| | | </template> |
|---|
| | | <template v-slot:error> |
|---|
| | | <slot name="error"></slot> |
|---|
| | | </template> |
|---|
| | | </uvImage> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * æ¤ç»ä»¶åå¨ççç±æ¯ï¼å¨nvueä¸ï¼u-image被uni-appå®æ¹å ç¨äºï¼u-imageå¨nvueä¸ç¸å½äºimageç»ä»¶ |
|---|
| | | * æ以å¨nvueä¸ï¼åå为u--imageï¼å
é¨å
¶å®è¿æ¯u-iamge.vueï¼åªä¸è¿åä¸å±ä¸è½¬ |
|---|
| | | */ |
|---|
| | | import uvImage from '../u-image/u-image.vue'; |
|---|
| | | import props from '../u-image/props.js'; |
|---|
| | | export default { |
|---|
| | | name: 'u--image', |
|---|
| | | mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
|---|
| | | components: { |
|---|
| | | uvImage |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <uvInput |
|---|
| | | :value="value" |
|---|
| | | :type="type" |
|---|
| | | :fixed="fixed" |
|---|
| | | :disabled="disabled" |
|---|
| | | :disabledColor="disabledColor" |
|---|
| | | :clearable="clearable" |
|---|
| | | :password="password" |
|---|
| | | :maxlength="maxlength" |
|---|
| | | :placeholder="placeholder" |
|---|
| | | :placeholderClass="placeholderClass" |
|---|
| | | :placeholderStyle="placeholderStyle" |
|---|
| | | :showWordLimit="showWordLimit" |
|---|
| | | :confirmType="confirmType" |
|---|
| | | :confirmHold="confirmHold" |
|---|
| | | :holdKeyboard="holdKeyboard" |
|---|
| | | :focus="focus" |
|---|
| | | :autoBlur="autoBlur" |
|---|
| | | :disableDefaultPadding="disableDefaultPadding" |
|---|
| | | :cursor="cursor" |
|---|
| | | :cursorSpacing="cursorSpacing" |
|---|
| | | :selectionStart="selectionStart" |
|---|
| | | :selectionEnd="selectionEnd" |
|---|
| | | :adjustPosition="adjustPosition" |
|---|
| | | :inputAlign="inputAlign" |
|---|
| | | :fontSize="fontSize" |
|---|
| | | :color="color" |
|---|
| | | :prefixIcon="prefixIcon" |
|---|
| | | :suffixIcon="suffixIcon" |
|---|
| | | :suffixIconStyle="suffixIconStyle" |
|---|
| | | :prefixIconStyle="prefixIconStyle" |
|---|
| | | :border="border" |
|---|
| | | :readonly="readonly" |
|---|
| | | :shape="shape" |
|---|
| | | :customStyle="customStyle" |
|---|
| | | :formatter="formatter" |
|---|
| | | @focus="$emit('focus')" |
|---|
| | | @blur="$emit('blur')" |
|---|
| | | @keyboardheightchange="$emit('keyboardheightchange')" |
|---|
| | | @change="e => $emit('change', e)" |
|---|
| | | @input="e => $emit('input', e)" |
|---|
| | | @confirm="e => $emit('confirm', e)" |
|---|
| | | @clear="$emit('clear')" |
|---|
| | | @click="$emit('click')" |
|---|
| | | > |
|---|
| | | <!-- #ifdef MP --> |
|---|
| | | <slot name="prefix"></slot> |
|---|
| | | <slot name="suffix"></slot> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef MP --> |
|---|
| | | <slot name="prefix" slot="prefix"></slot> |
|---|
| | | <slot name="suffix" slot="suffix"></slot> |
|---|
| | | <!-- #endif --> |
|---|
| | | </uvInput> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * æ¤ç»ä»¶åå¨ççç±æ¯ï¼å¨nvueä¸ï¼u-input被uni-appå®æ¹å ç¨äºï¼u-inputå¨nvueä¸ç¸å½äºinputç»ä»¶ |
|---|
| | | * æ以å¨nvueä¸ï¼åå为u--inputï¼å
é¨å
¶å®è¿æ¯u-input.vueï¼åªä¸è¿åä¸å±ä¸è½¬ |
|---|
| | | */ |
|---|
| | | import uvInput from '../u-input/u-input.vue'; |
|---|
| | | import props from '../u-input/props.js' |
|---|
| | | export default { |
|---|
| | | name: 'u--input', |
|---|
| | | mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
|---|
| | | components: { |
|---|
| | | uvInput |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <uvText |
|---|
| | | :type="type" |
|---|
| | | :show="show" |
|---|
| | | :text="text" |
|---|
| | | :prefixIcon="prefixIcon" |
|---|
| | | :suffixIcon="suffixIcon" |
|---|
| | | :mode="mode" |
|---|
| | | :href="href" |
|---|
| | | :format="format" |
|---|
| | | :call="call" |
|---|
| | | :openType="openType" |
|---|
| | | :bold="bold" |
|---|
| | | :block="block" |
|---|
| | | :lines="lines" |
|---|
| | | :color="color" |
|---|
| | | :decoration="decoration" |
|---|
| | | :size="size" |
|---|
| | | :iconStyle="iconStyle" |
|---|
| | | :margin="margin" |
|---|
| | | :lineHeight="lineHeight" |
|---|
| | | :align="align" |
|---|
| | | :wordWrap="wordWrap" |
|---|
| | | :customStyle="customStyle" |
|---|
| | | @click="$emit('click')" |
|---|
| | | ></uvText> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * æ¤ç»ä»¶åå¨ççç±æ¯ï¼å¨nvueä¸ï¼u-text被uni-appå®æ¹å ç¨äºï¼u-textå¨nvueä¸ç¸å½äºinputç»ä»¶ |
|---|
| | | * æ以å¨nvueä¸ï¼åå为u--inputï¼å
é¨å
¶å®è¿æ¯u-text.vueï¼åªä¸è¿åä¸å±ä¸è½¬ |
|---|
| | | * ä¸ä½¿ç¨v-bind="$attrs"ï¼èæ¯åå¼ç¬ç«åä¼ åï¼æ¯å 为微信å°ç¨åºä¸æ¯ææ¤åæ³ |
|---|
| | | */ |
|---|
| | | import uvText from "../u-text/u-text.vue"; |
|---|
| | | import props from "../u-text/props.js"; |
|---|
| | | export default { |
|---|
| | | name: "u--text", |
|---|
| | | mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
|---|
| | | components: { |
|---|
| | | uvText, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <uvTextarea |
|---|
| | | :value="value" |
|---|
| | | :placeholder="placeholder" |
|---|
| | | :height="height" |
|---|
| | | :confirmType="confirmType" |
|---|
| | | :disabled="disabled" |
|---|
| | | :count="count" |
|---|
| | | :focus="focus" |
|---|
| | | :autoHeight="autoHeight" |
|---|
| | | :fixed="fixed" |
|---|
| | | :cursorSpacing="cursorSpacing" |
|---|
| | | :cursor="cursor" |
|---|
| | | :showConfirmBar="showConfirmBar" |
|---|
| | | :selectionStart="selectionStart" |
|---|
| | | :selectionEnd="selectionEnd" |
|---|
| | | :adjustPosition="adjustPosition" |
|---|
| | | :disableDefaultPadding="disableDefaultPadding" |
|---|
| | | :holdKeyboard="holdKeyboard" |
|---|
| | | :maxlength="maxlength" |
|---|
| | | :border="border" |
|---|
| | | :customStyle="customStyle" |
|---|
| | | :formatter="formatter" |
|---|
| | | @focus="e => $emit('focus')" |
|---|
| | | @blur="e => $emit('blur')" |
|---|
| | | @linechange="e => $emit('linechange', e)" |
|---|
| | | @confirm="e => $emit('confirm')" |
|---|
| | | @input="e => $emit('input', e)" |
|---|
| | | @keyboardheightchange="e => $emit('keyboardheightchange')" |
|---|
| | | ></uvTextarea> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | /** |
|---|
| | | * æ¤ç»ä»¶åå¨ççç±æ¯ï¼å¨nvueä¸ï¼u--textarea被uni-appå®æ¹å ç¨äºï¼u-textareaå¨nvueä¸ç¸å½äºtextareaç»ä»¶ |
|---|
| | | * æ以å¨nvueä¸ï¼åå为u--textareaï¼å
é¨å
¶å®è¿æ¯u-textarea.vueï¼åªä¸è¿åä¸å±ä¸è½¬ |
|---|
| | | */ |
|---|
| | | import uvTextarea from '../u-textarea/u-textarea.vue'; |
|---|
| | | import props from '../u-textarea/props.js' |
|---|
| | | export default { |
|---|
| | | name: 'u--textarea', |
|---|
| | | mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
|---|
| | | components: { |
|---|
| | | uvTextarea |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æä½èåæ¯å¦å±ç¤º ï¼é»è®¤falseï¼ |
|---|
| | | show: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.actionSheet.show |
|---|
| | | }, |
|---|
| | | // æ é¢ |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.actionSheet.title |
|---|
| | | }, |
|---|
| | | // é项ä¸æ¹çæè¿°ä¿¡æ¯ |
|---|
| | | description: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.actionSheet.description |
|---|
| | | }, |
|---|
| | | // æ°æ® |
|---|
| | | actions: { |
|---|
| | | type: Array, |
|---|
| | | default: uni.$u.props.actionSheet.actions |
|---|
| | | }, |
|---|
| | | // åæ¶æé®çæåï¼ä¸ä¸ºç©ºæ¶æ¾ç¤ºæé® |
|---|
| | | cancelText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.actionSheet.cancelText |
|---|
| | | }, |
|---|
| | | // ç¹å»æ个èå项æ¶æ¯å¦å
³éå¼¹çª |
|---|
| | | closeOnClickAction: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.actionSheet.closeOnClickAction |
|---|
| | | }, |
|---|
| | | // å¤çåºé¨å®å
¨åºï¼é»è®¤trueï¼ |
|---|
| | | safeAreaInsetBottom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.actionSheet.safeAreaInsetBottom |
|---|
| | | }, |
|---|
| | | // å°ç¨åºçæå¼æ¹å¼ |
|---|
| | | openType: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.actionSheet.openType |
|---|
| | | }, |
|---|
| | | // ç¹å»é®ç½©æ¯å¦å
许å
³é (é»è®¤true) |
|---|
| | | closeOnClickOverlay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.actionSheet.closeOnClickOverlay |
|---|
| | | }, |
|---|
| | | // åè§å¼ |
|---|
| | | round: { |
|---|
| | | type: [Boolean, String, Number], |
|---|
| | | default: uni.$u.props.actionSheet.round |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <u-popup |
|---|
| | | :show="show" |
|---|
| | | mode="bottom" |
|---|
| | | @close="closeHandler" |
|---|
| | | :safeAreaInsetBottom="safeAreaInsetBottom" |
|---|
| | | :round="round" |
|---|
| | | > |
|---|
| | | <view class="u-action-sheet"> |
|---|
| | | <view |
|---|
| | | class="u-action-sheet__header" |
|---|
| | | v-if="title" |
|---|
| | | > |
|---|
| | | <text class="u-action-sheet__header__title u-line-1">{{title}}</text> |
|---|
| | | <view |
|---|
| | | class="u-action-sheet__header__icon-wrap" |
|---|
| | | @tap.stop="cancel" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | name="close" |
|---|
| | | size="17" |
|---|
| | | color="#c8c9cc" |
|---|
| | | bold |
|---|
| | | ></u-icon> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <text |
|---|
| | | class="u-action-sheet__description" |
|---|
| | | :style="[{ |
|---|
| | | marginTop: `${title && description ? 0 : '18px'}` |
|---|
| | | }]" |
|---|
| | | v-if="description" |
|---|
| | | >{{description}}</text> |
|---|
| | | <slot> |
|---|
| | | <u-line v-if="description"></u-line> |
|---|
| | | <view class="u-action-sheet__item-wrap"> |
|---|
| | | <template v-for="(item, index) in actions"> |
|---|
| | | <!-- #ifdef MP --> |
|---|
| | | <button |
|---|
| | | :key="index" |
|---|
| | | class="u-reset-button" |
|---|
| | | :openType="item.openType" |
|---|
| | | @getuserinfo="onGetUserInfo" |
|---|
| | | @contact="onContact" |
|---|
| | | @getphonenumber="onGetPhoneNumber" |
|---|
| | | @error="onError" |
|---|
| | | @launchapp="onLaunchApp" |
|---|
| | | @opensetting="onOpenSetting" |
|---|
| | | :lang="lang" |
|---|
| | | :session-from="sessionFrom" |
|---|
| | | :send-message-title="sendMessageTitle" |
|---|
| | | :send-message-path="sendMessagePath" |
|---|
| | | :send-message-img="sendMessageImg" |
|---|
| | | :show-message-card="showMessageCard" |
|---|
| | | :app-parameter="appParameter" |
|---|
| | | @tap="selectHandler(index)" |
|---|
| | | :hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''" |
|---|
| | | > |
|---|
| | | <!-- #endif --> |
|---|
| | | <view |
|---|
| | | class="u-action-sheet__item-wrap__item" |
|---|
| | | @tap.stop="selectHandler(index)" |
|---|
| | | :hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''" |
|---|
| | | :hover-stay-time="150" |
|---|
| | | > |
|---|
| | | <template v-if="!item.loading"> |
|---|
| | | <text |
|---|
| | | class="u-action-sheet__item-wrap__item__name" |
|---|
| | | :style="[itemStyle(index)]" |
|---|
| | | >{{ item.name }}</text> |
|---|
| | | <text |
|---|
| | | v-if="item.subname" |
|---|
| | | class="u-action-sheet__item-wrap__item__subname" |
|---|
| | | >{{ item.subname }}</text> |
|---|
| | | </template> |
|---|
| | | <u-loading-icon |
|---|
| | | v-else |
|---|
| | | custom-class="van-action-sheet__loading" |
|---|
| | | size="18" |
|---|
| | | mode="circle" |
|---|
| | | /> |
|---|
| | | </view> |
|---|
| | | <!-- #ifdef MP --> |
|---|
| | | </button> |
|---|
| | | <!-- #endif --> |
|---|
| | | <u-line v-if="index !== actions.length - 1"></u-line> |
|---|
| | | </template> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | <u-gap |
|---|
| | | bgColor="#eaeaec" |
|---|
| | | height="6" |
|---|
| | | v-if="cancelText" |
|---|
| | | ></u-gap> |
|---|
| | | <view hover-class="u-action-sheet--hover"> |
|---|
| | | <text |
|---|
| | | @touchmove.stop.prevent |
|---|
| | | :hover-stay-time="150" |
|---|
| | | v-if="cancelText" |
|---|
| | | class="u-action-sheet__cancel-text" |
|---|
| | | @tap="cancel" |
|---|
| | | >{{cancelText}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </u-popup> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import openType from '../../libs/mixin/openType' |
|---|
| | | import button from '../../libs/mixin/button' |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * ActionSheet æä½èå |
|---|
| | | * @description æ¬ç»ä»¶ç¨äºä»åºé¨å¼¹åºä¸ä¸ªæä½èåï¼ä¾ç¨æ·éæ©å¹¶è¿åç»æãæ¬ç»ä»¶åè½ç±»ä¼¼äºuniçuni.showActionSheetAPIï¼é
ç½®æ´å çµæ´»ï¼ææå¹³å°é½è¡¨ç°ä¸è´ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/actionSheet.html |
|---|
| | | * |
|---|
| | | * @property {Boolean} show æä½èåæ¯å¦å±ç¤º ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} title æä½èåæ é¢ |
|---|
| | | * @property {String} description é项ä¸æ¹çæè¿°ä¿¡æ¯ |
|---|
| | | * @property {Array<Object>} actions æé®çæåæ°ç»ï¼è§å®æ¹ææ¡£ç¤ºä¾ |
|---|
| | | * @property {String} cancelText åæ¶æé®çæ示æå,ä¸ä¸ºç©ºæ¶æ¾ç¤ºæé® |
|---|
| | | * @property {Boolean} closeOnClickAction ç¹å»æ个èå项æ¶æ¯å¦å
³éå¼¹çª ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} safeAreaInsetBottom å¤çåºé¨å®å
¨åº ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String} openType å°ç¨åºçæå¼æ¹å¼ (contact | launchApp | getUserInfo | openSetting ï½getPhoneNumber ï½error ) |
|---|
| | | * @property {Boolean} closeOnClickOverlay ç¹å»é®ç½©æ¯å¦å
许å
³é (é»è®¤ true ) |
|---|
| | | * @property {Number|String} round åè§å¼ï¼é»è®¤æ åè§ (é»è®¤ 0 ) |
|---|
| | | * @property {String} lang æå®è¿åç¨æ·ä¿¡æ¯çè¯è¨ï¼zh_CN ç®ä½ä¸æï¼zh_TW ç¹ä½ä¸æï¼en è±æ |
|---|
| | | * @property {String} sessionFrom ä¼è¯æ¥æºï¼openType="contact"æ¶ææ |
|---|
| | | * @property {String} sendMessageTitle ä¼è¯å
æ¶æ¯å¡çæ é¢ï¼openType="contact"æ¶ææ |
|---|
| | | * @property {String} sendMessagePath ä¼è¯å
æ¶æ¯å¡çç¹å»è·³è½¬å°ç¨åºè·¯å¾ï¼openType="contact"æ¶ææ |
|---|
| | | * @property {String} sendMessageImg ä¼è¯å
æ¶æ¯å¡çå¾çï¼openType="contact"æ¶ææ |
|---|
| | | * @property {Boolean} showMessageCard æ¯å¦æ¾ç¤ºä¼è¯å
æ¶æ¯å¡çï¼è®¾ç½®æ¤åæ°ä¸º trueï¼ç¨æ·è¿å
¥å®¢æä¼è¯ä¼å¨å³ä¸è§æ¾ç¤º"å¯è½è¦åéçå°ç¨åº"æ示ï¼ç¨æ·ç¹å»åå¯ä»¥å¿«éåéå°ç¨åºæ¶æ¯ï¼openType="contact"æ¶ææ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} appParameter æå¼ APP æ¶ï¼å APP ä¼ éçåæ°ï¼openType=launchApp æ¶ææ |
|---|
| | | * |
|---|
| | | * @event {Function} select ç¹å»ActionSheetå表项æ¶è§¦å |
|---|
| | | * @event {Function} close ç¹å»åæ¶æé®æ¶è§¦å |
|---|
| | | * @event {Function} getuserinfo ç¨æ·ç¹å»è¯¥æé®æ¶ï¼ä¼è¿åè·åå°çç¨æ·ä¿¡æ¯ï¼åè°ç detail æ°æ®ä¸ wx.getUserInfo è¿åçä¸è´ï¼openType="getUserInfo"æ¶ææ |
|---|
| | | * @event {Function} contact 客ææ¶æ¯åè°ï¼openType="contact"æ¶ææ |
|---|
| | | * @event {Function} getphonenumber è·åç¨æ·ææºå·åè°ï¼openType="getPhoneNumber"æ¶ææ |
|---|
| | | * @event {Function} error å½ä½¿ç¨å¼æ¾è½åæ¶ï¼åçé误çåè°ï¼openType="error"æ¶ææ |
|---|
| | | * @event {Function} launchapp æå¼ APP æåçåè°ï¼openType="launchApp"æ¶ææ |
|---|
| | | * @event {Function} opensetting å¨æå¼ææ设置页ååè°ï¼openType="openSetting"æ¶ææ |
|---|
| | | * @example <u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-action-sheet", |
|---|
| | | // ä¸äºpropsåæ°åmethodsæ¹æ³ï¼éè¿mixinæ··å
¥ï¼å 为å
¶ä»æ件ä¹ä¼ç¨å° |
|---|
| | | mixins: [openType, button, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // æä½é¡¹ç®çæ ·å¼ |
|---|
| | | itemStyle() { |
|---|
| | | return (index) => { |
|---|
| | | let style = {}; |
|---|
| | | if (this.actions[index].color) style.color = this.actions[index].color |
|---|
| | | if (this.actions[index].fontSize) style.fontSize = uni.$u.addUnit(this.actions[index].fontSize) |
|---|
| | | // é项被ç¦ç¨çæ ·å¼ |
|---|
| | | if (this.actions[index].disabled) style.color = '#c0c4cc' |
|---|
| | | return style; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | closeHandler() { |
|---|
| | | // å
许ç¹å»é®ç½©å
³éæ¶ï¼æååºcloseäºä»¶ |
|---|
| | | if(this.closeOnClickOverlay) { |
|---|
| | | this.$emit('close') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ç¹å»åæ¶æé® |
|---|
| | | cancel() { |
|---|
| | | this.$emit('close') |
|---|
| | | }, |
|---|
| | | selectHandler(index) { |
|---|
| | | const item = this.actions[index] |
|---|
| | | if (item && !item.disabled && !item.loading) { |
|---|
| | | this.$emit('select', item) |
|---|
| | | if (this.closeOnClickAction) { |
|---|
| | | this.$emit('close') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | $u-action-sheet-reset-button-width:100% !default; |
|---|
| | | $u-action-sheet-title-font-size: 16px !default; |
|---|
| | | $u-action-sheet-title-padding: 12px 30px !default; |
|---|
| | | $u-action-sheet-title-color: $u-main-color !default; |
|---|
| | | $u-action-sheet-header-icon-wrap-right:15px !default; |
|---|
| | | $u-action-sheet-header-icon-wrap-top:15px !default; |
|---|
| | | $u-action-sheet-description-font-size:13px !default; |
|---|
| | | $u-action-sheet-description-color:14px !default; |
|---|
| | | $u-action-sheet-description-margin: 18px 15px !default; |
|---|
| | | $u-action-sheet-item-wrap-item-padding:15px !default; |
|---|
| | | $u-action-sheet-item-wrap-name-font-size:16px !default; |
|---|
| | | $u-action-sheet-item-wrap-subname-font-size:13px !default; |
|---|
| | | $u-action-sheet-item-wrap-subname-color: #c0c4cc !default; |
|---|
| | | $u-action-sheet-item-wrap-subname-margin-top:10px !default; |
|---|
| | | $u-action-sheet-cancel-text-font-size:16px !default; |
|---|
| | | $u-action-sheet-cancel-text-color:$u-content-color !default; |
|---|
| | | $u-action-sheet-cancel-text-font-size:15px !default; |
|---|
| | | $u-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default; |
|---|
| | | |
|---|
| | | .u-reset-button { |
|---|
| | | width: $u-action-sheet-reset-button-width; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-action-sheet { |
|---|
| | | text-align: center; |
|---|
| | | &__header { |
|---|
| | | position: relative; |
|---|
| | | padding: $u-action-sheet-title-padding; |
|---|
| | | &__title { |
|---|
| | | font-size: $u-action-sheet-title-font-size; |
|---|
| | | color: $u-action-sheet-title-color; |
|---|
| | | font-weight: bold; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon-wrap { |
|---|
| | | position: absolute; |
|---|
| | | right: $u-action-sheet-header-icon-wrap-right; |
|---|
| | | top: $u-action-sheet-header-icon-wrap-top; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__description { |
|---|
| | | font-size: $u-action-sheet-description-font-size; |
|---|
| | | color: $u-tips-color; |
|---|
| | | margin: $u-action-sheet-description-margin; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__item-wrap { |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | padding: $u-action-sheet-item-wrap-item-padding; |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | flex-direction: column; |
|---|
| | | |
|---|
| | | &__name { |
|---|
| | | font-size: $u-action-sheet-item-wrap-name-font-size; |
|---|
| | | color: $u-main-color; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__subname { |
|---|
| | | font-size: $u-action-sheet-item-wrap-subname-font-size; |
|---|
| | | color: $u-action-sheet-item-wrap-subname-color; |
|---|
| | | margin-top: $u-action-sheet-item-wrap-subname-margin-top; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__cancel-text { |
|---|
| | | font-size: $u-action-sheet-cancel-text-font-size; |
|---|
| | | color: $u-action-sheet-cancel-text-color; |
|---|
| | | text-align: center; |
|---|
| | | padding: $u-action-sheet-cancel-text-font-size; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--hover { |
|---|
| | | background-color: $u-action-sheet-cancel-text-hover-background-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å¾çå°åï¼Array<String>|Array<Object>å½¢å¼ |
|---|
| | | urls: { |
|---|
| | | type: Array, |
|---|
| | | default: uni.$u.props.album.urls |
|---|
| | | }, |
|---|
| | | // æå®ä»æ°ç»ç对象å
ç´ ä¸è¯»ååªä¸ªå±æ§ä½ä¸ºå¾çå°å |
|---|
| | | keyName: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.album.keyName |
|---|
| | | }, |
|---|
| | | // åå¾æ¶ï¼å¾çé¿è¾¹çé¿åº¦ |
|---|
| | | singleSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.album.singleSize |
|---|
| | | }, |
|---|
| | | // å¤å¾æ¶ï¼å¾çè¾¹é¿ |
|---|
| | | multipleSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.album.multipleSize |
|---|
| | | }, |
|---|
| | | // å¤å¾æ¶ï¼å¾çæ°´å¹³ååç´ä¹é´çé´é |
|---|
| | | space: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.album.space |
|---|
| | | }, |
|---|
| | | // åå¾æ¶ï¼å¾ç缩æ¾è£åªçæ¨¡å¼ |
|---|
| | | singleMode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.album.singleMode |
|---|
| | | }, |
|---|
| | | // å¤å¾æ¶ï¼å¾ç缩æ¾è£åªçæ¨¡å¼ |
|---|
| | | multipleMode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.album.multipleMode |
|---|
| | | }, |
|---|
| | | // æå¤å±ç¤ºçå¾çæ°éï¼è¶
åºæ¶æåä¸ä¸ªä½ç½®å°ä¼æ¾ç¤ºå©ä½å¾çæ°é |
|---|
| | | maxCount: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.album.maxCount |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¯ä»¥é¢è§å¾ç |
|---|
| | | previewFullImage: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.album.previewFullImage |
|---|
| | | }, |
|---|
| | | // æ¯è¡å±ç¤ºå¾çæ°éï¼å¦è®¾ç½®ï¼singleSizeåmultipleSizeå°ä¼æ æ |
|---|
| | | rowCount: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.album.rowCount |
|---|
| | | }, |
|---|
| | | // è¶
åºmaxCountæ¶æ¯å¦æ¾ç¤ºæ¥çæ´å¤çæ示 |
|---|
| | | showMore: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.album.showMore |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-album"> |
|---|
| | | <view |
|---|
| | | class="u-album__row" |
|---|
| | | ref="u-album__row" |
|---|
| | | v-for="(arr, index) in showUrls" |
|---|
| | | :forComputedUse="albumWidth" |
|---|
| | | :key="index" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-album__row__wrapper" |
|---|
| | | v-for="(item, index1) in arr" |
|---|
| | | :key="index1" |
|---|
| | | :style="[imageStyle(index + 1, index1 + 1)]" |
|---|
| | | @tap="previewFullImage ? onPreviewTap(getSrc(item)) : ''" |
|---|
| | | > |
|---|
| | | <image |
|---|
| | | :src="getSrc(item)" |
|---|
| | | :mode=" |
|---|
| | | urls.length === 1 |
|---|
| | | ? imageHeight > 0 |
|---|
| | | ? singleMode |
|---|
| | | : 'widthFix' |
|---|
| | | : multipleMode |
|---|
| | | " |
|---|
| | | :style="[ |
|---|
| | | { |
|---|
| | | width: imageWidth, |
|---|
| | | height: imageHeight |
|---|
| | | } |
|---|
| | | ]" |
|---|
| | | ></image> |
|---|
| | | <view |
|---|
| | | v-if=" |
|---|
| | | showMore && |
|---|
| | | urls.length > rowCount * showUrls.length && |
|---|
| | | index === showUrls.length - 1 && |
|---|
| | | index1 === showUrls[showUrls.length - 1].length - 1 |
|---|
| | | " |
|---|
| | | class="u-album__row__wrapper__text" |
|---|
| | | > |
|---|
| | | <u--text |
|---|
| | | :text="`+${urls.length - maxCount}`" |
|---|
| | | color="#fff" |
|---|
| | | :size="multipleSize * 0.3" |
|---|
| | | align="center" |
|---|
| | | customStyle="justify-content: center" |
|---|
| | | ></u--text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js' |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // ç±äºweex为é¿éçKPIä¸ç»©èæ ¸ç产ç©ï¼æ以ä¸æ¯æç¾åæ¯åä½ï¼è¿ééè¦éè¿domæ¥è¯¢ç»ä»¶ç宽度 |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Album ç¸å |
|---|
| | | * @description æ¬ç»ä»¶æä¾ä¸ä¸ªç±»ä¼¼ç¸åçåè½ï¼è®©å¼åè
å¼åèµ·æ¥æ´å å¾å¿åºæãåå°éå¤ç模æ¿ä»£ç |
|---|
| | | * @tutorial https://www.uviewui.com/components/album.html |
|---|
| | | * |
|---|
| | | * @property {Array} urls å¾çå°åå表 Array<String>|Array<Object>å½¢å¼ |
|---|
| | | * @property {String} keyName æå®ä»æ°ç»ç对象å
ç´ ä¸è¯»ååªä¸ªå±æ§ä½ä¸ºå¾çå°å |
|---|
| | | * @property {String | Number} singleSize åå¾æ¶ï¼å¾çé¿è¾¹çé¿åº¦ ï¼é»è®¤ 180 ï¼ |
|---|
| | | * @property {String | Number} multipleSize å¤å¾æ¶ï¼å¾çè¾¹é¿ ï¼é»è®¤ 70 ï¼ |
|---|
| | | * @property {String | Number} space å¤å¾æ¶ï¼å¾çæ°´å¹³ååç´ä¹é´çé´é ï¼é»è®¤ 6 ï¼ |
|---|
| | | * @property {String} singleMode åå¾æ¶ï¼å¾ç缩æ¾è£åªçæ¨¡å¼ ï¼é»è®¤ 'scaleToFill' ï¼ |
|---|
| | | * @property {String} multipleMode å¤å¾æ¶ï¼å¾ç缩æ¾è£åªçæ¨¡å¼ ï¼é»è®¤ 'aspectFill' ï¼ |
|---|
| | | * @property {String | Number} maxCount åæ¶æé®çæ示æå ï¼é»è®¤ 9 ï¼ |
|---|
| | | * @property {Boolean} previewFullImage æ¯å¦å¯ä»¥é¢è§å¾ç ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String | Number} rowCount æ¯è¡å±ç¤ºå¾çæ°éï¼å¦è®¾ç½®ï¼singleSizeåmultipleSizeå°ä¼æ æ ï¼é»è®¤ 3 ï¼ |
|---|
| | | * @property {Boolean} showMore è¶
åºmaxCountæ¶æ¯å¦æ¾ç¤ºæ¥çæ´å¤çæ示 ï¼é»è®¤ true ï¼ |
|---|
| | | * |
|---|
| | | * @event {Function} albumWidth æäºç¹æ®çæ
åµä¸ï¼éè¦è®©æåä¸ç¸åç宽度ç¸çï¼è¿éäºä»¶çå½¢å¼å¯¹å¤åé ï¼åè°åæ° width ï¼ |
|---|
| | | * @example <u-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></u-album> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-album', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // åå¾ç宽度 |
|---|
| | | singleWidth: 0, |
|---|
| | | // åå¾çé«åº¦ |
|---|
| | | singleHeight: 0, |
|---|
| | | // åå¾æ¶ï¼å¦ææ æ³è·åå¾çç尺寸信æ¯ï¼è®©å¾ç宽度é»è®¤ä¸ºå®¹å¨çä¸å®ç¾åæ¯ |
|---|
| | | singlePercent: 0.6 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | urls: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal) { |
|---|
| | | if (newVal.length === 1) { |
|---|
| | | this.getImageRect() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | imageStyle() { |
|---|
| | | return (index1, index2) => { |
|---|
| | | const { space, rowCount, multipleSize, urls } = this, |
|---|
| | | { addUnit, addStyle } = uni.$u, |
|---|
| | | rowLen = this.showUrls.length, |
|---|
| | | allLen = this.urls.length |
|---|
| | | const style = { |
|---|
| | | marginRight: addUnit(space), |
|---|
| | | marginBottom: addUnit(space) |
|---|
| | | } |
|---|
| | | // å¦æ为æåä¸è¡ï¼åæ¯ä¸ªå¾çé½æ éä¸è¾¹æ¡ |
|---|
| | | if (index1 === rowLen) style.marginBottom = 0 |
|---|
| | | // æ¯è¡çæå³è¾¹ä¸å¼ åæ»é¿åº¦çæåä¸å¼ æ éå³è¾¹æ¡ |
|---|
| | | if ( |
|---|
| | | index2 === rowCount || |
|---|
| | | (index1 === rowLen && |
|---|
| | | index2 === this.showUrls[index1 - 1].length) |
|---|
| | | ) |
|---|
| | | style.marginRight = 0 |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å°æ°ç»åå为äºç»´æ°ç» |
|---|
| | | showUrls() { |
|---|
| | | const arr = [] |
|---|
| | | this.urls.map((item, index) => { |
|---|
| | | // éå¶æ大å±ç¤ºæ°é |
|---|
| | | if (index + 1 <= this.maxCount) { |
|---|
| | | // 计ç®è¯¥å
ç´ ä¸ºç¬¬å ä¸ªç´ ç»å
|
|---|
| | | const itemIndex = Math.floor(index / this.rowCount) |
|---|
| | | // å¤æ对åºçç´¢å¼æ¯å¦åå¨ |
|---|
| | | if (!arr[itemIndex]) { |
|---|
| | | arr[itemIndex] = [] |
|---|
| | | } |
|---|
| | | arr[itemIndex].push(item) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | return arr |
|---|
| | | }, |
|---|
| | | imageWidth() { |
|---|
| | | return uni.$u.addUnit( |
|---|
| | | this.urls.length === 1 ? this.singleWidth : this.multipleSize |
|---|
| | | ) |
|---|
| | | }, |
|---|
| | | imageHeight() { |
|---|
| | | return uni.$u.addUnit( |
|---|
| | | this.urls.length === 1 ? this.singleHeight : this.multipleSize |
|---|
| | | ) |
|---|
| | | }, |
|---|
| | | // æ¤åéæ å®é
ç¨éï¼ä»
ä»
æ¯ä¸ºäºå©ç¨computedç¹æ§ï¼è®©å
¶å¨urlsé¿åº¦çååæ¶ï¼éæ°è®¡ç®å¾çç宽度 |
|---|
| | | // å 为ç¨æ·å¨æäºç¹æ®çæ
åµä¸ï¼éè¦è®©æåä¸ç¸åç宽度ç¸çï¼æ以è¿éäºä»¶çå½¢å¼å¯¹å¤åé |
|---|
| | | albumWidth() { |
|---|
| | | let width = 0 |
|---|
| | | if (this.urls.length === 1) { |
|---|
| | | width = this.singleWidth |
|---|
| | | } else { |
|---|
| | | width = |
|---|
| | | this.showUrls[0].length * this.multipleSize + |
|---|
| | | this.space * (this.showUrls[0].length - 1) |
|---|
| | | } |
|---|
| | | this.$emit('albumWidth', width) |
|---|
| | | return width |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // é¢è§å¾ç |
|---|
| | | onPreviewTap(url) { |
|---|
| | | const urls = this.urls.map((item) => { |
|---|
| | | return this.getSrc(item) |
|---|
| | | }) |
|---|
| | | uni.previewImage({ |
|---|
| | | current: url, |
|---|
| | | urls |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è·åå¾ççè·¯å¾ |
|---|
| | | getSrc(item) { |
|---|
| | | return uni.$u.test.object(item) |
|---|
| | | ? (this.keyName && item[this.keyName]) || item.src |
|---|
| | | : item |
|---|
| | | }, |
|---|
| | | // åå¾æ¶ï¼è·åå¾çç尺寸 |
|---|
| | | // å¨å°ç¨åºä¸ï¼éè¦å°ç½ç»å¾çççååæ·»å å°å°ç¨åºçdownloadååæå¯è½è·å尺寸 |
|---|
| | | // å¨æ²¡ææ·»å çæ
åµä¸ï¼è®©åå¾å®½åº¦é»è®¤ä¸ºçåçä¸å®å®½åº¦(singlePercent) |
|---|
| | | getImageRect() { |
|---|
| | | const src = this.getSrc(this.urls[0]) |
|---|
| | | uni.getImageInfo({ |
|---|
| | | src, |
|---|
| | | success: (res) => { |
|---|
| | | // å¤æå¾ç横åè¿æ¯ç«åå±ç¤ºæ¹å¼ |
|---|
| | | const isHorizotal = res.width >= res.height |
|---|
| | | this.singleWidth = isHorizotal |
|---|
| | | ? this.singleSize |
|---|
| | | : (res.width / res.height) * this.singleSize |
|---|
| | | this.singleHeight = !isHorizotal |
|---|
| | | ? this.singleSize |
|---|
| | | : (res.height / res.width) * this.singleWidth |
|---|
| | | }, |
|---|
| | | fail: () => { |
|---|
| | | this.getComponentWidth() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è·åç»ä»¶ç宽度 |
|---|
| | | async getComponentWidth() { |
|---|
| | | // 延æ¶ä¸å®æ¶é´ï¼ä»¥è·ådom尺寸 |
|---|
| | | await uni.$u.sleep(30) |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | this.$uGetRect('.u-album__row').then((size) => { |
|---|
| | | this.singleWidth = size.width * this.singlePercent |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // è¿éref="u-album__row"æå¨çæ ç¾ä¸ºéè¿for循ç¯åºæ¥ï¼å¯¼è´this.$refs['u-album__row']æ¯ä¸ä¸ªæ°ç» |
|---|
| | | const ref = this.$refs['u-album__row'][0] |
|---|
| | | ref && |
|---|
| | | dom.getComponentRect(ref, (res) => { |
|---|
| | | this.singleWidth = res.size.width * this.singlePercent |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../libs/css/components.scss'; |
|---|
| | | |
|---|
| | | .u-album { |
|---|
| | | @include flex(column); |
|---|
| | | |
|---|
| | | &__row { |
|---|
| | | @include flex(row); |
|---|
| | | flex-wrap: wrap; |
|---|
| | | |
|---|
| | | &__wrapper { |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | background-color: rgba(0, 0, 0, 0.3); |
|---|
| | | @include flex(row); |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¾ç¤ºæå |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.alert.title |
|---|
| | | }, |
|---|
| | | // 主é¢ï¼success/warning/info/error |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.alert.type |
|---|
| | | }, |
|---|
| | | // è¾
å©æ§æå |
|---|
| | | description: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.alert.description |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¯å
³é |
|---|
| | | closable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.alert.closable |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå¾æ |
|---|
| | | showIcon: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.alert.showIcon |
|---|
| | | }, |
|---|
| | | // æµ
ææ·±è²è°ï¼light-æµ
è²ï¼dark-æ·±è² |
|---|
| | | effect: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.alert.effect |
|---|
| | | }, |
|---|
| | | // æåæ¯å¦å±
ä¸ |
|---|
| | | center: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.alert.center |
|---|
| | | }, |
|---|
| | | // åä½å¤§å° |
|---|
| | | fontSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.alert.fontSize |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <u-transition |
|---|
| | | mode="fade" |
|---|
| | | :show="show" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-alert" |
|---|
| | | :class="[`u-alert--${type}--${effect}`]" |
|---|
| | | @tap.stop="clickHandler" |
|---|
| | | :style="[$u.addStyle(customStyle)]" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-alert__icon" |
|---|
| | | v-if="showIcon" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | :name="iconName" |
|---|
| | | size="18" |
|---|
| | | :color="iconColor" |
|---|
| | | ></u-icon> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | class="u-alert__content" |
|---|
| | | :style="[{ |
|---|
| | | paddingRight: closable ? '20px' : 0 |
|---|
| | | }]" |
|---|
| | | > |
|---|
| | | <text |
|---|
| | | class="u-alert__content__title" |
|---|
| | | v-if="title" |
|---|
| | | :style="[{ |
|---|
| | | fontSize: $u.addUnit(fontSize), |
|---|
| | | textAlign: center ? 'center' : 'left' |
|---|
| | | }]" |
|---|
| | | :class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]" |
|---|
| | | >{{ title }}</text> |
|---|
| | | <text |
|---|
| | | class="u-alert__content__desc" |
|---|
| | | v-if="description" |
|---|
| | | :style="[{ |
|---|
| | | fontSize: $u.addUnit(fontSize), |
|---|
| | | textAlign: center ? 'center' : 'left' |
|---|
| | | }]" |
|---|
| | | :class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]" |
|---|
| | | >{{ description }}</text> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | class="u-alert__close" |
|---|
| | | v-if="closable" |
|---|
| | | @tap.stop="closeHandler" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | name="close" |
|---|
| | | :color="iconColor" |
|---|
| | | size="15" |
|---|
| | | ></u-icon> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </u-transition> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * Alert è¦åæ示 |
|---|
| | | * @description è¦åæ示ï¼å±ç°éè¦å
³æ³¨çä¿¡æ¯ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/alertTips.html |
|---|
| | | * |
|---|
| | | * @property {String} title æ¾ç¤ºçæå |
|---|
| | | * @property {String} type 使ç¨é¢è®¾çé¢è² ï¼é»è®¤ 'warning' ï¼ |
|---|
| | | * @property {String} description è¾
å©æ§æåï¼é¢è²æ¯titleæµ
ä¸ç¹ï¼åå·ä¹å°ä¸ç¹ï¼å¯é |
|---|
| | | * @property {Boolean} closable å
³éæé®(é»è®¤ä¸ºåå·iconå¾æ ) ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} showIcon æ¯å¦æ¾ç¤ºå·¦è¾¹çè¾
å©å¾æ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {String} effect å¤å¾æ¶ï¼å¾ç缩æ¾è£åªçæ¨¡å¼ ï¼é»è®¤ 'light' ï¼ |
|---|
| | | * @property {Boolean} center æåæ¯å¦å±
ä¸ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String | Number} fontSize åä½å¤§å° ï¼é»è®¤ 14 ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * @event {Function} click ç¹å»ç»ä»¶æ¶è§¦å |
|---|
| | | * @example <u-alert :title="title" type = "warning" :closable="closable" :description = "description"></u-alert> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-alert', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | show: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | iconColor() { |
|---|
| | | return this.effect === 'light' ? this.type : '#fff' |
|---|
| | | }, |
|---|
| | | // ä¸å主é¢å¯¹åºä¸åçå¾æ |
|---|
| | | iconName() { |
|---|
| | | switch (this.type) { |
|---|
| | | case 'success': |
|---|
| | | return 'checkmark-circle-fill'; |
|---|
| | | break; |
|---|
| | | case 'error': |
|---|
| | | return 'close-circle-fill'; |
|---|
| | | break; |
|---|
| | | case 'warning': |
|---|
| | | return 'error-circle-fill'; |
|---|
| | | break; |
|---|
| | | case 'info': |
|---|
| | | return 'info-circle-fill'; |
|---|
| | | break; |
|---|
| | | case 'primary': |
|---|
| | | return 'more-circle-fill'; |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | return 'error-circle-fill'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // ç¹å»å
容 |
|---|
| | | clickHandler() { |
|---|
| | | this.$emit('click') |
|---|
| | | }, |
|---|
| | | // ç¹å»å
³éæé® |
|---|
| | | closeHandler() { |
|---|
| | | this.show = false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-alert { |
|---|
| | | position: relative; |
|---|
| | | background-color: $u-primary; |
|---|
| | | padding: 8px 10px; |
|---|
| | | @include flex(row); |
|---|
| | | align-items: center; |
|---|
| | | border-top-left-radius: 4px; |
|---|
| | | border-top-right-radius: 4px; |
|---|
| | | border-bottom-left-radius: 4px; |
|---|
| | | border-bottom-right-radius: 4px; |
|---|
| | | |
|---|
| | | &--primary--dark { |
|---|
| | | background-color: $u-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--primary--light { |
|---|
| | | background-color: #ecf5ff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--error--dark { |
|---|
| | | background-color: $u-error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--error--light { |
|---|
| | | background-color: #FEF0F0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--success--dark { |
|---|
| | | background-color: $u-success; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--success--light { |
|---|
| | | background-color: #f5fff0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--warning--dark { |
|---|
| | | background-color: $u-warning; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--warning--light { |
|---|
| | | background-color: #FDF6EC; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--info--dark { |
|---|
| | | background-color: $u-info; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--info--light { |
|---|
| | | background-color: #f4f4f5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | margin-right: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | @include flex(column); |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &__title { |
|---|
| | | color: $u-main-color; |
|---|
| | | font-size: 14px; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #fff; |
|---|
| | | margin-bottom: 2px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__desc { |
|---|
| | | color: $u-main-color; |
|---|
| | | font-size: 14px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__title--dark, |
|---|
| | | &__desc--dark { |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--primary--light, |
|---|
| | | &__text--primary--light { |
|---|
| | | color: $u-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--success--light, |
|---|
| | | &__text--success--light { |
|---|
| | | color: $u-success; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--warning--light, |
|---|
| | | &__text--warning--light { |
|---|
| | | color: $u-warning; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--error--light, |
|---|
| | | &__text--error--light { |
|---|
| | | color: $u-error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--info--light, |
|---|
| | | &__text--info--light { |
|---|
| | | color: $u-info; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__close { |
|---|
| | | position: absolute; |
|---|
| | | top: 11px; |
|---|
| | | right: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // 头åå¾çç» |
|---|
| | | urls: { |
|---|
| | | type: Array, |
|---|
| | | default: uni.$u.props.avatarGroup.urls |
|---|
| | | }, |
|---|
| | | // æå¤å±ç¤ºç头åæ°é |
|---|
| | | maxCount: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.avatarGroup.maxCount |
|---|
| | | }, |
|---|
| | | // 头åå½¢ç¶ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatarGroup.shape |
|---|
| | | }, |
|---|
| | | // å¾çè£åªæ¨¡å¼ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatarGroup.mode |
|---|
| | | }, |
|---|
| | | // è¶
åºmaxCountæ¶æ¯å¦æ¾ç¤ºæ¥çæ´å¤çæ示 |
|---|
| | | showMore: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.avatarGroup.showMore |
|---|
| | | }, |
|---|
| | | // 头åå¤§å° |
|---|
| | | size: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.avatarGroup.size |
|---|
| | | }, |
|---|
| | | // æå®ä»æ°ç»ç对象å
ç´ ä¸è¯»ååªä¸ªå±æ§ä½ä¸ºå¾çå°å |
|---|
| | | keyName: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatarGroup.keyName |
|---|
| | | }, |
|---|
| | | // 头åä¹é´çé®æ¡æ¯ä¾ |
|---|
| | | gap: { |
|---|
| | | type: [String, Number], |
|---|
| | | validator(value) { |
|---|
| | | return value >= 0 && value <= 1 |
|---|
| | | }, |
|---|
| | | default: uni.$u.props.avatarGroup.gap |
|---|
| | | }, |
|---|
| | | // éé¢å¤æ¾ç¤ºçå¼ |
|---|
| | | extraValue: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: uni.$u.props.avatarGroup.extraValue |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-avatar-group"> |
|---|
| | | <view |
|---|
| | | class="u-avatar-group__item" |
|---|
| | | v-for="(item, index) in showUrl" |
|---|
| | | :key="index" |
|---|
| | | :style="{ |
|---|
| | | marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap) |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <u-avatar |
|---|
| | | :size="size" |
|---|
| | | :shape="shape" |
|---|
| | | :mode="mode" |
|---|
| | | :src="$u.test.object(item) ? keyName && item[keyName] || item.url : item" |
|---|
| | | ></u-avatar> |
|---|
| | | <view |
|---|
| | | class="u-avatar-group__item__show-more" |
|---|
| | | v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)" |
|---|
| | | @tap="clickHandler" |
|---|
| | | > |
|---|
| | | <u--text |
|---|
| | | color="#ffffff" |
|---|
| | | :size="size * 0.4" |
|---|
| | | :text="`+${extraValue || urls.length - showUrl.length}`" |
|---|
| | | align="center" |
|---|
| | | customStyle="justify-content: center" |
|---|
| | | ></u--text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * AvatarGroup 头åç» |
|---|
| | | * @description æ¬ç»ä»¶ä¸è¬ç¨äºå±ç¤ºå¤´åçå°æ¹ï¼å¦ä¸ªäººä¸å¿ï¼æè
è¯è®ºå表页çç¨æ·å¤´åå±ç¤ºçåºæã |
|---|
| | | * @tutorial https://www.uviewui.com/components/avatar.html |
|---|
| | | * |
|---|
| | | * @property {Array} urls 头åå¾çç» ï¼é»è®¤ [] ï¼ |
|---|
| | | * @property {String | Number} maxCount æå¤å±ç¤ºç头åæ°é ï¼ é»è®¤ 5 ï¼ |
|---|
| | | * @property {String} shape 头åå½¢ç¶ï¼ 'circle' (é»è®¤) | 'square' ï¼ |
|---|
| | | * @property {String} mode å¾çè£åªæ¨¡å¼ï¼é»è®¤ 'scaleToFill' ï¼ |
|---|
| | | * @property {Boolean} showMore è¶
åºmaxCountæ¶æ¯å¦æ¾ç¤ºæ¥çæ´å¤çæ示 ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String | Number} size 头åå¤§å° ï¼é»è®¤ 40 ï¼ |
|---|
| | | * @property {String} keyName æå®ä»æ°ç»ç对象å
ç´ ä¸è¯»ååªä¸ªå±æ§ä½ä¸ºå¾çå°å |
|---|
| | | * @property {String | Number} gap 头åä¹é´çé®æ¡æ¯ä¾ï¼0.4代表é®æ¡40%ï¼ ï¼é»è®¤ 0.5 ï¼ |
|---|
| | | * @property {String | Number} extraValue éé¢å¤æ¾ç¤ºçå¼ |
|---|
| | | * @event {Function} showMore 头åç»æ´å¤ç¹å» |
|---|
| | | * @example <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-avatar-group', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | showUrl() { |
|---|
| | | return this.urls.slice(0, this.maxCount) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | clickHandler() { |
|---|
| | | this.$emit('showMore') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-avatar-group { |
|---|
| | | @include flex; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | margin-left: -10px; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &--no-indent { |
|---|
| | | // å¦æä½ æ³è´¨çä½è
ä¸ä¼ä½¿ç¨:first-childï¼è¯´æä½ å¤ªå¹´è½»ï¼å 为nvueä¸æ¯æ |
|---|
| | | margin-left: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__show-more { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | background-color: rgba(0, 0, 0, 0.3); |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | border-radius: 100px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // 头åå¾çè·¯å¾(ä¸è½ä¸ºç¸å¯¹è·¯å¾) |
|---|
| | | src: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatar.src |
|---|
| | | }, |
|---|
| | | // 头åå½¢ç¶ï¼circle-åå½¢ï¼square-æ¹å½¢ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatar.shape |
|---|
| | | }, |
|---|
| | | // 头å尺寸 |
|---|
| | | size: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.avatar.size |
|---|
| | | }, |
|---|
| | | // è£åªæ¨¡å¼ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatar.mode |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºçæå |
|---|
| | | text: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatar.text |
|---|
| | | }, |
|---|
| | | // èæ¯è² |
|---|
| | | bgColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatar.bgColor |
|---|
| | | }, |
|---|
| | | // æåé¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatar.color |
|---|
| | | }, |
|---|
| | | // æåå¤§å° |
|---|
| | | fontSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.avatar.fontSize |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºçå¾æ |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatar.icon |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºå°ç¨åºå¤´åï¼åªå¯¹ç¾åº¦ï¼å¾®ä¿¡ï¼QQå°ç¨åºææ |
|---|
| | | mpAvatar: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.avatar.mpAvatar |
|---|
| | | }, |
|---|
| | | // æ¯å¦ä½¿ç¨éæºèæ¯è² |
|---|
| | | randomBgColor: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.avatar.randomBgColor |
|---|
| | | }, |
|---|
| | | // å 载失败çé»è®¤å¤´å(ç»ä»¶æå
ç½®é»è®¤å¾ç) |
|---|
| | | defaultUrl: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatar.defaultUrl |
|---|
| | | }, |
|---|
| | | // å¦æé
ç½®äºrandomBgColor为trueï¼ä¸é
ç½®äºæ¤å¼ï¼åä»é»è®¤çèæ¯è²æ°ç»ä¸ååºå¯¹åºç´¢å¼çé¢è²å¼ï¼åå¼0-19ä¹é´ |
|---|
| | | colorIndex: { |
|---|
| | | type: [String, Number], |
|---|
| | | // æ ¡éªåæ°è§åï¼ç´¢å¼å¨0-19ä¹é´ |
|---|
| | | validator(n) { |
|---|
| | | return uni.$u.test.range(n, [0, 19]) || n === '' |
|---|
| | | }, |
|---|
| | | default: uni.$u.props.avatar.colorIndex |
|---|
| | | }, |
|---|
| | | // ç»ä»¶æ è¯ç¬¦ |
|---|
| | | name: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.avatar.name |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-avatar" |
|---|
| | | :class="[`u-avatar--${shape}`]" |
|---|
| | | :style="[{ |
|---|
| | | backgroundColor: (text || icon) ? (randomBgColor ? colors[colorIndex !== '' ? colorIndex : $u.random(0, 19)] : bgColor) : 'transparent', |
|---|
| | | width: $u.addUnit(size), |
|---|
| | | height: $u.addUnit(size), |
|---|
| | | }, $u.addStyle(customStyle)]" |
|---|
| | | @tap="clickHandler" |
|---|
| | | > |
|---|
| | | <slot> |
|---|
| | | <!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU --> |
|---|
| | | <open-data |
|---|
| | | v-if="mpAvatar && allowMp" |
|---|
| | | type="userAvatarUrl" |
|---|
| | | :style="[{ |
|---|
| | | width: $u.addUnit(size), |
|---|
| | | height: $u.addUnit(size) |
|---|
| | | }]" |
|---|
| | | /> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU --> |
|---|
| | | <template v-if="mpAvatar && allowMp"></template> |
|---|
| | | <!-- #endif --> |
|---|
| | | <u-icon |
|---|
| | | v-else-if="icon" |
|---|
| | | :name="icon" |
|---|
| | | :size="fontSize" |
|---|
| | | :color="color" |
|---|
| | | ></u-icon> |
|---|
| | | <u--text |
|---|
| | | v-else-if="text" |
|---|
| | | :text="text" |
|---|
| | | :size="fontSize" |
|---|
| | | :color="color" |
|---|
| | | align="center" |
|---|
| | | customStyle="justify-content: center" |
|---|
| | | ></u--text> |
|---|
| | | <image |
|---|
| | | class="u-avatar__image" |
|---|
| | | v-else |
|---|
| | | :class="[`u-avatar__image--${shape}`]" |
|---|
| | | :src="avatarUrl || defaultUrl" |
|---|
| | | :mode="mode" |
|---|
| | | @error="errorHandler" |
|---|
| | | :style="[{ |
|---|
| | | width: $u.addUnit(size), |
|---|
| | | height: $u.addUnit(size) |
|---|
| | | }]" |
|---|
| | | ></image> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | const base64Avatar = |
|---|
| | | "data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCADIAMgDAREAAhEBAxEB/8QAcQABAQEAAwEBAAAAAAAAAAAAAAUEAQMGAgcBAQAAAAAAAAAAAAAAAAAAAAAQAAIBAwICBgkDBQAAAAAAAAABAhEDBCEFMVFBYXGREiKBscHRMkJSEyOh4XLxYjNDFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/fAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHbHFyZ/Dam+yLA+Z2L0Pjtyj2poD4AAAAAAAAAAAAAAAAAAAAAAAAKWFs9y6lcvvwQeqj8z9wFaziY1n/HbUX9XF97A7QAGXI23EvJ1goyfzR0YEfN269jeZ+a03pNe0DIAAAAAAAAAAAAAAAAAAAACvtO3RcVkXlWutuL9YFYAAAAAOJRjKLjJVi9GmB5/csH/mu1h/in8PU+QGMAAAAAAAAAAAAAAAAAAaMDG/6MmMH8C80+xAelSSVFolwQAAAAAAAHVlWI37ErUulaPk+hgeYnCUJuElSUXRrrQHAAAAAAAAAAAAAAAAABa2Oz4bM7r4zdF2ICmAAAAAAAAAg7zZ8GX41wuJP0rRgYAAAAAAAAAAAAAAAAAD0m2R8ODaXU33tsDSAAAAAAAAAlb9HyWZcnJd9PcBHAAAAAAAAAAAAAAAAAPS7e64Vn+KA0AAAAAAAAAJm+v8Ftf3ewCKAAAAAAAAAAAAAAAAAX9muqeGo9NttP06+0DcAAAAAAAAAjb7dTu2ra+VOT9P8AQCWAAAAAAAAAAAAAAAAAUNmyPt5Ltv4bui/kuAF0AAAAAAADiUlGLlJ0SVW+oDzOXfd/Ind6JPRdS0QHSAAAAAAAAAAAAAAAAAE2nVaNcGB6Lbs6OTao9LsF51z60BrAAAAAABJ3jOVHjW3r/sa9QEgAAAAAAAAAAAAAAAAAAAPu1duWriuW34ZR4MC9hbnZyEoy8l36XwfYBsAAADaSq9EuLAlZ+7xSdrGdW9Hc5dgEdtt1erfFgAAAAAAAAAAAAAAAAADVjbblX6NR8MH80tEBRs7HYivyzlN8lovaBPzduvY0m6eK10TXtAyAarO55lpJK54orolr+4GqO/Xaea1FvqbXvA+Z77kNeW3GPbV+4DJfzcm/pcm3H6Vou5AdAFLC2ed2Pjv1txa8sV8T6wOL+yZEKu1JXFy4MDBOE4ScZxcZLinoB8gAAAAAAAAAAAB242LeyJ+C3GvN9C7QLmJtePYpKS+5c+p8F2IDYAANJqj1T4oCfk7Nj3G5Wn9qXJax7gJ93Z82D8sVNc4v30A6Xg5i42Z+iLfqARwcyT0sz9MWvWBps7LlTf5Grce9/oBTxdtxseklHxT+uWr9AGoAB138ezfj4bsFJdD6V2MCPm7RdtJzs1uW1xXzL3gTgAAAAAAAAADRhYc8q74I6RWs5ckB6GxYtWLat21SK731sDsAAAAAAAAAAAAAAAASt021NO/YjrxuQXT1oCOAAAAAAABzGLlJRSq26JAelwsWONYjbXxcZvmwO8AAAAAAAAAAAAAAAAAAef3TEWPkVivx3NY9T6UBiAAAAAABo2+VmGXblddIJ8eivRUD0oAAAAAAAAAAAAAAAAAAAYt4tKeFKVNYNSXfRgefAAAAAAAAr7VuSSWPedKaW5v1MCsAAAAAAAAAAAAAAAAAAIe6bj96Ts2n+JPzSXzP3ATgAAAAAAAAFbbt1UUrOQ9FpC4/UwK6aaqtU+DAAAAAAAAAAAAAAA4lKMIuUmoxWrb4ARNx3R3q2rLpa4Sl0y/YCcAAAAAAAAAAANmFud7G8r89r6X0dgFvGzLGRGtuWvTF6NAdwAAAAAAAAAAAy5W442PVN+K59EePp5ARMvOv5MvO6QXCC4AZwAAAAAAAAAAAAAcxlKLUotprg1owN+PvORborq+7Hnwl3gUbO74VzRydt8pKn68ANcJwmqwkpLmnUDkAAAAfNy9atqtyagut0AxXt5xIV8Fbj6lRd7Am5G65V6qUvtwfyx94GMAAAAAAAAAAAAAAAAAAAOU2nVOj5gdsc3LiqRvTpyqwOxbnnrhdfpSfrQB7pnv/AGvuS9gHXPMy5/Fem1yq0v0A6W29XqwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z"; |
|---|
| | | /** |
|---|
| | | * Avatar 头å |
|---|
| | | * @description æ¬ç»ä»¶ä¸è¬ç¨äºå±ç¤ºå¤´åçå°æ¹ï¼å¦ä¸ªäººä¸å¿ï¼æè
è¯è®ºå表页çç¨æ·å¤´åå±ç¤ºçåºæã |
|---|
| | | * @tutorial https://www.uviewui.com/components/avatar.html |
|---|
| | | * |
|---|
| | | * @property {String} src 头åè·¯å¾ï¼å¦å 载失败ï¼å°ä¼æ¾ç¤ºé»è®¤å¤´å(ä¸è½ä¸ºç¸å¯¹è·¯å¾) |
|---|
| | | * @property {String} shape 头åå½¢ç¶ ï¼ circle (é»è®¤) | squareï¼ |
|---|
| | | * @property {String | Number} size 头å尺寸ï¼å¯ä»¥ä¸ºæå®å符串(large, default, mini)ï¼æè
æ°å¼ ï¼é»è®¤ 40 ï¼ |
|---|
| | | * @property {String} mode 头åå¾ççè£åªç±»åï¼ä¸uniçimageç»ä»¶çmodeåæ°ä¸è´ï¼å¦ææè¾¾ä¸å°éæ±ï¼å¯å°è¯ä¼ widthFixå¼ ï¼é»è®¤ 'scaleToFill' ï¼ |
|---|
| | | * @property {String} text ç¨æåæ¿ä»£å¾çï¼çº§å«ä¼å
äºsrc |
|---|
| | | * @property {String} bgColor èæ¯é¢è²ï¼ä¸è¬æ¾ç¤ºæåæ¶ç¨ ï¼é»è®¤ '#c0c4cc' ï¼ |
|---|
| | | * @property {String} color æåé¢è² ï¼é»è®¤ '#ffffff' ï¼ |
|---|
| | | * @property {String | Number} fontSize æåå¤§å° ï¼é»è®¤ 18 ï¼ |
|---|
| | | * @property {String} icon æ¾ç¤ºçå¾æ |
|---|
| | | * @property {Boolean} mpAvatar æ¾ç¤ºå°ç¨åºå¤´åï¼åªå¯¹ç¾åº¦ï¼å¾®ä¿¡ï¼QQå°ç¨åºææ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} randomBgColor æ¯å¦ä½¿ç¨éæºèæ¯è² ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} defaultUrl å 载失败çé»è®¤å¤´å(ç»ä»¶æå
ç½®é»è®¤å¾ç) |
|---|
| | | * @property {String | Number} colorIndex å¦æé
ç½®äºrandomBgColor为trueï¼ä¸é
ç½®äºæ¤å¼ï¼åä»é»è®¤çèæ¯è²æ°ç»ä¸ååºå¯¹åºç´¢å¼çé¢è²å¼ï¼åå¼0-19ä¹é´ |
|---|
| | | * @property {String} name ç»ä»¶æ è¯ç¬¦ ï¼é»è®¤ 'level' ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @event {Function} click ç¹å»ç»ä»¶æ¶è§¦å index: ç¨æ·ä¼ éçæ è¯ç¬¦ |
|---|
| | | * @example <u-avatar :src="src" mode="square"></u-avatar> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-avatar', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // å¦æé
ç½®randomBgColoråæ°ä¸ºtrueï¼å¨å¾æ æè
æåç模å¼ä¸ï¼ä¼éæºä»ä¸ååºä¸ä¸ªé¢è²å¼å½åèæ¯è² |
|---|
| | | colors: ['#ffb34b', '#f2bba9', '#f7a196', '#f18080', '#88a867', '#bfbf39', '#89c152', '#94d554', '#f19ec2', |
|---|
| | | '#afaae4', '#e1b0df', '#c38cc1', '#72dcdc', '#9acdcb', '#77b1cc', '#448aca', '#86cefa', '#98d1ee', |
|---|
| | | '#73d1f1', |
|---|
| | | '#80a7dc' |
|---|
| | | ], |
|---|
| | | avatarUrl: this.src, |
|---|
| | | allowMp: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // çå¬å¤´åsrcçååï¼èµå¼ç»å
é¨çavatarUrlåéï¼å 为å¾çå 载失败æ¶ï¼éè¦ä¿®æ¹å¾ççsrc为é»è®¤å¼ |
|---|
| | | // èç»ä»¶å
é¨ä¸è½ç´æ¥ä¿®æ¹propsçå¼ï¼æ以éè¦ä¸ä¸ªä¸é´åé |
|---|
| | | src: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal) { |
|---|
| | | this.avatarUrl = newVal |
|---|
| | | // å¦æ没æä¼ srcï¼å主å¨è§¦åerroräºä»¶ï¼ç¨äºæ¾ç¤ºé»è®¤ç头åï¼å¦åsrc为''空å符ççæ¶åï¼ä¼æ å
容å±ç¤º |
|---|
| | | if(!newVal) { |
|---|
| | | this.errorHandler() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | imageStyle() { |
|---|
| | | const style = {} |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | // ç®ååªæè¿å 个å°ç¨åºå¹³å°å
·æopen-dataæ ç¾ |
|---|
| | | // å
¶ä»å¹³å°å¯ä»¥éè¿uni.getUserInfo类似æ¥å£è·åä¿¡æ¯ï¼ä½æ¯éè¦å¼¹çªææ(é¦æ¬¡)ï¼ä¸å符ç»ä»¶é»è¾ |
|---|
| | | // æ
ç®åèªå¨è·åå°ç¨åºå¤´ååªæ¯æè¿å ä¸ªå¹³å° |
|---|
| | | // #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU |
|---|
| | | this.allowMp = true |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | // å¤æä¼ å
¥çnameå±æ§ï¼æ¯å¦å¾çè·¯å¾ï¼åªè¦å¸¦æ"/"å认为æ¯å¾çå½¢å¼ |
|---|
| | | isImg() { |
|---|
| | | return this.src.indexOf('/') !== -1 |
|---|
| | | }, |
|---|
| | | // å¾çå è½½æ¶å¤±è´¥æ¶è§¦å |
|---|
| | | errorHandler() { |
|---|
| | | this.avatarUrl = this.defaultUrl || base64Avatar |
|---|
| | | }, |
|---|
| | | clickHandler() { |
|---|
| | | this.$emit('click', this.name) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-avatar { |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | &--circle { |
|---|
| | | border-radius: 100px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--square { |
|---|
| | | border-radius: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__image { |
|---|
| | | &--circle { |
|---|
| | | border-radius: 100px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--square { |
|---|
| | | border-radius: 4px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // è¿å顶é¨çå½¢ç¶ï¼circle-åå½¢ï¼square-æ¹å½¢ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.backtop.mode |
|---|
| | | }, |
|---|
| | | // èªå®ä¹å¾æ |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.backtop.icon |
|---|
| | | }, |
|---|
| | | // æ示æå |
|---|
| | | text: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.backtop.text |
|---|
| | | }, |
|---|
| | | // è¿å顶é¨æ»å¨æ¶é´ |
|---|
| | | duration: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.backtop.duration |
|---|
| | | }, |
|---|
| | | // æ»å¨è·ç¦» |
|---|
| | | scrollTop: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.backtop.scrollTop |
|---|
| | | }, |
|---|
| | | // è·ç¦»é¡¶é¨å¤å°è·ç¦»æ¾ç¤ºï¼åä½px |
|---|
| | | top: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.backtop.top |
|---|
| | | }, |
|---|
| | | // è¿å顶é¨æé®å°åºé¨çè·ç¦»ï¼åä½px |
|---|
| | | bottom: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.backtop.bottom |
|---|
| | | }, |
|---|
| | | // è¿å顶é¨æé®å°å³è¾¹çè·ç¦»ï¼åä½px |
|---|
| | | right: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.backtop.right |
|---|
| | | }, |
|---|
| | | // å±çº§ |
|---|
| | | zIndex: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.backtop.zIndex |
|---|
| | | }, |
|---|
| | | // å¾æ çæ ·å¼ï¼å¯¹è±¡å½¢å¼ |
|---|
| | | iconStyle: { |
|---|
| | | type: Object, |
|---|
| | | default: uni.$u.props.backtop.iconStyle |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <u-transition |
|---|
| | | mode="fade" |
|---|
| | | :customStyle="backTopStyle" |
|---|
| | | :show="show" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-back-top" |
|---|
| | | :style="[contentStyle]" |
|---|
| | | v-if="!$slots.default && !$slots.$default" |
|---|
| | | @click="backToTop" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | :name="icon" |
|---|
| | | :custom-style="iconStyle" |
|---|
| | | ></u-icon> |
|---|
| | | <text |
|---|
| | | v-if="text" |
|---|
| | | class="u-back-top__text" |
|---|
| | | >{{text}}</text> |
|---|
| | | </view> |
|---|
| | | <slot v-else /> |
|---|
| | | </u-transition> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const dom = weex.requireModule('dom') |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * backTop è¿åé¡¶é¨ |
|---|
| | | * @description æ¬ç»ä»¶ä¸ä¸ªç¨äºé¿é¡µé¢ï¼æ»å¨ä¸å®è·ç¦»åï¼åºç°è¿å顶é¨æé®ï¼æ¹ä¾¿å¿«éè¿å顶é¨çåºæ¯ã |
|---|
| | | * @tutorial https://uviewui.com/components/backTop.html |
|---|
| | | * |
|---|
| | | * @property {String} mode è¿å顶é¨çå½¢ç¶ï¼circle-åå½¢ï¼square-æ¹å½¢ ï¼é»è®¤ 'circle' ï¼ |
|---|
| | | * @property {String} icon èªå®ä¹å¾æ ï¼é»è®¤ 'arrow-upward' ï¼ è§å®æ¹ææ¡£ç¤ºä¾ |
|---|
| | | * @property {String} text æ示æå |
|---|
| | | * @property {String | Number} duration è¿å顶é¨æ»å¨æ¶é´ ï¼é»è®¤ 100ï¼ |
|---|
| | | * @property {String | Number} scrollTop æ»å¨è·ç¦» ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {String | Number} top è·ç¦»é¡¶é¨å¤å°è·ç¦»æ¾ç¤ºï¼åä½px ï¼é»è®¤ 400 ï¼ |
|---|
| | | * @property {String | Number} bottom è¿å顶é¨æé®å°åºé¨çè·ç¦»ï¼åä½px ï¼é»è®¤ 100 ï¼ |
|---|
| | | * @property {String | Number} right è¿å顶é¨æé®å°å³è¾¹çè·ç¦»ï¼åä½px ï¼é»è®¤ 20 ï¼ |
|---|
| | | * @property {String | Number} zIndex å±çº§ ï¼é»è®¤ 9 ï¼ |
|---|
| | | * @property {Object<Object>} iconStyle å¾æ çæ ·å¼ï¼å¯¹è±¡å½¢å¼ ï¼é»è®¤ {color: '#909399',fontSize: '19px'}ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @example <u-back-top :scrollTop="scrollTop"></u-back-top> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-back-top', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | computed: { |
|---|
| | | backTopStyle() { |
|---|
| | | // å¨ç»ç»ä»¶æ ·å¼ |
|---|
| | | const style = { |
|---|
| | | bottom: uni.$u.addUnit(this.bottom), |
|---|
| | | right: uni.$u.addUnit(this.right), |
|---|
| | | width: '40px', |
|---|
| | | height: '40px', |
|---|
| | | position: 'fixed', |
|---|
| | | zIndex: 10, |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | show() { |
|---|
| | | return uni.$u.getPx(this.scrollTop) > uni.$u.getPx(this.top) |
|---|
| | | }, |
|---|
| | | contentStyle() { |
|---|
| | | const style = {} |
|---|
| | | let radius = 0 |
|---|
| | | // æ¯å¦åå½¢ |
|---|
| | | if(this.mode === 'circle') { |
|---|
| | | radius = '100px' |
|---|
| | | } else { |
|---|
| | | radius = '4px' |
|---|
| | | } |
|---|
| | | // 为äºå
¼å®¹å®ånvueï¼åªè½è¿ä¹åå¼å |
|---|
| | | style.borderTopLeftRadius = radius |
|---|
| | | style.borderTopRightRadius = radius |
|---|
| | | style.borderBottomLeftRadius = radius |
|---|
| | | style.borderBottomRightRadius = radius |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | backToTop() { |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | if (!this.$parent.$refs['u-back-top']) { |
|---|
| | | uni.$u.error(`nvue页é¢éè¦ç»é¡µé¢æå¤å±å
ç´ è®¾ç½®"ref='u-back-top'`) |
|---|
| | | } |
|---|
| | | dom.scrollToElement(this.$parent.$refs['u-back-top'], { |
|---|
| | | offset: 0 |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | uni.pageScrollTo({ |
|---|
| | | scrollTop: 0, |
|---|
| | | duration: this.duration |
|---|
| | | }); |
|---|
| | | // #endif |
|---|
| | | this.$emit('click') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../libs/css/components.scss'; |
|---|
| | | $u-back-top-flex:1 !default; |
|---|
| | | $u-back-top-height:100% !default; |
|---|
| | | $u-back-top-background-color:#E1E1E1 !default; |
|---|
| | | $u-back-top-tips-font-size:12px !default; |
|---|
| | | .u-back-top { |
|---|
| | | @include flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | flex:$u-back-top-flex; |
|---|
| | | height: $u-back-top-height; |
|---|
| | | justify-content: center; |
|---|
| | | background-color: $u-back-top-background-color; |
|---|
| | | |
|---|
| | | &__tips { |
|---|
| | | font-size:$u-back-top-tips-font-size; |
|---|
| | | transform: scale(0.8); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¯å¦æ¾ç¤ºåç¹ |
|---|
| | | isDot: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.badge.isDot |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºçå
容 |
|---|
| | | value: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: uni.$u.props.badge.value |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤º |
|---|
| | | show: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.badge.show |
|---|
| | | }, |
|---|
| | | // æ大å¼ï¼è¶
è¿æ大å¼ä¼æ¾ç¤º '{max}+' |
|---|
| | | max: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: uni.$u.props.badge.max |
|---|
| | | }, |
|---|
| | | // 主é¢ç±»åï¼error|warning|success|primary |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.badge.type |
|---|
| | | }, |
|---|
| | | // å½æ°å¼ä¸º 0 æ¶ï¼æ¯å¦å±ç¤º Badge |
|---|
| | | showZero: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.badge.showZero |
|---|
| | | }, |
|---|
| | | // èæ¯é¢è²ï¼ä¼å
级æ¯typeé«ï¼å¦è®¾ç½®ï¼typeåæ°ä¼å¤±æ |
|---|
| | | bgColor: { |
|---|
| | | type: [String, null], |
|---|
| | | default: uni.$u.props.badge.bgColor |
|---|
| | | }, |
|---|
| | | // åä½é¢è² |
|---|
| | | color: { |
|---|
| | | type: [String, null], |
|---|
| | | default: uni.$u.props.badge.color |
|---|
| | | }, |
|---|
| | | // å¾½æ å½¢ç¶ï¼circle-åè§å为åè§ï¼horn-å·¦ä¸è§ä¸ºç´è§ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.badge.shape |
|---|
| | | }, |
|---|
| | | // 设置æ°åçæ¾ç¤ºæ¹å¼ï¼overflow|ellipsis|limit |
|---|
| | | // overflowä¼æ ¹æ®maxå段å¤æï¼è¶
åºæ¾ç¤º`${max}+` |
|---|
| | | // ellipsisä¼æ ¹æ®maxå¤æï¼è¶
åºæ¾ç¤º`${max}...` |
|---|
| | | // limitä¼ä¾æ®1000ä½ä¸ºå¤ææ¡ä»¶ï¼è¶
åº1000ï¼æ¾ç¤º`${value/1000}K`ï¼æ¯å¦2.2kã3.34wï¼æå¤ä¿ç2ä½å°æ° |
|---|
| | | numberType: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.badge.numberType |
|---|
| | | }, |
|---|
| | | // 设置badgeçä½ç½®å移ï¼æ ¼å¼ä¸º [x, y]ï¼ä¹å³è®¾ç½®ç为topårightçå¼ï¼absolute为trueæ¶ææ |
|---|
| | | offset: { |
|---|
| | | type: Array, |
|---|
| | | default: uni.$u.props.badge.offset |
|---|
| | | }, |
|---|
| | | // æ¯å¦å转èæ¯ååä½é¢è² |
|---|
| | | inverted: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.badge.inverted |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç»å¯¹å®ä½ |
|---|
| | | absolute: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.badge.absolute |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <text |
|---|
| | | v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)" |
|---|
| | | :class="[isDot ? 'u-badge--dot' : 'u-badge--not-dot', inverted && 'u-badge--inverted', shape === 'horn' && 'u-badge--horn', `u-badge--${type}${inverted ? '--inverted' : ''}`]" |
|---|
| | | :style="[$u.addStyle(customStyle), badgeStyle]" |
|---|
| | | class="u-badge" |
|---|
| | | >{{ isDot ? '' :showValue }}</text> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * badge å¾½æ æ° |
|---|
| | | * @description 该ç»ä»¶ä¸è¬ç¨äºå¾æ å³ä¸è§æ¾ç¤ºæªè¯»çæ¶æ¯æ°éï¼æ示ç¨æ·ç¹å»ï¼æåç¹ååå
å«æå两ç§å½¢å¼ã |
|---|
| | | * @tutorial https://uviewui.com/components/badge.html |
|---|
| | | * |
|---|
| | | * @property {Boolean} isDot æ¯å¦æ¾ç¤ºåç¹ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String | Number} value æ¾ç¤ºçå
容 |
|---|
| | | * @property {Boolean} show æ¯å¦æ¾ç¤º ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String | Number} max æ大å¼ï¼è¶
è¿æ大å¼ä¼æ¾ç¤º '{max}+' ï¼é»è®¤999ï¼ |
|---|
| | | * @property {String} type 主é¢ç±»åï¼error|warning|success|primary ï¼é»è®¤ 'error' ï¼ |
|---|
| | | * @property {Boolean} showZero å½æ°å¼ä¸º 0 æ¶ï¼æ¯å¦å±ç¤º Badge ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} bgColor èæ¯é¢è²ï¼ä¼å
级æ¯typeé«ï¼å¦è®¾ç½®ï¼typeåæ°ä¼å¤±æ |
|---|
| | | * @property {String} color åä½é¢è² ï¼é»è®¤ '#ffffff' ï¼ |
|---|
| | | * @property {String} shape å¾½æ å½¢ç¶ï¼circle-åè§å为åè§ï¼horn-å·¦ä¸è§ä¸ºç´è§ ï¼é»è®¤ 'circle' ï¼ |
|---|
| | | * @property {String} numberType 设置æ°åçæ¾ç¤ºæ¹å¼ï¼overflow|ellipsis|limit ï¼é»è®¤ 'overflow' ï¼ |
|---|
| | | * @property {Array}} offset 设置badgeçä½ç½®å移ï¼æ ¼å¼ä¸º [x, y]ï¼ä¹å³è®¾ç½®ç为topårightçå¼ï¼absolute为trueæ¶ææ |
|---|
| | | * @property {Boolean} inverted æ¯å¦å转èæ¯ååä½é¢è²ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} absolute æ¯å¦ç»å¯¹å®ä½ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * @example <u-badge :type="type" :count="count"></u-badge> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-badge', |
|---|
| | | mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
|---|
| | | computed: { |
|---|
| | | // æ¯å¦å°badgeä¸å¿ä¸ç¶ç»ä»¶å³ä¸è§éå |
|---|
| | | boxStyle() { |
|---|
| | | let style = {}; |
|---|
| | | return style; |
|---|
| | | }, |
|---|
| | | // æ´ä¸ªç»ä»¶çæ ·å¼ |
|---|
| | | badgeStyle() { |
|---|
| | | const style = {} |
|---|
| | | if(this.color) { |
|---|
| | | style.color = this.color |
|---|
| | | } |
|---|
| | | if (this.bgColor && !this.inverted) { |
|---|
| | | style.backgroundColor = this.bgColor |
|---|
| | | } |
|---|
| | | if (this.absolute) { |
|---|
| | | style.position = 'absolute' |
|---|
| | | // å¦ææ设置offsetåæ° |
|---|
| | | if(this.offset.length) { |
|---|
| | | // topårightå为为offsetç第ä¸ä¸ªå第äºä¸ªå¼ï¼å¦æ没æ第äºä¸ªå¼ï¼årightçäºtop |
|---|
| | | const top = this.offset[0] |
|---|
| | | const right = this.offset[1] || top |
|---|
| | | style.top = uni.$u.addUnit(top) |
|---|
| | | style.right = uni.$u.addUnit(right) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | showValue() { |
|---|
| | | switch (this.numberType) { |
|---|
| | | case "overflow": |
|---|
| | | return Number(this.value) > Number(this.max) ? this.max + "+" : this.value |
|---|
| | | break; |
|---|
| | | case "ellipsis": |
|---|
| | | return Number(this.value) > Number(this.max) ? "..." : this.value |
|---|
| | | break; |
|---|
| | | case "limit": |
|---|
| | | return Number(this.value) > 999 ? Number(this.value) >= 9999 ? |
|---|
| | | Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value / |
|---|
| | | 1e3 * 100) / 100 + "k" : this.value |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | return Number(this.value) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | $u-badge-primary: $u-primary !default; |
|---|
| | | $u-badge-error: $u-error !default; |
|---|
| | | $u-badge-success: $u-success !default; |
|---|
| | | $u-badge-info: $u-info !default; |
|---|
| | | $u-badge-warning: $u-warning !default; |
|---|
| | | $u-badge-dot-radius: 100px !default; |
|---|
| | | $u-badge-dot-size: 8px !default; |
|---|
| | | $u-badge-dot-right: 4px !default; |
|---|
| | | $u-badge-dot-top: 0 !default; |
|---|
| | | $u-badge-text-font-size: 11px !default; |
|---|
| | | $u-badge-text-right: 10px !default; |
|---|
| | | $u-badge-text-padding: 2px 5px !default; |
|---|
| | | $u-badge-text-align: center !default; |
|---|
| | | $u-badge-text-color: #FFFFFF !default; |
|---|
| | | |
|---|
| | | .u-badge { |
|---|
| | | border-top-right-radius: $u-badge-dot-radius; |
|---|
| | | border-top-left-radius: $u-badge-dot-radius; |
|---|
| | | border-bottom-left-radius: $u-badge-dot-radius; |
|---|
| | | border-bottom-right-radius: $u-badge-dot-radius; |
|---|
| | | @include flex; |
|---|
| | | line-height: $u-badge-text-font-size; |
|---|
| | | text-align: $u-badge-text-align; |
|---|
| | | font-size: $u-badge-text-font-size; |
|---|
| | | color: $u-badge-text-color; |
|---|
| | | |
|---|
| | | &--dot { |
|---|
| | | height: $u-badge-dot-size; |
|---|
| | | width: $u-badge-dot-size; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--inverted { |
|---|
| | | font-size: 13px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--not-dot { |
|---|
| | | padding: $u-badge-text-padding; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--horn { |
|---|
| | | border-bottom-left-radius: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--primary { |
|---|
| | | background-color: $u-badge-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--primary--inverted { |
|---|
| | | color: $u-badge-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--error { |
|---|
| | | background-color: $u-badge-error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--error--inverted { |
|---|
| | | color: $u-badge-error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--success { |
|---|
| | | background-color: $u-badge-success; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--success--inverted { |
|---|
| | | color: $u-badge-success; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--info { |
|---|
| | | background-color: $u-badge-info; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--info--inverted { |
|---|
| | | color: $u-badge-info; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--warning { |
|---|
| | | background-color: $u-badge-warning; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--warning--inverted { |
|---|
| | | color: $u-badge-warning; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | $u-button-active-opacity:0.75 !default; |
|---|
| | | $u-button-loading-text-margin-left:4px !default; |
|---|
| | | $u-button-text-color: #FFFFFF !default; |
|---|
| | | $u-button-text-plain-error-color:$u-error !default; |
|---|
| | | $u-button-text-plain-warning-color:$u-warning !default; |
|---|
| | | $u-button-text-plain-success-color:$u-success !default; |
|---|
| | | $u-button-text-plain-info-color:$u-info !default; |
|---|
| | | $u-button-text-plain-primary-color:$u-primary !default; |
|---|
| | | .u-button { |
|---|
| | | &--active { |
|---|
| | | opacity: $u-button-active-opacity; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--active--plain { |
|---|
| | | background-color: rgb(217, 217, 217); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__loading-text { |
|---|
| | | margin-left:$u-button-loading-text-margin-left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text, |
|---|
| | | &__loading-text { |
|---|
| | | color:$u-button-text-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--plain--error { |
|---|
| | | color:$u-button-text-plain-error-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--plain--warning { |
|---|
| | | color:$u-button-text-plain-warning-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--plain--success{ |
|---|
| | | color:$u-button-text-plain-success-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--plain--info { |
|---|
| | | color:$u-button-text-plain-info-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text--plain--primary { |
|---|
| | | color:$u-button-text-plain-primary-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /* |
|---|
| | | * @Author : LQ |
|---|
| | | * @Description : |
|---|
| | | * @version : 1.0 |
|---|
| | | * @Date : 2021-08-16 10:04:04 |
|---|
| | | * @LastAuthor : LQ |
|---|
| | | * @lastTime : 2021-08-16 10:04:24 |
|---|
| | | * @FilePath : /u-view2.0/uview-ui/components/u-button/props.js |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¯å¦ç»è¾¹æ¡ |
|---|
| | | hairline: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.button.hairline |
|---|
| | | }, |
|---|
| | | // æé®çé¢ç½®æ ·å¼ï¼infoï¼primaryï¼errorï¼warningï¼success |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.type |
|---|
| | | }, |
|---|
| | | // æé®å°ºå¯¸ï¼largeï¼normalï¼smallï¼mini |
|---|
| | | size: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.size |
|---|
| | | }, |
|---|
| | | // æé®å½¢ç¶ï¼circleï¼ä¸¤è¾¹ä¸ºååï¼ï¼squareï¼å¸¦åè§ï¼ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.shape |
|---|
| | | }, |
|---|
| | | // æé®æ¯å¦é空 |
|---|
| | | plain: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.button.plain |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦æ¢ç¶æ |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.button.disabled |
|---|
| | | }, |
|---|
| | | // æ¯å¦å è½½ä¸ |
|---|
| | | loading: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.button.loading |
|---|
| | | }, |
|---|
| | | // å è½½ä¸æ示æå |
|---|
| | | loadingText: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.button.loadingText |
|---|
| | | }, |
|---|
| | | // å è½½ç¶æå¾æ ç±»å |
|---|
| | | loadingMode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.loadingMode |
|---|
| | | }, |
|---|
| | | // å è½½å¾æ å¤§å° |
|---|
| | | loadingSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.button.loadingSize |
|---|
| | | }, |
|---|
| | | // å¼æ¾è½åï¼å
·ä½è¯·çuniapp稳å®å
³äºbuttonç»ä»¶é¨å说æ |
|---|
| | | // https://uniapp.dcloud.io/component/button |
|---|
| | | openType: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.openType |
|---|
| | | }, |
|---|
| | | // ç¨äº <form> ç»ä»¶ï¼ç¹å»åå«ä¼è§¦å <form> ç»ä»¶ç submit/reset äºä»¶ |
|---|
| | | // åå¼ä¸ºsubmitï¼æ交表åï¼ï¼resetï¼é置表åï¼ |
|---|
| | | formType: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.formType |
|---|
| | | }, |
|---|
| | | // æå¼ APP æ¶ï¼å APP ä¼ éçåæ°ï¼open-type=launchAppæ¶ææ |
|---|
| | | // åªå¾®ä¿¡å°ç¨åºãQQå°ç¨åºææ |
|---|
| | | appParameter: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.appParameter |
|---|
| | | }, |
|---|
| | | // æå®æ¯å¦é»æ¢æ¬èç¹çç¥å
èç¹åºç°ç¹å»æï¼å¾®ä¿¡å°ç¨åºææ |
|---|
| | | hoverStopPropagation: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.button.hoverStopPropagation |
|---|
| | | }, |
|---|
| | | // æå®è¿åç¨æ·ä¿¡æ¯çè¯è¨ï¼zh_CN ç®ä½ä¸æï¼zh_TW ç¹ä½ä¸æï¼en è±æãåªå¾®ä¿¡å°ç¨åºææ |
|---|
| | | lang: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.lang |
|---|
| | | }, |
|---|
| | | // ä¼è¯æ¥æºï¼open-type="contact"æ¶ææãåªå¾®ä¿¡å°ç¨åºææ |
|---|
| | | sessionFrom: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.sessionFrom |
|---|
| | | }, |
|---|
| | | // ä¼è¯å
æ¶æ¯å¡çæ é¢ï¼open-type="contact"æ¶ææ |
|---|
| | | // é»è®¤å½åæ é¢ï¼åªå¾®ä¿¡å°ç¨åºææ |
|---|
| | | sendMessageTitle: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.sendMessageTitle |
|---|
| | | }, |
|---|
| | | // ä¼è¯å
æ¶æ¯å¡çç¹å»è·³è½¬å°ç¨åºè·¯å¾ï¼open-type="contact"æ¶ææ |
|---|
| | | // é»è®¤å½åå享路å¾ï¼åªå¾®ä¿¡å°ç¨åºææ |
|---|
| | | sendMessagePath: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.sendMessagePath |
|---|
| | | }, |
|---|
| | | // ä¼è¯å
æ¶æ¯å¡çå¾çï¼open-type="contact"æ¶ææ |
|---|
| | | // é»è®¤å½å页é¢æªå¾ï¼åªå¾®ä¿¡å°ç¨åºææ |
|---|
| | | sendMessageImg: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.sendMessageImg |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºä¼è¯å
æ¶æ¯å¡çï¼è®¾ç½®æ¤åæ°ä¸º trueï¼ç¨æ·è¿å
¥å®¢æä¼è¯ä¼å¨å³ä¸è§æ¾ç¤º"å¯è½è¦åéçå°ç¨åº"æç¤ºï¼ |
|---|
| | | // ç¨æ·ç¹å»åå¯ä»¥å¿«éåéå°ç¨åºæ¶æ¯ï¼open-type="contact"æ¶ææ |
|---|
| | | showMessageCard: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.button.showMessageCard |
|---|
| | | }, |
|---|
| | | // é¢å¤ä¼ ååæ°ï¼ç¨äºå°ç¨åºçdata-xxxå±æ§ï¼éè¿target.dataset.nameè·å |
|---|
| | | dataName: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.dataName |
|---|
| | | }, |
|---|
| | | // èæµï¼ä¸å®æ¶é´å
åªè½è§¦åä¸æ¬¡ |
|---|
| | | throttleTime: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.button.throttleTime |
|---|
| | | }, |
|---|
| | | // æä½åå¤ä¹
åºç°ç¹å»æï¼åä½æ¯«ç§ |
|---|
| | | hoverStartTime: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.button.hoverStartTime |
|---|
| | | }, |
|---|
| | | // æææ¾å¼åç¹å»æä¿çæ¶é´ï¼åä½æ¯«ç§ |
|---|
| | | hoverStayTime: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.button.hoverStayTime |
|---|
| | | }, |
|---|
| | | // æé®æåï¼ä¹æ以éè¿propsä¼ å
¥ï¼æ¯å 为slotä¼ å
¥çè¯ |
|---|
| | | // nvueä¸æ æ³æ§å¶æåçæ ·å¼ |
|---|
| | | text: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.button.text |
|---|
| | | }, |
|---|
| | | // æé®å¾æ |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.icon |
|---|
| | | }, |
|---|
| | | // æé®å¾æ |
|---|
| | | iconColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.icon |
|---|
| | | }, |
|---|
| | | // æé®é¢è²ï¼æ¯æä¼ å
¥linear-gradientæ¸åè² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.button.color |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <button |
|---|
| | | :hover-start-time="Number(hoverStartTime)" |
|---|
| | | :hover-stay-time="Number(hoverStayTime)" |
|---|
| | | :form-type="formType" |
|---|
| | | :open-type="openType" |
|---|
| | | :app-parameter="appParameter" |
|---|
| | | :hover-stop-propagation="hoverStopPropagation" |
|---|
| | | :send-message-title="sendMessageTitle" |
|---|
| | | :send-message-path="sendMessagePath" |
|---|
| | | :lang="lang" |
|---|
| | | :data-name="dataName" |
|---|
| | | :session-from="sessionFrom" |
|---|
| | | :send-message-img="sendMessageImg" |
|---|
| | | :show-message-card="showMessageCard" |
|---|
| | | @getphonenumber="getphonenumber" |
|---|
| | | @getuserinfo="getuserinfo" |
|---|
| | | @error="error" |
|---|
| | | @opensetting="opensetting" |
|---|
| | | @launchapp="launchapp" |
|---|
| | | :hover-class="!disabled && !loading ? 'u-button--active' : ''" |
|---|
| | | class="u-button u-reset-button" |
|---|
| | | :style="[baseColor, $u.addStyle(customStyle)]" |
|---|
| | | @tap="clickHandler" |
|---|
| | | :class="bemClass" |
|---|
| | | > |
|---|
| | | <template v-if="loading"> |
|---|
| | | <u-loading-icon |
|---|
| | | :mode="loadingMode" |
|---|
| | | :size="textSize * 1.15" |
|---|
| | | :color="loadingColor" |
|---|
| | | ></u-loading-icon> |
|---|
| | | <text |
|---|
| | | class="u-button__loading-text" |
|---|
| | | :style="[{ fontSize: textSize + 'px' }]" |
|---|
| | | >{{ loadingText || text }}</text |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | <template v-else> |
|---|
| | | <u-icon |
|---|
| | | v-if="icon" |
|---|
| | | :name="icon" |
|---|
| | | :color="iconColorCom" |
|---|
| | | :size="textSize * 1.35" |
|---|
| | | :customStyle="{ marginRight: '2px' }" |
|---|
| | | ></u-icon> |
|---|
| | | <slot> |
|---|
| | | <text |
|---|
| | | class="u-button__text" |
|---|
| | | :style="[{ fontSize: textSize + 'px' }]" |
|---|
| | | >{{ text }}</text |
|---|
| | | > |
|---|
| | | </slot> |
|---|
| | | </template> |
|---|
| | | </button> |
|---|
| | | <!-- #endif --> |
|---|
| | | |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <view |
|---|
| | | :hover-start-time="Number(hoverStartTime)" |
|---|
| | | :hover-stay-time="Number(hoverStayTime)" |
|---|
| | | class="u-button" |
|---|
| | | :hover-class=" |
|---|
| | | !disabled && !loading && !color && (plain || type === 'info') |
|---|
| | | ? 'u-button--active--plain' |
|---|
| | | : !disabled && !loading && !plain |
|---|
| | | ? 'u-button--active' |
|---|
| | | : '' |
|---|
| | | " |
|---|
| | | @tap="clickHandler" |
|---|
| | | :class="bemClass" |
|---|
| | | :style="[baseColor, $u.addStyle(customStyle)]" |
|---|
| | | > |
|---|
| | | <template v-if="loading"> |
|---|
| | | <u-loading-icon |
|---|
| | | :mode="loadingMode" |
|---|
| | | :size="textSize * 1.15" |
|---|
| | | :color="loadingColor" |
|---|
| | | ></u-loading-icon> |
|---|
| | | <text |
|---|
| | | class="u-button__loading-text" |
|---|
| | | :style="[nvueTextStyle]" |
|---|
| | | :class="[plain && `u-button__text--plain--${type}`]" |
|---|
| | | >{{ loadingText || text }}</text |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | <template v-else> |
|---|
| | | <u-icon |
|---|
| | | v-if="icon" |
|---|
| | | :name="icon" |
|---|
| | | :color="iconColorCom" |
|---|
| | | :size="textSize * 1.35" |
|---|
| | | ></u-icon> |
|---|
| | | <text |
|---|
| | | class="u-button__text" |
|---|
| | | :style="[ |
|---|
| | | { |
|---|
| | | marginLeft: icon ? '2px' : 0, |
|---|
| | | }, |
|---|
| | | nvueTextStyle, |
|---|
| | | ]" |
|---|
| | | :class="[plain && `u-button__text--plain--${type}`]" |
|---|
| | | >{{ text }}</text |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import button from "../../libs/mixin/button.js"; |
|---|
| | | import openType from "../../libs/mixin/openType.js"; |
|---|
| | | import props from "./props.js"; |
|---|
| | | /** |
|---|
| | | * button æé® |
|---|
| | | * @description Button æé® |
|---|
| | | * @tutorial https://www.uviewui.com/components/button.html |
|---|
| | | * |
|---|
| | | * @property {Boolean} hairline æ¯å¦æ¾ç¤ºæé®çç»è¾¹æ¡ (é»è®¤ true ) |
|---|
| | | * @property {String} type æé®çé¢ç½®æ ·å¼ï¼infoï¼primaryï¼errorï¼warningï¼success (é»è®¤ 'info' ) |
|---|
| | | * @property {String} size æé®å°ºå¯¸ï¼largeï¼normalï¼mini ï¼é»è®¤ normalï¼ |
|---|
| | | * @property {String} shape æé®å½¢ç¶ï¼circleï¼ä¸¤è¾¹ä¸ºååï¼ï¼squareï¼å¸¦åè§ï¼ ï¼é»è®¤ 'square' ï¼ |
|---|
| | | * @property {Boolean} plain æé®æ¯å¦é空ï¼èæ¯è²éæ ï¼é»è®¤ falseï¼ |
|---|
| | | * @property {Boolean} disabled æ¯å¦ç¦ç¨ ï¼é»è®¤ falseï¼ |
|---|
| | | * @property {Boolean} loading æé®å称åæ¯å¦å¸¦ loading å¾æ (App-nvue å¹³å°ï¼å¨ ios ä¸ä¸ºéªè±ï¼Androidä¸ä¸ºåå) ï¼é»è®¤ falseï¼ |
|---|
| | | * @property {String | Number} loadingText å è½½ä¸æ示æå |
|---|
| | | * @property {String} loadingMode å è½½ç¶æå¾æ ç±»å ï¼é»è®¤ 'spinner' ï¼ |
|---|
| | | * @property {String | Number} loadingSize å è½½å¾æ å¤§å° ï¼é»è®¤ 15 ï¼ |
|---|
| | | * @property {String} openType å¼æ¾è½åï¼å
·ä½è¯·çuniapp稳å®å
³äºbuttonç»ä»¶é¨å说æ |
|---|
| | | * @property {String} formType ç¨äº <form> ç»ä»¶ï¼ç¹å»åå«ä¼è§¦å <form> ç»ä»¶ç submit/reset äºä»¶ |
|---|
| | | * @property {String} appParameter æå¼ APP æ¶ï¼å APP ä¼ éçåæ°ï¼open-type=launchAppæ¶ææ ï¼æ³¨ï¼åªå¾®ä¿¡å°ç¨åºãQQå°ç¨åºææï¼ |
|---|
| | | * @property {Boolean} hoverStopPropagation æå®æ¯å¦é»æ¢æ¬èç¹çç¥å
èç¹åºç°ç¹å»æï¼å¾®ä¿¡å°ç¨åºææï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String} lang æå®è¿åç¨æ·ä¿¡æ¯çè¯è¨ï¼zh_CN ç®ä½ä¸æï¼zh_TW ç¹ä½ä¸æï¼en è±æï¼é»è®¤ en ï¼ |
|---|
| | | * @property {String} sessionFrom ä¼è¯æ¥æºï¼openType="contact"æ¶ææ |
|---|
| | | * @property {String} sendMessageTitle ä¼è¯å
æ¶æ¯å¡çæ é¢ï¼openType="contact"æ¶ææ |
|---|
| | | * @property {String} sendMessagePath ä¼è¯å
æ¶æ¯å¡çç¹å»è·³è½¬å°ç¨åºè·¯å¾ï¼openType="contact"æ¶ææ |
|---|
| | | * @property {String} sendMessageImg ä¼è¯å
æ¶æ¯å¡çå¾çï¼openType="contact"æ¶ææ |
|---|
| | | * @property {Boolean} showMessageCard æ¯å¦æ¾ç¤ºä¼è¯å
æ¶æ¯å¡çï¼è®¾ç½®æ¤åæ°ä¸º trueï¼ç¨æ·è¿å
¥å®¢æä¼è¯ä¼å¨å³ä¸è§æ¾ç¤º"å¯è½è¦åéçå°ç¨åº"æ示ï¼ç¨æ·ç¹å»åå¯ä»¥å¿«éåéå°ç¨åºæ¶æ¯ï¼openType="contact"æ¶ææï¼é»è®¤falseï¼ |
|---|
| | | * @property {String} dataName é¢å¤ä¼ ååæ°ï¼ç¨äºå°ç¨åºçdata-xxxå±æ§ï¼éè¿target.dataset.nameè·å |
|---|
| | | * @property {String | Number} throttleTime èæµï¼ä¸å®æ¶é´å
åªè½è§¦åä¸æ¬¡ ï¼é»è®¤ 0 ) |
|---|
| | | * @property {String | Number} hoverStartTime æä½åå¤ä¹
åºç°ç¹å»æï¼åä½æ¯«ç§ ï¼é»è®¤ 0 ) |
|---|
| | | * @property {String | Number} hoverStayTime æææ¾å¼åç¹å»æä¿çæ¶é´ï¼åä½æ¯«ç§ ï¼é»è®¤ 200 ) |
|---|
| | | * @property {String | Number} text æé®æåï¼ä¹æ以éè¿propsä¼ å
¥ï¼æ¯å 为slotä¼ å
¥çè¯ï¼æ³¨ï¼nvueä¸æ æ³æ§å¶æåçæ ·å¼ï¼ |
|---|
| | | * @property {String} icon æé®å¾æ |
|---|
| | | * @property {String} iconColor æé®å¾æ é¢è² |
|---|
| | | * @property {String} color æé®é¢è²ï¼æ¯æä¼ å
¥linear-gradientæ¸åè² |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @event {Function} click éç¦æ¢å¹¶ä¸éå è½½ä¸ï¼æè½ç¹å» |
|---|
| | | * @event {Function} getphonenumber open-type="getPhoneNumber"æ¶ææ |
|---|
| | | * @event {Function} getuserinfo ç¨æ·ç¹å»è¯¥æé®æ¶ï¼ä¼è¿åè·åå°çç¨æ·ä¿¡æ¯ï¼ä»è¿ååæ°çdetailä¸è·åå°çå¼åuni.getUserInfo |
|---|
| | | * @event {Function} error å½ä½¿ç¨å¼æ¾è½åæ¶ï¼åçé误çåè° |
|---|
| | | * @event {Function} opensetting å¨æå¼ææ设置页并å
³éååè° |
|---|
| | | * @event {Function} launchapp æå¼ APP æåçåè° |
|---|
| | | * @example <u-button>æè½</u-button> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-button", |
|---|
| | | // #ifdef MP |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, button, openType, props], |
|---|
| | | // #endif |
|---|
| | | // #ifndef MP |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | // #endif |
|---|
| | | data() { |
|---|
| | | return {}; |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // çæbemé£æ ¼çç±»å |
|---|
| | | bemClass() { |
|---|
| | | // this.bem为ä¸ä¸ªcomputedåéï¼å¨mixinä¸ |
|---|
| | | if (!this.color) { |
|---|
| | | return this.bem( |
|---|
| | | "button", |
|---|
| | | ["type", "shape", "size"], |
|---|
| | | ["disabled", "plain", "hairline"] |
|---|
| | | ); |
|---|
| | | } else { |
|---|
| | | // ç±äºnvueçåå ï¼å¨æcoloråæ°æ¶ï¼ä¸éè¦ä¼ å
¥typeï¼å¦åä¼çætypeç¸å
³çç±»åï¼å½±åæç»çæ ·å¼ |
|---|
| | | return this.bem( |
|---|
| | | "button", |
|---|
| | | ["shape", "size"], |
|---|
| | | ["disabled", "plain", "hairline"] |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | loadingColor() { |
|---|
| | | if (this.plain) { |
|---|
| | | // å¦ææ设置colorå¼ï¼åç¨colorå¼ï¼å¦å使ç¨type主é¢é¢è² |
|---|
| | | return this.color |
|---|
| | | ? this.color |
|---|
| | | : uni.$u.config.color[`u-${this.type}`]; |
|---|
| | | } |
|---|
| | | if (this.type === "info") { |
|---|
| | | return "#c9c9c9"; |
|---|
| | | } |
|---|
| | | return "rgb(200, 200, 200)"; |
|---|
| | | }, |
|---|
| | | iconColorCom() { |
|---|
| | | // å¦ææ¯é空ç¶æï¼è®¾ç½®äºcolorå°±ç¨colorå¼ï¼å¦å使ç¨ä¸»é¢é¢è²ï¼ |
|---|
| | | // u-iconçcolorè½æ¥åä¸ä¸ªä¸»é¢é¢è²çå¼ |
|---|
| | | if (this.iconColor) return this.iconColor; |
|---|
| | | if (this.plain) { |
|---|
| | | return this.color ? this.color : this.type; |
|---|
| | | } else { |
|---|
| | | return this.type === "info" ? "#000000" : "#ffffff"; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | baseColor() { |
|---|
| | | let style = {}; |
|---|
| | | if (this.color) { |
|---|
| | | // é对èªå®ä¹äºcoloré¢è²çæ
åµï¼é空ç¶æä¸ï¼å°±æ¯ç¨èªå®ä¹çé¢è² |
|---|
| | | style.color = this.plain ? this.color : "white"; |
|---|
| | | if (!this.plain) { |
|---|
| | | // éé空ï¼èæ¯è²ä½¿ç¨èªå®ä¹çé¢è² |
|---|
| | | style["background-color"] = this.color; |
|---|
| | | } |
|---|
| | | if (this.color.indexOf("gradient") !== -1) { |
|---|
| | | // å¦æèªå®ä¹çé¢è²ä¸ºæ¸åè²ï¼ä¸æ¾ç¤ºè¾¹æ¡ï¼ä»¥åéè¿backgroundImage设置æ¸åè² |
|---|
| | | // weexæ档说æå¯ä»¥åborderWidthçå½¢å¼ï¼ä¸ºä»ä¹è¿ééè¦åå¼åï¼ |
|---|
| | | // å 为weexæ¯é¿é巴巴为äºé¨é¨ä¸ç»©èæ ¸èåçä½ æçä¸è¥¿ï¼æ以éè¦è¿ä¹åæææ |
|---|
| | | style.borderTopWidth = 0; |
|---|
| | | style.borderRightWidth = 0; |
|---|
| | | style.borderBottomWidth = 0; |
|---|
| | | style.borderLeftWidth = 0; |
|---|
| | | if (!this.plain) { |
|---|
| | | style.backgroundImage = this.color; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // éæ¸åè²ï¼å设置边æ¡ç¸å
³çå±æ§ |
|---|
| | | style.borderColor = this.color; |
|---|
| | | style.borderWidth = "1px"; |
|---|
| | | style.borderStyle = "solid"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return style; |
|---|
| | | }, |
|---|
| | | // nvueçæ¬æé®çåä½ä¸ä¼ç»§æ¿ç¶ç»ä»¶çé¢è²ï¼éè¦å¯¹æ¯ä¸ä¸ªtextç»ä»¶è¿è¡åç¬ç设置 |
|---|
| | | nvueTextStyle() { |
|---|
| | | let style = {}; |
|---|
| | | // é对èªå®ä¹äºcoloré¢è²çæ
åµï¼é空ç¶æä¸ï¼å°±æ¯ç¨èªå®ä¹çé¢è² |
|---|
| | | if (this.type === "info") { |
|---|
| | | style.color = "#323233"; |
|---|
| | | } |
|---|
| | | if (this.color) { |
|---|
| | | style.color = this.plain ? this.color : "white"; |
|---|
| | | } |
|---|
| | | style.fontSize = this.textSize + "px"; |
|---|
| | | return style; |
|---|
| | | }, |
|---|
| | | // åä½å¤§å° |
|---|
| | | textSize() { |
|---|
| | | let fontSize = 14, |
|---|
| | | { size } = this; |
|---|
| | | if (size === "large") fontSize = 16; |
|---|
| | | if (size === "normal") fontSize = 14; |
|---|
| | | if (size === "small") fontSize = 12; |
|---|
| | | if (size === "mini") fontSize = 10; |
|---|
| | | return fontSize; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | clickHandler() { |
|---|
| | | // éç¦æ¢å¹¶ä¸éå è½½ä¸ï¼æè½ç¹å» |
|---|
| | | if (!this.disabled && !this.loading) { |
|---|
| | | // è¿è¡èæµæ§å¶ï¼æ¯this.throttle毫ç§å
ï¼åªå¨å¼å§å¤æ§è¡ |
|---|
| | | uni.$u.throttle(() => { |
|---|
| | | this.$emit("click"); |
|---|
| | | }, this.throttleTime); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ä¸é¢ä¸ºå¯¹æ¥uniappå®æ¹æé®å¼æ¾è½åäºä»¶åè°çå¯¹æ¥ |
|---|
| | | getphonenumber(res) { |
|---|
| | | this.$emit("getphonenumber", res); |
|---|
| | | }, |
|---|
| | | getuserinfo(res) { |
|---|
| | | this.$emit("getuserinfo", res); |
|---|
| | | }, |
|---|
| | | error(res) { |
|---|
| | | this.$emit("error", res); |
|---|
| | | }, |
|---|
| | | opensetting(res) { |
|---|
| | | this.$emit("opensetting", res); |
|---|
| | | }, |
|---|
| | | launchapp(res) { |
|---|
| | | this.$emit("launchapp", res); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | @import "./vue.scss"; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | @import "./nvue.scss"; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | $u-button-u-button-height: 40px !default; |
|---|
| | | $u-button-text-font-size: 15px !default; |
|---|
| | | $u-button-loading-text-font-size: 15px !default; |
|---|
| | | $u-button-loading-text-margin-left: 4px !default; |
|---|
| | | $u-button-large-width: 100% !default; |
|---|
| | | $u-button-large-height: 50px !default; |
|---|
| | | $u-button-normal-padding: 0 12px !default; |
|---|
| | | $u-button-large-padding: 0 15px !default; |
|---|
| | | $u-button-normal-font-size: 14px !default; |
|---|
| | | $u-button-small-min-width: 60px !default; |
|---|
| | | $u-button-small-height: 30px !default; |
|---|
| | | $u-button-small-padding: 0px 8px !default; |
|---|
| | | $u-button-mini-padding: 0px 8px !default; |
|---|
| | | $u-button-small-font-size: 12px !default; |
|---|
| | | $u-button-mini-height: 22px !default; |
|---|
| | | $u-button-mini-font-size: 10px !default; |
|---|
| | | $u-button-mini-min-width: 50px !default; |
|---|
| | | $u-button-disabled-opacity: 0.5 !default; |
|---|
| | | $u-button-info-color: #323233 !default; |
|---|
| | | $u-button-info-background-color: #fff !default; |
|---|
| | | $u-button-info-border-color: #ebedf0 !default; |
|---|
| | | $u-button-info-border-width: 1px !default; |
|---|
| | | $u-button-info-border-style: solid !default; |
|---|
| | | $u-button-success-color: #fff !default; |
|---|
| | | $u-button-success-background-color: $u-success !default; |
|---|
| | | $u-button-success-border-color: $u-button-success-background-color !default; |
|---|
| | | $u-button-success-border-width: 1px !default; |
|---|
| | | $u-button-success-border-style: solid !default; |
|---|
| | | $u-button-primary-color: #fff !default; |
|---|
| | | $u-button-primary-background-color: $u-primary !default; |
|---|
| | | $u-button-primary-border-color: $u-button-primary-background-color !default; |
|---|
| | | $u-button-primary-border-width: 1px !default; |
|---|
| | | $u-button-primary-border-style: solid !default; |
|---|
| | | $u-button-error-color: #fff !default; |
|---|
| | | $u-button-error-background-color: $u-error !default; |
|---|
| | | $u-button-error-border-color: $u-button-error-background-color !default; |
|---|
| | | $u-button-error-border-width: 1px !default; |
|---|
| | | $u-button-error-border-style: solid !default; |
|---|
| | | $u-button-warning-color: #fff !default; |
|---|
| | | $u-button-warning-background-color: $u-warning !default; |
|---|
| | | $u-button-warning-border-color: $u-button-warning-background-color !default; |
|---|
| | | $u-button-warning-border-width: 1px !default; |
|---|
| | | $u-button-warning-border-style: solid !default; |
|---|
| | | $u-button-block-width: 100% !default; |
|---|
| | | $u-button-circle-border-top-right-radius: 100px !default; |
|---|
| | | $u-button-circle-border-top-left-radius: 100px !default; |
|---|
| | | $u-button-circle-border-bottom-left-radius: 100px !default; |
|---|
| | | $u-button-circle-border-bottom-right-radius: 100px !default; |
|---|
| | | $u-button-square-border-top-right-radius: 3px !default; |
|---|
| | | $u-button-square-border-top-left-radius: 3px !default; |
|---|
| | | $u-button-square-border-bottom-left-radius: 3px !default; |
|---|
| | | $u-button-square-border-bottom-right-radius: 3px !default; |
|---|
| | | $u-button-icon-min-width: 1em !default; |
|---|
| | | $u-button-plain-background-color: #fff !default; |
|---|
| | | $u-button-hairline-border-width: 0.5px !default; |
|---|
| | | |
|---|
| | | .u-button { |
|---|
| | | height: $u-button-u-button-height; |
|---|
| | | position: relative; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | @include flex; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: $u-button-text-font-size; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__loading-text { |
|---|
| | | font-size: $u-button-loading-text-font-size; |
|---|
| | | margin-left: $u-button-loading-text-margin-left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--large { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: $u-button-large-width; |
|---|
| | | /* #endif */ |
|---|
| | | height: $u-button-large-height; |
|---|
| | | padding: $u-button-large-padding; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--normal { |
|---|
| | | padding: $u-button-normal-padding; |
|---|
| | | font-size: $u-button-normal-font-size; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--small { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | min-width: $u-button-small-min-width; |
|---|
| | | /* #endif */ |
|---|
| | | height: $u-button-small-height; |
|---|
| | | padding: $u-button-small-padding; |
|---|
| | | font-size: $u-button-small-font-size; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--mini { |
|---|
| | | height: $u-button-mini-height; |
|---|
| | | font-size: $u-button-mini-font-size; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | min-width: $u-button-mini-min-width; |
|---|
| | | /* #endif */ |
|---|
| | | padding: $u-button-mini-padding; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--disabled { |
|---|
| | | opacity: $u-button-disabled-opacity; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--info { |
|---|
| | | color: $u-button-info-color; |
|---|
| | | background-color: $u-button-info-background-color; |
|---|
| | | border-color: $u-button-info-border-color; |
|---|
| | | border-width: $u-button-info-border-width; |
|---|
| | | border-style: $u-button-info-border-style; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--success { |
|---|
| | | color: $u-button-success-color; |
|---|
| | | background-color: $u-button-success-background-color; |
|---|
| | | border-color: $u-button-success-border-color; |
|---|
| | | border-width: $u-button-success-border-width; |
|---|
| | | border-style: $u-button-success-border-style; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--primary { |
|---|
| | | color: $u-button-primary-color; |
|---|
| | | background-color: $u-button-primary-background-color; |
|---|
| | | border-color: $u-button-primary-border-color; |
|---|
| | | border-width: $u-button-primary-border-width; |
|---|
| | | border-style: $u-button-primary-border-style; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--error { |
|---|
| | | color: $u-button-error-color; |
|---|
| | | background-color: $u-button-error-background-color; |
|---|
| | | border-color: $u-button-error-border-color; |
|---|
| | | border-width: $u-button-error-border-width; |
|---|
| | | border-style: $u-button-error-border-style; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--warning { |
|---|
| | | color: $u-button-warning-color; |
|---|
| | | background-color: $u-button-warning-background-color; |
|---|
| | | border-color: $u-button-warning-border-color; |
|---|
| | | border-width: $u-button-warning-border-width; |
|---|
| | | border-style: $u-button-warning-border-style; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--block { |
|---|
| | | @include flex; |
|---|
| | | width: $u-button-block-width; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--circle { |
|---|
| | | border-top-right-radius: $u-button-circle-border-top-right-radius; |
|---|
| | | border-top-left-radius: $u-button-circle-border-top-left-radius; |
|---|
| | | border-bottom-left-radius: $u-button-circle-border-bottom-left-radius; |
|---|
| | | border-bottom-right-radius: $u-button-circle-border-bottom-right-radius; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--square { |
|---|
| | | border-bottom-left-radius: $u-button-square-border-top-right-radius; |
|---|
| | | border-bottom-right-radius: $u-button-square-border-top-left-radius; |
|---|
| | | border-top-left-radius: $u-button-square-border-bottom-left-radius; |
|---|
| | | border-top-right-radius: $u-button-square-border-bottom-right-radius; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | min-width: $u-button-icon-min-width; |
|---|
| | | line-height: inherit !important; |
|---|
| | | vertical-align: top; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--plain { |
|---|
| | | background-color: $u-button-plain-background-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--hairline { |
|---|
| | | border-width: $u-button-hairline-border-width !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // nvueä¸hover-classæ æ |
|---|
| | | $u-button-before-top:50% !default; |
|---|
| | | $u-button-before-left:50% !default; |
|---|
| | | $u-button-before-width:100% !default; |
|---|
| | | $u-button-before-height:100% !default; |
|---|
| | | $u-button-before-transform:translate(-50%, -50%) !default; |
|---|
| | | $u-button-before-opacity:0 !default; |
|---|
| | | $u-button-before-background-color:#000 !default; |
|---|
| | | $u-button-before-border-color:#000 !default; |
|---|
| | | $u-button-active-before-opacity:.15 !default; |
|---|
| | | $u-button-icon-margin-left:4px !default; |
|---|
| | | $u-button-plain-u-button-info-color:$u-info; |
|---|
| | | $u-button-plain-u-button-success-color:$u-success; |
|---|
| | | $u-button-plain-u-button-error-color:$u-error; |
|---|
| | | $u-button-plain-u-button-warning-color:$u-error; |
|---|
| | | |
|---|
| | | .u-button { |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | white-space: nowrap; |
|---|
| | | line-height: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &:before { |
|---|
| | | position: absolute; |
|---|
| | | top:$u-button-before-top; |
|---|
| | | left:$u-button-before-left; |
|---|
| | | width:$u-button-before-width; |
|---|
| | | height:$u-button-before-height; |
|---|
| | | border: inherit; |
|---|
| | | border-radius: inherit; |
|---|
| | | transform:$u-button-before-transform; |
|---|
| | | opacity:$u-button-before-opacity; |
|---|
| | | content: " "; |
|---|
| | | background-color:$u-button-before-background-color; |
|---|
| | | border-color:$u-button-before-border-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | &:before { |
|---|
| | | opacity: .15 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon+&__text:not(:empty), |
|---|
| | | &__loading-text { |
|---|
| | | margin-left:$u-button-icon-margin-left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--plain { |
|---|
| | | &.u-button--primary { |
|---|
| | | color: $u-primary; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--plain { |
|---|
| | | &.u-button--info { |
|---|
| | | color:$u-button-plain-u-button-info-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--plain { |
|---|
| | | &.u-button--success { |
|---|
| | | color:$u-button-plain-u-button-success-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--plain { |
|---|
| | | &.u-button--error { |
|---|
| | | color:$u-button-plain-u-button-error-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--plain { |
|---|
| | | &.u-button--warning { |
|---|
| | | color:$u-button-plain-u-button-warning-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-calendar-header u-border-bottom"> |
|---|
| | | <text |
|---|
| | | class="u-calendar-header__title" |
|---|
| | | v-if="showTitle" |
|---|
| | | >{{ title }}</text> |
|---|
| | | <text |
|---|
| | | class="u-calendar-header__subtitle" |
|---|
| | | v-if="showSubtitle" |
|---|
| | | >{{ subtitle }}</text> |
|---|
| | | <view class="u-calendar-header__weekdays"> |
|---|
| | | <text class="u-calendar-header__weekdays__weekday">ä¸</text> |
|---|
| | | <text class="u-calendar-header__weekdays__weekday">äº</text> |
|---|
| | | <text class="u-calendar-header__weekdays__weekday">ä¸</text> |
|---|
| | | <text class="u-calendar-header__weekdays__weekday">å</text> |
|---|
| | | <text class="u-calendar-header__weekdays__weekday">äº</text> |
|---|
| | | <text class="u-calendar-header__weekdays__weekday">å
</text> |
|---|
| | | <text class="u-calendar-header__weekdays__weekday">æ¥</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'u-calendar-header', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin], |
|---|
| | | props: { |
|---|
| | | // æ é¢ |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // å¯æ é¢ |
|---|
| | | subtitle: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºæ é¢ |
|---|
| | | showTitle: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå¯æ é¢ |
|---|
| | | showSubtitle: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | name() { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-calendar-header { |
|---|
| | | padding-bottom: 4px; |
|---|
| | | |
|---|
| | | &__title { |
|---|
| | | font-size: 16px; |
|---|
| | | color: $u-main-color; |
|---|
| | | text-align: center; |
|---|
| | | height: 42px; |
|---|
| | | line-height: 42px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__subtitle { |
|---|
| | | font-size: 14px; |
|---|
| | | color: $u-main-color; |
|---|
| | | height: 40px; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 40px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__weekdays { |
|---|
| | | @include flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | &__weekday { |
|---|
| | | font-size: 13px; |
|---|
| | | color: $u-main-color; |
|---|
| | | line-height: 30px; |
|---|
| | | flex: 1; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper"> |
|---|
| | | <view v-for="(item, index) in months" :key="index" :class="[`u-calendar-month-${index}`]" |
|---|
| | | :ref="`u-calendar-month-${index}`" :id="`month-${index}`"> |
|---|
| | | <text v-if="index !== 0" class="u-calendar-month__title">{{ item.year }}å¹´{{ item.month }}æ</text> |
|---|
| | | <view class="u-calendar-month__days"> |
|---|
| | | <view v-if="showMark" class="u-calendar-month__days__month-mark-wrapper"> |
|---|
| | | <text class="u-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text> |
|---|
| | | </view> |
|---|
| | | <view class="u-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1" |
|---|
| | | :style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)" |
|---|
| | | :class="[item1.selected && 'u-calendar-month__days__day__select--selected']"> |
|---|
| | | <view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]"> |
|---|
| | | <text class="u-calendar-month__days__day__select__info" |
|---|
| | | :class="[item1.disabled && 'u-calendar-month__days__day__select__info--disabled']" |
|---|
| | | :style="[textStyle(item1)]">{{ item1.day }}</text> |
|---|
| | | <text v-if="getBottomInfo(index, index1, item1)" |
|---|
| | | class="u-calendar-month__days__day__select__buttom-info" |
|---|
| | | :class="[item1.disabled && 'u-calendar-month__days__day__select__buttom-info--disabled']" |
|---|
| | | :style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text> |
|---|
| | | <text v-if="item1.dot" class="u-calendar-month__days__day__select__dot"></text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // ç±äºnvueä¸æ¯æç¾åæ¯åä½ï¼éè¦æ¥è¯¢å®½åº¦æ¥è®¡ç®æ¯ä¸ªæ¥æç宽度 |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | import dayjs from '../../libs/util/dayjs.js'; |
|---|
| | | export default { |
|---|
| | | name: 'u-calendar-month', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin], |
|---|
| | | props: { |
|---|
| | | // æ¯å¦æ¾ç¤ºæ份èæ¯è² |
|---|
| | | showMark: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // 主é¢è²ï¼å¯¹åºé¨æé®åéä¸æ¥æææ |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: '#3c9cff' |
|---|
| | | }, |
|---|
| | | // æ份æ°æ® |
|---|
| | | months: { |
|---|
| | | type: Array, |
|---|
| | | default: () => [] |
|---|
| | | }, |
|---|
| | | // æ¥æéæ©ç±»å |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: 'single' |
|---|
| | | }, |
|---|
| | | // æ¥æè¡é« |
|---|
| | | rowHeight: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 58 |
|---|
| | | }, |
|---|
| | | // mode=multipleæ¶ï¼æå¤å¯éå¤å°ä¸ªæ¥æ |
|---|
| | | maxCount: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: Infinity |
|---|
| | | }, |
|---|
| | | // mode=rangeæ¶ï¼ç¬¬ä¸ä¸ªæ¥æåºé¨çæ示æå |
|---|
| | | startText: { |
|---|
| | | type: String, |
|---|
| | | default: 'å¼å§' |
|---|
| | | }, |
|---|
| | | // mode=rangeæ¶ï¼æåä¸ä¸ªæ¥æåºé¨çæ示æå |
|---|
| | | endText: { |
|---|
| | | type: String, |
|---|
| | | default: 'ç»æ' |
|---|
| | | }, |
|---|
| | | // é»è®¤éä¸çæ¥æï¼mode为multipleærangeæ¯å¿
须为æ°ç»æ ¼å¼ |
|---|
| | | defaultDate: { |
|---|
| | | type: [Array, String, Date], |
|---|
| | | default: null |
|---|
| | | }, |
|---|
| | | // æå°çå¯éæ¥æ |
|---|
| | | minDate: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // æ大å¯éæ¥æ |
|---|
| | | maxDate: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // å¦æ没æ设置maxDateï¼åå¾åæ¨å¤å°ä¸ªæ |
|---|
| | | maxMonth: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 2 |
|---|
| | | }, |
|---|
| | | // æ¯å¦ä¸ºåªè¯»ç¶æï¼åªè¯»ç¶æä¸ç¦æ¢éæ©æ¥æ |
|---|
| | | readonly: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.readonly |
|---|
| | | }, |
|---|
| | | // æ¥æåºé´æå¤å¯é天æ°ï¼é»è®¤æ éå¶ï¼mode = rangeæ¶ææ |
|---|
| | | maxRange: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: Infinity |
|---|
| | | }, |
|---|
| | | // èå´éæ©è¶
è¿æå¤å¯é天æ°æ¶çæ示ææ¡ï¼mode = rangeæ¶ææ |
|---|
| | | rangePrompt: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // èå´éæ©è¶
è¿æå¤å¯é天æ°æ¶ï¼æ¯å¦å±ç¤ºæ示ææ¡ï¼mode = rangeæ¶ææ |
|---|
| | | showRangePrompt: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // æ¯å¦å
许æ¥æèå´çèµ·æ¢æ¶é´ä¸ºåä¸å¤©ï¼mode = rangeæ¶ææ |
|---|
| | | allowSameDay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // æ¯ä¸ªæ¥æç宽度 |
|---|
| | | width: 0, |
|---|
| | | // å½åéä¸çæ¥æitem |
|---|
| | | item: {}, |
|---|
| | | selected: [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | selectedChange: { |
|---|
| | | immediate: true, |
|---|
| | | handler(n) { |
|---|
| | | this.setDefaultDate() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // å¤ä¸ªæ¡ä»¶çååï¼ä¼å¼èµ·éä¸æ¥æçååï¼è¿éç»ä¸ç®¡ççå¬ |
|---|
| | | selectedChange() { |
|---|
| | | return [this.minDate, this.maxDate, this.defaultDate] |
|---|
| | | }, |
|---|
| | | dayStyle(index1, index2, item) { |
|---|
| | | return (index1, index2, item) => { |
|---|
| | | const style = {} |
|---|
| | | let week = item.week |
|---|
| | | // ä¸è¿è¡åèäºå
¥çå½¢å¼ä¿ç2ä½å°æ° |
|---|
| | | const dayWidth = Number(parseFloat(this.width / 7).toFixed(3).slice(0, -1)) |
|---|
| | | // å¾åºæ¯ä¸ªæ¥æç宽度 |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | style.width = uni.$u.addUnit(dayWidth) |
|---|
| | | // #endif |
|---|
| | | style.height = uni.$u.addUnit(this.rowHeight) |
|---|
| | | if (index2 === 0) { |
|---|
| | | // è·åå½å为ææå ï¼å¦æ为0ï¼å为ææ天ï¼åä¸ä¸ºæ¯æ第ä¸å¤©æ¶ï¼éè¦åå·¦å移çitemä¸ªæ° |
|---|
| | | week = (week === 0 ? 7 : week) - 1 |
|---|
| | | style.marginLeft = uni.$u.addUnit(week * dayWidth) |
|---|
| | | } |
|---|
| | | if (this.mode === 'range') { |
|---|
| | | // ä¹æ以éè¦è¿ä¹åï¼æ¯å 为DCloudå
¬å¸çiOS客æ·ç«¯çå¼åè
è½åæé导è´çbug |
|---|
| | | style.paddingLeft = 0 |
|---|
| | | style.paddingRight = 0 |
|---|
| | | style.paddingBottom = 0 |
|---|
| | | style.paddingTop = 0 |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | daySelectStyle() { |
|---|
| | | return (index1, index2, item) => { |
|---|
| | | let date = dayjs(item.date).format("YYYY-MM-DD"), |
|---|
| | | style = {} |
|---|
| | | // å¤ædateæ¯å¦å¨selectedæ°ç»ä¸ï¼å 为æ份å¯è½ä¼éè¦è¡¥0ï¼æ以使ç¨dateSameå¤æï¼èä¸ç¨æ°ç»çincludeså¤æ |
|---|
| | | if (this.selected.some(item => this.dateSame(item, date))) { |
|---|
| | | style.backgroundColor = this.color |
|---|
| | | } |
|---|
| | | if (this.mode === 'single') { |
|---|
| | | if (date === this.selected[0]) { |
|---|
| | | // å 为éè¦å¯¹nvueçå
¼å®¹ï¼åªè½è¿ä¹åï¼æ æ³ç¼©åï¼ä¹æ æ³éè¿ç±»åæ§å¶çç |
|---|
| | | style.borderTopLeftRadius = '3px' |
|---|
| | | style.borderBottomLeftRadius = '3px' |
|---|
| | | style.borderTopRightRadius = '3px' |
|---|
| | | style.borderBottomRightRadius = '3px' |
|---|
| | | } |
|---|
| | | } else if (this.mode === 'range') { |
|---|
| | | if (this.selected.length >= 2) { |
|---|
| | | const len = this.selected.length - 1 |
|---|
| | | // 第ä¸ä¸ªæ¥æ设置左ä¸è§åå·¦ä¸è§çåè§ |
|---|
| | | if (this.dateSame(date, this.selected[0])) { |
|---|
| | | style.borderTopLeftRadius = '3px' |
|---|
| | | style.borderBottomLeftRadius = '3px' |
|---|
| | | } |
|---|
| | | // æåä¸ä¸ªæ¥æ设置å³ä¸è§åå³ä¸è§çåè§ |
|---|
| | | if (this.dateSame(date, this.selected[len])) { |
|---|
| | | style.borderTopRightRadius = '3px' |
|---|
| | | style.borderBottomRightRadius = '3px' |
|---|
| | | } |
|---|
| | | // å¤äºç¬¬ä¸åæåä¸ä¸ªä¹é´çæ¥æï¼èæ¯è²è®¾ç½®ä¸ºæµ
è²ï¼éè¿å°å¯¹åºé¢è²è¿è¡çåï¼ååå
¶å°¾é¨çé¢è²å¼ |
|---|
| | | if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this |
|---|
| | | .selected[len]))) { |
|---|
| | | style.backgroundColor = uni.$u.colorGradient(this.color, '#ffffff', 100)[90] |
|---|
| | | // å¢å ä¸ä¸ªéæ度ï¼è®©èå´åºé´çèæ¯è²ä¹è½çå°åºé¨çmarkæ°´å°å符 |
|---|
| | | style.opacity = 0.7 |
|---|
| | | } |
|---|
| | | } else if (this.selected.length === 1) { |
|---|
| | | // ä¹æ以éè¦è¿ä¹åï¼æ¯å 为DCloudå
¬å¸çiOS客æ·ç«¯çå¼åè
è½åæé导è´çbug |
|---|
| | | // è¿è¡è¿åæä½ï¼å¦åå¨nvueçiOSï¼uni-appæbugï¼ä¼å¯¼è´è¯¡å¼çè¡¨ç° |
|---|
| | | style.borderTopLeftRadius = '3px' |
|---|
| | | style.borderBottomLeftRadius = '3px' |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (this.selected.some(item => this.dateSame(item, date))) { |
|---|
| | | style.borderTopLeftRadius = '3px' |
|---|
| | | style.borderBottomLeftRadius = '3px' |
|---|
| | | style.borderTopRightRadius = '3px' |
|---|
| | | style.borderBottomRightRadius = '3px' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ个æ¥ææ¯å¦è¢«éä¸ |
|---|
| | | textStyle() { |
|---|
| | | return (item) => { |
|---|
| | | const date = dayjs(item.date).format("YYYY-MM-DD"), |
|---|
| | | style = {} |
|---|
| | | // éä¸çæ¥æï¼æ示æå设置ç½è² |
|---|
| | | if (this.selected.some(item => this.dateSame(item, date))) { |
|---|
| | | style.color = '#ffffff' |
|---|
| | | } |
|---|
| | | if (this.mode === 'range') { |
|---|
| | | const len = this.selected.length - 1 |
|---|
| | | // å¦ææ¯èå´éæ©æ¨¡å¼ï¼ç¬¬ä¸ä¸ªåæåä¸ä¸ªä¹é´çæ¥æï¼æåé¢è²è®¾ç½®ä¸ºé«äº®ç主é¢è² |
|---|
| | | if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this |
|---|
| | | .selected[len]))) { |
|---|
| | | style.color = this.color |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·ååºé¨çæ示æå |
|---|
| | | getBottomInfo() { |
|---|
| | | return (index1, index2, item) => { |
|---|
| | | const date = dayjs(item.date).format("YYYY-MM-DD") |
|---|
| | | const bottomInfo = item.bottomInfo |
|---|
| | | // å½ä¸ºæ¥æèå´æ¨¡å¼æ¶ï¼ä¸éæ©çæ¥æ个æ°å¤§äº0æ¶ |
|---|
| | | if (this.mode === 'range' && this.selected.length > 0) { |
|---|
| | | if (this.selected.length === 1) { |
|---|
| | | // éæ©äºä¸ä¸ªæ¥ææ¶ï¼å¦æå½åæ¥æ为æ°ç»ä¸ç第ä¸ä¸ªæ¥æï¼åæ¾ç¤ºåºé¨æå为âå¼å§â |
|---|
| | | if (this.dateSame(date, this.selected[0])) return this.startText |
|---|
| | | else return bottomInfo |
|---|
| | | } else { |
|---|
| | | const len = this.selected.length - 1 |
|---|
| | | // å¦ææ°ç»ä¸çæ¥æ大äº2个æ¶ï¼ç¬¬ä¸ä¸ªåæåä¸ä¸ªæ¾ç¤ºä¸ºå¼å§åç»ææ¥æ |
|---|
| | | if (this.dateSame(date, this.selected[0]) && this.dateSame(date, this.selected[1]) && |
|---|
| | | len === 1) { |
|---|
| | | // å¦æé¿åº¦ä¸º2ï¼ä¸ç¬¬ä¸ä¸ªçäºç¬¬äºä¸ªæ¥æï¼åæ示è¯æ¾å¨åä¸ä¸ªitemä¸ |
|---|
| | | return `${this.startText}/${this.endText}` |
|---|
| | | } else if (this.dateSame(date, this.selected[0])) { |
|---|
| | | return this.startText |
|---|
| | | } else if (this.dateSame(date, this.selected[len])) { |
|---|
| | | return this.endText |
|---|
| | | } else { |
|---|
| | | return bottomInfo |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | return bottomInfo |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | // åå§åé»è®¤éä¸ |
|---|
| | | this.$emit('monthSelected', this.selected) |
|---|
| | | this.$nextTick(() => { |
|---|
| | | // è¿ééè¦å¦ä¸ä¸ªå»¶æ¶ï¼å 为è·å宽度åï¼ä¼è¿è¡æ份æ°æ®æ¸²æï¼åªæ渲æå®æä¹åï¼ææçæ£çé«åº¦ |
|---|
| | | // å 为nvueä¸ï¼$nextTick并ä¸æ¯100%å¯é ç |
|---|
| | | uni.$u.sleep(10).then(() => { |
|---|
| | | this.getWrapperWidth() |
|---|
| | | this.getMonthRect() |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // å¤æ两个æ¥ææ¯å¦ç¸ç |
|---|
| | | dateSame(date1, date2) { |
|---|
| | | return dayjs(date1).isSame(dayjs(date2)) |
|---|
| | | }, |
|---|
| | | // è·åæ份æ°æ®åºåç宽度ï¼å 为nvueä¸æ¯æç¾åæ¯ï¼æ以æ æ³éè¿css设置æ¯ä¸ªæ¥æitemç宽度 |
|---|
| | | getWrapperWidth() { |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | dom.getComponentRect(this.$refs['u-calendar-month-wrapper'], res => { |
|---|
| | | this.width = res.size.width |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | this.$uGetRect('.u-calendar-month-wrapper').then(size => { |
|---|
| | | this.width = size.width |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | getMonthRect() { |
|---|
| | | // è·åæ¯ä¸ªæ份æ°æ®ç尺寸ï¼ç¨äºç¶ç»ä»¶å¨scroll-viewæ»å¨äºä»¶ä¸ï¼çå¬å½åæ»å¨å°äºç¬¬å 个æ份 |
|---|
| | | const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise( |
|---|
| | | `u-calendar-month-${index}`)) |
|---|
| | | // ä¸æ¬¡æ§è¿å |
|---|
| | | Promise.all(promiseAllArr).then( |
|---|
| | | sizes => { |
|---|
| | | let height = 1 |
|---|
| | | const topArr = [] |
|---|
| | | for (let i = 0; i < this.months.length; i++) { |
|---|
| | | // æ·»å å°monthsæ°ç»ä¸ï¼ä¾scroll-viewæ»å¨äºä»¶ä¸ï¼å¤æå½åæ»å¨å°åªä¸ªæ份 |
|---|
| | | topArr[i] = height |
|---|
| | | height += sizes[i].height |
|---|
| | | } |
|---|
| | | // ç±äºå¾®ä¿¡ä¸ï¼æ æ³éè¿this.months[i].topçå½¢å¼(å¼ç¨ç±»å)å»ä¿®æ¹ç¶ç»ä»¶çmonthçtopå¼ï¼æ以使ç¨äºä»¶å½¢å¼å¯¹å¤ååº |
|---|
| | | this.$emit('updateMonthTop', topArr) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è·åæ¯ä¸ªæ份åºåç尺寸 |
|---|
| | | getMonthRectByPromise(el) { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | // $uGetRect为uViewèªå¸¦çèç¹æ¥è¯¢ç®åæ¹æ³ï¼è¯¦è§ææ¡£ä»ç»ï¼https://www.uviewui.com/js/getRect.html |
|---|
| | | // ç»ä»¶å
é¨ä¸è¬ç¨this.$uGetRectï¼å¯¹å¤ç为uni.$u.getRectï¼äºè
åè½ä¸è´ï¼å称ä¸å |
|---|
| | | return new Promise(resolve => { |
|---|
| | | this.$uGetRect(`.${el}`).then(size => { |
|---|
| | | resolve(size) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // nvueä¸ï¼ä½¿ç¨dom模åæ¥è¯¢å
ç´ é«åº¦ |
|---|
| | | // è¿åä¸ä¸ªpromiseï¼è®©è°ç¨æ¤æ¹æ³ç主ä½è½ä½¿ç¨thenåè° |
|---|
| | | return new Promise(resolve => { |
|---|
| | | dom.getComponentRect(this.$refs[el][0], res => { |
|---|
| | | resolve(res.size) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | // ç¹å»æä¸ä¸ªæ¥æ |
|---|
| | | clickHandler(index1, index2, item) { |
|---|
| | | if (this.readonly) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.item = item |
|---|
| | | const date = dayjs(item.date).format("YYYY-MM-DD") |
|---|
| | | if (item.disabled) return |
|---|
| | | // 对ä¸ä¸æ¬¡éæ©çæ¥ææ°ç»è¿è¡æ·±åº¦å
é |
|---|
| | | let selected = uni.$u.deepClone(this.selected) |
|---|
| | | if (this.mode === 'single') { |
|---|
| | | // åéæ
åµä¸ï¼è®©æ°ç»ä¸çå
ç´ ä¸ºå½åç¹å»çæ¥æ |
|---|
| | | selected = [date] |
|---|
| | | } else if (this.mode === 'multiple') { |
|---|
| | | if (selected.some(item => this.dateSame(item, date))) { |
|---|
| | | // å¦æç¹å»çæ¥æå·²å¨æ°ç»ä¸ï¼åè¿è¡ç§»é¤æä½ï¼ä¹å°±æ¯è¾¾å°åéçææ |
|---|
| | | const itemIndex = selected.findIndex(item => item === date) |
|---|
| | | selected.splice(itemIndex, 1) |
|---|
| | | } else { |
|---|
| | | // å¦æç¹å»çæ¥æä¸å¨æ°ç»ä¸ï¼ä¸å·²æçé¿åº¦å°äºæ»å¯éé¿åº¦æ¶ï¼åæ·»å å°æ°ç»ä¸å» |
|---|
| | | if (selected.length < this.maxCount) selected.push(date) |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // éæ©åºé´å½¢å¼ |
|---|
| | | if (selected.length === 0 || selected.length >= 2) { |
|---|
| | | // å¦æåæ¥å°±ä¸º0æè
大äº2çé¿åº¦ï¼åå½åç¹å»çæ¥æï¼å°±æ¯å¼å§æ¥æ |
|---|
| | | selected = [date] |
|---|
| | | } else if (selected.length === 1) { |
|---|
| | | // å¦æå·²ç»éæ©äºå¼å§æ¥æ |
|---|
| | | const existsDate = selected[0] |
|---|
| | | // å¦æå½åéæ©çæ¥æå°äºä¸ä¸æ¬¡éæ©çæ¥æï¼åå½åçæ¥æå®ä¸ºå¼å§æ¥æ |
|---|
| | | if (dayjs(date).isBefore(existsDate)) { |
|---|
| | | selected = [date] |
|---|
| | | } else if (dayjs(date).isAfter(existsDate)) { |
|---|
| | | // å½åæ¥æåå»æ大å¯éçæ¥æ天æ°ï¼å¦æ大äºèµ·å§æ¶é´ï¼åè¿è¡æ示 |
|---|
| | | if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) { |
|---|
| | | if(this.rangePrompt) { |
|---|
| | | uni.$u.toast(this.rangePrompt) |
|---|
| | | } else { |
|---|
| | | uni.$u.toast(`éæ©å¤©æ°ä¸è½è¶
è¿ ${this.maxRange} 天`) |
|---|
| | | } |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // å¦æå½åæ¥æ大äºå·²ææ¥æï¼å°å½åçæ·»å å°æ°ç»å°¾é¨ |
|---|
| | | selected.push(date) |
|---|
| | | const startDate = selected[0] |
|---|
| | | const endDate = selected[1] |
|---|
| | | const arr = [] |
|---|
| | | let i = 0 |
|---|
| | | do { |
|---|
| | | // å°å¼å§åç»ææ¥æä¹é´çæ¥ææ·»å å°æ°ç»ä¸ |
|---|
| | | arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD")) |
|---|
| | | i++ |
|---|
| | | // ç´¯å çæ¥æå°äºç»ææ¥ææ¶ï¼ç»§ç»ä¸ä¸æ¬¡çå¾ªç¯ |
|---|
| | | } while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate))) |
|---|
| | | // 为äºä¸æ¬¡æ§ä¿®æ¹æ°ç»ï¼é¿å
computedä¸å¤æ¬¡è§¦åï¼è¿éæç¨arråéä¸æ¬¡æ§èµå¼çæ¹å¼ï¼åæ¶å°æåä¸ä¸ªæ¥ææ·»å è¿æ¥ |
|---|
| | | arr.push(endDate) |
|---|
| | | selected = arr |
|---|
| | | } else { |
|---|
| | | // éæ©åºé´æ¶ï¼åªæä¸ä¸ªæ¥æçæ
åµä¸ï¼ä¸ä¸å
许éæ©èµ·æ¢ä¸ºåä¸å¤©çè¯ï¼ä¸å
许éæ©èªå·± |
|---|
| | | if (selected[0] === date && !this.allowSameDay) return |
|---|
| | | selected.push(date) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.setSelected(selected) |
|---|
| | | }, |
|---|
| | | // 设置é»è®¤æ¥æ |
|---|
| | | setDefaultDate() { |
|---|
| | | if (!this.defaultDate) { |
|---|
| | | // å¦æ没æ设置é»è®¤æ¥æï¼åå°å½å¤©æ¥æ设置为é»è®¤éä¸çæ¥æ |
|---|
| | | const selected = [dayjs().format("YYYY-MM-DD")] |
|---|
| | | return this.setSelected(selected, false) |
|---|
| | | } |
|---|
| | | let defaultDate = [] |
|---|
| | | const minDate = this.minDate || dayjs().format("YYYY-MM-DD") |
|---|
| | | const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD") |
|---|
| | | if (this.mode === 'single') { |
|---|
| | | // åé模å¼ï¼å¯ä»¥æ¯å符串ææ°ç»ï¼Date对象ç |
|---|
| | | if (!uni.$u.test.array(this.defaultDate)) { |
|---|
| | | defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")] |
|---|
| | | } else { |
|---|
| | | defaultDate = [this.defaultDate[0]] |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // å¦æ为éæ°ç»ï¼åä¸æ§è¡ |
|---|
| | | if (!uni.$u.test.array(this.defaultDate)) return |
|---|
| | | defaultDate = this.defaultDate |
|---|
| | | } |
|---|
| | | // è¿æ»¤ç¨æ·ä¼ éçé»è®¤æ°ç»ï¼ååºåªå¨å¯å
许æ大å¼ä¸æå°å¼ä¹é´çå
ç´ |
|---|
| | | defaultDate = defaultDate.filter(item => { |
|---|
| | | return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs( |
|---|
| | | maxDate).add(1, 'day')) |
|---|
| | | }) |
|---|
| | | this.setSelected(defaultDate, false) |
|---|
| | | }, |
|---|
| | | setSelected(selected, event = true) { |
|---|
| | | this.selected = selected |
|---|
| | | event && this.$emit('monthSelected', this.selected) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-calendar-month-wrapper { |
|---|
| | | margin-top: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-calendar-month { |
|---|
| | | |
|---|
| | | &__title { |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 42px; |
|---|
| | | height: 42px; |
|---|
| | | color: $u-main-color; |
|---|
| | | text-align: center; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__days { |
|---|
| | | position: relative; |
|---|
| | | @include flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | |
|---|
| | | &__month-mark-wrapper { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: 155px; |
|---|
| | | color: rgba(231, 232, 234, 0.83); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__day { |
|---|
| | | @include flex; |
|---|
| | | padding: 2px; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | // vueä¸ä½¿ç¨cssè¿è¡å®½åº¦è®¡ç®ï¼å 为æäºå®åæºä¼æ æ³è¿è¡jsè·åç¶å
ç´ å®½åº¦è¿è¡è®¡ç®å¾åºï¼ä¼æå移 |
|---|
| | | width: calc(100% / 7); |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | &__select { |
|---|
| | | flex: 1; |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &__dot { |
|---|
| | | width: 7px; |
|---|
| | | height: 7px; |
|---|
| | | border-radius: 100px; |
|---|
| | | background-color: $u-error; |
|---|
| | | position: absolute; |
|---|
| | | top: 12px; |
|---|
| | | right: 7px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__buttom-info { |
|---|
| | | color: $u-content-color; |
|---|
| | | text-align: center; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 5px; |
|---|
| | | font-size: 10px; |
|---|
| | | text-align: center; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | |
|---|
| | | &--selected { |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--disabled { |
|---|
| | | color: #cacbcd; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__info { |
|---|
| | | text-align: center; |
|---|
| | | font-size: 16px; |
|---|
| | | |
|---|
| | | &--selected { |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--disabled { |
|---|
| | | color: #cacbcd; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--selected { |
|---|
| | | background-color: $u-primary; |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | flex: 1; |
|---|
| | | border-radius: 3px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--range-selected { |
|---|
| | | opacity: 0.3; |
|---|
| | | border-radius: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--range-start-selected { |
|---|
| | | border-top-right-radius: 0; |
|---|
| | | border-bottom-right-radius: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--range-end-selected { |
|---|
| | | border-top-left-radius: 0; |
|---|
| | | border-bottom-left-radius: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¥å顶é¨æ é¢ |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.calendar.title |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºæ é¢ |
|---|
| | | showTitle: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.showTitle |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå¯æ é¢ |
|---|
| | | showSubtitle: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.showSubtitle |
|---|
| | | }, |
|---|
| | | // æ¥æç±»åéæ©ï¼single-éæ©å个æ¥æï¼multiple-å¯ä»¥éæ©å¤ä¸ªæ¥æï¼range-éæ©æ¥æèå´ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.calendar.mode |
|---|
| | | }, |
|---|
| | | // mode=rangeæ¶ï¼ç¬¬ä¸ä¸ªæ¥æåºé¨çæ示æå |
|---|
| | | startText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.calendar.startText |
|---|
| | | }, |
|---|
| | | // mode=rangeæ¶ï¼æåä¸ä¸ªæ¥æåºé¨çæ示æå |
|---|
| | | endText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.calendar.endText |
|---|
| | | }, |
|---|
| | | // èªå®ä¹å表 |
|---|
| | | customList: { |
|---|
| | | type: Array, |
|---|
| | | default: uni.$u.props.calendar.customList |
|---|
| | | }, |
|---|
| | | // 主é¢è²ï¼å¯¹åºé¨æé®åéä¸æ¥æææ |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.calendar.color |
|---|
| | | }, |
|---|
| | | // æå°çå¯éæ¥æ |
|---|
| | | minDate: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.calendar.minDate |
|---|
| | | }, |
|---|
| | | // æ大å¯éæ¥æ |
|---|
| | | maxDate: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.calendar.maxDate |
|---|
| | | }, |
|---|
| | | // é»è®¤éä¸çæ¥æï¼mode为multipleærangeæ¯å¿
须为æ°ç»æ ¼å¼ |
|---|
| | | defaultDate: { |
|---|
| | | type: [Array, String, Date, null], |
|---|
| | | default: uni.$u.props.calendar.defaultDate |
|---|
| | | }, |
|---|
| | | // mode=multipleæ¶ï¼æå¤å¯éå¤å°ä¸ªæ¥æ |
|---|
| | | maxCount: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.calendar.maxCount |
|---|
| | | }, |
|---|
| | | // æ¥æè¡é« |
|---|
| | | rowHeight: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.calendar.rowHeight |
|---|
| | | }, |
|---|
| | | // æ¥ææ ¼å¼åå½æ° |
|---|
| | | formatter: { |
|---|
| | | type: [Function, null], |
|---|
| | | default: uni.$u.props.calendar.formatter |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºåå |
|---|
| | | showLunar: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.showLunar |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºæ份èæ¯è² |
|---|
| | | showMark: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.showMark |
|---|
| | | }, |
|---|
| | | // ç¡®å®æé®çæå |
|---|
| | | confirmText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.calendar.confirmText |
|---|
| | | }, |
|---|
| | | // 确认æé®å¤äºç¦ç¨ç¶ææ¶çæå |
|---|
| | | confirmDisabledText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.calendar.confirmDisabledText |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºæ¥åå¼¹çª |
|---|
| | | show: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.show |
|---|
| | | }, |
|---|
| | | // æ¯å¦å
许ç¹å»é®ç½©å
³éæ¥å |
|---|
| | | closeOnClickOverlay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.closeOnClickOverlay |
|---|
| | | }, |
|---|
| | | // æ¯å¦ä¸ºåªè¯»ç¶æï¼åªè¯»ç¶æä¸ç¦æ¢éæ©æ¥æ |
|---|
| | | readonly: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.readonly |
|---|
| | | }, |
|---|
| | | // æ¯å¦å±ç¤ºç¡®è®¤æé® |
|---|
| | | showConfirm: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.showConfirm |
|---|
| | | }, |
|---|
| | | // æ¥æåºé´æå¤å¯é天æ°ï¼é»è®¤æ éå¶ï¼mode = rangeæ¶ææ |
|---|
| | | maxRange: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: uni.$u.props.calendar.maxRange |
|---|
| | | }, |
|---|
| | | // èå´éæ©è¶
è¿æå¤å¯é天æ°æ¶çæ示ææ¡ï¼mode = rangeæ¶ææ |
|---|
| | | rangePrompt: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.calendar.rangePrompt |
|---|
| | | }, |
|---|
| | | // èå´éæ©è¶
è¿æå¤å¯é天æ°æ¶ï¼æ¯å¦å±ç¤ºæ示ææ¡ï¼mode = rangeæ¶ææ |
|---|
| | | showRangePrompt: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.showRangePrompt |
|---|
| | | }, |
|---|
| | | // æ¯å¦å
许æ¥æèå´çèµ·æ¢æ¶é´ä¸ºåä¸å¤©ï¼mode = rangeæ¶ææ |
|---|
| | | allowSameDay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.calendar.allowSameDay |
|---|
| | | }, |
|---|
| | | // åè§å¼ |
|---|
| | | round: { |
|---|
| | | type: [Boolean, String, Number], |
|---|
| | | default: uni.$u.props.calendar.round |
|---|
| | | }, |
|---|
| | | // æå¤å±ç¤ºæ份æ°é |
|---|
| | | monthNum: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 3 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <u-popup |
|---|
| | | :show="show" |
|---|
| | | mode="bottom" |
|---|
| | | closeable |
|---|
| | | @close="close" |
|---|
| | | :round="round" |
|---|
| | | :closeOnClickOverlay="closeOnClickOverlay" |
|---|
| | | > |
|---|
| | | <view class="u-calendar"> |
|---|
| | | <uHeader |
|---|
| | | :title="title" |
|---|
| | | :subtitle="subtitle" |
|---|
| | | :showSubtitle="showSubtitle" |
|---|
| | | :showTitle="showTitle" |
|---|
| | | ></uHeader> |
|---|
| | | <scroll-view |
|---|
| | | :style="{ |
|---|
| | | height: $u.addUnit(listHeight) |
|---|
| | | }" |
|---|
| | | scroll-y |
|---|
| | | @scroll="onScroll" |
|---|
| | | :scroll-top="scrollTop" |
|---|
| | | :scrollIntoView="scrollIntoView" |
|---|
| | | > |
|---|
| | | <uMonth |
|---|
| | | :color="color" |
|---|
| | | :rowHeight="rowHeight" |
|---|
| | | :showMark="showMark" |
|---|
| | | :months="months" |
|---|
| | | :mode="mode" |
|---|
| | | :maxCount="maxCount" |
|---|
| | | :startText="startText" |
|---|
| | | :endText="endText" |
|---|
| | | :defaultDate="defaultDate" |
|---|
| | | :minDate="innerMinDate" |
|---|
| | | :maxDate="innerMaxDate" |
|---|
| | | :maxMonth="monthNum" |
|---|
| | | :readonly="readonly" |
|---|
| | | :maxRange="maxRange" |
|---|
| | | :rangePrompt="rangePrompt" |
|---|
| | | :showRangePrompt="showRangePrompt" |
|---|
| | | :allowSameDay="allowSameDay" |
|---|
| | | ref="month" |
|---|
| | | @monthSelected="monthSelected" |
|---|
| | | @updateMonthTop="updateMonthTop" |
|---|
| | | ></uMonth> |
|---|
| | | </scroll-view> |
|---|
| | | <slot name="footer" v-if="showConfirm"> |
|---|
| | | <view class="u-calendar__confirm"> |
|---|
| | | <u-button |
|---|
| | | shape="circle" |
|---|
| | | :text=" |
|---|
| | | buttonDisabled ? confirmDisabledText : confirmText |
|---|
| | | " |
|---|
| | | :color="color" |
|---|
| | | @click="confirm" |
|---|
| | | :disabled="buttonDisabled" |
|---|
| | | ></u-button> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </u-popup> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import uHeader from './header.vue' |
|---|
| | | import uMonth from './month.vue' |
|---|
| | | import props from './props.js' |
|---|
| | | import util from './util.js' |
|---|
| | | import dayjs from '../../libs/util/dayjs.js' |
|---|
| | | import Calendar from '../../libs/util/calendar.js' |
|---|
| | | /** |
|---|
| | | * Calendar æ¥å |
|---|
| | | * @description æ¤ç»ä»¶ç¨äºå个éæ©æ¥æï¼èå´éæ©æ¥æçï¼æ¥å被å
裹å¨åºé¨å¼¹èµ·ç容å¨ä¸. |
|---|
| | | * @tutorial https://www.uviewui.com/components/calendar.html |
|---|
| | | * |
|---|
| | | * @property {String} title æ é¢å
容 (é»è®¤ æ¥æéæ© ) |
|---|
| | | * @property {Boolean} showTitle æ¯å¦æ¾ç¤ºæ é¢ (é»è®¤ true ) |
|---|
| | | * @property {Boolean} showSubtitle æ¯å¦æ¾ç¤ºå¯æ é¢ (é»è®¤ true ) |
|---|
| | | * @property {String} mode æ¥æç±»åéæ© single-éæ©å个æ¥æï¼multiple-å¯ä»¥éæ©å¤ä¸ªæ¥æï¼range-éæ©æ¥æèå´ ï¼ é»è®¤ 'single' ) |
|---|
| | | * @property {String} startText mode=rangeæ¶ï¼ç¬¬ä¸ä¸ªæ¥æåºé¨çæ示æå (é»è®¤ 'å¼å§' ) |
|---|
| | | * @property {String} endText mode=rangeæ¶ï¼æåä¸ä¸ªæ¥æåºé¨çæ示æå (é»è®¤ 'ç»æ' ) |
|---|
| | | * @property {Array} customList èªå®ä¹å表 |
|---|
| | | * @property {String} color 主é¢è²ï¼å¯¹åºé¨æé®åéä¸æ¥æææ (é»è®¤ â#3c9cff' ) |
|---|
| | | * @property {String | Number} minDate æå°çå¯éæ¥æ (é»è®¤ 0 ) |
|---|
| | | * @property {String | Number} maxDate æ大å¯éæ¥æ (é»è®¤ 0 ) |
|---|
| | | * @property {Array | String| Date} defaultDate é»è®¤éä¸çæ¥æï¼mode为multipleærangeæ¯å¿
须为æ°ç»æ ¼å¼ |
|---|
| | | * @property {String | Number} maxCount mode=multipleæ¶ï¼æå¤å¯éå¤å°ä¸ªæ¥æ (é»è®¤ Number.MAX_SAFE_INTEGER ) |
|---|
| | | * @property {String | Number} rowHeight æ¥æè¡é« (é»è®¤ 56 ) |
|---|
| | | * @property {Function} formatter æ¥ææ ¼å¼åå½æ° |
|---|
| | | * @property {Boolean} showLunar æ¯å¦æ¾ç¤ºåå (é»è®¤ false ) |
|---|
| | | * @property {Boolean} showMark æ¯å¦æ¾ç¤ºæ份èæ¯è² (é»è®¤ true ) |
|---|
| | | * @property {String} confirmText ç¡®å®æé®çæå (é»è®¤ 'ç¡®å®' ) |
|---|
| | | * @property {String} confirmDisabledText 确认æé®å¤äºç¦ç¨ç¶ææ¶çæå (é»è®¤ 'ç¡®å®' ) |
|---|
| | | * @property {Boolean} show æ¯å¦æ¾ç¤ºæ¥åå¼¹çª (é»è®¤ false ) |
|---|
| | | * @property {Boolean} closeOnClickOverlay æ¯å¦å
许ç¹å»é®ç½©å
³éæ¥å (é»è®¤ false ) |
|---|
| | | * @property {Boolean} readonly æ¯å¦ä¸ºåªè¯»ç¶æï¼åªè¯»ç¶æä¸ç¦æ¢éæ©æ¥æ (é»è®¤ false ) |
|---|
| | | * @property {String | Number} maxRange æ¥æåºé´æå¤å¯é天æ°ï¼é»è®¤æ éå¶ï¼mode = rangeæ¶ææ |
|---|
| | | * @property {String} rangePrompt èå´éæ©è¶
è¿æå¤å¯é天æ°æ¶çæ示ææ¡ï¼mode = rangeæ¶ææ |
|---|
| | | * @property {Boolean} showRangePrompt èå´éæ©è¶
è¿æå¤å¯é天æ°æ¶ï¼æ¯å¦å±ç¤ºæ示ææ¡ï¼mode = rangeæ¶ææ (é»è®¤ true ) |
|---|
| | | * @property {Boolean} allowSameDay æ¯å¦å
许æ¥æèå´çèµ·æ¢æ¶é´ä¸ºåä¸å¤©ï¼mode = rangeæ¶ææ (é»è®¤ false ) |
|---|
| | | * @property {Number|String} round åè§å¼ï¼é»è®¤æ åè§ (é»è®¤ 0 ) |
|---|
| | | * @property {Number|String} monthNum æå¤å±ç¤ºçæ份æ°é (é»è®¤ 3 ) |
|---|
| | | * |
|---|
| | | * @event {Function()} confirm ç¹å»ç¡®å®æé®æ¶è§¦å éæ©æ¥æç¸å
³çè¿ååæ° |
|---|
| | | * @event {Function()} close æ¥åå
³éæ¶è§¦å å¯å®ä¹é¡µé¢å
³éæ¶çåè°äºä»¶ |
|---|
| | | * @example <u-calendar :defaultDate="defaultDateMultiple" :show="show" mode="multiple" @confirm="confirm"> |
|---|
| | | </u-calendar> |
|---|
| | | * */ |
|---|
| | | export default { |
|---|
| | | name: 'u-calendar', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | components: { |
|---|
| | | uHeader, |
|---|
| | | uMonth |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // éè¦æ¾ç¤ºçæ份çæ°ç» |
|---|
| | | months: [], |
|---|
| | | // å¨æ份æ»å¨åºåä¸ï¼å½åè§å¾ä¸æ份çindexç´¢å¼ |
|---|
| | | monthIndex: 0, |
|---|
| | | // æ份æ»å¨åºåçé«åº¦ |
|---|
| | | listHeight: 0, |
|---|
| | | // monthç»ä»¶ä¸éæ©çæ¥ææ°ç» |
|---|
| | | selected: [], |
|---|
| | | scrollIntoView: '', |
|---|
| | | scrollTop:0, |
|---|
| | | // è¿æ»¤å¤çæ¹æ³ |
|---|
| | | innerFormatter: (value) => value |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | selectedChange: { |
|---|
| | | immediate: true, |
|---|
| | | handler(n) { |
|---|
| | | this.setMonth() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æå¼å¼¹çªæ¶ï¼è®¾ç½®æ份æ°æ® |
|---|
| | | show: { |
|---|
| | | immediate: true, |
|---|
| | | handler(n) { |
|---|
| | | this.setMonth() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // ç±äºmaxDateåminDateå¯ä»¥ä¸ºå符串(2021-10-10)ï¼æè
æ°å¼(æ¶é´æ³)ï¼ä½æ¯dayjså¦ææ¥åå符串形å¼çæ¶é´æ³ä¼æé®é¢ï¼è¿éè¿è¡å¤ç |
|---|
| | | innerMaxDate() { |
|---|
| | | return uni.$u.test.number(this.maxDate) |
|---|
| | | ? Number(this.maxDate) |
|---|
| | | : this.maxDate |
|---|
| | | }, |
|---|
| | | innerMinDate() { |
|---|
| | | return uni.$u.test.number(this.minDate) |
|---|
| | | ? Number(this.minDate) |
|---|
| | | : this.minDate |
|---|
| | | }, |
|---|
| | | // å¤ä¸ªæ¡ä»¶çååï¼ä¼å¼èµ·éä¸æ¥æçååï¼è¿éç»ä¸ç®¡ççå¬ |
|---|
| | | selectedChange() { |
|---|
| | | return [this.innerMinDate, this.innerMaxDate, this.defaultDate] |
|---|
| | | }, |
|---|
| | | subtitle() { |
|---|
| | | // åå§åæ¶ï¼this.months为空æ°ç»ï¼æ以éè¦ç¹å«å¤æå¤ç |
|---|
| | | if (this.months.length) { |
|---|
| | | return `${this.months[this.monthIndex].year}å¹´${ |
|---|
| | | this.months[this.monthIndex].month |
|---|
| | | }æ` |
|---|
| | | } else { |
|---|
| | | return '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | buttonDisabled() { |
|---|
| | | // å¦æ为rangeç±»åï¼ä¸éæ©çæ¥æ个æ°ä¸è¶³1个æ¶ï¼è®©åºé¨çæé®åºäºdisabledç¶æ |
|---|
| | | if (this.mode === 'range') { |
|---|
| | | if (this.selected.length <= 1) { |
|---|
| | | return true |
|---|
| | | } else { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | return false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.start = Date.now() |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å¨å¾®ä¿¡å°ç¨åºä¸ï¼ä¸æ¯æå°å½æ°å½åpropsåæ°ï¼æ
åªè½éè¿refå½¢å¼è°ç¨ |
|---|
| | | setFormatter(e) { |
|---|
| | | this.innerFormatter = e |
|---|
| | | }, |
|---|
| | | // monthç»ä»¶å
é¨éæ©æ¥æåï¼éè¿äºä»¶éç¥ç»ç¶ç»ä»¶ |
|---|
| | | monthSelected(e) { |
|---|
| | | this.selected = e |
|---|
| | | if (!this.showConfirm) { |
|---|
| | | // å¨ä¸éè¦ç¡®è®¤æé®çæ
åµä¸ï¼å¦æ为åéï¼æè
èå´å¤éä¸å·²éé¿åº¦å¤§äº2ï¼åç´æ¥è¿è¡è¿è¿ |
|---|
| | | if ( |
|---|
| | | this.mode === 'multiple' || |
|---|
| | | this.mode === 'single' || |
|---|
| | | (this.mode === 'range' && this.selected.length >= 2) |
|---|
| | | ) { |
|---|
| | | this.$emit('confirm', this.selected) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | init() { |
|---|
| | | // æ ¡éªmaxDateï¼ä¸è½å°äºå½åæ¶é´ |
|---|
| | | if ( |
|---|
| | | this.innerMaxDate && |
|---|
| | | new Date(this.innerMaxDate).getTime() <= Date.now() |
|---|
| | | ) { |
|---|
| | | return uni.$u.error('maxDateä¸è½å°äºå½åæ¶é´') |
|---|
| | | } |
|---|
| | | // æ»å¨åºåçé«åº¦ |
|---|
| | | this.listHeight = this.rowHeight * 5 + 30 |
|---|
| | | this.setMonth() |
|---|
| | | }, |
|---|
| | | close() { |
|---|
| | | this.$emit('close') |
|---|
| | | }, |
|---|
| | | // ç¹å»ç¡®å®æé® |
|---|
| | | confirm() { |
|---|
| | | if (!this.buttonDisabled) { |
|---|
| | | this.$emit('confirm', this.selected) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·å¾ä¸¤ä¸ªæ¥æä¹é´çæä»½æ° |
|---|
| | | getMonths(minDate, maxDate) { |
|---|
| | | const minYear = dayjs(minDate).year() |
|---|
| | | const minMonth = dayjs(minDate).month() + 1 |
|---|
| | | const maxYear = dayjs(maxDate).year() |
|---|
| | | const maxMonth = dayjs(maxDate).month() + 1 |
|---|
| | | return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1 |
|---|
| | | }, |
|---|
| | | // 设置æ份æ°æ® |
|---|
| | | setMonth() { |
|---|
| | | // æå°æ¥æç毫ç§æ° |
|---|
| | | const minDate = this.innerMinDate || dayjs().valueOf() |
|---|
| | | // å¦æ没ææå®æ大æ¥æï¼åå¾åæ¨3个æ |
|---|
| | | const maxDate = |
|---|
| | | this.innerMaxDate || |
|---|
| | | dayjs(minDate) |
|---|
| | | .add(this.monthNum - 1, 'month') |
|---|
| | | .valueOf() |
|---|
| | | // æ大æå°æ份ä¹é´çå
±æå¤å°ä¸ªæä»½ï¼ |
|---|
| | | const months = uni.$u.range( |
|---|
| | | 1, |
|---|
| | | this.monthNum, |
|---|
| | | this.getMonths(minDate, maxDate) |
|---|
| | | ) |
|---|
| | | // å
æ¸
空æ°ç» |
|---|
| | | this.months = [] |
|---|
| | | for (let i = 0; i < months; i++) { |
|---|
| | | this.months.push({ |
|---|
| | | date: new Array( |
|---|
| | | dayjs(minDate).add(i, 'month').daysInMonth() |
|---|
| | | ) |
|---|
| | | .fill(1) |
|---|
| | | .map((item, index) => { |
|---|
| | | // æ¥æï¼åå¼1-31 |
|---|
| | | let day = index + 1 |
|---|
| | | // ææï¼0-6ï¼0为å¨æ¥ |
|---|
| | | const week = dayjs(minDate) |
|---|
| | | .add(i, 'month') |
|---|
| | | .date(day) |
|---|
| | | .day() |
|---|
| | | const date = dayjs(minDate) |
|---|
| | | .add(i, 'month') |
|---|
| | | .date(day) |
|---|
| | | .format('YYYY-MM-DD') |
|---|
| | | let bottomInfo = '' |
|---|
| | | if (this.showLunar) { |
|---|
| | | // å°æ¥æ转为ååæ ¼å¼ |
|---|
| | | const lunar = Calendar.solar2lunar( |
|---|
| | | dayjs(date).year(), |
|---|
| | | dayjs(date).month() + 1, |
|---|
| | | dayjs(date).date() |
|---|
| | | ) |
|---|
| | | bottomInfo = lunar.IDayCn |
|---|
| | | } |
|---|
| | | let config = { |
|---|
| | | day, |
|---|
| | | week, |
|---|
| | | // å°äºæå°å
许çæ¥æï¼æè
大äºæ大çæ¥æï¼å设置为disabledç¶æ |
|---|
| | | disabled: |
|---|
| | | dayjs(date).isBefore( |
|---|
| | | dayjs(minDate).format('YYYY-MM-DD') |
|---|
| | | ) || |
|---|
| | | dayjs(date).isAfter( |
|---|
| | | dayjs(maxDate).format('YYYY-MM-DD') |
|---|
| | | ), |
|---|
| | | // è¿åä¸ä¸ªæ¥æ对象ï¼ä¾å¤é¨çformatterè·åå½åæ¥æçå¹´ææ¥çä¿¡æ¯ï¼è¿è¡å å·¥å¤ç |
|---|
| | | date: new Date(date), |
|---|
| | | bottomInfo, |
|---|
| | | dot: false, |
|---|
| | | month: |
|---|
| | | dayjs(minDate).add(i, 'month').month() + 1 |
|---|
| | | } |
|---|
| | | const formatter = |
|---|
| | | this.formatter || this.innerFormatter |
|---|
| | | return formatter(config) |
|---|
| | | }), |
|---|
| | | // å½åæå±çæ份 |
|---|
| | | month: dayjs(minDate).add(i, 'month').month() + 1, |
|---|
| | | // å½å年份 |
|---|
| | | year: dayjs(minDate).add(i, 'month').year() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // æ»å¨å°é»è®¤è®¾ç½®çæ份 |
|---|
| | | scrollIntoDefaultMonth(selected) { |
|---|
| | | // æ¥è¯¢é»è®¤æ¥æå¨å¯éå表çä¸æ |
|---|
| | | const _index = this.months.findIndex(({ |
|---|
| | | year, |
|---|
| | | month |
|---|
| | | }) => { |
|---|
| | | month = uni.$u.padZero(month) |
|---|
| | | return `${year}-${month}` === selected |
|---|
| | | }) |
|---|
| | | if (_index !== -1) { |
|---|
| | | // #ifndef MP-WEIXIN |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.scrollIntoView = `month-${_index}` |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | this.scrollTop = this.months[_index].top || 0; |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // scroll-viewæ»å¨çå¬ |
|---|
| | | onScroll(event) { |
|---|
| | | // ä¸å
许å°äº0çæ»å¨å¼ï¼å¦æscroll-viewå°é¡¶äºï¼ç»§ç»ä¸æï¼ä¼åºç°è´æ°å¼ |
|---|
| | | const scrollTop = Math.max(0, event.detail.scrollTop) |
|---|
| | | // å°å½åæ»å¨æ¡æ°å¼ï¼é¤ä»¥æ»å¨åºåçé«åº¦ï¼å¯ä»¥å¾åºå½åæ»å¨å°äºåªä¸ä¸ªæ份çç´¢å¼ |
|---|
| | | for (let i = 0; i < this.months.length; i++) { |
|---|
| | | if (scrollTop >= (this.months[i].top || this.listHeight)) { |
|---|
| | | this.monthIndex = i |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ´æ°æ份çtopå¼ |
|---|
| | | updateMonthTop(topArr = []) { |
|---|
| | | // 设置对åºæ份çtopå¼ï¼ç¨äºonScrollæ¹æ³æ´æ°æ份 |
|---|
| | | topArr.map((item, index) => { |
|---|
| | | this.months[index].top = item |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // è·åé»è®¤æ¥æçä¸æ |
|---|
| | | if (!this.defaultDate) { |
|---|
| | | // å¦æ没æ设置é»è®¤æ¥æï¼åå°å½å¤©æ¥æ设置为é»è®¤éä¸çæ¥æ |
|---|
| | | const selected = dayjs().format("YYYY-MM") |
|---|
| | | this.scrollIntoDefaultMonth(selected) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | let selected = dayjs().format("YYYY-MM"); |
|---|
| | | // åé模å¼ï¼å¯ä»¥æ¯å符串ææ°ç»ï¼Date对象ç |
|---|
| | | if (!uni.$u.test.array(this.defaultDate)) { |
|---|
| | | selected = dayjs(this.defaultDate).format("YYYY-MM") |
|---|
| | | } else { |
|---|
| | | selected = dayjs(this.defaultDate[0]).format("YYYY-MM"); |
|---|
| | | } |
|---|
| | | this.scrollIntoDefaultMonth(selected) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../libs/css/components.scss'; |
|---|
| | | |
|---|
| | | .u-calendar { |
|---|
| | | &__confirm { |
|---|
| | | padding: 7px 18px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | methods: { |
|---|
| | | // 设置æ份æ°æ® |
|---|
| | | setMonth() { |
|---|
| | | // æåæ¯å¨å |
|---|
| | | const day = dayjs(this.date).date(1).day() |
|---|
| | | const start = day == 0 ? 6 : day - 1 |
|---|
| | | |
|---|
| | | // æ¬æå¤©æ° |
|---|
| | | const days = dayjs(this.date).endOf('month').format('D') |
|---|
| | | |
|---|
| | | // ä¸ä¸ªæå¤©æ° |
|---|
| | | const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D') |
|---|
| | | |
|---|
| | | // æ¥ææ°æ® |
|---|
| | | const arr = [] |
|---|
| | | // æ¸
ç©ºè¡¨æ ¼ |
|---|
| | | this.month = [] |
|---|
| | | |
|---|
| | | // æ·»å ä¸ææ°æ® |
|---|
| | | arr.push( |
|---|
| | | ...new Array(start).fill(1).map((e, i) => { |
|---|
| | | const day = prevDays - start + i + 1 |
|---|
| | | |
|---|
| | | return { |
|---|
| | | value: day, |
|---|
| | | disabled: true, |
|---|
| | | date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | ) |
|---|
| | | |
|---|
| | | // æ·»å æ¬ææ°æ® |
|---|
| | | arr.push( |
|---|
| | | ...new Array(days - 0).fill(1).map((e, i) => { |
|---|
| | | const day = i + 1 |
|---|
| | | |
|---|
| | | return { |
|---|
| | | value: day, |
|---|
| | | date: dayjs(this.date).date(day).format('YYYY-MM-DD') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | ) |
|---|
| | | |
|---|
| | | // æ·»å ä¸ä¸ªæ |
|---|
| | | arr.push( |
|---|
| | | ...new Array(42 - days - start).fill(1).map((e, i) => { |
|---|
| | | const day = i + 1 |
|---|
| | | |
|---|
| | | return { |
|---|
| | | value: day, |
|---|
| | | disabled: true, |
|---|
| | | date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD') |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | ) |
|---|
| | | |
|---|
| | | // åå²æ°ç» |
|---|
| | | for (let n = 0; n < arr.length; n += 7) { |
|---|
| | | this.month.push( |
|---|
| | | arr.slice(n, n + 7).map((e, i) => { |
|---|
| | | e.index = i + n |
|---|
| | | |
|---|
| | | // èªå®ä¹ä¿¡æ¯ |
|---|
| | | const custom = this.customList.find((c) => c.date == e.date) |
|---|
| | | |
|---|
| | | // åå |
|---|
| | | if (this.lunar) { |
|---|
| | | const { |
|---|
| | | IDayCn, |
|---|
| | | IMonthCn |
|---|
| | | } = this.getLunar(e.date) |
|---|
| | | e.lunar = IDayCn == 'åä¸' ? IMonthCn : IDayCn |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | ...e, |
|---|
| | | ...custom |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¯å¦æä¹±é®çæé®çé¡ºåº |
|---|
| | | random: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // è¾å
¥ä¸ä¸ªä¸æåï¼æ¯å¦èªå¨åæ¢å°è±æ |
|---|
| | | autoChange: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-keyboard" |
|---|
| | | @touchmove.stop.prevent="noop" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | v-for="(group, i) in abc ? engKeyBoardList : areaList" |
|---|
| | | :key="i" |
|---|
| | | class="u-keyboard__button" |
|---|
| | | :index="i" |
|---|
| | | :class="[i + 1 === 4 && 'u-keyboard__button--center']" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | v-if="i === 3" |
|---|
| | | class="u-keyboard__button__inner-wrapper" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-keyboard__button__inner-wrapper__left" |
|---|
| | | hover-class="u-hover-class" |
|---|
| | | :hover-stay-time="200" |
|---|
| | | @tap="changeCarInputMode" |
|---|
| | | > |
|---|
| | | <text |
|---|
| | | class="u-keyboard__button__inner-wrapper__left__lang" |
|---|
| | | :class="[!abc && 'u-keyboard__button__inner-wrapper__left__lang--active']" |
|---|
| | | >ä¸</text> |
|---|
| | | <text class="u-keyboard__button__inner-wrapper__left__line">/</text> |
|---|
| | | <text |
|---|
| | | class="u-keyboard__button__inner-wrapper__left__lang" |
|---|
| | | :class="[abc && 'u-keyboard__button__inner-wrapper__left__lang--active']" |
|---|
| | | >è±</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | class="u-keyboard__button__inner-wrapper" |
|---|
| | | v-for="(item, j) in group" |
|---|
| | | :key="j" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-keyboard__button__inner-wrapper__inner" |
|---|
| | | :hover-stay-time="200" |
|---|
| | | @tap="carInputClick(i, j)" |
|---|
| | | hover-class="u-hover-class" |
|---|
| | | > |
|---|
| | | <text class="u-keyboard__button__inner-wrapper__inner__text">{{ item }}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | v-if="i === 3" |
|---|
| | | @touchstart="backspaceClick" |
|---|
| | | @touchend="clearTimer" |
|---|
| | | class="u-keyboard__button__inner-wrapper" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-keyboard__button__inner-wrapper__right" |
|---|
| | | hover-class="u-hover-class" |
|---|
| | | :hover-stay-time="200" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | size="28" |
|---|
| | | name="backspace" |
|---|
| | | color="#303133" |
|---|
| | | ></u-icon> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * keyboard é®çç»ä»¶ |
|---|
| | | * @description æ¤ä¸ºuViewèªå®ä¹çé®çé¢æ¿ï¼å
å«äºæ°åé®çï¼è½¦çå·é®ï¼èº«ä»½è¯å·é®ç3ç§æ¨¡å¼ï¼é½æå¯ä»¥æä¹±æé®é¡ºåºçé项ã |
|---|
| | | * @tutorial https://uviewui.com/components/keyboard.html |
|---|
| | | * @property {Boolean} random æ¯å¦æä¹±é®ççé¡ºåº |
|---|
| | | * @event {Function} change ç¹å»é®ç触å |
|---|
| | | * @event {Function} backspace ç¹å»éæ ¼é®è§¦å |
|---|
| | | * @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-keyboard", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // 车çè¾å
¥æ¶ï¼abc=true为è¾å
¥è½¦çå·ç ï¼bac=false为è¾å
¥ç份ä¸æç®ç§° |
|---|
| | | abc: false |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | areaList() { |
|---|
| | | let data = [ |
|---|
| | | '京', |
|---|
| | | '沪', |
|---|
| | | '粤', |
|---|
| | | 'æ´¥', |
|---|
| | | 'å', |
|---|
| | | '豫', |
|---|
| | | 'äº', |
|---|
| | | 'è¾½', |
|---|
| | | 'é»', |
|---|
| | | 'æ¹', |
|---|
| | | 'ç', |
|---|
| | | 'é²', |
|---|
| | | 'è', |
|---|
| | | 'æµ', |
|---|
| | | 'èµ£', |
|---|
| | | 'é', |
|---|
| | | 'æ¡', |
|---|
| | | 'ç', |
|---|
| | | 'æ', |
|---|
| | | 'é', |
|---|
| | | 'è', |
|---|
| | | 'å', |
|---|
| | | 'é½', |
|---|
| | | 'è´µ', |
|---|
| | | 'æ¸', |
|---|
| | | 'å·', |
|---|
| | | 'é', |
|---|
| | | 'ç¼', |
|---|
| | | 'å®', |
|---|
| | | 'æ', |
|---|
| | | 'è', |
|---|
| | | '港', |
|---|
| | | 'æ¾³', |
|---|
| | | 'æ°', |
|---|
| | | '使', |
|---|
| | | 'å¦' |
|---|
| | | ]; |
|---|
| | | let tmp = []; |
|---|
| | | // æä¹±é¡ºåº |
|---|
| | | if (this.random) data = uni.$u.randomArray(data); |
|---|
| | | // åå²æäºç»´æ°ç» |
|---|
| | | tmp[0] = data.slice(0, 10); |
|---|
| | | tmp[1] = data.slice(10, 20); |
|---|
| | | tmp[2] = data.slice(20, 30); |
|---|
| | | tmp[3] = data.slice(30, 36); |
|---|
| | | return tmp; |
|---|
| | | }, |
|---|
| | | engKeyBoardList() { |
|---|
| | | let data = [ |
|---|
| | | 1, |
|---|
| | | 2, |
|---|
| | | 3, |
|---|
| | | 4, |
|---|
| | | 5, |
|---|
| | | 6, |
|---|
| | | 7, |
|---|
| | | 8, |
|---|
| | | 9, |
|---|
| | | 0, |
|---|
| | | 'Q', |
|---|
| | | 'W', |
|---|
| | | 'E', |
|---|
| | | 'R', |
|---|
| | | 'T', |
|---|
| | | 'Y', |
|---|
| | | 'U', |
|---|
| | | 'I', |
|---|
| | | 'O', |
|---|
| | | 'P', |
|---|
| | | 'A', |
|---|
| | | 'S', |
|---|
| | | 'D', |
|---|
| | | 'F', |
|---|
| | | 'G', |
|---|
| | | 'H', |
|---|
| | | 'J', |
|---|
| | | 'K', |
|---|
| | | 'L', |
|---|
| | | 'Z', |
|---|
| | | 'X', |
|---|
| | | 'C', |
|---|
| | | 'V', |
|---|
| | | 'B', |
|---|
| | | 'N', |
|---|
| | | 'M' |
|---|
| | | ]; |
|---|
| | | let tmp = []; |
|---|
| | | if (this.random) data = uni.$u.randomArray(data); |
|---|
| | | tmp[0] = data.slice(0, 10); |
|---|
| | | tmp[1] = data.slice(10, 20); |
|---|
| | | tmp[2] = data.slice(20, 30); |
|---|
| | | tmp[3] = data.slice(30, 36); |
|---|
| | | return tmp; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // ç¹å»é®çæé® |
|---|
| | | carInputClick(i, j) { |
|---|
| | | let value = ''; |
|---|
| | | // ä¸å模å¼ï¼è·åä¸åæ°ç»çå¼ |
|---|
| | | if (this.abc) value = this.engKeyBoardList[i][j]; |
|---|
| | | else value = this.areaList[i][j]; |
|---|
| | | // å¦æå
许èªå¨åæ¢ï¼åå°ä¸æç¶æåæ¢ä¸ºè±æ |
|---|
| | | if (!this.abc && this.autoChange) uni.$u.sleep(200).then(() => this.abc = true) |
|---|
| | | this.$emit('change', value); |
|---|
| | | }, |
|---|
| | | // ä¿®æ¹æ±½è½¦çé®ççè¾å
¥æ¨¡å¼ï¼ä¸æ|è±æ |
|---|
| | | changeCarInputMode() { |
|---|
| | | this.abc = !this.abc; |
|---|
| | | }, |
|---|
| | | // ç¹å»éæ ¼é® |
|---|
| | | backspaceClick() { |
|---|
| | | this.$emit('backspace'); |
|---|
| | | clearInterval(this.timer); //å次æ¸
空å®æ¶å¨ï¼é²æ¢éå¤æ³¨åå®æ¶å¨ |
|---|
| | | this.timer = null; |
|---|
| | | this.timer = setInterval(() => { |
|---|
| | | this.$emit('backspace'); |
|---|
| | | }, 250); |
|---|
| | | }, |
|---|
| | | clearTimer() { |
|---|
| | | clearInterval(this.timer); |
|---|
| | | this.timer = null; |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | $u-car-keyboard-background-color: rgb(224, 228, 230) !default; |
|---|
| | | $u-car-keyboard-padding:6px 0 6px !default; |
|---|
| | | $u-car-keyboard-button-inner-width:64rpx !default; |
|---|
| | | $u-car-keyboard-button-inner-background-color:#FFFFFF !default; |
|---|
| | | $u-car-keyboard-button-height:80rpx !default; |
|---|
| | | $u-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default; |
|---|
| | | $u-car-keyboard-button-border-radius:4px !default; |
|---|
| | | $u-car-keyboard-button-inner-margin:8rpx 5rpx !default; |
|---|
| | | $u-car-keyboard-button-text-font-size:16px !default; |
|---|
| | | $u-car-keyboard-button-text-color:$u-main-color !default; |
|---|
| | | $u-car-keyboard-center-inner-margin: 0 4rpx !default; |
|---|
| | | $u-car-keyboard-special-button-width:134rpx !default; |
|---|
| | | $u-car-keyboard-lang-font-size:16px !default; |
|---|
| | | $u-car-keyboard-lang-color:$u-main-color !default; |
|---|
| | | $u-car-keyboard-active-color:$u-primary !default; |
|---|
| | | $u-car-keyboard-line-font-size:15px !default; |
|---|
| | | $u-car-keyboard-line-color:$u-main-color !default; |
|---|
| | | $u-car-keyboard-line-margin:0 1px !default; |
|---|
| | | $u-car-keyboard-u-hover-class-background-color:#BBBCC6 !default; |
|---|
| | | |
|---|
| | | .u-keyboard { |
|---|
| | | @include flex(column); |
|---|
| | | justify-content: space-around; |
|---|
| | | background-color: $u-car-keyboard-background-color; |
|---|
| | | align-items: stretch; |
|---|
| | | padding: $u-car-keyboard-padding; |
|---|
| | | |
|---|
| | | &__button { |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | &__inner-wrapper { |
|---|
| | | box-shadow: $u-car-keyboard-button-inner-box-shadow; |
|---|
| | | margin: $u-car-keyboard-button-inner-margin; |
|---|
| | | border-radius: $u-car-keyboard-button-border-radius; |
|---|
| | | |
|---|
| | | &__inner { |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | width: $u-car-keyboard-button-inner-width; |
|---|
| | | background-color: $u-car-keyboard-button-inner-background-color; |
|---|
| | | height: $u-car-keyboard-button-height; |
|---|
| | | border-radius: $u-car-keyboard-button-border-radius; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: $u-car-keyboard-button-text-font-size; |
|---|
| | | color: $u-car-keyboard-button-text-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__left, |
|---|
| | | &__right { |
|---|
| | | border-radius: $u-car-keyboard-button-border-radius; |
|---|
| | | width: $u-car-keyboard-special-button-width; |
|---|
| | | height: $u-car-keyboard-button-height; |
|---|
| | | background-color: $u-car-keyboard-u-hover-class-background-color; |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | box-shadow: $u-car-keyboard-button-inner-box-shadow; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__left { |
|---|
| | | &__line { |
|---|
| | | font-size: $u-car-keyboard-line-font-size; |
|---|
| | | color: $u-car-keyboard-line-color; |
|---|
| | | margin: $u-car-keyboard-line-margin; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__lang { |
|---|
| | | font-size: $u-car-keyboard-lang-font-size; |
|---|
| | | color: $u-car-keyboard-lang-color; |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | color: $u-car-keyboard-active-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-hover-class { |
|---|
| | | background-color: $u-car-keyboard-u-hover-class-background-color; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // åç»æ é¢ |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.cellGroup.title |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå¤è¾¹æ¡ |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.cellGroup.border |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view :style="[$u.addStyle(customStyle)]" :class="[customClass]" class="u-cell-group"> |
|---|
| | | <view v-if="title" class="u-cell-group__title"> |
|---|
| | | <slot name="title"> |
|---|
| | | <text class="u-cell-group__title__text">{{ title }}</text> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | <view class="u-cell-group__wrapper"> |
|---|
| | | <u-line v-if="border"></u-line> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * cellGroup åå
æ ¼ |
|---|
| | | * @description cellåå
æ ¼ä¸è¬ç¨äºä¸ç»å表çæ
åµï¼æ¯å¦ä¸ªäººä¸å¿é¡µï¼è®¾ç½®é¡µçã |
|---|
| | | * @tutorial https://uviewui.com/components/cell.html |
|---|
| | | * |
|---|
| | | * @property {String} title åç»æ é¢ |
|---|
| | | * @property {Boolean} border æ¯å¦æ¾ç¤ºå¤è¾¹æ¡ (é»è®¤ true ) |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @event {Function} click ç¹å»cellå表æ¶è§¦å |
|---|
| | | * @example <u-cell-group title="设置å好"> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-cell-group', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | $u-cell-group-title-padding: 16px 16px 8px !default; |
|---|
| | | $u-cell-group-title-font-size: 15px !default; |
|---|
| | | $u-cell-group-title-line-height: 16px !default; |
|---|
| | | $u-cell-group-title-color: $u-main-color !default; |
|---|
| | | |
|---|
| | | .u-cell-group { |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &__title { |
|---|
| | | padding: $u-cell-group-title-padding; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: $u-cell-group-title-font-size; |
|---|
| | | line-height: $u-cell-group-title-line-height; |
|---|
| | | color: $u-cell-group-title-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__wrapper { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ é¢ |
|---|
| | | title: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.cell.title |
|---|
| | | }, |
|---|
| | | // æ é¢ä¸æ¹çæè¿°ä¿¡æ¯ |
|---|
| | | label: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.cell.label |
|---|
| | | }, |
|---|
| | | // å³ä¾§çå
容 |
|---|
| | | value: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.cell.value |
|---|
| | | }, |
|---|
| | | // 左侧å¾æ å称ï¼æè
å¾çé¾æ¥(æ¬å°æ件建议使ç¨ç»å¯¹å°å) |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.cell.icon |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨cell |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.cell.disabled |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºä¸è¾¹æ¡ |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.cell.border |
|---|
| | | }, |
|---|
| | | // å
容æ¯å¦åç´å±
ä¸(主è¦æ¯é对å³ä¾§çvalueé¨å) |
|---|
| | | center: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.cell.center |
|---|
| | | }, |
|---|
| | | // ç¹å»å跳转çURLå°å |
|---|
| | | url: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.cell.url |
|---|
| | | }, |
|---|
| | | // é¾æ¥è·³è½¬çæ¹å¼ï¼å
é¨ä½¿ç¨çæ¯uViewå°è£
çrouteæ¹æ³ï¼å¯è½ä¼è¿è¡æ¦æªæä½ |
|---|
| | | linkType: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.cell.linkType |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¼å¯ç¹å»åé¦(表ç°ä¸ºç¹å»æ¶å ä¸ç°è²èæ¯) |
|---|
| | | clickable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.cell.clickable |
|---|
| | | }, |
|---|
| | | // æ¯å¦å±ç¤ºå³ä¾§ç®å¤´å¹¶å¼å¯ç¹å»åé¦ |
|---|
| | | isLink: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.cell.isLink |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¡¨åç¶æä¸çå¿
å¡«æå·(æ¤ç»ä»¶å¯è½ä¼å
åµå
¥inputç»ä»¶) |
|---|
| | | required: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.cell.required |
|---|
| | | }, |
|---|
| | | // å³ä¾§çå¾æ ç®å¤´ |
|---|
| | | rightIcon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.cell.rightIcon |
|---|
| | | }, |
|---|
| | | // å³ä¾§ç®å¤´çæ¹åï¼å¯éå¼ä¸ºï¼leftï¼upï¼down |
|---|
| | | arrowDirection: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.cell.arrowDirection |
|---|
| | | }, |
|---|
| | | // 左侧å¾æ æ ·å¼ |
|---|
| | | iconStyle: { |
|---|
| | | type: [Object, String], |
|---|
| | | default: () => { |
|---|
| | | return uni.$u.props.cell.iconStyle |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å³ä¾§ç®å¤´å¾æ çæ ·å¼ |
|---|
| | | rightIconStyle: { |
|---|
| | | type: [Object, String], |
|---|
| | | default: () => { |
|---|
| | | return uni.$u.props.cell.rightIconStyle |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ é¢çæ ·å¼ |
|---|
| | | titleStyle: { |
|---|
| | | type: [Object, String], |
|---|
| | | default: () => { |
|---|
| | | return uni.$u.props.cell.titleStyle |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // åä½å
ç大å°ï¼å¯éå¼ä¸ºlarge |
|---|
| | | size: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.cell.size |
|---|
| | | }, |
|---|
| | | // ç¹å»cellæ¯å¦é»æ¢äºä»¶ä¼ æ |
|---|
| | | stop: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.cell.stop |
|---|
| | | }, |
|---|
| | | // æ è¯ç¬¦ï¼cell被ç¹å»æ¶è¿å |
|---|
| | | name: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: uni.$u.props.cell.name |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-cell" :class="[customClass]" :style="[$u.addStyle(customStyle)]" |
|---|
| | | :hover-class="(!disabled && (clickable || isLink)) ? 'u-cell--clickable' : ''" :hover-stay-time="250" |
|---|
| | | @tap="clickHandler"> |
|---|
| | | <view class="u-cell__body" :class="[ center && 'u-cell--center', size === 'large' && 'u-cell__body--large']"> |
|---|
| | | <view class="u-cell__body__content"> |
|---|
| | | <view class="u-cell__left-icon-wrap" v-if="$slots.icon || icon"> |
|---|
| | | <slot name="icon" v-if="$slots.icon"> |
|---|
| | | </slot> |
|---|
| | | <u-icon v-else :name="icon" :custom-style="iconStyle" :size="size === 'large' ? 22 : 18"></u-icon> |
|---|
| | | </view> |
|---|
| | | <view class="u-cell__title"> |
|---|
| | | <slot name="title"> |
|---|
| | | <text v-if="title" class="u-cell__title-text" :style="[titleTextStyle]" |
|---|
| | | :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__title-text--large']">{{ title }}</text> |
|---|
| | | </slot> |
|---|
| | | <slot name="label"> |
|---|
| | | <text class="u-cell__label" v-if="label" |
|---|
| | | :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__label--large']">{{ label }}</text> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <slot name="value"> |
|---|
| | | <text class="u-cell__value" |
|---|
| | | :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__value--large']" |
|---|
| | | v-if="!$u.test.empty(value)">{{ value }}</text> |
|---|
| | | </slot> |
|---|
| | | <view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink" |
|---|
| | | :class="[`u-cell__right-icon-wrap--${arrowDirection}`]"> |
|---|
| | | <slot name="right-icon" v-if="$slots['right-icon']"> |
|---|
| | | </slot> |
|---|
| | | <u-icon v-else :name="rightIcon" :custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'" |
|---|
| | | :size="size === 'large' ? 18 : 16"></u-icon> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-line v-if="border"></u-line> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * cell åå
æ ¼ |
|---|
| | | * @description cellåå
æ ¼ä¸è¬ç¨äºä¸ç»å表çæ
åµï¼æ¯å¦ä¸ªäººä¸å¿é¡µï¼è®¾ç½®é¡µçã |
|---|
| | | * @tutorial https://uviewui.com/components/cell.html |
|---|
| | | * @property {String | Number} title æ é¢ |
|---|
| | | * @property {String | Number} label æ é¢ä¸æ¹çæè¿°ä¿¡æ¯ |
|---|
| | | * @property {String | Number} value å³ä¾§çå
容 |
|---|
| | | * @property {String} icon 左侧å¾æ å称ï¼æè
å¾çé¾æ¥(æ¬å°æ件建议使ç¨ç»å¯¹å°å) |
|---|
| | | * @property {Boolean} disabled æ¯å¦ç¦ç¨cell |
|---|
| | | * @property {Boolean} border æ¯å¦æ¾ç¤ºä¸è¾¹æ¡ (é»è®¤ true ) |
|---|
| | | * @property {Boolean} center å
容æ¯å¦åç´å±
ä¸(主è¦æ¯é对å³ä¾§çvalueé¨å) (é»è®¤ false ) |
|---|
| | | * @property {String} url ç¹å»å跳转çURLå°å |
|---|
| | | * @property {String} linkType é¾æ¥è·³è½¬çæ¹å¼ï¼å
é¨ä½¿ç¨çæ¯uViewå°è£
çrouteæ¹æ³ï¼å¯è½ä¼è¿è¡æ¦æªæä½ (é»è®¤ 'navigateTo' ) |
|---|
| | | * @property {Boolean} clickable æ¯å¦å¼å¯ç¹å»åé¦(表ç°ä¸ºç¹å»æ¶å ä¸ç°è²èæ¯) ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} isLink æ¯å¦å±ç¤ºå³ä¾§ç®å¤´å¹¶å¼å¯ç¹å»åé¦ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} required æ¯å¦æ¾ç¤ºè¡¨åç¶æä¸çå¿
å¡«æå·(æ¤ç»ä»¶å¯è½ä¼å
åµå
¥inputç»ä»¶) ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} rightIcon å³ä¾§çå¾æ ç®å¤´ ï¼é»è®¤ 'arrow-right'ï¼ |
|---|
| | | * @property {String} arrowDirection å³ä¾§ç®å¤´çæ¹åï¼å¯éå¼ä¸ºï¼leftï¼upï¼down |
|---|
| | | * @property {Object | String} rightIconStyle å³ä¾§ç®å¤´å¾æ çæ ·å¼ |
|---|
| | | * @property {Object | String} titleStyle æ é¢çæ ·å¼ |
|---|
| | | * @property {Object | String} iconStyle 左侧å¾æ æ ·å¼ |
|---|
| | | * @property {String} size åä½å
ç大å°ï¼å¯éå¼ä¸º largeï¼normalï¼mini |
|---|
| | | * @property {Boolean} stop ç¹å»cellæ¯å¦é»æ¢äºä»¶ä¼ æ (é»è®¤ true ) |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @event {Function} click ç¹å»cellå表æ¶è§¦å |
|---|
| | | * @example 该ç»ä»¶éè¦æé
cell-groupç»ä»¶ä½¿ç¨ï¼è§å®æ¹ææ¡£ç¤ºä¾ |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-cell', |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | computed: { |
|---|
| | | titleTextStyle() { |
|---|
| | | return uni.$u.addStyle(this.titleStyle) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // ç¹å»cell |
|---|
| | | clickHandler(e) { |
|---|
| | | if (this.disabled) return |
|---|
| | | this.$emit('click', { |
|---|
| | | name: this.name |
|---|
| | | }) |
|---|
| | | // å¦æé
ç½®äºurl(æ¤propsåæ°éè¿mixinå¼å
¥)åæ°ï¼è·³è½¬é¡µé¢ |
|---|
| | | this.openPage() |
|---|
| | | // æ¯å¦é»æ¢äºä»¶ä¼ æ |
|---|
| | | this.stop && this.preventEvent(e) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | $u-cell-padding: 10px 15px !default; |
|---|
| | | $u-cell-font-size: 15px !default; |
|---|
| | | $u-cell-line-height: 24px !default; |
|---|
| | | $u-cell-color: $u-main-color !default; |
|---|
| | | $u-cell-icon-size: 16px !default; |
|---|
| | | $u-cell-title-font-size: 15px !default; |
|---|
| | | $u-cell-title-line-height: 22px !default; |
|---|
| | | $u-cell-title-color: $u-main-color !default; |
|---|
| | | $u-cell-label-font-size: 12px !default; |
|---|
| | | $u-cell-label-color: $u-tips-color !default; |
|---|
| | | $u-cell-label-line-height: 18px !default; |
|---|
| | | $u-cell-value-font-size: 14px !default; |
|---|
| | | $u-cell-value-color: $u-content-color !default; |
|---|
| | | $u-cell-clickable-color: $u-bg-color !default; |
|---|
| | | $u-cell-disabled-color: #c8c9cc !default; |
|---|
| | | $u-cell-padding-top-large: 13px !default; |
|---|
| | | $u-cell-padding-bottom-large: 13px !default; |
|---|
| | | $u-cell-value-font-size-large: 15px !default; |
|---|
| | | $u-cell-label-font-size-large: 14px !default; |
|---|
| | | $u-cell-title-font-size-large: 16px !default; |
|---|
| | | $u-cell-left-icon-wrap-margin-right: 4px !default; |
|---|
| | | $u-cell-right-icon-wrap-margin-left: 4px !default; |
|---|
| | | $u-cell-title-flex:1 !default; |
|---|
| | | $u-cell-label-margin-top:5px !default; |
|---|
| | | |
|---|
| | | |
|---|
| | | .u-cell { |
|---|
| | | &__body { |
|---|
| | | @include flex(); |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | /* #endif */ |
|---|
| | | padding: $u-cell-padding; |
|---|
| | | font-size: $u-cell-font-size; |
|---|
| | | color: $u-cell-color; |
|---|
| | | // line-height: $u-cell-line-height; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | @include flex(row); |
|---|
| | | align-items: center; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--large { |
|---|
| | | padding-top: $u-cell-padding-top-large; |
|---|
| | | padding-bottom: $u-cell-padding-bottom-large; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__left-icon-wrap, |
|---|
| | | &__right-icon-wrap { |
|---|
| | | @include flex(); |
|---|
| | | align-items: center; |
|---|
| | | // height: $u-cell-line-height; |
|---|
| | | font-size: $u-cell-icon-size; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__left-icon-wrap { |
|---|
| | | margin-right: $u-cell-left-icon-wrap-margin-right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__right-icon-wrap { |
|---|
| | | margin-left: $u-cell-right-icon-wrap-margin-left; |
|---|
| | | transition: transform 0.3s; |
|---|
| | | |
|---|
| | | &--up { |
|---|
| | | transform: rotate(-90deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--down { |
|---|
| | | transform: rotate(90deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__title { |
|---|
| | | flex: $u-cell-title-flex; |
|---|
| | | |
|---|
| | | &-text { |
|---|
| | | font-size: $u-cell-title-font-size; |
|---|
| | | line-height: $u-cell-title-line-height; |
|---|
| | | color: $u-cell-title-color; |
|---|
| | | |
|---|
| | | &--large { |
|---|
| | | font-size: $u-cell-title-font-size-large; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__label { |
|---|
| | | margin-top: $u-cell-label-margin-top; |
|---|
| | | font-size: $u-cell-label-font-size; |
|---|
| | | color: $u-cell-label-color; |
|---|
| | | line-height: $u-cell-label-line-height; |
|---|
| | | |
|---|
| | | &--large { |
|---|
| | | font-size: $u-cell-label-font-size-large; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__value { |
|---|
| | | text-align: right; |
|---|
| | | font-size: $u-cell-value-font-size; |
|---|
| | | line-height: $u-cell-line-height; |
|---|
| | | color: $u-cell-value-color; |
|---|
| | | |
|---|
| | | &--large { |
|---|
| | | font-size: $u-cell-value-font-size-large; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--clickable { |
|---|
| | | background-color: $u-cell-clickable-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--disabled { |
|---|
| | | color: $u-cell-disabled-color; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | cursor: not-allowed; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--center { |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ è¯ç¬¦ |
|---|
| | | name: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkboxGroup.name |
|---|
| | | }, |
|---|
| | | // ç»å®çå¼ |
|---|
| | | value: { |
|---|
| | | type: Array, |
|---|
| | | default: uni.$u.props.checkboxGroup.value |
|---|
| | | }, |
|---|
| | | // å½¢ç¶ï¼circle-åå½¢ï¼square-æ¹å½¢ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkboxGroup.shape |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨å
¨é¨checkbox |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.checkboxGroup.disabled |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // éä¸ç¶æä¸çé¢è²ï¼å¦è®¾ç½®æ¤å¼ï¼å°ä¼è¦çparentçactiveColorå¼ |
|---|
| | | activeColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkboxGroup.activeColor |
|---|
| | | }, |
|---|
| | | // æªéä¸çé¢è² |
|---|
| | | inactiveColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkboxGroup.inactiveColor |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // æ´ä¸ªç»ä»¶ç尺寸ï¼é»è®¤px |
|---|
| | | size: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.checkboxGroup.size |
|---|
| | | }, |
|---|
| | | // å¸å±æ¹å¼ï¼row-横åï¼column-纵å |
|---|
| | | placement: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkboxGroup.placement |
|---|
| | | }, |
|---|
| | | // labelçåä½å¤§å°ï¼pxåä½ |
|---|
| | | labelSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.checkboxGroup.labelSize |
|---|
| | | }, |
|---|
| | | // labelçåä½é¢è² |
|---|
| | | labelColor: { |
|---|
| | | type: [String], |
|---|
| | | default: uni.$u.props.checkboxGroup.labelColor |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦æ¢ç¹å»ææ¬æä½ |
|---|
| | | labelDisabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.checkboxGroup.labelDisabled |
|---|
| | | }, |
|---|
| | | // å¾æ é¢è² |
|---|
| | | iconColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkboxGroup.iconColor |
|---|
| | | }, |
|---|
| | | // å¾æ ç大å°ï¼åä½px |
|---|
| | | iconSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.checkboxGroup.iconSize |
|---|
| | | }, |
|---|
| | | // å¾éå¾æ ç对é½æ¹å¼ï¼left-左边ï¼right-å³è¾¹ |
|---|
| | | iconPlacement: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkboxGroup.iconPlacement |
|---|
| | | }, |
|---|
| | | // ç«åé
åæ¶ï¼æ¯å¦æ¾ç¤ºä¸å线 |
|---|
| | | borderBottom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.checkboxGroup.borderBottom |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-checkbox-group" |
|---|
| | | :class="bemClass" |
|---|
| | | > |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * checkboxGroup å¤éæ¡ç» |
|---|
| | | * @description å¤éæ¡ç»ä»¶ä¸è¬ç¨äºéè¦å¤ä¸ªéæ©çåºæ¯ï¼è¯¥ç»ä»¶åè½å®æ´ï¼ä½¿ç¨æ¹ä¾¿ |
|---|
| | | * @tutorial https://www.uviewui.com/components/checkbox.html |
|---|
| | | * @property {String} name æ è¯ç¬¦ |
|---|
| | | * @property {Array} value ç»å®çå¼ |
|---|
| | | * @property {String} shape å½¢ç¶ï¼circle-åå½¢ï¼square-æ¹å½¢ ï¼é»è®¤ 'square' ï¼ |
|---|
| | | * @property {Boolean} disabled æ¯å¦ç¦ç¨å
¨é¨checkbox ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} activeColor éä¸ç¶æä¸çé¢è²ï¼å¦è®¾ç½®æ¤å¼ï¼å°ä¼è¦çparentçactiveColorå¼ ï¼é»è®¤ '#2979ff' ï¼ |
|---|
| | | * @property {String} inactiveColor æªéä¸çé¢è² ï¼é»è®¤ '#c8c9cc' ï¼ |
|---|
| | | * @property {String | Number} size æ´ä¸ªç»ä»¶ç尺寸 åä½px ï¼é»è®¤ 18 ï¼ |
|---|
| | | * @property {String} placement å¸å±æ¹å¼ï¼row-横åï¼column-纵å ï¼é»è®¤ 'row' ï¼ |
|---|
| | | * @property {String | Number} labelSize labelçåä½å¤§å°ï¼pxåä½ ï¼é»è®¤ 14 ï¼ |
|---|
| | | * @property {String} labelColor labelçåä½é¢è² ï¼é»è®¤ '#303133' ï¼ |
|---|
| | | * @property {Boolean} labelDisabled æ¯å¦ç¦æ¢ç¹å»ææ¬æä½ (é»è®¤ false ) |
|---|
| | | * @property {String} iconColor å¾æ é¢è² ï¼é»è®¤ '#ffffff' ï¼ |
|---|
| | | * @property {String | Number} iconSize å¾æ ç大å°ï¼åä½px ï¼é»è®¤ 12 ï¼ |
|---|
| | | * @property {String} iconPlacement å¾éå¾æ ç对é½æ¹å¼ï¼left-左边ï¼right-å³è¾¹ ï¼é»è®¤ 'left' ï¼ |
|---|
| | | * @property {Boolean} borderBottom placement为rowæ¶ï¼æ¯å¦æ¾ç¤ºä¸è¾¹æ¡ ï¼é»è®¤ false ï¼ |
|---|
| | | * @event {Function} change ä»»ä¸ä¸ªcheckboxç¶æåçååæ¶è§¦åï¼åè°ä¸ºä¸ä¸ªå¯¹è±¡ |
|---|
| | | * @event {Function} input ä¿®æ¹éè¿v-modelç»å®çå¼æ¶è§¦åï¼åè°ä¸ºä¸ä¸ªå¯¹è±¡ |
|---|
| | | * @example <u-checkbox-group></u-checkbox-group> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-checkbox-group', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | computed: { |
|---|
| | | // è¿écomputedçåéï¼é½æ¯åç»ä»¶u-checkboxéè¦ç¨å°çï¼ç±äºå¤´æ¡å°ç¨åºçå
¼å®¹æ§å·®å¼ï¼åç»ä»¶æ æ³å®æ¶çå¬ç¶ç»ä»¶åæ°çåå |
|---|
| | | // æ以éè¦æå¨éç¥åç»ä»¶ï¼è¿éè¿åä¸ä¸ªparentDataåéï¼ä¾watchçå¬ï¼å¨å
¶ä¸å»éç¥æ¯ä¸ä¸ªåç»ä»¶éæ°ä»ç¶ç»ä»¶(u-checkbox-group) |
|---|
| | | // æåç¶ç»ä»¶æ°çåååçåæ° |
|---|
| | | parentData() { |
|---|
| | | return [this.value, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape, |
|---|
| | | this.iconSize, this.borderBottom, this.placement |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | bemClass() { |
|---|
| | | // this.bem为ä¸ä¸ªcomputedåéï¼å¨mixinä¸ |
|---|
| | | return this.bem('checkbox-group', ['placement']) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // å½ç¶ç»ä»¶éè¦åç»ä»¶éè¦å
±äº«çåæ°åçäºååï¼æå¨éç¥åç»ä»¶ |
|---|
| | | parentData() { |
|---|
| | | if (this.children.length) { |
|---|
| | | this.children.map(child => { |
|---|
| | | // å¤æåç»ä»¶(u-checkbox)å¦ææinitæ¹æ³çè¯ï¼å°±å°±æ§è¡(æ§è¡çç»ææ¯åç»ä»¶éæ°ä»ç¶ç»ä»¶æåäºææ°çå¼) |
|---|
| | | typeof(child.init) === 'function' && child.init() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.children = [] |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å°å
¶ä»çcheckbox设置为æªéä¸çç¶æ |
|---|
| | | unCheckedOther(childInstance) { |
|---|
| | | const values = [] |
|---|
| | | this.children.map(child => { |
|---|
| | | // å°è¢«éä¸çcheckboxï¼æ¾å°æ°ç»ä¸è¿å |
|---|
| | | if (child.isChecked) { |
|---|
| | | values.push(child.name) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | // ååºäºä»¶ |
|---|
| | | this.$emit('change', values) |
|---|
| | | // ä¿®æ¹éè¿v-modelç»å®çå¼ |
|---|
| | | this.$emit('input', values) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-checkbox-group { |
|---|
| | | |
|---|
| | | &--row { |
|---|
| | | @include flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--column { |
|---|
| | | @include flex(column); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // checkboxçå称 |
|---|
| | | name: { |
|---|
| | | type: [String, Number, Boolean], |
|---|
| | | default: uni.$u.props.checkbox.name |
|---|
| | | }, |
|---|
| | | // å½¢ç¶ï¼square为æ¹å½¢ï¼circle为åå |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkbox.shape |
|---|
| | | }, |
|---|
| | | // æ´ä½çå¤§å° |
|---|
| | | size: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.checkbox.size |
|---|
| | | }, |
|---|
| | | // æ¯å¦é»è®¤éä¸ |
|---|
| | | checked: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.checkbox.checked |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨ |
|---|
| | | disabled: { |
|---|
| | | type: [String, Boolean], |
|---|
| | | default: uni.$u.props.checkbox.disabled |
|---|
| | | }, |
|---|
| | | // éä¸ç¶æä¸çé¢è²ï¼å¦è®¾ç½®æ¤å¼ï¼å°ä¼è¦çparentçactiveColorå¼ |
|---|
| | | activeColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkbox.activeColor |
|---|
| | | }, |
|---|
| | | // æªéä¸çé¢è² |
|---|
| | | inactiveColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkbox.inactiveColor |
|---|
| | | }, |
|---|
| | | // å¾æ ç大å°ï¼åä½px |
|---|
| | | iconSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.checkbox.iconSize |
|---|
| | | }, |
|---|
| | | // å¾æ é¢è² |
|---|
| | | iconColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkbox.iconColor |
|---|
| | | }, |
|---|
| | | // labelæ示æåï¼å 为nvueä¸ï¼ç´æ¥slotè¿æ¥çæåï¼ç±äºç¹æ®çç»æï¼æ æ³ä¿®æ¹æ ·å¼ |
|---|
| | | label: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.checkbox.label |
|---|
| | | }, |
|---|
| | | // labelçåä½å¤§å°ï¼pxåä½ |
|---|
| | | labelSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.checkbox.labelSize |
|---|
| | | }, |
|---|
| | | // labelçé¢è² |
|---|
| | | labelColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.checkbox.labelColor |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦æ¢ç¹å»æ示è¯éä¸å¤éæ¡ |
|---|
| | | labelDisabled: { |
|---|
| | | type: [String, Boolean], |
|---|
| | | default: uni.$u.props.checkbox.labelDisabled |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-checkbox" |
|---|
| | | :style="[checkboxStyle]" |
|---|
| | | @tap.stop="wrapperClickHandler" |
|---|
| | | :class="[`u-checkbox-label--${parentData.iconPlacement}`, parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom']" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-checkbox__icon-wrap" |
|---|
| | | @tap.stop="iconClickHandler" |
|---|
| | | :class="iconClasses" |
|---|
| | | :style="[iconWrapStyle]" |
|---|
| | | > |
|---|
| | | <slot name="icon"> |
|---|
| | | <u-icon |
|---|
| | | class="u-checkbox__icon-wrap__icon" |
|---|
| | | name="checkbox-mark" |
|---|
| | | :size="elIconSize" |
|---|
| | | :color="elIconColor" |
|---|
| | | /> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | <text |
|---|
| | | @tap.stop="labelClickHandler" |
|---|
| | | :style="{ |
|---|
| | | color: elDisabled ? elInactiveColor : elLabelColor, |
|---|
| | | fontSize: elLabelSize, |
|---|
| | | lineHeight: elLabelSize |
|---|
| | | }" |
|---|
| | | >{{label}}</text> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * checkbox å¤éæ¡ |
|---|
| | | * @description å¤éæ¡ç»ä»¶ä¸è¬ç¨äºéè¦å¤ä¸ªéæ©çåºæ¯ï¼è¯¥ç»ä»¶åè½å®æ´ï¼ä½¿ç¨æ¹ä¾¿ |
|---|
| | | * @tutorial https://uviewui.com/components/checkbox.html |
|---|
| | | * @property {String | Number | Boolean} name checkboxç»ä»¶çæ 示符 |
|---|
| | | * @property {String} shape å½¢ç¶ï¼square为æ¹å½¢ï¼circle为åå |
|---|
| | | * @property {String | Number} size æ´ä½çå¤§å° |
|---|
| | | * @property {Boolean} checked æ¯å¦é»è®¤éä¸ |
|---|
| | | * @property {String | Boolean} disabled æ¯å¦ç¦ç¨ |
|---|
| | | * @property {String} activeColor éä¸ç¶æä¸çé¢è²ï¼å¦è®¾ç½®æ¤å¼ï¼å°ä¼è¦çparentçactiveColorå¼ |
|---|
| | | * @property {String} inactiveColor æªéä¸çé¢è² |
|---|
| | | * @property {String | Number} iconSize å¾æ ç大å°ï¼åä½px |
|---|
| | | * @property {String} iconColor å¾æ é¢è² |
|---|
| | | * @property {String | Number} label labelæ示æåï¼å 为nvueä¸ï¼ç´æ¥slotè¿æ¥çæåï¼ç±äºç¹æ®çç»æï¼æ æ³ä¿®æ¹æ ·å¼ |
|---|
| | | * @property {String} labelColor labelçé¢è² |
|---|
| | | * @property {String | Number} labelSize labelçåä½å¤§å°ï¼pxåä½ |
|---|
| | | * @property {String | Boolean} labelDisabled æ¯å¦ç¦æ¢ç¹å»æ示è¯éä¸å¤éæ¡ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @event {Function} change ä»»ä¸ä¸ªcheckboxç¶æåçååæ¶è§¦åï¼åè°ä¸ºä¸ä¸ªå¯¹è±¡ |
|---|
| | | * @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-checkbox", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | isChecked: false, |
|---|
| | | // ç¶ç»ä»¶çé»è®¤å¼ï¼å 为头æ¡å°ç¨åºä¸æ¯æå¨computedä¸ä½¿ç¨this.parent.shapeçå½¢å¼ |
|---|
| | | // æ
åªè½ä½¿ç¨å¦æ¤æ¹æ³ |
|---|
| | | parentData: { |
|---|
| | | iconSize: 12, |
|---|
| | | labelDisabled: null, |
|---|
| | | disabled: null, |
|---|
| | | shape: 'square', |
|---|
| | | activeColor: null, |
|---|
| | | inactiveColor: null, |
|---|
| | | size: 18, |
|---|
| | | value: null, |
|---|
| | | iconColor: null, |
|---|
| | | placement: 'row', |
|---|
| | | borderBottom: false, |
|---|
| | | iconPlacement: 'left' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // æ¯å¦ç¦ç¨ï¼å¦æç¶ç»ä»¶u-raios-groupç¦ç¨çè¯ï¼å°ä¼å¿½ç¥åç»ä»¶çé
ç½® |
|---|
| | | elDisabled() { |
|---|
| | | return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false; |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨labelç¹å» |
|---|
| | | elLabelDisabled() { |
|---|
| | | return this.labelDisabled !== '' ? this.labelDisabled : this.parentData.labelDisabled !== null ? this.parentData.labelDisabled : |
|---|
| | | false; |
|---|
| | | }, |
|---|
| | | // ç»ä»¶å°ºå¯¸ï¼å¯¹åºsizeçå¼ï¼é»è®¤å¼ä¸º21px |
|---|
| | | elSize() { |
|---|
| | | return this.size ? this.size : (this.parentData.size ? this.parentData.size : 21); |
|---|
| | | }, |
|---|
| | | // ç»ä»¶çå¾éå¾æ ç尺寸ï¼é»è®¤12px |
|---|
| | | elIconSize() { |
|---|
| | | return this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 12); |
|---|
| | | }, |
|---|
| | | // ç»ä»¶éä¸æ¿æ´»æ¶çé¢è² |
|---|
| | | elActiveColor() { |
|---|
| | | return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff'); |
|---|
| | | }, |
|---|
| | | // ç»ä»¶éæªä¸æ¿æ´»æ¶çé¢è² |
|---|
| | | elInactiveColor() { |
|---|
| | | return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor : |
|---|
| | | '#c8c9cc'); |
|---|
| | | }, |
|---|
| | | // labelçé¢è² |
|---|
| | | elLabelColor() { |
|---|
| | | return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266') |
|---|
| | | }, |
|---|
| | | // ç»ä»¶çå½¢ç¶ |
|---|
| | | elShape() { |
|---|
| | | return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle'); |
|---|
| | | }, |
|---|
| | | // labelå¤§å° |
|---|
| | | elLabelSize() { |
|---|
| | | return uni.$u.addUnit(this.labelSize ? this.labelSize : (this.parentData.labelSize ? this.parentData.labelSize : |
|---|
| | | '15')) |
|---|
| | | }, |
|---|
| | | elIconColor() { |
|---|
| | | const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor : |
|---|
| | | '#ffffff'); |
|---|
| | | // å¾æ çé¢è² |
|---|
| | | if (this.elDisabled) { |
|---|
| | | // disabledç¶æä¸ï¼å·²å¾éçcheckboxå¾æ æ¹ä¸ºelInactiveColor |
|---|
| | | return this.isChecked ? this.elInactiveColor : 'transparent' |
|---|
| | | } else { |
|---|
| | | return this.isChecked ? iconColor : 'transparent' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | iconClasses() { |
|---|
| | | let classes = [] |
|---|
| | | // ç»ä»¶çå½¢ç¶ |
|---|
| | | classes.push('u-checkbox__icon-wrap--' + this.elShape) |
|---|
| | | if (this.elDisabled) { |
|---|
| | | classes.push('u-checkbox__icon-wrap--disabled') |
|---|
| | | } |
|---|
| | | if (this.isChecked && this.elDisabled) { |
|---|
| | | classes.push('u-checkbox__icon-wrap--disabled--checked') |
|---|
| | | } |
|---|
| | | // æ¯ä»å®ï¼å¤´æ¡å°ç¨åºæ æ³å¨æç»å®ä¸ä¸ªæ°ç»ç±»åï¼å¦å解æåºæ¥çç»æä¼å¸¦æ","ï¼è导è´å¤±æ |
|---|
| | | // #ifdef MP-ALIPAY || MP-TOUTIAO |
|---|
| | | classes = classes.join(' ') |
|---|
| | | // #endif |
|---|
| | | return classes |
|---|
| | | }, |
|---|
| | | iconWrapStyle() { |
|---|
| | | // checkboxçæ´ä½æ ·å¼ |
|---|
| | | const style = {} |
|---|
| | | style.backgroundColor = this.isChecked && !this.elDisabled ? this.elActiveColor : '#ffffff' |
|---|
| | | style.borderColor = this.isChecked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor |
|---|
| | | style.width = uni.$u.addUnit(this.elSize) |
|---|
| | | style.height = uni.$u.addUnit(this.elSize) |
|---|
| | | // å¦ææ¯å¾æ å¨å³è¾¹çè¯ï¼ç§»é¤å®çå³è¾¹è· |
|---|
| | | if (this.parentData.iconPlacement === 'right') { |
|---|
| | | style.marginRight = 0 |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | checkboxStyle() { |
|---|
| | | const style = {} |
|---|
| | | if (this.parentData.borderBottom && this.parentData.placement === 'row') { |
|---|
| | | uni.$u.error('æ£æµå°æ¨å°borderBottom设置为trueï¼éè¦åæ¶å°u-checkbox-groupçplacement设置为columnæææ') |
|---|
| | | } |
|---|
| | | // å½ç¶ç»ä»¶è®¾ç½®äºæ¾ç¤ºä¸è¾¹æ¡å¹¶ä¸æåå½¢å¼ä¸ºçºµåæ¶ï¼ç»å
容åè¾¹æ¡ä¹é´å ä¸ä¸å®é´é |
|---|
| | | if (this.parentData.borderBottom && this.parentData.placement === 'column') { |
|---|
| | | style.paddingBottom = '8px' |
|---|
| | | } |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | // æ¯ä»å®å°ç¨åºä¸æ¯æprovide/injectï¼æ以使ç¨è¿ä¸ªæ¹æ³è·åæ´ä¸ªç¶ç»ä»¶ï¼å¨createdå®ä¹ï¼é¿å
循ç¯å¼ç¨ |
|---|
| | | this.updateParentData() |
|---|
| | | if (!this.parent) { |
|---|
| | | uni.$u.error('u-checkboxå¿
é¡»æé
u-checkbox-groupç»ä»¶ä½¿ç¨') |
|---|
| | | } |
|---|
| | | // 设置åå§åæ¶ï¼æ¯å¦é»è®¤éä¸çç¶æï¼ç¶ç»ä»¶u-checkbox-groupçvalueå¯è½æ¯arrayï¼æ以é¢å¤å¤æ |
|---|
| | | if (this.checked) { |
|---|
| | | this.isChecked = true |
|---|
| | | } else if (uni.$u.test.array(this.parentData.value)) { |
|---|
| | | // æ¥æ¾æ°ç»æ¯æ¯å¦åå¨this.nameå
ç´ å¼ |
|---|
| | | this.isChecked = this.parentData.value.some(item => { |
|---|
| | | return item === this.name |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | updateParentData() { |
|---|
| | | this.getParentData('u-checkbox-group') |
|---|
| | | }, |
|---|
| | | // 横å两端æåæ¶ï¼ç¹å»ç»ä»¶å³å¯è§¦åéä¸äºä»¶ |
|---|
| | | wrapperClickHandler(e) { |
|---|
| | | this.parentData.iconPlacement === 'right' && this.iconClickHandler(e) |
|---|
| | | }, |
|---|
| | | // ç¹å»å¾æ |
|---|
| | | iconClickHandler(e) { |
|---|
| | | this.preventEvent(e) |
|---|
| | | // å¦ææ´ä½è¢«ç¦ç¨ï¼ä¸å
许被ç¹å» |
|---|
| | | if (!this.elDisabled) { |
|---|
| | | this.setRadioCheckedStatus() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ç¹å»label |
|---|
| | | labelClickHandler(e) { |
|---|
| | | this.preventEvent(e) |
|---|
| | | // å¦ææé®æ´ä½è¢«ç¦ç¨æè
label被ç¦ç¨ï¼åä¸å
许ç¹å»æåä¿®æ¹ç¶æ |
|---|
| | | if (!this.elLabelDisabled && !this.elDisabled) { |
|---|
| | | this.setRadioCheckedStatus() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emitEvent() { |
|---|
| | | this.$emit('change', this.isChecked) |
|---|
| | | // å°è¯è°ç¨u-formçéªè¯æ¹æ³ï¼è¿è¡ä¸å®å»¶è¿ï¼å¦å微信å°ç¨åºæ´æ°å¯è½ä¼ä¸åæ¶ |
|---|
| | | this.$nextTick(() => { |
|---|
| | | uni.$u.formValidate(this, 'change') |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ¹åç»ä»¶éä¸ç¶æ |
|---|
| | | // è¿éçæ¹åçä¾æ®æ¯ï¼æ´æ¹æ¬ç»ä»¶çcheckedå¼ä¸ºtrueï¼åæ¶éè¿ç¶ç»ä»¶éåææu-checkboxå®ä¾ |
|---|
| | | // å°æ¬ç»ä»¶å¤çå
¶ä»u-checkboxçcheckedé½è®¾ç½®ä¸ºfalse(é½è¢«åæ¶éä¸ç¶æ)ï¼å èåªå©ä¸ä¸ä¸ªä¸ºéä¸ç¶æ |
|---|
| | | setRadioCheckedStatus() { |
|---|
| | | // å°æ¬ç»ä»¶æ 记为ä¸åæ¥ç¸åçç¶æ |
|---|
| | | this.isChecked = !this.isChecked |
|---|
| | | this.emitEvent() |
|---|
| | | typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | checked(){ |
|---|
| | | this.isChecked = this.checked |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | $u-checkbox-icon-wrap-margin-right:6px !default; |
|---|
| | | $u-checkbox-icon-wrap-font-size:6px !default; |
|---|
| | | $u-checkbox-icon-wrap-border-width:1px !default; |
|---|
| | | $u-checkbox-icon-wrap-border-color:#c8c9cc !default; |
|---|
| | | $u-checkbox-icon-wrap-icon-line-height:0 !default; |
|---|
| | | $u-checkbox-icon-wrap-circle-border-radius:100% !default; |
|---|
| | | $u-checkbox-icon-wrap-square-border-radius:3px !default; |
|---|
| | | $u-checkbox-icon-wrap-checked-color:#fff !default; |
|---|
| | | $u-checkbox-icon-wrap-checked-background-color:red !default; |
|---|
| | | $u-checkbox-icon-wrap-checked-border-color:#2979ff !default; |
|---|
| | | $u-checkbox-icon-wrap-disabled-background-color:#ebedf0 !default; |
|---|
| | | $u-checkbox-icon-wrap-disabled-checked-color:#c8c9cc !default; |
|---|
| | | $u-checkbox-label-margin-left:5px !default; |
|---|
| | | $u-checkbox-label-margin-right:12px !default; |
|---|
| | | $u-checkbox-label-color:$u-content-color !default; |
|---|
| | | $u-checkbox-label-font-size:15px !default; |
|---|
| | | $u-checkbox-label-disabled-color:#c8c9cc !default; |
|---|
| | | |
|---|
| | | .u-checkbox { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | @include flex(row); |
|---|
| | | /* #endif */ |
|---|
| | | overflow: hidden; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &-label--left { |
|---|
| | | flex-direction: row |
|---|
| | | } |
|---|
| | | |
|---|
| | | &-label--right { |
|---|
| | | flex-direction: row-reverse; |
|---|
| | | justify-content: space-between |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon-wrap { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | // nvueä¸ï¼border-colorè¿æ¸¡æé®é¢ |
|---|
| | | transition-property: border-color, background-color, color; |
|---|
| | | transition-duration: 0.2s; |
|---|
| | | /* #endif */ |
|---|
| | | color: $u-content-color; |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | color: transparent; |
|---|
| | | text-align: center; |
|---|
| | | margin-right: $u-checkbox-icon-wrap-margin-right; |
|---|
| | | |
|---|
| | | font-size: $u-checkbox-icon-wrap-font-size; |
|---|
| | | border-width: $u-checkbox-icon-wrap-border-width; |
|---|
| | | border-color: $u-checkbox-icon-wrap-border-color; |
|---|
| | | border-style: solid; |
|---|
| | | |
|---|
| | | /* #ifdef MP-TOUTIAO */ |
|---|
| | | // 头æ¡å°ç¨åºå
¼å®¹æ§é®é¢ï¼éè¦è®¾ç½®è¡é«ä¸º0ï¼å¦åå¾æ åä¸ |
|---|
| | | &__icon { |
|---|
| | | line-height: $u-checkbox-icon-wrap-icon-line-height; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | &--circle { |
|---|
| | | border-radius: $u-checkbox-icon-wrap-circle-border-radius; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--square { |
|---|
| | | border-radius: $u-checkbox-icon-wrap-square-border-radius; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--checked { |
|---|
| | | color: $u-checkbox-icon-wrap-checked-color; |
|---|
| | | background-color: $u-checkbox-icon-wrap-checked-background-color; |
|---|
| | | border-color: $u-checkbox-icon-wrap-checked-border-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--disabled { |
|---|
| | | background-color: $u-checkbox-icon-wrap-disabled-background-color !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--disabled--checked { |
|---|
| | | color: $u-checkbox-icon-wrap-disabled-checked-color !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__label { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | word-wrap: break-word; |
|---|
| | | /* #endif */ |
|---|
| | | margin-left: $u-checkbox-label-margin-left; |
|---|
| | | margin-right: $u-checkbox-label-margin-right; |
|---|
| | | color: $u-checkbox-label-color; |
|---|
| | | font-size: $u-checkbox-label-font-size; |
|---|
| | | |
|---|
| | | &--disabled { |
|---|
| | | color: $u-checkbox-label-disabled-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | percentage: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.circleProgress.percentage |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-circle-progress"> |
|---|
| | | <view class="u-circle-progress__left"> |
|---|
| | | <view |
|---|
| | | class="u-circle-progress__left__circle" |
|---|
| | | :style="[leftSyle]" |
|---|
| | | ref="left-circle" |
|---|
| | | > |
|---|
| | | |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | class="u-circle-progress__right" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-circle-progress__right__circle" |
|---|
| | | ref="right-circle" |
|---|
| | | :style="[rightSyle]" |
|---|
| | | > |
|---|
| | | |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="u-circle-progress__circle"> |
|---|
| | | |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const animation = uni.requireNativePlugin('animation') |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * CircleProgress åå½¢è¿åº¦æ¡ TODO: å¾
å®å |
|---|
| | | * @description å±ç¤ºæä½æä»»å¡çå½åè¿åº¦ï¼æ¯å¦ä¸ä¼ æ件ï¼æ¯ä¸ä¸ªåå½¢çè¿åº¦ç¯ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/circleProgress.html |
|---|
| | | * @property {String | Number} percentage åç¯è¿åº¦ç¾åæ¯å¼ï¼ä¸ºæ°å¼ç±»åï¼0-100 (é»è®¤ 30 ) |
|---|
| | | * @example |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-circle-progress', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | leftBorderColor: 'rgb(200, 200, 200)', |
|---|
| | | rightBorderColor: 'rgb(200, 200, 200)', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | leftSyle() { |
|---|
| | | const style = {} |
|---|
| | | style.borderTopColor = this.leftBorderColor |
|---|
| | | style.borderRightColor = this.leftBorderColor |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | rightSyle() { |
|---|
| | | const style = {} |
|---|
| | | style.borderLeftColor = this.rightBorderColor |
|---|
| | | style.borderBottomColor = this.rightBorderColor |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | uni.$u.sleep().then(() => { |
|---|
| | | this.rightBorderColor = 'rgb(66, 185, 131)' |
|---|
| | | // this.init() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | animation.transition(this.$refs['right-circle'].ref, { |
|---|
| | | styles: { |
|---|
| | | transform: 'rotate(45deg)', |
|---|
| | | transformOrigin: 'center center' |
|---|
| | | }, |
|---|
| | | }, () => { |
|---|
| | | this.rightBorderColor = 'rgb(66, 185, 131)' |
|---|
| | | // animation.transition(this.$refs['right-circle'].ref, { |
|---|
| | | // styles: { |
|---|
| | | // transform: 'rotate(225deg)', |
|---|
| | | // transformOrigin: 'center center' |
|---|
| | | // }, |
|---|
| | | // duration: 3000, |
|---|
| | | // }, () => { |
|---|
| | | // animation.transition(this.$refs['left-circle'].ref, { |
|---|
| | | // styles: { |
|---|
| | | // transform: 'rotate(45deg)', |
|---|
| | | // transformOrigin: 'center center' |
|---|
| | | // }, |
|---|
| | | // }, () => { |
|---|
| | | // this.leftBorderColor = 'rgb(66, 185, 131)' |
|---|
| | | // animation.transition(this.$refs['left-circle'].ref, { |
|---|
| | | // styles: { |
|---|
| | | // transform: 'rotate(225deg)', |
|---|
| | | // transformOrigin: 'center center' |
|---|
| | | // }, |
|---|
| | | // duration: 1500, |
|---|
| | | // }, () => { |
|---|
| | | |
|---|
| | | // }) |
|---|
| | | // }) |
|---|
| | | // }) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-circle-progress { |
|---|
| | | @include flex(row); |
|---|
| | | position: relative; |
|---|
| | | border-radius: 100px; |
|---|
| | | height: 100px; |
|---|
| | | width: 100px; |
|---|
| | | // transform: rotate(0deg); |
|---|
| | | // background-color: rgb(66, 185, 131); |
|---|
| | | background-color: rgb(200, 200, 200); |
|---|
| | | overflow: hidden; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | &__circle { |
|---|
| | | border-radius: 100px; |
|---|
| | | height: 90px; |
|---|
| | | width: 90px; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | | background-color: rgb(255, 255, 255); |
|---|
| | | left: 50px; |
|---|
| | | top: 50px; |
|---|
| | | position: absolute; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__left { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | width: 50px; |
|---|
| | | height: 100px; |
|---|
| | | overflow: hidden; |
|---|
| | | box-sizing: border-box; |
|---|
| | | // background-color: rgb(66, 185, 131); |
|---|
| | | // background-color: rgb(200, 200, 200); |
|---|
| | | // transform-origin: left center; |
|---|
| | | |
|---|
| | | &__circle { |
|---|
| | | box-sizing: border-box; |
|---|
| | | // background-color: red; |
|---|
| | | border-left-color: transparent; |
|---|
| | | border-bottom-color: transparent; |
|---|
| | | border-top-left-radius: 50px; |
|---|
| | | border-top-right-radius: 50px; |
|---|
| | | border-bottom-right-radius: 50px; |
|---|
| | | // border-left-color: rgb(66, 185, 131); |
|---|
| | | // border-bottom-color: rgb(66, 185, 131); |
|---|
| | | border-top-color: rgb(66, 185, 131); |
|---|
| | | border-right-color: rgb(66, 185, 131); |
|---|
| | | border-width: 5px; |
|---|
| | | width: 100px; |
|---|
| | | height: 100px; |
|---|
| | | transform: rotate(225deg); |
|---|
| | | // border-radius: 100px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__right { |
|---|
| | | position: absolute; |
|---|
| | | right: 0; |
|---|
| | | width: 50px; |
|---|
| | | height: 100px; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | &__circle { |
|---|
| | | position: absolute; |
|---|
| | | right: 0; |
|---|
| | | box-sizing: border-box; |
|---|
| | | // background-color: red; |
|---|
| | | border-top-color: transparent; |
|---|
| | | border-right-color: transparent; |
|---|
| | | border-top-left-radius: 50px; |
|---|
| | | border-bottom-left-radius: 50px; |
|---|
| | | border-bottom-right-radius: 50px; |
|---|
| | | // border-left-color: rgb(66, 185, 131); |
|---|
| | | // border-bottom-color: rgb(66, 185, 131); |
|---|
| | | border-left-color: rgb(200, 200, 200); |
|---|
| | | border-bottom-color: rgb(200, 200, 200); |
|---|
| | | border-width: 5px; |
|---|
| | | width: 100px; |
|---|
| | | height: 100px; |
|---|
| | | transform: rotate(45deg); |
|---|
| | | transform-origin: center center; |
|---|
| | | // border-radius: 100px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ大è¾å
¥é¿åº¦ |
|---|
| | | maxlength: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.codeInput.maxlength |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¨åç¹å¡«å
|
|---|
| | | dot: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.codeInput.dot |
|---|
| | | }, |
|---|
| | | // æ¾ç¤ºæ¨¡å¼ï¼box-çå模å¼ï¼line-åºé¨æ¨ªçº¿æ¨¡å¼ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.codeInput.mode |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç»è¾¹æ¡ |
|---|
| | | hairline: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.codeInput.hairline |
|---|
| | | }, |
|---|
| | | // å符é´çè·ç¦» |
|---|
| | | space: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.codeInput.space |
|---|
| | | }, |
|---|
| | | // é¢ç½®å¼ |
|---|
| | | value: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.codeInput.value |
|---|
| | | }, |
|---|
| | | // æ¯å¦èªå¨è·åç¦ç¹ |
|---|
| | | focus: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.codeInput.focus |
|---|
| | | }, |
|---|
| | | // åä½æ¯å¦å ç² |
|---|
| | | bold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.codeInput.bold |
|---|
| | | }, |
|---|
| | | // åä½é¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.codeInput.color |
|---|
| | | }, |
|---|
| | | // åä½å¤§å° |
|---|
| | | fontSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.codeInput.fontSize |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡ç大å°ï¼å®½çäºé« |
|---|
| | | size: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.codeInput.size |
|---|
| | | }, |
|---|
| | | // æ¯å¦éèåçé®çï¼å¦ææ³ç¨èªå®ä¹é®ççè¯ï¼é设置æ¤åæ°ä¸ºtrue |
|---|
| | | disabledKeyboard: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.codeInput.disabledKeyboard |
|---|
| | | }, |
|---|
| | | // è¾¹æ¡å线æ¡é¢è² |
|---|
| | | borderColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.codeInput.borderColor |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦æ¢è¾å
¥"."ç¬¦å· |
|---|
| | | disabledDot: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.codeInput.disabledDot |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-code-input"> |
|---|
| | | <view |
|---|
| | | class="u-code-input__item" |
|---|
| | | :style="[itemStyle(index)]" |
|---|
| | | v-for="(item, index) in codeLength" |
|---|
| | | :key="index" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-code-input__item__dot" |
|---|
| | | v-if="dot && codeArray.length > index" |
|---|
| | | ></view> |
|---|
| | | <text |
|---|
| | | v-else |
|---|
| | | :style="{ |
|---|
| | | fontSize: $u.addUnit(fontSize), |
|---|
| | | fontWeight: bold ? 'bold' : 'normal', |
|---|
| | | color: color |
|---|
| | | }" |
|---|
| | | >{{codeArray[index]}}</text> |
|---|
| | | <view |
|---|
| | | class="u-code-input__item__line" |
|---|
| | | v-if="mode === 'line'" |
|---|
| | | :style="[lineStyle]" |
|---|
| | | ></view> |
|---|
| | | <!-- #ifndef APP-PLUS --> |
|---|
| | | <view v-if="isFocus && codeArray.length === index" :style="{backgroundColor: color}" class="u-code-input__item__cursor"></view> |
|---|
| | | <!-- #endif --> |
|---|
| | | </view> |
|---|
| | | <input |
|---|
| | | :disabled="disabledKeyboard" |
|---|
| | | type="number" |
|---|
| | | :focus="focus" |
|---|
| | | :value="inputValue" |
|---|
| | | :maxlength="maxlength" |
|---|
| | | class="u-code-input__input" |
|---|
| | | @input="inputHandler" |
|---|
| | | :style="{ |
|---|
| | | height: $u.addUnit(size) |
|---|
| | | }" |
|---|
| | | @focus="isFocus = true" |
|---|
| | | @blur="isFocus = false" |
|---|
| | | /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * CodeInput éªè¯ç è¾å
¥ |
|---|
| | | * @description 该ç»ä»¶ä¸è¬ç¨äºéªè¯ç¨æ·çä¿¡éªè¯ç çåºæ¯ï¼ä¹å¯ä»¥ç»åuViewçé®çç»ä»¶ä½¿ç¨ |
|---|
| | | * @tutorial https://www.uviewui.com/components/codeInput.html |
|---|
| | | * @property {String | Number} maxlength æ大è¾å
¥é¿åº¦ ï¼é»è®¤ 6 ï¼ |
|---|
| | | * @property {Boolean} dot æ¯å¦ç¨åç¹å¡«å
ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} mode æ¾ç¤ºæ¨¡å¼ï¼box-çå模å¼ï¼line-åºé¨æ¨ªçº¿æ¨¡å¼ ï¼é»è®¤ 'box' ï¼ |
|---|
| | | * @property {Boolean} hairline æ¯å¦ç»è¾¹æ¡ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String | Number} space å符é´çè·ç¦» ï¼é»è®¤ 10 ï¼ |
|---|
| | | * @property {String | Number} value é¢ç½®å¼ |
|---|
| | | * @property {Boolean} focus æ¯å¦èªå¨è·åç¦ç¹ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} bold åä½åè¾å
¥æ¨ªçº¿æ¯å¦å ç² ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} color åä½é¢è² ï¼é»è®¤ '#606266' ï¼ |
|---|
| | | * @property {String | Number} fontSize åä½å¤§å°ï¼åä½px ï¼é»è®¤ 18 ï¼ |
|---|
| | | * @property {String | Number} size è¾å
¥æ¡ç大å°ï¼å®½çäºé« ï¼é»è®¤ 35 ï¼ |
|---|
| | | * @property {Boolean} disabledKeyboard æ¯å¦éèåçé®çï¼å¦ææ³ç¨èªå®ä¹é®ççè¯ï¼é设置æ¤åæ°ä¸ºtrue ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} borderColor è¾¹æ¡å线æ¡é¢è² ï¼é»è®¤ '#c9cacc' ï¼ |
|---|
| | | * @property {Boolean} disabledDot æ¯å¦ç¦æ¢è¾å
¥"."ç¬¦å· ï¼é»è®¤ true ï¼ |
|---|
| | | * |
|---|
| | | * @event {Function} change è¾å
¥å
容åçæ¹åæ¶è§¦åï¼å
·ä½è§ä¸æ¹è¯´æ valueï¼å½åè¾å
¥çå¼ |
|---|
| | | * @event {Function} finish è¾å
¥å符个æ°è¾¾maxlengthå¼æ¶è§¦åï¼è§ä¸æ¹è¯´æ valueï¼å½åè¾å
¥çå¼ |
|---|
| | | * @example <u-code-input v-model="value4" :focus="true"></u-code-input> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-code-input', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | inputValue: '', |
|---|
| | | isFocus: this.focus |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | value: { |
|---|
| | | immediate: true, |
|---|
| | | handler(val) { |
|---|
| | | // 转为å符串ï¼è¶
åºé¨åæªæ |
|---|
| | | this.inputValue = String(val).substring(0, this.maxlength) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // æ ¹æ®é¿åº¦ï¼å¾ªç¯è¾å
¥æ¡ç个æ°ï¼å 为头æ¡å°ç¨åºæ°å¼ä¸è½ç¨äºv-for |
|---|
| | | codeLength() { |
|---|
| | | return new Array(Number(this.maxlength)) |
|---|
| | | }, |
|---|
| | | // 循ç¯itemçæ ·å¼ |
|---|
| | | itemStyle() { |
|---|
| | | return index => { |
|---|
| | | const addUnit = uni.$u.addUnit |
|---|
| | | const style = { |
|---|
| | | width: addUnit(this.size), |
|---|
| | | height: addUnit(this.size) |
|---|
| | | } |
|---|
| | | // çå模å¼ä¸ï¼éè¦é¢å¤è¿è¡å¤ç |
|---|
| | | if (this.mode === 'box') { |
|---|
| | | // 设置çåçè¾¹æ¡ï¼å¦ææ¯ç»è¾¹æ¡ï¼å设置为0.5px宽度 |
|---|
| | | style.border = `${this.hairline ? 0.5 : 1}px solid ${this.borderColor}` |
|---|
| | | // å¦æçåé´è·ä¸º0çè¯ |
|---|
| | | if (uni.$u.getPx(this.space) === 0) { |
|---|
| | | // ç»ç¬¬ä¸åæåä¸ä¸ªçå设置åè§ |
|---|
| | | if (index === 0) { |
|---|
| | | style.borderTopLeftRadius = '3px' |
|---|
| | | style.borderBottomLeftRadius = '3px' |
|---|
| | | } |
|---|
| | | if (index === this.codeLength.length - 1) { |
|---|
| | | style.borderTopRightRadius = '3px' |
|---|
| | | style.borderBottomRightRadius = '3px' |
|---|
| | | } |
|---|
| | | // æåä¸ä¸ªçåçå³è¾¹æ¡éè¦ä¿ç |
|---|
| | | if (index !== this.codeLength.length - 1) { |
|---|
| | | style.borderRight = 'none' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (index !== this.codeLength.length - 1) { |
|---|
| | | // 设置éªè¯ç å符ä¹é´çè·ç¦»ï¼éè¿margin-right设置ï¼æåä¸ä¸ªå符ï¼æ éå³è¾¹æ¡ |
|---|
| | | style.marginRight = addUnit(this.space) |
|---|
| | | } else { |
|---|
| | | // æåä¸ä¸ªçåçæè¾¹æ¡éè¦ä¿ç |
|---|
| | | style.marginRight = 0 |
|---|
| | | } |
|---|
| | | |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å°è¾å
¥çå¼ï¼è½¬ä¸ºæ°ç»ï¼ç»itemåéæ¶ï¼æ ¹æ®å½åçç´¢å¼æ¾ç¤ºæ°ç»çå
ç´ |
|---|
| | | codeArray() { |
|---|
| | | return String(this.inputValue).split('') |
|---|
| | | }, |
|---|
| | | // ä¸å线模å¼ä¸ï¼æ¨ªçº¿çæ ·å¼ |
|---|
| | | lineStyle() { |
|---|
| | | const style = {} |
|---|
| | | style.height = this.hairline ? '2px' : '4px' |
|---|
| | | style.width = uni.$u.addUnit(this.size) |
|---|
| | | // 线æ¡æ¨¡å¼ä¸ï¼èæ¯è²å³ä¸ºè¾¹æ¡é¢è² |
|---|
| | | style.backgroundColor = this.borderColor |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // çå¬è¾å
¥æ¡çå¼åçåå |
|---|
| | | inputHandler(e) { |
|---|
| | | const value = e.detail.value |
|---|
| | | this.inputValue = value |
|---|
| | | // æ¯å¦å
许è¾å
¥â.âç¬¦å· |
|---|
| | | if(this.disabledDot) { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.inputValue = value.replace('.', '') |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // æªè¾¾å°maxlengthä¹åï¼åéchangeäºä»¶ï¼è¾¾å°ååéfinishäºä»¶ |
|---|
| | | this.$emit('change', value) |
|---|
| | | // ä¿®æ¹éè¿v-modelååç»å®çå¼ |
|---|
| | | this.$emit('input', value) |
|---|
| | | // è¾¾å°ç¨æ·æå®è¾å
¥é¿åº¦æ¶ï¼ååºå®æäºä»¶ |
|---|
| | | if (String(value).length >= Number(this.maxlength)) { |
|---|
| | | this.$emit('finish', value) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | $u-code-input-cursor-width: 1px; |
|---|
| | | $u-code-input-cursor-height: 40%; |
|---|
| | | $u-code-input-cursor-animation-duration: 1s; |
|---|
| | | $u-code-input-cursor-animation-name: u-cursor-flicker; |
|---|
| | | |
|---|
| | | .u-code-input { |
|---|
| | | @include flex; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: 15px; |
|---|
| | | color: $u-content-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__dot { |
|---|
| | | width: 7px; |
|---|
| | | height: 7px; |
|---|
| | | border-radius: 100px; |
|---|
| | | background-color: $u-content-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__line { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | height: 4px; |
|---|
| | | border-radius: 100px; |
|---|
| | | width: 40px; |
|---|
| | | background-color: $u-content-color; |
|---|
| | | } |
|---|
| | | /* #ifndef APP-PLUS */ |
|---|
| | | &__cursor { |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%,-50%); |
|---|
| | | width: $u-code-input-cursor-width; |
|---|
| | | height: $u-code-input-cursor-height; |
|---|
| | | animation: $u-code-input-cursor-animation-duration u-cursor-flicker infinite; |
|---|
| | | } |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__input { |
|---|
| | | // ä¹æ以éè¦inputè¾å
¥æ¡ï¼æ¯å 为æå®æè½å¤èµ·é®ç |
|---|
| | | // è¿éå°å®è®¾ç½®ä¸ºä¸¤åçå±å¹å®½åº¦ï¼åå°å·¦è¾¹çä¸å移åºå±å¹ï¼ä¸ºäºä¸è®©ç¨æ·çå°è¾å
¥çå
容 |
|---|
| | | position: absolute; |
|---|
| | | left: -750rpx; |
|---|
| | | width: 1500rpx; |
|---|
| | | top: 0; |
|---|
| | | background-color: transparent; |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifndef APP-PLUS */ |
|---|
| | | @keyframes u-cursor-flicker { |
|---|
| | | 0% { |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | 50% { |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | 100% { |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å计æ¶æ»ç§æ° |
|---|
| | | seconds: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.code.seconds |
|---|
| | | }, |
|---|
| | | // å°æªå¼å§æ¶æ示 |
|---|
| | | startText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.code.startText |
|---|
| | | }, |
|---|
| | | // æ£å¨å计æ¶ä¸çæ示 |
|---|
| | | changeText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.code.changeText |
|---|
| | | }, |
|---|
| | | // å计æ¶ç»ææ¶çæ示 |
|---|
| | | endText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.code.endText |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¨H5å·æ°æå端è¿ååè¿å
¥æ¶ç»§ç»åè®¡æ¶ |
|---|
| | | keepRunning: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.code.keepRunning |
|---|
| | | }, |
|---|
| | | // 为äºåºåå¤ä¸ªé¡µé¢ï¼æè
ä¸ä¸ªé¡µé¢å¤ä¸ªå计æ¶ç»ä»¶æ¬å°åå¨ç继ç»å计æ¶åäº |
|---|
| | | uniqueKey: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.code.uniqueKey |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-code"> |
|---|
| | | <!-- æ¤ç»ä»¶åè½ç±jså®æï¼æ éåhtmlé»è¾ --> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * Code éªè¯ç è¾å
¥æ¡ |
|---|
| | | * @description èèå°ç¨æ·å®é
åééªè¯ç çåºæ¯ï¼å¯è½æ¯ä¸ä¸ªæé®ï¼ä¹å¯è½æ¯ä¸æ®µæåï¼æ示è¯åæä¸åï¼æ以æ¬ç»ä»¶ ä¸æä¾çé¢æ¾ç¤ºï¼åªæä¾æ示è¯ï¼ç±ç¨æ·å°æ示è¯åµå
¥å°å
·ä½çåºæ¯ |
|---|
| | | * @tutorial https://www.uviewui.com/components/code.html |
|---|
| | | * @property {String | Number} seconds å计æ¶æéçç§æ°ï¼é»è®¤ 60 ï¼ |
|---|
| | | * @property {String} startText å¼å§åçæ示è¯ï¼è§å®ç½è¯´æï¼é»è®¤ 'è·åéªè¯ç ' ï¼ |
|---|
| | | * @property {String} changeText å计æ¶æé´çæ示è¯ï¼å¿
须带æåæ¯"x"ï¼è§å®ç½è¯´æï¼é»è®¤ 'Xç§éæ°è·å' ï¼ |
|---|
| | | * @property {String} endText å计ç»æçæ示è¯ï¼è§å®ç½è¯´æï¼é»è®¤ 'éæ°è·å' ï¼ |
|---|
| | | * @property {Boolean} keepRunning æ¯å¦å¨H5å·æ°æå端è¿ååè¿å
¥æ¶ç»§ç»å计æ¶ï¼ é»è®¤false ï¼ |
|---|
| | | * @property {String} uniqueKey 为äºåºåå¤ä¸ªé¡µé¢ï¼æè
ä¸ä¸ªé¡µé¢å¤ä¸ªå计æ¶ç»ä»¶æ¬å°åå¨ç继ç»å计æ¶åäº |
|---|
| | | * |
|---|
| | | * @event {Function} change å计æ¶æé´ï¼æ¯ç§è§¦åä¸æ¬¡ |
|---|
| | | * @event {Function} start å¼å§å计æ¶è§¦å |
|---|
| | | * @event {Function} end ç»æå计æ¶è§¦å |
|---|
| | | * @example <u-code ref="uCode" @change="codeChange" seconds="20"></u-code> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-code", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | secNum: this.seconds, |
|---|
| | | timer: null, |
|---|
| | | canGetCode: true, // æ¯å¦å¯ä»¥æ§è¡éªè¯ç æä½ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.checkKeepRunning() |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | seconds: { |
|---|
| | | immediate: true, |
|---|
| | | handler(n) { |
|---|
| | | this.secNum = n |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | checkKeepRunning() { |
|---|
| | | // è·åä¸ä¸æ¬¡éåºé¡µé¢(H5è¿å
æ¬å·æ°)æ¶çæ¶é´æ³ï¼å¦æ没æä¸æ¬¡çä¿åï¼æ¤å¼å¯è½ä¸ºç©º |
|---|
| | | let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$uCountDownTimestamp')) |
|---|
| | | if(!lastTimestamp) return this.changeEvent(this.startText) |
|---|
| | | // å½åç§çæ¶é´æ³ |
|---|
| | | let nowTimestamp = Math.floor((+ new Date()) / 1000) |
|---|
| | | // å¤æå½åçæ¶é´æ³ï¼æ¯å¦å°äºä¸ä¸æ¬¡çæ¬è¯¥æ设å®ç»æï¼å´æåç»æçæ¶é´æ³ |
|---|
| | | if(this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) { |
|---|
| | | // å©ä½å°æªæ§è¡å®çå计ç§æ° |
|---|
| | | this.secNum = lastTimestamp - nowTimestamp |
|---|
| | | // æ¸
é¤æ¬å°ä¿åçåé |
|---|
| | | uni.removeStorageSync(this.uniqueKey + '_$uCountDownTimestamp') |
|---|
| | | // å¼å§åè®¡æ¶ |
|---|
| | | this.start() |
|---|
| | | } else { |
|---|
| | | // å¦æä¸åå¨éè¦ç»§ç»ä¸ä¸æ¬¡çå计æ¶ï¼æ§è¡æ£å¸¸çé»è¾ |
|---|
| | | this.changeEvent(this.startText) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å¼å§åè®¡æ¶ |
|---|
| | | start() { |
|---|
| | | // é²æ¢å¿«éç¹å»è·åéªè¯ç çæé®è导è´å
é¨äº§çå¤ä¸ªå®æ¶å¨å¯¼è´æ··ä¹± |
|---|
| | | if(this.timer) { |
|---|
| | | clearInterval(this.timer) |
|---|
| | | this.timer = null |
|---|
| | | } |
|---|
| | | this.$emit('start') |
|---|
| | | this.canGetCode = false |
|---|
| | | // è¿éæ¾è¿å¥ï¼æ¯ä¸ºäºä¸å¼å§æ¶å°±æ示ï¼å¦åè¦çsetIntervalç1ç§åæä¼ææ示 |
|---|
| | | this.changeEvent(this.changeText.replace(/x|X/, this.secNum)) |
|---|
| | | this.setTimeToStorage() |
|---|
| | | this.timer = setInterval(() => { |
|---|
| | | if (--this.secNum) { |
|---|
| | | // ç¨å½åå计æ¶çç§æ°æ¿æ¢æ示å符串ä¸ç"x"åæ¯ |
|---|
| | | this.changeEvent(this.changeText.replace(/x|X/, this.secNum)) |
|---|
| | | } else { |
|---|
| | | clearInterval(this.timer) |
|---|
| | | this.timer = null |
|---|
| | | this.changeEvent(this.endText) |
|---|
| | | this.secNum = this.seconds |
|---|
| | | this.$emit('end') |
|---|
| | | this.canGetCode = true |
|---|
| | | } |
|---|
| | | }, 1000) |
|---|
| | | }, |
|---|
| | | // éç½®ï¼å¯ä»¥è®©ç¨æ·å次è·åéªè¯ç |
|---|
| | | reset() { |
|---|
| | | this.canGetCode = true |
|---|
| | | clearInterval(this.timer) |
|---|
| | | this.secNum = this.seconds |
|---|
| | | this.changeEvent(this.endText) |
|---|
| | | }, |
|---|
| | | changeEvent(text) { |
|---|
| | | this.$emit('change', text) |
|---|
| | | }, |
|---|
| | | // ä¿åæ¶é´æ³ï¼ä¸ºäºé²æ¢å计æ¶å°æªç»æï¼H5å·æ°æè
å端çå³ä¸è§è¿åä¸ä¸é¡µåè¿æ¥ |
|---|
| | | setTimeToStorage() { |
|---|
| | | if(!this.keepRunning || !this.timer) return |
|---|
| | | // è®°å½å½åçæ¶é´æ³ï¼ä¸ºäºä¸æ¬¡è¿å
¥é¡µé¢ï¼å¦æè¿å¨å计æ¶å
çè¯ï¼ç»§ç»åè®¡æ¶ |
|---|
| | | // å计æ¶å°æªç»æï¼ç»æ大äº0ï¼å计æ¶å·²ç»å¼å§ï¼å°±ä¼å°äºåå§å¼ï¼å¦æçäºåå§å¼ï¼è¯´æ没æå¼å§å计æ¶ï¼æ éå¤ç |
|---|
| | | if(this.secNum > 0 && this.secNum <= this.seconds) { |
|---|
| | | // è·åå½åæ¶é´æ³(+ new Date()为ç¹æ®åæ³)ï¼é¤ä»¥1000åæç§ï¼åå»é¤å°æ°é¨å |
|---|
| | | let nowTimestamp = Math.floor((+ new Date()) / 1000) |
|---|
| | | // å°æ¬è¯¥ç»ææ¶åçæ¶é´æ³ä¿åèµ·æ¥ => å½åæ¶é´æ³ + å©ä½çç§æ° |
|---|
| | | uni.setStorage({ |
|---|
| | | key: this.uniqueKey + '_$uCountDownTimestamp', |
|---|
| | | data: nowTimestamp + Number(this.secNum) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ç»ä»¶éæ¯çæ¶åï¼æ¸
é¤å®æ¶å¨ï¼å¦åå®æ¶å¨ä¼ç»§ç»åå¨ï¼ç³»ç»ä¸ä¼èªå¨æ¸
é¤ |
|---|
| | | beforeDestroy() { |
|---|
| | | this.setTimeToStorage() |
|---|
| | | clearTimeout(this.timer) |
|---|
| | | this.timer = null |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å ç¶å®¹å¨å®½åº¦çå¤å°çåï¼æ»å为12份 |
|---|
| | | span: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.col.span |
|---|
| | | }, |
|---|
| | | // æå®æ
æ ¼å·¦ä¾§çé´éæ°(æ»12æ ) |
|---|
| | | offset: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.col.offset |
|---|
| | | }, |
|---|
| | | // æ°´å¹³æåæ¹å¼ï¼å¯éå¼ä¸º`start`(æ`flex-start`)ã`end`(æ`flex-end`)ã`center`ã`around`(æ`space-around`)ã`between`(æ`space-between`) |
|---|
| | | justify: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.col.justify |
|---|
| | | }, |
|---|
| | | // åç´å¯¹é½æ¹å¼ï¼å¯éå¼ä¸ºtopãcenterãbottomãstretch |
|---|
| | | align: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.col.align |
|---|
| | | }, |
|---|
| | | // æå对é½æ¹å¼ |
|---|
| | | textAlign: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.col.textAlign |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-col" |
|---|
| | | ref="u-col" |
|---|
| | | :class="[ |
|---|
| | | 'u-col-' + span |
|---|
| | | ]" |
|---|
| | | :style="[colStyle]" |
|---|
| | | @tap="clickHandler" |
|---|
| | | > |
|---|
| | | <slot></slot> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * CodeInput æ
æ ¼ç³»ç»çå |
|---|
| | | * @description 该ç»ä»¶ä¸è¬ç¨äºLayout å¸å± éè¿åºç¡ç 12 åæ ï¼è¿
éç®ä¾¿å°å建å¸å± |
|---|
| | | * @tutorial https://www.uviewui.com/components/Layout.html |
|---|
| | | * @property {String | Number} span æ
æ ¼å æ®çåæ°ï¼æ»12ç份 (é»è®¤ 12 ) |
|---|
| | | * @property {String | Number} offset åæ 左边å移ï¼è®¡ç®æ¹å¼ä¸spanç¸å (é»è®¤ 0 ) |
|---|
| | | * @property {String} justify æ°´å¹³æåæ¹å¼ï¼å¯éå¼ä¸º`start`(æ`flex-start`)ã`end`(æ`flex-end`)ã`center`ã`around`(æ`space-around`)ã`between`(æ`space-between`) (é»è®¤ 'start' ) |
|---|
| | | * @property {String} align åç´å¯¹é½æ¹å¼ï¼å¯éå¼ä¸ºtopãcenterãbottomãstretch (é»è®¤ 'stretch' ) |
|---|
| | | * @property {String} textAlign æå水平对é½æ¹å¼ (é»è®¤ 'left' ) |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * @event {Function} click col被ç¹å»ï¼ä¼é»æ¢äºä»¶å泡å°row |
|---|
| | | * @example <u-col span="3" offset="3" > <view class="demo-layout bg-purple"></view> </u-col> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-col', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | width: 0, |
|---|
| | | parentData: { |
|---|
| | | gutter: 0 |
|---|
| | | }, |
|---|
| | | gridNum: 12 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | uJustify() { |
|---|
| | | if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify |
|---|
| | | else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify |
|---|
| | | else return this.justify |
|---|
| | | }, |
|---|
| | | uAlignItem() { |
|---|
| | | if (this.align == 'top') return 'flex-start' |
|---|
| | | if (this.align == 'bottom') return 'flex-end' |
|---|
| | | else return this.align |
|---|
| | | }, |
|---|
| | | colStyle() { |
|---|
| | | const style = { |
|---|
| | | // è¿éåæ"padding: 0 10px"çå½¢å¼æ¯å 为nvueçéè¦ |
|---|
| | | paddingLeft: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter)/2), |
|---|
| | | paddingRight: uni.$u.addUnit(uni.$u.getPx(this.parentData.gutter)/2), |
|---|
| | | alignItems: this.uAlignItem, |
|---|
| | | justifyContent: this.uJustify, |
|---|
| | | textAlign: this.textAlign, |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | // å¨énvueä¸ï¼ä½¿ç¨ç¾åæ¯å½¢å¼ |
|---|
| | | flex: `0 0 ${100 / this.gridNum * this.span}%`, |
|---|
| | | marginLeft: 100 / 12 * this.offset + '%', |
|---|
| | | // #endif |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // å¨nvueä¸ï¼ç±äºæ æ³ä½¿ç¨ç¾åæ¯åä½ï¼è¿ééè¦è·åç¶ç»ä»¶ç宽度ï¼å计ç®å¾åºè¯¥æ对åºçç¾åæ¯å°ºå¯¸ |
|---|
| | | width: uni.$u.addUnit(Math.floor(this.width / this.gridNum * Number(this.span))), |
|---|
| | | marginLeft: uni.$u.addUnit(Math.floor(this.width / this.gridNum * Number(this.offset))), |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | async init() { |
|---|
| | | // æ¯ä»å®å°ç¨åºä¸æ¯æprovide/injectï¼æ以使ç¨è¿ä¸ªæ¹æ³è·åæ´ä¸ªç¶ç»ä»¶ï¼å¨createdå®ä¹ï¼é¿å
循ç¯å¼ç¨ |
|---|
| | | this.updateParentData() |
|---|
| | | this.width = await this.parent.getComponentWidth() |
|---|
| | | }, |
|---|
| | | updateParentData() { |
|---|
| | | this.getParentData('u-row') |
|---|
| | | }, |
|---|
| | | clickHandler(e) { |
|---|
| | | this.$emit('click'); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-col { |
|---|
| | | padding: 0; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing:border-box; |
|---|
| | | /* #endif */ |
|---|
| | | /* #ifdef MP */ |
|---|
| | | display: block; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | // nvueä¸ç¾åæ¯æ æ |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | .u-col-0 { |
|---|
| | | width: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-1 { |
|---|
| | | width: calc(100%/12); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-2 { |
|---|
| | | width: calc(100%/12 * 2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-3 { |
|---|
| | | width: calc(100%/12 * 3); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-4 { |
|---|
| | | width: calc(100%/12 * 4); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-5 { |
|---|
| | | width: calc(100%/12 * 5); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-6 { |
|---|
| | | width: calc(100%/12 * 6); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-7 { |
|---|
| | | width: calc(100%/12 * 7); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-8 { |
|---|
| | | width: calc(100%/12 * 8); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-9 { |
|---|
| | | width: calc(100%/12 * 9); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-10 { |
|---|
| | | width: calc(100%/12 * 10); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-11 { |
|---|
| | | width: calc(100%/12 * 11); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-col-12 { |
|---|
| | | width: calc(100%/12 * 12); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ é¢ |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.collapseItem.title |
|---|
| | | }, |
|---|
| | | // æ é¢å³ä¾§å
容 |
|---|
| | | value: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.collapseItem.value |
|---|
| | | }, |
|---|
| | | // æ é¢ä¸æ¹çæè¿°ä¿¡æ¯ |
|---|
| | | label: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.collapseItem.label |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨æå é¢æ¿ |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.collapseItem.disabled |
|---|
| | | }, |
|---|
| | | // æ¯å¦å±ç¤ºå³ä¾§ç®å¤´å¹¶å¼å¯ç¹å»åé¦ |
|---|
| | | isLink: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.collapseItem.isLink |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¼å¯ç¹å»åé¦ |
|---|
| | | clickable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.collapseItem.clickable |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå
è¾¹æ¡ |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.collapseItem.border |
|---|
| | | }, |
|---|
| | | // æ é¢ç对é½æ¹å¼ |
|---|
| | | align: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.collapseItem.align |
|---|
| | | }, |
|---|
| | | // å¯ä¸æ è¯ç¬¦ |
|---|
| | | name: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.collapseItem.name |
|---|
| | | }, |
|---|
| | | // æ é¢å·¦ä¾§å¾çï¼å¯ä¸ºç»å¯¹è·¯å¾çå¾çæå
ç½®å¾æ |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.collapseItem.icon |
|---|
| | | }, |
|---|
| | | // é¢æ¿å±å¼æ¶èµ·çè¿æ¸¡æ¶é´ï¼åä½ms |
|---|
| | | duration: { |
|---|
| | | type: Number, |
|---|
| | | default: uni.$u.props.collapseItem.duration |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-collapse-item"> |
|---|
| | | <u-cell |
|---|
| | | :title="title" |
|---|
| | | :value="value" |
|---|
| | | :label="label" |
|---|
| | | :icon="icon" |
|---|
| | | :isLink="isLink" |
|---|
| | | :clickable="clickable" |
|---|
| | | :border="parentData.border && showBorder" |
|---|
| | | @click="clickHandler" |
|---|
| | | :arrowDirection="expanded ? 'up' : 'down'" |
|---|
| | | :disabled="disabled" |
|---|
| | | > |
|---|
| | | <!-- #ifndef MP-WEIXIN --> |
|---|
| | | <!-- 微信å°ç¨åºä¸æ¯æï¼å 为微信ä¸ä¸æ¯æ <slot name="title" slot="title" />çåæ³ --> |
|---|
| | | <template slot="title"> |
|---|
| | | <slot name="title"></slot> |
|---|
| | | </template> |
|---|
| | | <template slot="icon"> |
|---|
| | | <slot name="icon"></slot> |
|---|
| | | </template> |
|---|
| | | <template slot="value"> |
|---|
| | | <slot name="value"></slot> |
|---|
| | | </template> |
|---|
| | | <template slot="right-icon"> |
|---|
| | | <slot name="right-icon"></slot> |
|---|
| | | </template> |
|---|
| | | <!-- #endif --> |
|---|
| | | </u-cell> |
|---|
| | | <view |
|---|
| | | class="u-collapse-item__content" |
|---|
| | | :animation="animationData" |
|---|
| | | ref="animation" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-collapse-item__content__text content-class" |
|---|
| | | :id="elId" |
|---|
| | | :ref="elId" |
|---|
| | | ><slot /></view> |
|---|
| | | </view> |
|---|
| | | <u-line v-if="parentData.border"></u-line> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const animation = uni.requireNativePlugin('animation') |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * collapseItem æå é¢æ¿Item |
|---|
| | | * @description éè¿æå é¢æ¿æ¶çº³å
容åºåï¼æé
u-collapse使ç¨ï¼ |
|---|
| | | * @tutorial https://www.uviewui.com/components/collapse.html |
|---|
| | | * @property {String} title æ é¢ |
|---|
| | | * @property {String} value æ é¢å³ä¾§å
容 |
|---|
| | | * @property {String} label æ é¢ä¸æ¹çæè¿°ä¿¡æ¯ |
|---|
| | | * @property {Boolean} disbled æ¯å¦ç¦ç¨æå é¢æ¿ ( é»è®¤ false ) |
|---|
| | | * @property {Boolean} isLink æ¯å¦å±ç¤ºå³ä¾§ç®å¤´å¹¶å¼å¯ç¹å»åé¦ ( é»è®¤ true ) |
|---|
| | | * @property {Boolean} clickable æ¯å¦å¼å¯ç¹å»åé¦ ( é»è®¤ true ) |
|---|
| | | * @property {Boolean} border æ¯å¦æ¾ç¤ºå
è¾¹æ¡ ( é»è®¤ true ) |
|---|
| | | * @property {String} align æ é¢ç对é½æ¹å¼ ( é»è®¤ 'left' ) |
|---|
| | | * @property {String | Number} name å¯ä¸æ è¯ç¬¦ |
|---|
| | | * @property {String} icon æ é¢å·¦ä¾§å¾çï¼å¯ä¸ºç»å¯¹è·¯å¾çå¾çæå
ç½®å¾æ |
|---|
| | | * @event {Function} change æ个item被æå¼æè
æ¶èµ·æ¶è§¦å |
|---|
| | | * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-collapse-item", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | elId: uni.$u.guid(), |
|---|
| | | // uni.createAnimationç导åºæ°æ® |
|---|
| | | animationData: {}, |
|---|
| | | // æ¯å¦å±å¼ç¶æ |
|---|
| | | expanded: false, |
|---|
| | | // æ ¹æ®expandedç¡®å®æ¯å¦æ¾ç¤ºborderï¼ä¸ºäºæ§å¶å±å¼æ¶ï¼cellçä¸å线æ´å¥½çæ¾ç¤ºææï¼è¿è¡ä¸å®æ¶é´çå»¶æ¶ |
|---|
| | | showBorder: false, |
|---|
| | | // æ¯å¦å¨ç»ä¸ï¼å¦ææ¯åä¸å
许继ç»è§¦åç¹å» |
|---|
| | | animating: false, |
|---|
| | | // ç¶ç»ä»¶u-collapseçåæ° |
|---|
| | | parentData: { |
|---|
| | | accordion: false, |
|---|
| | | border: false |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | expanded(n) { |
|---|
| | | clearTimeout(this.timer) |
|---|
| | | this.timer = null |
|---|
| | | // è¿éæ ¹æ®expandedçå¼æ¥è¿è¡ä¸å®ç延æ¶ï¼æ¯ä¸ºäºcellçä¸å线æ´å¥½çæ¾ç¤ºææ |
|---|
| | | this.timer = setTimeout(() => { |
|---|
| | | this.showBorder = n |
|---|
| | | }, n ? 10 : 290) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å¼æ¥è·åå
容ï¼æè
å¨æä¿®æ¹äºå
容æ¶ï¼éè¦éæ°åå§å |
|---|
| | | init() { |
|---|
| | | // åå§åæ°æ® |
|---|
| | | this.updateParentData() |
|---|
| | | if (!this.parent) { |
|---|
| | | return uni.$u.error('u-collapse-itemå¿
é¡»è¦æé
u-collapseç»ä»¶ä½¿ç¨') |
|---|
| | | } |
|---|
| | | const { |
|---|
| | | value, |
|---|
| | | accordion, |
|---|
| | | children = [] |
|---|
| | | } = this.parent |
|---|
| | | |
|---|
| | | if (accordion) { |
|---|
| | | if (uni.$u.test.array(value)) { |
|---|
| | | return uni.$u.error('æé£ç´æ¨¡å¼ä¸ï¼u-collapseç»ä»¶çvalueåæ°ä¸è½ä¸ºæ°ç»') |
|---|
| | | } |
|---|
| | | this.expanded = this.name == value |
|---|
| | | } else { |
|---|
| | | if (!uni.$u.test.array(value) && value !== null) { |
|---|
| | | return uni.$u.error('éæé£ç´æ¨¡å¼ä¸ï¼u-collapseç»ä»¶çvalueåæ°å¿
须为æ°ç»') |
|---|
| | | } |
|---|
| | | this.expanded = (value || []).some(item => item == this.name) |
|---|
| | | } |
|---|
| | | // 设置ç»ä»¶çå±å¼ææ¶èµ·ç¶æ |
|---|
| | | this.$nextTick(function() { |
|---|
| | | this.setContentAnimate() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | updateParentData() { |
|---|
| | | // æ¤æ¹æ³å¨mixinä¸ |
|---|
| | | this.getParentData('u-collapse') |
|---|
| | | }, |
|---|
| | | async setContentAnimate() { |
|---|
| | | // æ¯æ¬¡é¢æ¿æå¼æè
æ¶èµ·æ¶ï¼é½æ¥è¯¢å
ç´ å°ºå¯¸ |
|---|
| | | // 好å¤æ¯ï¼ç¶ç»ä»¶ä»æå¡ç«¯è·åå
容åï¼åæ´æå é¢æ¿åå¯ä»¥è·å¾ææ°çé«åº¦ |
|---|
| | | const rect = await this.queryRect() |
|---|
| | | const height = this.expanded ? rect.height : 0 |
|---|
| | | this.animating = true |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const ref = this.$refs['animation'].ref |
|---|
| | | animation.transition(ref, { |
|---|
| | | styles: { |
|---|
| | | height: height + 'px' |
|---|
| | | }, |
|---|
| | | duration: this.duration, |
|---|
| | | // å¿
须设置为trueï¼å¦åä¼å°é¢æ¿æ¶èµ·æå±å¼æ¶ï¼é¡µé¢å
¶ä»å
ç´ ä¸ä¼éä¹è°æ´å®ä»¬çå¸å± |
|---|
| | | needLayout: true, |
|---|
| | | timingFunction: 'ease-in-out', |
|---|
| | | }, () => { |
|---|
| | | this.animating = false |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | const animation = uni.createAnimation({ |
|---|
| | | timingFunction: 'ease-in-out', |
|---|
| | | }); |
|---|
| | | animation |
|---|
| | | .height(height) |
|---|
| | | .step({ |
|---|
| | | duration: this.duration, |
|---|
| | | }) |
|---|
| | | .step() |
|---|
| | | // 导åºå¨ç»æ°æ®ç»é¢æ¿çanimationDataå¼ |
|---|
| | | this.animationData = animation.export() |
|---|
| | | // æ è¯å¨ç»ç»æ |
|---|
| | | uni.$u.sleep(this.duration).then(() => { |
|---|
| | | this.animating = false |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | // ç¹å»collapseheadå¤´é¨ |
|---|
| | | clickHandler() { |
|---|
| | | if (this.disabled && this.animating) return |
|---|
| | | // 设置æ¬ç»ä»¶ä¸ºç¸åçç¶æ |
|---|
| | | this.parent && this.parent.onChange(this) |
|---|
| | | }, |
|---|
| | | // æ¥è¯¢å
容é«åº¦ |
|---|
| | | queryRect() { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | // $uGetRect为uViewèªå¸¦çèç¹æ¥è¯¢ç®åæ¹æ³ï¼è¯¦è§ææ¡£ä»ç»ï¼https://www.uviewui.com/js/getRect.html |
|---|
| | | // ç»ä»¶å
é¨ä¸è¬ç¨this.$uGetRectï¼å¯¹å¤ç为uni.$u.getRectï¼äºè
åè½ä¸è´ï¼å称ä¸å |
|---|
| | | return new Promise(resolve => { |
|---|
| | | this.$uGetRect(`#${this.elId}`).then(size => { |
|---|
| | | resolve(size) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // nvueä¸ï¼ä½¿ç¨dom模åæ¥è¯¢å
ç´ é«åº¦ |
|---|
| | | // è¿åä¸ä¸ªpromiseï¼è®©è°ç¨æ¤æ¹æ³ç主ä½è½ä½¿ç¨thenåè° |
|---|
| | | return new Promise(resolve => { |
|---|
| | | dom.getComponentRect(this.$refs[this.elId], res => { |
|---|
| | | resolve(res.size) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-collapse-item { |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | overflow: hidden; |
|---|
| | | height: 0; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | padding: 12px 15px; |
|---|
| | | color: $u-content-color; |
|---|
| | | font-size: 14px; |
|---|
| | | line-height: 18px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å½åå±å¼é¢æ¿çnameï¼éæé£ç´æ¨¡å¼ï¼[<string | number>]ï¼æé£ç´æ¨¡å¼ï¼string | number |
|---|
| | | value: { |
|---|
| | | type: [String, Number, Array, null], |
|---|
| | | default: uni.$u.props.collapse.value |
|---|
| | | }, |
|---|
| | | // æ¯å¦æé£ç´æ¨¡å¼ |
|---|
| | | accordion: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.collapse.accordion |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå¤è¾¹æ¡ |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.collapse.border |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-collapse"> |
|---|
| | | <u-line v-if="border"></u-line> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * collapse æå é¢æ¿ |
|---|
| | | * @description éè¿æå é¢æ¿æ¶çº³å
容åºå |
|---|
| | | * @tutorial https://www.uviewui.com/components/collapse.html |
|---|
| | | * @property {String | Number | Array} value å½åå±å¼é¢æ¿çnameï¼éæé£ç´æ¨¡å¼ï¼[<string | number>]ï¼æé£ç´æ¨¡å¼ï¼string | number |
|---|
| | | * @property {Boolean} accordion æ¯å¦æé£ç´æ¨¡å¼ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} border æ¯å¦æ¾ç¤ºå¤è¾¹æ¡ ( é»è®¤ true ï¼ |
|---|
| | | * @event {Function} change å½åæ¿æ´»é¢æ¿å±å¼æ¶è§¦å(å¦ææ¯æé£ç´æ¨¡å¼ï¼åæ°activeNamesç±»å为Stringï¼å¦å为Array) |
|---|
| | | * @example <u-collapse></u-collapse> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-collapse", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | watch: { |
|---|
| | | needInit() { |
|---|
| | | this.init() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.children = [] |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | needInit() { |
|---|
| | | // éè¿computedï¼åæ¶çå¬accordionåvalueå¼çåå |
|---|
| | | // åéè¿watchå»æ§è¡init()æ¹æ³ï¼è¿è¡åä¸æ¬¡çåå§å |
|---|
| | | return [this.accordion, this.value] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // å½ç¶ç»ä»¶éè¦åç»ä»¶éè¦å
±äº«çåæ°åçäºååï¼æå¨éç¥åç»ä»¶ |
|---|
| | | parentData() { |
|---|
| | | if (this.children.length) { |
|---|
| | | this.children.map(child => { |
|---|
| | | // å¤æåç»ä»¶(u-checkbox)å¦ææupdateParentDataæ¹æ³çè¯ï¼å°±å°±æ§è¡(æ§è¡çç»ææ¯åç»ä»¶éæ°ä»ç¶ç»ä»¶æåäºææ°çå¼) |
|---|
| | | typeof(child.updateParentData) === 'function' && child.updateParentData() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // éæ°åå§åä¸æ¬¡å
é¨çææåå
ç´ |
|---|
| | | init() { |
|---|
| | | this.children.map(child => { |
|---|
| | | child.init() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * collapse-item被ç¹å»æ¶è§¦åï¼ç±collapseç»ä¸å¤çååç»ä»¶çç¶æ |
|---|
| | | * @param {Object} target 被æä½çé¢æ¿çå®ä¾ |
|---|
| | | */ |
|---|
| | | onChange(target) { |
|---|
| | | let changeArr = [] |
|---|
| | | this.children.map((child, index) => { |
|---|
| | | // å¦ææ¯æé£ç´æ¨¡å¼ï¼å°å
¶ä»çæå é¢æ¿æ¶èµ·æ¥ |
|---|
| | | if (this.accordion) { |
|---|
| | | child.expanded = child === target ? !target.expanded : false |
|---|
| | | child.setContentAnimate() |
|---|
| | | } else { |
|---|
| | | if(child === target) { |
|---|
| | | child.expanded = !child.expanded |
|---|
| | | child.setContentAnimate() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // æ¼æ¥changeäºä»¶ä¸ï¼æ°ç»å
ç´ çç¶æ |
|---|
| | | changeArr.push({ |
|---|
| | | // å¦æ没æå®ä¹nameå±æ§ï¼åé»è®¤è¿åç»ä»¶çindexç´¢å¼ |
|---|
| | | name: child.name || index, |
|---|
| | | status: child.expanded ? 'open' : 'close' |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.$emit('change', changeArr) |
|---|
| | | this.$emit(target.expanded ? 'open' : 'close', target.name) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¾ç¤ºçå
容ï¼å符串 |
|---|
| | | text: { |
|---|
| | | type: [Array], |
|---|
| | | default: uni.$u.props.columnNotice.text |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå·¦ä¾§çé³éå¾æ |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.columnNotice.icon |
|---|
| | | }, |
|---|
| | | // éå模å¼ï¼link-æ¾ç¤ºå³ç®å¤´ï¼closable-æ¾ç¤ºå³ä¾§å
³éå¾æ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.columnNotice.mode |
|---|
| | | }, |
|---|
| | | // æåé¢è²ï¼åå¾æ ä¹ä¼ä½¿ç¨æåé¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.columnNotice.color |
|---|
| | | }, |
|---|
| | | // èæ¯é¢è² |
|---|
| | | bgColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.columnNotice.bgColor |
|---|
| | | }, |
|---|
| | | // åä½å¤§å°ï¼åä½px |
|---|
| | | fontSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.columnNotice.fontSize |
|---|
| | | }, |
|---|
| | | // æ°´å¹³æ»å¨æ¶çæ»å¨é度ï¼å³æ¯ç§æ»å¨å¤å°px(px)ï¼è¿æå©äºæ§å¶æåæ 论å¤å°æ¶ï¼é½è½æä¸ä¸ªæå®çé度 |
|---|
| | | speed: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.columnNotice.speed |
|---|
| | | }, |
|---|
| | | // direction = rowæ¶ï¼æ¯å¦ä½¿ç¨æ¥è¿å½¢å¼æ»å¨ |
|---|
| | | step: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.columnNotice.step |
|---|
| | | }, |
|---|
| | | // æ»å¨ä¸ä¸ªå¨æçæ¶é´é¿ï¼åä½ms |
|---|
| | | duration: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.columnNotice.duration |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦æ¢ç¨ææ»å¨åæ¢ |
|---|
| | | // ç®åHX2.6.11ï¼åªæ¯æApp 2.5.5+ãH5 2.5.5+ãæ¯ä»å®å°ç¨åºãåèè·³å¨å°ç¨åº |
|---|
| | | disableTouch: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.columnNotice.disableTouch |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-notice" |
|---|
| | | @tap="clickHandler" |
|---|
| | | > |
|---|
| | | <slot name="icon"> |
|---|
| | | <view |
|---|
| | | class="u-notice__left-icon" |
|---|
| | | v-if="icon" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | :name="icon" |
|---|
| | | :color="color" |
|---|
| | | size="19" |
|---|
| | | ></u-icon> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | <swiper |
|---|
| | | :disable-touch="disableTouch" |
|---|
| | | :vertical="step ? false : true" |
|---|
| | | circular |
|---|
| | | :interval="duration" |
|---|
| | | :autoplay="true" |
|---|
| | | class="u-notice__swiper" |
|---|
| | | @change="noticeChange" |
|---|
| | | > |
|---|
| | | <swiper-item |
|---|
| | | v-for="(item, index) in text" |
|---|
| | | :key="index" |
|---|
| | | class="u-notice__swiper__item" |
|---|
| | | > |
|---|
| | | <text |
|---|
| | | class="u-notice__swiper__item__text u-line-1" |
|---|
| | | :style="[textStyle]" |
|---|
| | | >{{ item }}</text> |
|---|
| | | </swiper-item> |
|---|
| | | </swiper> |
|---|
| | | <view |
|---|
| | | class="u-notice__right-icon" |
|---|
| | | v-if="['link', 'closable'].includes(mode)" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | v-if="mode === 'link'" |
|---|
| | | name="arrow-right" |
|---|
| | | :size="17" |
|---|
| | | :color="color" |
|---|
| | | ></u-icon> |
|---|
| | | <u-icon |
|---|
| | | v-if="mode === 'closable'" |
|---|
| | | name="close" |
|---|
| | | :size="16" |
|---|
| | | :color="color" |
|---|
| | | @click="close" |
|---|
| | | ></u-icon> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * ColumnNotice æ»å¨éç¥ä¸çåç´æ»å¨ å
é¨ç»ä»¶ |
|---|
| | | * @description 该ç»ä»¶ç¨äºæ»å¨éååºæ¯ï¼æ¯å
¶ä¸çåç´æ»å¨æ¹å¼ |
|---|
| | | * @tutorial https://www.uviewui.com/components/noticeBar.html |
|---|
| | | * @property {Array} text æ¾ç¤ºçå
容ï¼å符串 |
|---|
| | | * @property {String} icon æ¯å¦æ¾ç¤ºå·¦ä¾§çé³éå¾æ ï¼ é»è®¤ 'volume' ï¼ |
|---|
| | | * @property {String} mode éå模å¼ï¼link-æ¾ç¤ºå³ç®å¤´ï¼closable-æ¾ç¤ºå³ä¾§å
³éå¾æ |
|---|
| | | * @property {String} color æåé¢è²ï¼åå¾æ ä¹ä¼ä½¿ç¨æåé¢è² ï¼ é»è®¤ '#f9ae3d' ï¼ |
|---|
| | | * @property {String} bgColor èæ¯é¢è² ï¼ é»è®¤ '#fdf6ec' ï¼ |
|---|
| | | * @property {String | Number} fontSize åä½å¤§å°ï¼åä½px ï¼ é»è®¤ 14 ï¼ |
|---|
| | | * @property {String | Number} speed æ°´å¹³æ»å¨æ¶çæ»å¨é度ï¼å³æ¯ç§æ»å¨å¤å°px(rpx)ï¼è¿æå©äºæ§å¶æåæ 论å¤å°æ¶ï¼é½è½æä¸ä¸ªæå®çé度 ï¼ é»è®¤ 80 ï¼ |
|---|
| | | * @property {Boolean} step direction = rowæ¶ï¼æ¯å¦ä½¿ç¨æ¥è¿å½¢å¼æ»å¨ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {String | Number} duration æ»å¨ä¸ä¸ªå¨æçæ¶é´é¿ï¼åä½ms ï¼ é»è®¤ 1500 ï¼ |
|---|
| | | * @property {Boolean} disableTouch æ¯å¦ç¦æ¢ç¨ææ»å¨åæ¢ ç®åHX2.6.11ï¼åªæ¯æApp 2.5.5+ãH5 2.5.5+ãæ¯ä»å®å°ç¨åºãåèè·³å¨å°ç¨åº ï¼ é»è®¤ true ï¼ |
|---|
| | | * @example |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | watch: { |
|---|
| | | text: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newValue, oldValue) { |
|---|
| | | if(!uni.$u.test.array(newValue)) { |
|---|
| | | uni.$u.error('noticebarç»ä»¶direction为columnæ¶ï¼è¦æ±textåæ°ä¸ºæ°ç»å½¢å¼') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // æåå
容çæ ·å¼ |
|---|
| | | textStyle() { |
|---|
| | | let style = {} |
|---|
| | | style.color = this.color |
|---|
| | | style.fontSize = uni.$u.addUnit(this.fontSize) |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // åç´æè
æ°´å¹³æ»å¨ |
|---|
| | | vertical() { |
|---|
| | | if (this.mode == 'horizontal') return false |
|---|
| | | else return true |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | index:0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | noticeChange(e){ |
|---|
| | | this.index = e.detail.current |
|---|
| | | }, |
|---|
| | | // ç¹å»éåæ |
|---|
| | | clickHandler() { |
|---|
| | | this.$emit('click', this.index) |
|---|
| | | }, |
|---|
| | | // ç¹å»å
³éæé® |
|---|
| | | close() { |
|---|
| | | this.$emit('close') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-notice { |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | &__left-icon { |
|---|
| | | align-items: center; |
|---|
| | | margin-right: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__right-icon { |
|---|
| | | margin-left: 5px; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__swiper { |
|---|
| | | height: 16px; |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: 14px; |
|---|
| | | color: $u-warning; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å计æ¶æ¶é¿ï¼åä½ms |
|---|
| | | time: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.countDown.time |
|---|
| | | }, |
|---|
| | | // æ¶é´æ ¼å¼ï¼DD-æ¥ï¼HH-æ¶ï¼mm-åï¼ss-ç§ï¼SSS-æ¯«ç§ |
|---|
| | | format: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.countDown.format |
|---|
| | | }, |
|---|
| | | // æ¯å¦èªå¨å¼å§åè®¡æ¶ |
|---|
| | | autoStart: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.countDown.autoStart |
|---|
| | | }, |
|---|
| | | // æ¯å¦å±ç¤ºæ¯«ç§åè®¡æ¶ |
|---|
| | | millisecond: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.countDown.millisecond |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-count-down"> |
|---|
| | | <slot> |
|---|
| | | <text class="u-count-down__text">{{ formattedTime }}</text> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | import { |
|---|
| | | isSameSecond, |
|---|
| | | parseFormat, |
|---|
| | | parseTimeData |
|---|
| | | } from './utils'; |
|---|
| | | /** |
|---|
| | | * u-count-down åè®¡æ¶ |
|---|
| | | * @description 该ç»ä»¶ä¸è¬ä½¿ç¨äºæ个活å¨çæªæ¢æ¶é´ä¸ï¼éè¿æ°åçååï¼ç»ç¨æ·æç¡®çæ¶é´æåï¼æ示ç¨æ·è¿è¡æä¸ä¸ªè¡ä¸ºæä½ã |
|---|
| | | * @tutorial https://uviewui.com/components/countDown.html |
|---|
| | | * @property {String | Number} time å计æ¶æ¶é¿ï¼åä½ms ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {String} format æ¶é´æ ¼å¼ï¼DD-æ¥ï¼HH-æ¶ï¼mm-åï¼ss-ç§ï¼SSS-æ¯«ç§ ï¼é»è®¤ 'HH:mm:ss' ï¼ |
|---|
| | | * @property {Boolean} autoStart æ¯å¦èªå¨å¼å§åè®¡æ¶ ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} millisecond æ¯å¦å±ç¤ºæ¯«ç§åè®¡æ¶ ï¼é»è®¤ false ï¼ |
|---|
| | | * @event {Function} finish å计æ¶ç»ææ¶è§¦å |
|---|
| | | * @event {Function} change å计æ¶ååæ¶è§¦å |
|---|
| | | * @event {Function} start å¼å§åè®¡æ¶ |
|---|
| | | * @event {Function} pause æååè®¡æ¶ |
|---|
| | | * @event {Function} reset é设å计æ¶ï¼è¥ auto-start 为 trueï¼é设åä¼èªå¨å¼å§åè®¡æ¶ |
|---|
| | | * @example <u-count-down :time="time"></u-count-down> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-count-down', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | timer: null, |
|---|
| | | // ååä½(天ï¼æ¶ï¼åç)å©ä½æ¶é´ |
|---|
| | | timeData: parseTimeData(0), |
|---|
| | | // æ ¼å¼ååçæ¶é´ï¼å¦"03:23:21" |
|---|
| | | formattedTime: '0', |
|---|
| | | // å计æ¶æ¯å¦æ£å¨è¿è¡ä¸ |
|---|
| | | runing: false, |
|---|
| | | endTime: 0, // ç»æç毫ç§æ¶é´æ³ |
|---|
| | | remainTime: 0, // å©ä½ç毫ç§æ¶é´ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | time(n) { |
|---|
| | | this.reset() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | this.reset() |
|---|
| | | }, |
|---|
| | | // å¼å§åè®¡æ¶ |
|---|
| | | start() { |
|---|
| | | if (this.runing) return |
|---|
| | | // æ è¯ä¸ºè¿è¡ä¸ |
|---|
| | | this.runing = true |
|---|
| | | // ç»ææ¶é´æ³ = æ¤å»æ¶é´æ³ + å©ä½çæ¶é´ |
|---|
| | | this.endTime = Date.now() + this.remainTime |
|---|
| | | this.toTick() |
|---|
| | | }, |
|---|
| | | // æ ¹æ®æ¯å¦å±ç¤ºæ¯«ç§ï¼æ§è¡ä¸åæä½å½æ° |
|---|
| | | toTick() { |
|---|
| | | if (this.millisecond) { |
|---|
| | | this.microTick() |
|---|
| | | } else { |
|---|
| | | this.macroTick() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | macroTick() { |
|---|
| | | this.clearTimeout() |
|---|
| | | // æ¯éä¸å®æ¶é´ï¼æ´æ°ä¸éå®æ¶å¨çå¼ |
|---|
| | | // åæ¶æ¤å®æ¶å¨çä½ç¨ä¹è½å¸¦æ¥æ¯«ç§çº§çæ´æ° |
|---|
| | | this.timer = setTimeout(() => { |
|---|
| | | // è·åå©ä½æ¶é´ |
|---|
| | | const remain = this.getRemainTime() |
|---|
| | | // é设å©ä½æ¶é´ |
|---|
| | | if (!isSameSecond(remain, this.remainTime) || remain === 0) { |
|---|
| | | this.setRemainTime(remain) |
|---|
| | | } |
|---|
| | | // å¦æå©ä½æ¶é´ä¸ä¸º0ï¼å继ç»æ£æ¥æ´æ°åè®¡æ¶ |
|---|
| | | if (this.remainTime !== 0) { |
|---|
| | | this.macroTick() |
|---|
| | | } |
|---|
| | | }, 30) |
|---|
| | | }, |
|---|
| | | microTick() { |
|---|
| | | this.clearTimeout() |
|---|
| | | this.timer = setTimeout(() => { |
|---|
| | | this.setRemainTime(this.getRemainTime()) |
|---|
| | | if (this.remainTime !== 0) { |
|---|
| | | this.microTick() |
|---|
| | | } |
|---|
| | | }, 50) |
|---|
| | | }, |
|---|
| | | // è·åå©ä½çæ¶é´ |
|---|
| | | getRemainTime() { |
|---|
| | | // åæ大å¼ï¼é²æ¢åºç°å°äº0çå©ä½æ¶é´å¼ |
|---|
| | | return Math.max(this.endTime - Date.now(), 0) |
|---|
| | | }, |
|---|
| | | // 设置å©ä½çæ¶é´ |
|---|
| | | setRemainTime(remain) { |
|---|
| | | this.remainTime = remain |
|---|
| | | // æ ¹æ®å©ä½ç毫ç§æ¶é´ï¼å¾åºè¯¥æ天ï¼å°æ¶ï¼åéççå¼ï¼è¿åä¸ä¸ªå¯¹è±¡ |
|---|
| | | const timeData = parseTimeData(remain) |
|---|
| | | this.$emit('change', timeData) |
|---|
| | | // å¾åºæ ¼å¼ååçæ¶é´ |
|---|
| | | this.formattedTime = parseFormat(this.format, timeData) |
|---|
| | | // å¦ææ¶é´å·²å°ï¼åæ¢åè®¡æ¶ |
|---|
| | | if (remain <= 0) { |
|---|
| | | this.pause() |
|---|
| | | this.$emit('finish') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // éç½®åè®¡æ¶ |
|---|
| | | reset() { |
|---|
| | | this.pause() |
|---|
| | | this.remainTime = this.time |
|---|
| | | this.setRemainTime(this.remainTime) |
|---|
| | | if (this.autoStart) { |
|---|
| | | this.start() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æååè®¡æ¶ |
|---|
| | | pause() { |
|---|
| | | this.runing = false; |
|---|
| | | this.clearTimeout() |
|---|
| | | }, |
|---|
| | | // æ¸
空å®æ¶å¨ |
|---|
| | | clearTimeout() { |
|---|
| | | clearTimeout(this.timer) |
|---|
| | | this.timer = null |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | this.clearTimeout() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style |
|---|
| | | lang="scss" |
|---|
| | | scoped |
|---|
| | | > |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | $u-count-down-text-color:$u-content-color !default; |
|---|
| | | $u-count-down-text-font-size:15px !default; |
|---|
| | | $u-count-down-text-line-height:22px !default; |
|---|
| | | |
|---|
| | | .u-count-down { |
|---|
| | | &__text { |
|---|
| | | color: $u-count-down-text-color; |
|---|
| | | font-size: $u-count-down-text-font-size; |
|---|
| | | line-height: $u-count-down-text-line-height; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // è¡¥0ï¼å¦1 -> 01 |
|---|
| | | function padZero(num, targetLength = 2) { |
|---|
| | | let str = `${num}` |
|---|
| | | while (str.length < targetLength) { |
|---|
| | | str = `0${str}` |
|---|
| | | } |
|---|
| | | return str |
|---|
| | | } |
|---|
| | | const SECOND = 1000 |
|---|
| | | const MINUTE = 60 * SECOND |
|---|
| | | const HOUR = 60 * MINUTE |
|---|
| | | const DAY = 24 * HOUR |
|---|
| | | export function parseTimeData(time) { |
|---|
| | | const days = Math.floor(time / DAY) |
|---|
| | | const hours = Math.floor((time % DAY) / HOUR) |
|---|
| | | const minutes = Math.floor((time % HOUR) / MINUTE) |
|---|
| | | const seconds = Math.floor((time % MINUTE) / SECOND) |
|---|
| | | const milliseconds = Math.floor(time % SECOND) |
|---|
| | | return { |
|---|
| | | days, |
|---|
| | | hours, |
|---|
| | | minutes, |
|---|
| | | seconds, |
|---|
| | | milliseconds |
|---|
| | | } |
|---|
| | | } |
|---|
| | | export function parseFormat(format, timeData) { |
|---|
| | | let { |
|---|
| | | days, |
|---|
| | | hours, |
|---|
| | | minutes, |
|---|
| | | seconds, |
|---|
| | | milliseconds |
|---|
| | | } = timeData |
|---|
| | | // å¦ææ ¼å¼åå符串ä¸ä¸åå¨DD(天)ï¼åå°å¤©çæ¶é´è½¬ä¸ºå°æ¶ä¸å» |
|---|
| | | if (format.indexOf('DD') === -1) { |
|---|
| | | hours += days * 24 |
|---|
| | | } else { |
|---|
| | | // 对天补0 |
|---|
| | | format = format.replace('DD', padZero(days)) |
|---|
| | | } |
|---|
| | | // å
¶ä»åçäºDDçæ ¼å¼åå¤çæ¹å¼ |
|---|
| | | if (format.indexOf('HH') === -1) { |
|---|
| | | minutes += hours * 60 |
|---|
| | | } else { |
|---|
| | | format = format.replace('HH', padZero(hours)) |
|---|
| | | } |
|---|
| | | if (format.indexOf('mm') === -1) { |
|---|
| | | seconds += minutes * 60 |
|---|
| | | } else { |
|---|
| | | format = format.replace('mm', padZero(minutes)) |
|---|
| | | } |
|---|
| | | if (format.indexOf('ss') === -1) { |
|---|
| | | milliseconds += seconds * 1000 |
|---|
| | | } else { |
|---|
| | | format = format.replace('ss', padZero(seconds)) |
|---|
| | | } |
|---|
| | | return format.replace('SSS', padZero(milliseconds, 3)) |
|---|
| | | } |
|---|
| | | export function isSameSecond(time1, time2) { |
|---|
| | | return Math.floor(time1 / 1000) === Math.floor(time2 / 1000) |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å¼å§çæ°å¼ï¼é»è®¤ä»0å¢é¿å°æä¸ä¸ªæ° |
|---|
| | | startVal: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.countTo.startVal |
|---|
| | | }, |
|---|
| | | // è¦æ»å¨çç®æ æ°å¼ï¼å¿
é¡» |
|---|
| | | endVal: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.countTo.endVal |
|---|
| | | }, |
|---|
| | | // æ»å¨å°ç®æ æ°å¼çå¨ç»æç»æ¶é´ï¼åä½ä¸ºæ¯«ç§ï¼msï¼ |
|---|
| | | duration: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.countTo.duration |
|---|
| | | }, |
|---|
| | | // 设置æ°å¼åæ¯å¦èªå¨å¼å§æ»å¨ |
|---|
| | | autoplay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.countTo.autoplay |
|---|
| | | }, |
|---|
| | | // è¦æ¾ç¤ºçå°æ°ä½æ° |
|---|
| | | decimals: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.countTo.decimals |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¨å³å°å°è¾¾ç®æ æ°å¼çæ¶åï¼ä½¿ç¨ç¼æ
¢æ»å¨çææ |
|---|
| | | useEasing: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.countTo.useEasing |
|---|
| | | }, |
|---|
| | | // åè¿å¶åå² |
|---|
| | | decimal: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.countTo.decimal |
|---|
| | | }, |
|---|
| | | // åä½é¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.countTo.color |
|---|
| | | }, |
|---|
| | | // åä½å¤§å° |
|---|
| | | fontSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.countTo.fontSize |
|---|
| | | }, |
|---|
| | | // æ¯å¦å ç²åä½ |
|---|
| | | bold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.countTo.bold |
|---|
| | | }, |
|---|
| | | // åä½åé符ï¼ç±»ä¼¼éé¢çåå²(ï¿¥23,321.05ä¸ç",") |
|---|
| | | separator: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.countTo.separator |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <text |
|---|
| | | class="u-count-num" |
|---|
| | | :style="{ |
|---|
| | | fontSize: $u.addUnit(fontSize), |
|---|
| | | fontWeight: bold ? 'bold' : 'normal', |
|---|
| | | color: color |
|---|
| | | }" |
|---|
| | | >{{ displayValue }}</text> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * countTo æ°åæ»å¨ |
|---|
| | | * @description 该ç»ä»¶ä¸è¬ç¨äºéè¦æ»å¨æ°åå°æä¸ä¸ªå¼çåºæ¯ï¼ç®æ è¦æ±æ¯ä¸ä¸ªéå¢çå¼ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/countTo.html |
|---|
| | | * @property {String | Number} startVal å¼å§çæ°å¼ï¼é»è®¤ä»0å¢é¿å°æä¸ä¸ªæ°ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {String | Number} endVal è¦æ»å¨çç®æ æ°å¼ï¼å¿
é¡» ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {String | Number} duration æ»å¨å°ç®æ æ°å¼çå¨ç»æç»æ¶é´ï¼åä½ä¸ºæ¯«ç§ï¼msï¼ ï¼é»è®¤ 2000 ï¼ |
|---|
| | | * @property {Boolean} autoplay 设置æ°å¼åæ¯å¦èªå¨å¼å§æ»å¨ ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String | Number} decimals è¦æ¾ç¤ºçå°æ°ä½æ°ï¼è§å®ç½è¯´æï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {Boolean} useEasing æ»å¨ç»ææ¶ï¼æ¯å¦ç¼å¨ç»å°¾ï¼è§å®ç½è¯´æï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String} decimal åè¿å¶åå² ï¼ é»è®¤ "." ï¼ |
|---|
| | | * @property {String} color åä½é¢è²ï¼ é»è®¤ '#606266' ) |
|---|
| | | * @property {String | Number} fontSize åä½å¤§å°ï¼åä½pxï¼ é»è®¤ 22 ï¼ |
|---|
| | | * @property {Boolean} bold åä½æ¯å¦å ç²ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} separator åä½åé符ï¼è§å®ç½è¯´æ |
|---|
| | | * @event {Function} end æ°å¼æ»å¨å°ç®æ å¼æ¶è§¦å |
|---|
| | | * @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-count-to', |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | localStartVal: this.startVal, |
|---|
| | | displayValue: this.formatNumber(this.startVal), |
|---|
| | | printVal: null, |
|---|
| | | paused: false, // æ¯å¦æå |
|---|
| | | localDuration: Number(this.duration), |
|---|
| | | startTime: null, // å¼å§çæ¶é´ |
|---|
| | | timestamp: null, // æ¶é´æ³ |
|---|
| | | remaining: null, // åççæ¶é´ |
|---|
| | | rAF: null, |
|---|
| | | lastTime: 0 // ä¸ä¸æ¬¡çæ¶é´ |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | computed: { |
|---|
| | | countDown() { |
|---|
| | | return this.startVal > this.endVal; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | startVal() { |
|---|
| | | this.autoplay && this.start(); |
|---|
| | | }, |
|---|
| | | endVal() { |
|---|
| | | this.autoplay && this.start(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.autoplay && this.start(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | easingFn(t, b, c, d) { |
|---|
| | | return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b; |
|---|
| | | }, |
|---|
| | | requestAnimationFrame(callback) { |
|---|
| | | const currTime = new Date().getTime(); |
|---|
| | | // 为äºä½¿setTimteoutçå°½å¯è½çæ¥è¿æ¯ç§60帧çææ |
|---|
| | | const timeToCall = Math.max(0, 16 - (currTime - this.lastTime)); |
|---|
| | | const id = setTimeout(() => { |
|---|
| | | callback(currTime + timeToCall); |
|---|
| | | }, timeToCall); |
|---|
| | | this.lastTime = currTime + timeToCall; |
|---|
| | | return id; |
|---|
| | | }, |
|---|
| | | cancelAnimationFrame(id) { |
|---|
| | | clearTimeout(id); |
|---|
| | | }, |
|---|
| | | // å¼å§æ»å¨æ°å |
|---|
| | | start() { |
|---|
| | | this.localStartVal = this.startVal; |
|---|
| | | this.startTime = null; |
|---|
| | | this.localDuration = this.duration; |
|---|
| | | this.paused = false; |
|---|
| | | this.rAF = this.requestAnimationFrame(this.count); |
|---|
| | | }, |
|---|
| | | // æå®ç¶æï¼éæ°åå¼å§æ»å¨ï¼æè
æ»å¨ç¶æä¸ï¼æå |
|---|
| | | reStart() { |
|---|
| | | if (this.paused) { |
|---|
| | | this.resume(); |
|---|
| | | this.paused = false; |
|---|
| | | } else { |
|---|
| | | this.stop(); |
|---|
| | | this.paused = true; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æå |
|---|
| | | stop() { |
|---|
| | | this.cancelAnimationFrame(this.rAF); |
|---|
| | | }, |
|---|
| | | // éæ°å¼å§(æåçæ
åµä¸) |
|---|
| | | resume() { |
|---|
| | | if (!this.remaining) return |
|---|
| | | this.startTime = 0; |
|---|
| | | this.localDuration = this.remaining; |
|---|
| | | this.localStartVal = this.printVal; |
|---|
| | | this.requestAnimationFrame(this.count); |
|---|
| | | }, |
|---|
| | | // éç½® |
|---|
| | | reset() { |
|---|
| | | this.startTime = null; |
|---|
| | | this.cancelAnimationFrame(this.rAF); |
|---|
| | | this.displayValue = this.formatNumber(this.startVal); |
|---|
| | | }, |
|---|
| | | count(timestamp) { |
|---|
| | | if (!this.startTime) this.startTime = timestamp; |
|---|
| | | this.timestamp = timestamp; |
|---|
| | | const progress = timestamp - this.startTime; |
|---|
| | | this.remaining = this.localDuration - progress; |
|---|
| | | if (this.useEasing) { |
|---|
| | | if (this.countDown) { |
|---|
| | | this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration); |
|---|
| | | } else { |
|---|
| | | this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (this.countDown) { |
|---|
| | | this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration); |
|---|
| | | } else { |
|---|
| | | this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.countDown) { |
|---|
| | | this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal; |
|---|
| | | } else { |
|---|
| | | this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal; |
|---|
| | | } |
|---|
| | | this.displayValue = this.formatNumber(this.printVal) || 0; |
|---|
| | | if (progress < this.localDuration) { |
|---|
| | | this.rAF = this.requestAnimationFrame(this.count); |
|---|
| | | } else { |
|---|
| | | this.$emit('end'); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // å¤ææ¯å¦æ°å |
|---|
| | | isNumber(val) { |
|---|
| | | return !isNaN(parseFloat(val)); |
|---|
| | | }, |
|---|
| | | formatNumber(num) { |
|---|
| | | // å°num转为Numberç±»åï¼å 为å
¶å¼å¯è½ä¸ºå符串æ°å¼ï¼è°ç¨toFixedä¼æ¥é |
|---|
| | | num = Number(num); |
|---|
| | | num = num.toFixed(Number(this.decimals)); |
|---|
| | | num += ''; |
|---|
| | | const x = num.split('.'); |
|---|
| | | let x1 = x[0]; |
|---|
| | | const x2 = x.length > 1 ? this.decimal + x[1] : ''; |
|---|
| | | const rgx = /(\d+)(\d{3})/; |
|---|
| | | if (this.separator && !this.isNumber(this.separator)) { |
|---|
| | | while (rgx.test(x1)) { |
|---|
| | | x1 = x1.replace(rgx, '$1' + this.separator + '$2'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return x1 + x2; |
|---|
| | | }, |
|---|
| | | destroyed() { |
|---|
| | | this.cancelAnimationFrame(this.rAF); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-count-num { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: inline-flex; |
|---|
| | | /* #endif */ |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¯å¦æå¼ç»ä»¶ |
|---|
| | | show: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.datetimePicker.show |
|---|
| | | }, |
|---|
| | | // æ¯å¦å±ç¤ºé¡¶é¨çæä½æ |
|---|
| | | showToolbar: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.datetimePicker.showToolbar |
|---|
| | | }, |
|---|
| | | // ç»å®å¼ |
|---|
| | | value: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.datetimePicker.value |
|---|
| | | }, |
|---|
| | | // 顶é¨æ é¢ |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.datetimePicker.title |
|---|
| | | }, |
|---|
| | | // å±ç¤ºæ ¼å¼ï¼mode=date为æ¥æéæ©ï¼mode=time为æ¶é´éæ©ï¼mode=year-month为年æéæ©ï¼mode=datetime为æ¥ææ¶é´éæ© |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.datetimePicker.mode |
|---|
| | | }, |
|---|
| | | // å¯éçæ大æ¶é´ |
|---|
| | | maxDate: { |
|---|
| | | type: Number, |
|---|
| | | // æ大é»è®¤å¼ä¸ºå10å¹´ |
|---|
| | | default: uni.$u.props.datetimePicker.maxDate |
|---|
| | | }, |
|---|
| | | // å¯éçæå°æ¶é´ |
|---|
| | | minDate: { |
|---|
| | | type: Number, |
|---|
| | | // æå°é»è®¤å¼ä¸ºå10å¹´ |
|---|
| | | default: uni.$u.props.datetimePicker.minDate |
|---|
| | | }, |
|---|
| | | // å¯éçæå°å°æ¶ï¼ä»
mode=timeææ |
|---|
| | | minHour: { |
|---|
| | | type: Number, |
|---|
| | | default: uni.$u.props.datetimePicker.minHour |
|---|
| | | }, |
|---|
| | | // å¯éçæ大å°æ¶ï¼ä»
mode=timeææ |
|---|
| | | maxHour: { |
|---|
| | | type: Number, |
|---|
| | | default: uni.$u.props.datetimePicker.maxHour |
|---|
| | | }, |
|---|
| | | // å¯éçæå°åéï¼ä»
mode=timeææ |
|---|
| | | minMinute: { |
|---|
| | | type: Number, |
|---|
| | | default: uni.$u.props.datetimePicker.minMinute |
|---|
| | | }, |
|---|
| | | // å¯éçæ大åéï¼ä»
mode=timeææ |
|---|
| | | maxMinute: { |
|---|
| | | type: Number, |
|---|
| | | default: uni.$u.props.datetimePicker.maxMinute |
|---|
| | | }, |
|---|
| | | // é项è¿æ»¤å½æ° |
|---|
| | | filter: { |
|---|
| | | type: [Function, null], |
|---|
| | | default: uni.$u.props.datetimePicker.filter |
|---|
| | | }, |
|---|
| | | // éé¡¹æ ¼å¼åå½æ° |
|---|
| | | formatter: { |
|---|
| | | type: [Function, null], |
|---|
| | | default: uni.$u.props.datetimePicker.formatter |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå è½½ä¸ç¶æ |
|---|
| | | loading: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.datetimePicker.loading |
|---|
| | | }, |
|---|
| | | // ååä¸ï¼å个é项çé«åº¦ |
|---|
| | | itemHeight: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.datetimePicker.itemHeight |
|---|
| | | }, |
|---|
| | | // åæ¶æé®çæå |
|---|
| | | cancelText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.datetimePicker.cancelText |
|---|
| | | }, |
|---|
| | | // 确认æé®çæå |
|---|
| | | confirmText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.datetimePicker.confirmText |
|---|
| | | }, |
|---|
| | | // åæ¶æé®çé¢è² |
|---|
| | | cancelColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.datetimePicker.cancelColor |
|---|
| | | }, |
|---|
| | | // 确认æé®çé¢è² |
|---|
| | | confirmColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.datetimePicker.confirmColor |
|---|
| | | }, |
|---|
| | | // æ¯åä¸å¯è§é项çæ°é |
|---|
| | | visibleItemCount: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.datetimePicker.visibleItemCount |
|---|
| | | }, |
|---|
| | | // æ¯å¦å
许ç¹å»é®ç½©å
³ééæ©å¨ |
|---|
| | | closeOnClickOverlay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.datetimePicker.closeOnClickOverlay |
|---|
| | | }, |
|---|
| | | // ååçé»è®¤ç´¢å¼ |
|---|
| | | defaultIndex: { |
|---|
| | | type: Array, |
|---|
| | | default: uni.$u.props.datetimePicker.defaultIndex |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <u-picker |
|---|
| | | ref="picker" |
|---|
| | | :show="show" |
|---|
| | | :closeOnClickOverlay="closeOnClickOverlay" |
|---|
| | | :columns="columns" |
|---|
| | | :title="title" |
|---|
| | | :itemHeight="itemHeight" |
|---|
| | | :showToolbar="showToolbar" |
|---|
| | | :visibleItemCount="visibleItemCount" |
|---|
| | | :defaultIndex="innerDefaultIndex" |
|---|
| | | :cancelText="cancelText" |
|---|
| | | :confirmText="confirmText" |
|---|
| | | :cancelColor="cancelColor" |
|---|
| | | :confirmColor="confirmColor" |
|---|
| | | @close="close" |
|---|
| | | @cancel="cancel" |
|---|
| | | @confirm="confirm" |
|---|
| | | @change="change" |
|---|
| | | > |
|---|
| | | </u-picker> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | function times(n, iteratee) { |
|---|
| | | let index = -1 |
|---|
| | | const result = Array(n < 0 ? 0 : n) |
|---|
| | | while (++index < n) { |
|---|
| | | result[index] = iteratee(index) |
|---|
| | | } |
|---|
| | | return result |
|---|
| | | } |
|---|
| | | import props from './props.js'; |
|---|
| | | import dayjs from '../../libs/util/dayjs.js'; |
|---|
| | | /** |
|---|
| | | * DatetimePicker æ¶é´æ¥æéæ©å¨ |
|---|
| | | * @description æ¤éæ©å¨ç¨äºæ¶é´æ¥æ |
|---|
| | | * @tutorial https://www.uviewui.com/components/datetimePicker.html |
|---|
| | | * @property {Boolean} show ç¨äºæ§å¶éæ©å¨çå¼¹åºä¸æ¶èµ· ( é»è®¤ false ) |
|---|
| | | * @property {Boolean} showToolbar æ¯å¦æ¾ç¤ºé¡¶é¨çæä½æ ( é»è®¤ true ) |
|---|
| | | * @property {String | Number} value ç»å®å¼ |
|---|
| | | * @property {String} title 顶é¨æ é¢ |
|---|
| | | * @property {String} mode å±ç¤ºæ ¼å¼ mode=date为æ¥æéæ©ï¼mode=time为æ¶é´éæ©ï¼mode=year-month为年æéæ©ï¼mode=datetime为æ¥ææ¶é´éæ© ( é»è®¤ âdatetime ) |
|---|
| | | * @property {Number} maxDate å¯éçæ大æ¶é´ é»è®¤å¼ä¸ºå10å¹´ |
|---|
| | | * @property {Number} minDate å¯éçæå°æ¶é´ é»è®¤å¼ä¸ºå10å¹´ |
|---|
| | | * @property {Number} minHour å¯éçæå°å°æ¶ï¼ä»
mode=timeææ ( é»è®¤ 0 ) |
|---|
| | | * @property {Number} maxHour å¯éçæ大å°æ¶ï¼ä»
mode=timeææ ( é»è®¤ 23 ) |
|---|
| | | * @property {Number} minMinute å¯éçæå°åéï¼ä»
mode=timeææ ( é»è®¤ 0 ) |
|---|
| | | * @property {Number} maxMinute å¯éçæ大åéï¼ä»
mode=timeææ ( é»è®¤ 59 ) |
|---|
| | | * @property {Function} filter é项è¿æ»¤å½æ° |
|---|
| | | * @property {Function} formatter éé¡¹æ ¼å¼åå½æ° |
|---|
| | | * @property {Boolean} loading æ¯å¦æ¾ç¤ºå è½½ä¸ç¶æ ( é»è®¤ false ) |
|---|
| | | * @property {String | Number} itemHeight ååä¸ï¼å个é项çé«åº¦ ( é»è®¤ 44 ) |
|---|
| | | * @property {String} cancelText åæ¶æé®çæå ( é»è®¤ 'åæ¶' ) |
|---|
| | | * @property {String} confirmText 确认æé®çæå ( é»è®¤ '确认' ) |
|---|
| | | * @property {String} cancelColor åæ¶æé®çé¢è² ( é»è®¤ '#909193' ) |
|---|
| | | * @property {String} confirmColor 确认æé®çé¢è² ( é»è®¤ '#3c9cff' ) |
|---|
| | | * @property {String | Number} visibleItemCount æ¯åä¸å¯è§é项çæ°é ( é»è®¤ 5 ) |
|---|
| | | * @property {Boolean} closeOnClickOverlay æ¯å¦å
许ç¹å»é®ç½©å
³ééæ©å¨ ( é»è®¤ false ) |
|---|
| | | * @property {Array} defaultIndex ååçé»è®¤ç´¢å¼ |
|---|
| | | * @event {Function} close å
³ééæ©å¨æ¶è§¦å |
|---|
| | | * @event {Function} confirm ç¹å»ç¡®å®æé®ï¼è¿åå½åéæ©çå¼ |
|---|
| | | * @event {Function} change å½éæ©å¼ååæ¶è§¦å |
|---|
| | | * @event {Function} cancel ç¹å»åæ¶æé® |
|---|
| | | * @example <u-datetime-picker :show="show" :value="value1" mode="datetime" ></u-datetime-picker> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'datetime-picker', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | columns: [], |
|---|
| | | innerDefaultIndex: [], |
|---|
| | | innerFormatter: (type, value) => value |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | show(newValue, oldValue) { |
|---|
| | | if (newValue) { |
|---|
| | | this.updateColumnValue(this.innerValue) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | propsChange() { |
|---|
| | | this.init() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // å¦æ以ä¸è¿äºåéåçäºååï¼æå³çéè¦éæ°åå§åååçå¼ |
|---|
| | | propsChange() { |
|---|
| | | return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | this.innerValue = this.correctValue(this.value) |
|---|
| | | this.updateColumnValue(this.innerValue) |
|---|
| | | }, |
|---|
| | | // å¨å¾®ä¿¡å°ç¨åºä¸ï¼ä¸æ¯æå°å½æ°å½åpropsåæ°ï¼æ
åªè½éè¿refå½¢å¼è°ç¨ |
|---|
| | | setFormatter(e) { |
|---|
| | | this.innerFormatter = e |
|---|
| | | }, |
|---|
| | | // å
³ééæ©å¨ |
|---|
| | | close() { |
|---|
| | | if (this.closeOnClickOverlay) { |
|---|
| | | this.$emit('close') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ç¹å»å·¥å
·æ çåæ¶æé® |
|---|
| | | cancel() { |
|---|
| | | this.$emit('cancel') |
|---|
| | | }, |
|---|
| | | // ç¹å»å·¥å
·æ çç¡®å®æé® |
|---|
| | | confirm() { |
|---|
| | | this.$emit('confirm', { |
|---|
| | | value: this.innerValue, |
|---|
| | | mode: this.mode |
|---|
| | | }) |
|---|
| | | this.$emit('input', this.innerValue) |
|---|
| | | }, |
|---|
| | | //ç¨æ£åæªåè¾åºå¼,å½åºç°å¤ç»æ°åæ¶,æåºé误 |
|---|
| | | intercept(e,type){ |
|---|
| | | let judge = e.match(/\d+/g) |
|---|
| | | //å¤ææ¯å¦æºææ°å |
|---|
| | | if(judge.length>1){ |
|---|
| | | uni.$u.error("请å¿å¨è¿æ»¤ææ ¼å¼åå½æ°æ¶æ·»å æ°å") |
|---|
| | | return 0 |
|---|
| | | }else if(type&&judge[0].length==4){//å¤ææ¯å¦æ¯å¹´ä»½ |
|---|
| | | return judge[0] |
|---|
| | | }else if(judge[0].length>2){ |
|---|
| | | uni.$u.error("请å¿å¨è¿æ»¤ææ ¼å¼åå½æ°æ¶æ·»å æ°å") |
|---|
| | | return 0 |
|---|
| | | }else{ |
|---|
| | | return judge[0] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ååçååæ¶è§¦å |
|---|
| | | change(e) { |
|---|
| | | const { indexs, values } = e |
|---|
| | | let selectValue = '' |
|---|
| | | if(this.mode === 'time') { |
|---|
| | | // æ ¹æ®valueååç´¢å¼ï¼ä»ååæ°ç»ä¸ï¼ååºå½åæ¶é´çéä¸å¼ |
|---|
| | | selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}` |
|---|
| | | } else { |
|---|
| | | // å°éæ©çå¼è½¬ä¸ºæ°å¼ï¼æ¯å¦'03'转为æ°å¼ç3ï¼'2019'转为æ°å¼ç2019 |
|---|
| | | const year = parseInt(this.intercept(values[0][indexs[0]],'year')) |
|---|
| | | const month = parseInt(this.intercept(values[1][indexs[1]])) |
|---|
| | | let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1) |
|---|
| | | let hour = 0, minute = 0 |
|---|
| | | // æ¤æ份çæå¤§å¤©æ° |
|---|
| | | const maxDate = dayjs(`${year}-${month}`).daysInMonth() |
|---|
| | | // year-month模å¼ä¸ï¼dateä¸ä¼åºç°å¨åä¸ï¼è®¾ç½®ä¸º1ï¼ä¸ºäºç¬¦ååè¾¹éè¦å1çéæ± |
|---|
| | | if (this.mode === 'year-month') { |
|---|
| | | date = 1 |
|---|
| | | } |
|---|
| | | // ä¸å
许è¶
è¿maxDateå¼ |
|---|
| | | date = Math.min(maxDate, date) |
|---|
| | | if (this.mode === 'datetime') { |
|---|
| | | hour = parseInt(this.intercept(values[3][indexs[3]])) |
|---|
| | | minute = parseInt(this.intercept(values[4][indexs[4]])) |
|---|
| | | } |
|---|
| | | // 转为æ¶é´æ¨¡å¼ |
|---|
| | | selectValue = Number(new Date(year, month - 1, date, hour, minute)) |
|---|
| | | } |
|---|
| | | // ååºåç¡®çåæ³å¼ï¼é²æ¢è¶
è¶è¾¹ççæ
åµ |
|---|
| | | selectValue = this.correctValue(selectValue) |
|---|
| | | this.innerValue = selectValue |
|---|
| | | this.updateColumnValue(selectValue) |
|---|
| | | // ååºchangeæ¶é´ï¼value为å½åéä¸çæ¶é´æ³ |
|---|
| | | this.$emit('change', { |
|---|
| | | value: selectValue, |
|---|
| | | // #ifndef MP-WEIXIN |
|---|
| | | // 微信å°ç¨åºä¸è½ä¼ éthiså®ä¾ï¼ä¼å 为循ç¯å¼ç¨èæ¥é |
|---|
| | | picker: this.$refs.picker, |
|---|
| | | // #endif |
|---|
| | | mode: this.mode |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ´æ°ååçå¼ï¼è¿è¡è¡¥0ãæ ¼å¼åçæä½ |
|---|
| | | updateColumnValue(value) { |
|---|
| | | this.innerValue = value |
|---|
| | | this.updateColumns() |
|---|
| | | this.updateIndexs(value) |
|---|
| | | }, |
|---|
| | | // æ´æ°ç´¢å¼ |
|---|
| | | updateIndexs(value) { |
|---|
| | | let values = [] |
|---|
| | | const formatter = this.formatter || this.innerFormatter |
|---|
| | | const padZero = uni.$u.padZero |
|---|
| | | if (this.mode === 'time') { |
|---|
| | | // å°time模å¼çæ¶é´ç¨:åéææ°ç» |
|---|
| | | const timeArr = value.split(':') |
|---|
| | | // 使ç¨formatteræ ¼å¼åæ¹æ³è¿è¡ç®¡éå¤ç |
|---|
| | | values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])] |
|---|
| | | } else { |
|---|
| | | const date = new Date(value) |
|---|
| | | values = [ |
|---|
| | | formatter('year', `${dayjs(value).year()}`), |
|---|
| | | // æ份补0 |
|---|
| | | formatter('month', padZero(dayjs(value).month() + 1)) |
|---|
| | | ] |
|---|
| | | if (this.mode === 'date') { |
|---|
| | | // date模å¼ï¼éè¦æ·»å 天å |
|---|
| | | values.push(formatter('day', padZero(dayjs(value).date()))) |
|---|
| | | } |
|---|
| | | if (this.mode === 'datetime') { |
|---|
| | | // æ°ç»çpushæ¹æ³ï¼å¯ä»¥åå
¥å¤ä¸ªåæ° |
|---|
| | | values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value).hour())), formatter('minute', padZero(dayjs(value).minute()))) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ ¹æ®å½åååçææå¼ï¼ä»ååé»è®¤å¼ä¸æ¾å°é»è®¤å¼å¨ååä¸çç´¢å¼ |
|---|
| | | const indexs = this.columns.map((column, index) => { |
|---|
| | | // éè¿å大å¼ï¼å¯ä»¥ä¿è¯ä¸ä¼åºç°æ¾ä¸å°ç´¢å¼ç-1æ
åµ |
|---|
| | | return Math.max(0, column.findIndex(item => item === values[index])) |
|---|
| | | }) |
|---|
| | | this.innerDefaultIndex = indexs |
|---|
| | | }, |
|---|
| | | // æ´æ°ååçå¼ |
|---|
| | | updateColumns() { |
|---|
| | | const formatter = this.formatter || this.innerFormatter |
|---|
| | | // è·åååçå¼ï¼å¹¶ä¸mapåï¼å¯¹ååçå
·ä½å¼è¿è¡è¡¥0æä½ |
|---|
| | | const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value))) |
|---|
| | | this.columns = results |
|---|
| | | }, |
|---|
| | | getOriginColumns() { |
|---|
| | | // çæååçå¼ |
|---|
| | | const results = this.getRanges().map(({ type, range }) => { |
|---|
| | | let values = times(range[1] - range[0] + 1, (index) => { |
|---|
| | | let value = range[0] + index |
|---|
| | | value = type === 'year' ? `${value}` : uni.$u.padZero(value) |
|---|
| | | return value |
|---|
| | | }) |
|---|
| | | // è¿è¡è¿æ»¤ |
|---|
| | | if (this.filter) { |
|---|
| | | values = this.filter(type, values) |
|---|
| | | } |
|---|
| | | return { type, values } |
|---|
| | | }) |
|---|
| | | return results |
|---|
| | | }, |
|---|
| | | // éè¿æ大å¼åæå°å¼çææ°ç» |
|---|
| | | generateArray(start, end) { |
|---|
| | | return Array.from(new Array(end + 1).keys()).slice(start) |
|---|
| | | }, |
|---|
| | | // å¾åºåæ³çæ¶é´ |
|---|
| | | correctValue(value) { |
|---|
| | | const isDateMode = this.mode !== 'time' |
|---|
| | | if (isDateMode && !uni.$u.test.date(value)) { |
|---|
| | | // å¦ææ¯æ¥æç±»åï¼ä½æ¯å没æ设置åæ³çå½åæ¶é´çè¯ï¼ä½¿ç¨æå°æ¶é´ä¸ºå½åæ¶é´ |
|---|
| | | value = this.minDate |
|---|
| | | } else if (!isDateMode && !value) { |
|---|
| | | // å¦ææ¯æ¶é´ç±»åï¼èå没æé»è®¤å¼çè¯ï¼å°±ç¨æå°æ¶é´ |
|---|
| | | value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}` |
|---|
| | | } |
|---|
| | | // æ¶é´ç±»å |
|---|
| | | if (!isDateMode) { |
|---|
| | | if (String(value).indexOf(':') === -1) return uni.$u.error('æ¶é´é误ï¼è¯·ä¼ éå¦12:24çæ ¼å¼') |
|---|
| | | let [hour, minute] = value.split(':') |
|---|
| | | // 对æ¶é´è¡¥é¶ï¼åæ¶æ§å¶å¨æå°å¼åæ大å¼ä¹é´ |
|---|
| | | hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour))) |
|---|
| | | minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute))) |
|---|
| | | return `${ hour }:${ minute }` |
|---|
| | | } else { |
|---|
| | | // å¦ææ¯æ¥ææ ¼å¼ï¼æ§å¶å¨æå°æ¥æåæ大æ¥æä¹é´ |
|---|
| | | value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value |
|---|
| | | value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value |
|---|
| | | return value |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·åæ¯åçæ大åæå°å¼ |
|---|
| | | getRanges() { |
|---|
| | | if (this.mode === 'time') { |
|---|
| | | return [ |
|---|
| | | { |
|---|
| | | type: 'hour', |
|---|
| | | range: [this.minHour, this.maxHour], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'minute', |
|---|
| | | range: [this.minMinute, this.maxMinute], |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | } |
|---|
| | | const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue); |
|---|
| | | const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', this.innerValue); |
|---|
| | | const result = [ |
|---|
| | | { |
|---|
| | | type: 'year', |
|---|
| | | range: [minYear, maxYear], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'month', |
|---|
| | | range: [minMonth, maxMonth], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'day', |
|---|
| | | range: [minDate, maxDate], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'hour', |
|---|
| | | range: [minHour, maxHour], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'minute', |
|---|
| | | range: [minMinute, maxMinute], |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | if (this.mode === 'date') |
|---|
| | | result.splice(3, 2); |
|---|
| | | if (this.mode === 'year-month') |
|---|
| | | result.splice(2, 3); |
|---|
| | | return result; |
|---|
| | | }, |
|---|
| | | // æ ¹æ®minDateãmaxDateãminHourãmaxHourçè¾¹çå¼ï¼å¤æååçå¼å§åç»æè¾¹çå¼ |
|---|
| | | getBoundary(type, innerValue) { |
|---|
| | | const value = new Date(innerValue) |
|---|
| | | const boundary = new Date(this[`${type}Date`]) |
|---|
| | | const year = dayjs(boundary).year() |
|---|
| | | let month = 1 |
|---|
| | | let date = 1 |
|---|
| | | let hour = 0 |
|---|
| | | let minute = 0 |
|---|
| | | if (type === 'max') { |
|---|
| | | month = 12 |
|---|
| | | // æ份çå¤©æ° |
|---|
| | | date = dayjs(value).daysInMonth() |
|---|
| | | hour = 23 |
|---|
| | | minute = 59 |
|---|
| | | } |
|---|
| | | // è·åè¾¹çå¼ï¼é»è¾æ¯ï¼å½å¹´è¾¾å°äºè¾¹çå¼(æ大ææå°å¹´)ï¼å°±æ£æ¥æå
许çæ大åæå°å¼ï¼ä»¥æ¤ç±»æ¨ |
|---|
| | | if (dayjs(value).year() === year) { |
|---|
| | | month = dayjs(boundary).month() + 1 |
|---|
| | | if (dayjs(value).month() + 1 === month) { |
|---|
| | | date = dayjs(boundary).date() |
|---|
| | | if (dayjs(value).date() === date) { |
|---|
| | | hour = dayjs(boundary).hour() |
|---|
| | | if (dayjs(value).hour() === hour) { |
|---|
| | | minute = dayjs(boundary).minute() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | [`${type}Year`]: year, |
|---|
| | | [`${type}Month`]: month, |
|---|
| | | [`${type}Date`]: date, |
|---|
| | | [`${type}Hour`]: hour, |
|---|
| | | [`${type}Minute`]: minute |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../libs/css/components.scss'; |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¯å¦è线 |
|---|
| | | dashed: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.divider.dashed |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç»çº¿ |
|---|
| | | hairline: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.divider.hairline |
|---|
| | | }, |
|---|
| | | // æ¯å¦ä»¥ç¹æ¿ä»£æåï¼ä¼å
äºtextå段起ä½ç¨ |
|---|
| | | dot: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.divider.dot |
|---|
| | | }, |
|---|
| | | // å
容ææ¬çä½ç½®ï¼left-左边ï¼center-ä¸é´ï¼right-å³è¾¹ |
|---|
| | | textPosition: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.divider.textPosition |
|---|
| | | }, |
|---|
| | | // ææ¬å
容 |
|---|
| | | text: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.divider.text |
|---|
| | | }, |
|---|
| | | // ææ¬å¤§å° |
|---|
| | | textSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.divider.textSize |
|---|
| | | }, |
|---|
| | | // ææ¬é¢è² |
|---|
| | | textColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.divider.textColor |
|---|
| | | }, |
|---|
| | | // 线æ¡é¢è² |
|---|
| | | lineColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.divider.lineColor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-divider" |
|---|
| | | :style="[$u.addStyle(customStyle)]" |
|---|
| | | @tap="click" |
|---|
| | | > |
|---|
| | | <u-line |
|---|
| | | :color="lineColor" |
|---|
| | | :customStyle="leftLineStyle" |
|---|
| | | :hairline="hairline" |
|---|
| | | :dashed="dashed" |
|---|
| | | ></u-line> |
|---|
| | | <text |
|---|
| | | v-if="dot" |
|---|
| | | class="u-divider__dot" |
|---|
| | | >â</text> |
|---|
| | | <text |
|---|
| | | v-else-if="text" |
|---|
| | | class="u-divider__text" |
|---|
| | | :style="[textStyle]" |
|---|
| | | >{{text}}</text> |
|---|
| | | <u-line |
|---|
| | | :color="lineColor" |
|---|
| | | :customStyle="rightLineStyle" |
|---|
| | | :hairline="hairline" |
|---|
| | | :dashed="dashed" |
|---|
| | | ></u-line> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * divider åå²çº¿ |
|---|
| | | * @description åºéå
容çåå²çº¿ï¼ä¸è¬ç¨äºé¡µé¢åºé¨"没ææ´å¤"çæ示ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/divider.html |
|---|
| | | * @property {Boolean} dashed æ¯å¦è线 ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} hairline æ¯å¦ç»çº¿ ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} dot æ¯å¦ä»¥ç¹æ¿ä»£æåï¼ä¼å
äºtextå段起ä½ç¨ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} textPosition å
容ææ¬çä½ç½®ï¼left-左边ï¼center-ä¸é´ï¼right-å³è¾¹ ï¼é»è®¤ 'center' ï¼ |
|---|
| | | * @property {String | Number} text ææ¬å
容 |
|---|
| | | * @property {String | Number} textSize ææ¬å¤§å° ï¼é»è®¤ 14ï¼ |
|---|
| | | * @property {String} textColor ææ¬é¢è² ï¼é»è®¤ '#909399' ï¼ |
|---|
| | | * @property {String} lineColor 线æ¡é¢è² ï¼é»è®¤ '#dcdfe6' ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @event {Function} click dividerç»ä»¶è¢«ç¹å»æ¶è§¦å |
|---|
| | | * @example <u-divider :color="color">é¦çæ 端äºå弦</u-divider> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name:'u-divider', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | computed: { |
|---|
| | | textStyle() { |
|---|
| | | const style = {} |
|---|
| | | style.fontSize = uni.$u.addUnit(this.textSize) |
|---|
| | | style.color = this.textColor |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // 左边线æ¡ççæ ·å¼ |
|---|
| | | leftLineStyle() { |
|---|
| | | const style = {} |
|---|
| | | // å¦ææ¯å¨å·¦è¾¹ï¼è®¾ç½®å·¦è¾¹ç宽度为åºå®å¼ |
|---|
| | | if (this.textPosition === 'left') { |
|---|
| | | style.width = '80rpx' |
|---|
| | | } else { |
|---|
| | | style.flex = 1 |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // å³è¾¹çº¿æ¡ççæ ·å¼ |
|---|
| | | rightLineStyle() { |
|---|
| | | const style = {} |
|---|
| | | // å¦ææ¯å¨å³è¾¹ï¼è®¾ç½®å³è¾¹ç宽度为åºå®å¼ |
|---|
| | | if (this.textPosition === 'right') { |
|---|
| | | style.width = '80rpx' |
|---|
| | | } else { |
|---|
| | | style.flex = 1 |
|---|
| | | } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // dividerç»ä»¶è¢«ç¹å»æ¶è§¦å |
|---|
| | | click() { |
|---|
| | | this.$emit('click'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../libs/css/components.scss'; |
|---|
| | | $u-divider-margin:15px 0 !default; |
|---|
| | | $u-divider-text-margin:0 15px !default; |
|---|
| | | $u-divider-dot-font-size:12px !default; |
|---|
| | | $u-divider-dot-margin:0 12px !default; |
|---|
| | | $u-divider-dot-color: #c0c4cc !default; |
|---|
| | | |
|---|
| | | .u-divider { |
|---|
| | | @include flex; |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | margin: $u-divider-margin; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | margin: $u-divider-text-margin; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__dot { |
|---|
| | | font-size: $u-divider-dot-font-size; |
|---|
| | | margin: $u-divider-dot-margin; |
|---|
| | | color: $u-divider-dot-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å½åéä¸é¡¹çvalueå¼ |
|---|
| | | value: { |
|---|
| | | type: [Number, String, Array], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // èå项æ é¢ |
|---|
| | | title: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | // é项æ°æ®ï¼å¦æä¼ å
¥äºé»è®¤slotï¼æ¤åæ°æ æ |
|---|
| | | options: { |
|---|
| | | type: Array, |
|---|
| | | default() { |
|---|
| | | return [] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨æ¤èå项 |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // ä¸æå¼¹çªçé«åº¦ |
|---|
| | | height: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 'auto' |
|---|
| | | }, |
|---|
| | | // ç¹å»é®ç½©æ¯å¦å¯ä»¥æ¶èµ·å¼¹çª |
|---|
| | | closeOnClickOverlay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-drawdown-item"> |
|---|
| | | <u-overlay |
|---|
| | | customStyle="top: 126px" |
|---|
| | | :show="show" |
|---|
| | | :closeOnClickOverlay="closeOnClickOverlay" |
|---|
| | | @click="overlayClick" |
|---|
| | | ></u-overlay> |
|---|
| | | <view |
|---|
| | | class="u-drawdown-item__content" |
|---|
| | | :style="[style]" |
|---|
| | | :animation="animationData" |
|---|
| | | ref="animation" |
|---|
| | | > |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const animation = uni.requireNativePlugin('animation') |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * Drawdownitem |
|---|
| | | * @description |
|---|
| | | * @tutorial url |
|---|
| | | * @property {String} |
|---|
| | | * @event {Function} |
|---|
| | | * @example |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-drawdown-item', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | show: false, |
|---|
| | | top: '126px', |
|---|
| | | // uni.createAnimationç导åºæ°æ® |
|---|
| | | animationData: {}, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // åçååæ¶ï¼éè¦å»æ´æ°ç¶ç»ä»¶å¯¹åºçå¼ |
|---|
| | | dataChange(newValue, oldValue) { |
|---|
| | | this.updateParentData() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // çå¬å¯¹åºåéçåå |
|---|
| | | dataChange() { |
|---|
| | | return [this.title, this.disabled] |
|---|
| | | }, |
|---|
| | | style() { |
|---|
| | | const style = { |
|---|
| | | zIndex: 10071, |
|---|
| | | position: 'fixed', |
|---|
| | | display: 'flex', |
|---|
| | | left: 0, |
|---|
| | | right: 0 |
|---|
| | | } |
|---|
| | | style.top = uni.$u.addUnit(this.top) |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | this.updateParentData() |
|---|
| | | }, |
|---|
| | | // æ´æ°ç¶ç»ä»¶æéçæ°æ® |
|---|
| | | updateParentData() { |
|---|
| | | // è·åç¶ç»ä»¶u-dropdown |
|---|
| | | this.getParentData('u-dropdown') |
|---|
| | | if (!this.parent) uni.$u.error('u-dropdown-itemå¿
é¡»é
åu-dropdown使ç¨') |
|---|
| | | // æ¥æ¾ç¶ç»ä»¶menuListæ°ç»ä¸å¯¹åºçæ é¢æ°æ® |
|---|
| | | const menuIndex = this.parent.menuList.findIndex(item => item.title === this.title) |
|---|
| | | const menuContent = { |
|---|
| | | title: this.title, |
|---|
| | | disabled: this.disabled |
|---|
| | | } |
|---|
| | | if (menuIndex >= 0) { |
|---|
| | | // å¦æè½æ¾å°ï¼åç´æ¥ä¿®æ¹ |
|---|
| | | this.parent.menuList[menuIndex] = menuContent; |
|---|
| | | } else { |
|---|
| | | // å¦ææ æ³æ¾å°ï¼å为第ä¸æ¬¡æ·»å ï¼ç´æ¥pushå³å¯ |
|---|
| | | this.parent.menuList.push(menuContent); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async setContentAnimate(height) { |
|---|
| | | this.animating = true |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const ref = this.$refs['animation'].ref |
|---|
| | | animation.transition(ref, { |
|---|
| | | styles: { |
|---|
| | | height: uni.$u.addUnit(height) |
|---|
| | | }, |
|---|
| | | duration: this.duration, |
|---|
| | | timingFunction: 'ease-in-out', |
|---|
| | | }, () => { |
|---|
| | | this.animating = false |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | const animation = uni.createAnimation({ |
|---|
| | | timingFunction: 'ease-in-out', |
|---|
| | | }); |
|---|
| | | animation |
|---|
| | | .height(height) |
|---|
| | | .step({ |
|---|
| | | duration: this.duration, |
|---|
| | | }) |
|---|
| | | .step() |
|---|
| | | // 导åºå¨ç»æ°æ®ç»é¢æ¿çanimationDataå¼ |
|---|
| | | this.animationData = animation.export() |
|---|
| | | // æ è¯å¨ç»ç»æ |
|---|
| | | uni.$u.sleep(this.duration).then(() => { |
|---|
| | | this.animating = false |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | overlayClick() { |
|---|
| | | this.show = false |
|---|
| | | this.setContentAnimate(0) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../libs/css/components.scss'; |
|---|
| | | |
|---|
| | | .u-drawdown-item { |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | overflow: hidden; |
|---|
| | | height: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ é¢éä¸æ¶çæ ·å¼ |
|---|
| | | activeStyle: { |
|---|
| | | type: [String, Object], |
|---|
| | | default: () => ({ |
|---|
| | | color: '#2979ff', |
|---|
| | | fontSize: '14px' |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ é¢æªéä¸æ¶çæ ·å¼ |
|---|
| | | inactiveStyle: { |
|---|
| | | type: [String, Object], |
|---|
| | | default: () => ({ |
|---|
| | | color: '#606266', |
|---|
| | | fontSize: '14px' |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // ç¹å»é®ç½©æ¯å¦å
³éèå |
|---|
| | | closeOnClickMask: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // ç¹å»å½åæ¿æ´»é¡¹æ é¢æ¯å¦å
³éèå |
|---|
| | | closeOnClickSelf: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | }, |
|---|
| | | // è¿æ¸¡æ¶é´ |
|---|
| | | duration: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 300 |
|---|
| | | }, |
|---|
| | | // æ é¢èåçé«åº¦ |
|---|
| | | height: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 40 |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºä¸è¾¹æ¡ |
|---|
| | | borderBottom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | // æ é¢çåä½å¤§å° |
|---|
| | | titleSize: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 14 |
|---|
| | | }, |
|---|
| | | // ä¸æåºæ¥çå
容é¨åçåè§å¼ |
|---|
| | | borderRadius: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | // èåå³ä¾§çiconå¾æ |
|---|
| | | menuIcon: { |
|---|
| | | type: String, |
|---|
| | | default: 'arrow-down' |
|---|
| | | }, |
|---|
| | | // èåå³ä¾§å¾æ çå¤§å° |
|---|
| | | menuIconSize: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 14 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-drawdown"> |
|---|
| | | <view |
|---|
| | | class="u-dropdown__menu" |
|---|
| | | :style="{ |
|---|
| | | height: $u.addUnit(height) |
|---|
| | | }" |
|---|
| | | ref="u-dropdown__menu" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-dropdown__menu__item" |
|---|
| | | v-for="(item, index) in menuList" |
|---|
| | | :key="index" |
|---|
| | | @tap.stop="clickHandler(item, index)" |
|---|
| | | > |
|---|
| | | <view class="u-dropdown__menu__item__content"> |
|---|
| | | <text |
|---|
| | | class="u-dropdown__menu__item__content__text" |
|---|
| | | :style="[index === current ? activeStyle : inactiveStyle]" |
|---|
| | | >{{item.title}}</text> |
|---|
| | | <view |
|---|
| | | class="u-dropdown__menu__item__content__arrow" |
|---|
| | | :class="[index === current && 'u-dropdown__menu__item__content__arrow--rotate']" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | :name="menuIcon" |
|---|
| | | :size="$u.addUnit(menuIconSize)" |
|---|
| | | ></u-icon> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="u-dropdown__content"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * Dropdown |
|---|
| | | * @description |
|---|
| | | * @tutorial url |
|---|
| | | * @property {String} |
|---|
| | | * @event {Function} |
|---|
| | | * @example |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-dropdown', |
|---|
| | | mixins: [uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // èåæ°ç» |
|---|
| | | menuList: [], |
|---|
| | | current: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // å¼ç¨ææåç»ä»¶(u-dropdown-item)çthisï¼ä¸è½å¨dataä¸å£°æåéï¼å¦åå¨å¾®ä¿¡å°ç¨åºä¼é æ循ç¯å¼ç¨èæ¥é |
|---|
| | | this.children = []; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | clickHandler(item, index) { |
|---|
| | | this.children.map(child => { |
|---|
| | | if(child.title === item.title) { |
|---|
| | | // this.queryRect('u-dropdown__menu').then(size => { |
|---|
| | | child.$emit('click') |
|---|
| | | child.setContentAnimate(child.show ? 0 : 300) |
|---|
| | | child.show = !child.show |
|---|
| | | // }) |
|---|
| | | } else { |
|---|
| | | child.show = false |
|---|
| | | child.setContentAnimate(0) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è·åæ ç¾ç尺寸ä½ç½® |
|---|
| | | queryRect(el) { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | // $uGetRect为uViewèªå¸¦çèç¹æ¥è¯¢ç®åæ¹æ³ï¼è¯¦è§ææ¡£ä»ç»ï¼https://www.uviewui.com/js/getRect.html |
|---|
| | | // ç»ä»¶å
é¨ä¸è¬ç¨this.$uGetRectï¼å¯¹å¤ç为this.$u.getRectï¼äºè
åè½ä¸è´ï¼å称ä¸å |
|---|
| | | return new Promise(resolve => { |
|---|
| | | this.$uGetRect(`.${el}`).then(size => { |
|---|
| | | resolve(size) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // nvueä¸ï¼ä½¿ç¨dom模åæ¥è¯¢å
ç´ é«åº¦ |
|---|
| | | // è¿åä¸ä¸ªpromiseï¼è®©è°ç¨æ¤æ¹æ³ç主ä½è½ä½¿ç¨thenåè° |
|---|
| | | return new Promise(resolve => { |
|---|
| | | dom.getComponentRect(this.$refs[el], res => { |
|---|
| | | resolve(res.size) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | @import '../../libs/css/components.scss'; |
|---|
| | | |
|---|
| | | .u-dropdown { |
|---|
| | | |
|---|
| | | &__menu { |
|---|
| | | @include flex; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | flex: 1; |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å
ç½®å¾æ å称ï¼æå¾çè·¯å¾ï¼å»ºè®®ç»å¯¹è·¯å¾ |
|---|
| | | icon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.empty.icon |
|---|
| | | }, |
|---|
| | | // æ示æå |
|---|
| | | text: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.empty.text |
|---|
| | | }, |
|---|
| | | // æåé¢è² |
|---|
| | | textColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.empty.textColor |
|---|
| | | }, |
|---|
| | | // æåå¤§å° |
|---|
| | | textSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.empty.textSize |
|---|
| | | }, |
|---|
| | | // å¾æ çé¢è² |
|---|
| | | iconColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.empty.iconColor |
|---|
| | | }, |
|---|
| | | // å¾æ çå¤§å° |
|---|
| | | iconSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.empty.iconSize |
|---|
| | | }, |
|---|
| | | // éæ©é¢ç½®çå¾æ ç±»å |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.empty.mode |
|---|
| | | }, |
|---|
| | | // å¾æ 宽度ï¼åä½px |
|---|
| | | width: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.empty.width |
|---|
| | | }, |
|---|
| | | // å¾æ é«åº¦ï¼åä½px |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.empty.height |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºç»ä»¶ |
|---|
| | | show: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.empty.show |
|---|
| | | }, |
|---|
| | | // ç»ä»¶è·ç¦»ä¸ä¸ä¸ªå
ç´ ä¹é´çè·ç¦»ï¼é»è®¤pxåä½ |
|---|
| | | marginTop: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.empty.marginTop |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-empty" |
|---|
| | | :style="[emptyStyle]" |
|---|
| | | v-if="show" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | v-if="!isSrc" |
|---|
| | | :name="mode === 'message' ? 'chat' : `empty-${mode}`" |
|---|
| | | :size="iconSize" |
|---|
| | | :color="iconColor" |
|---|
| | | margin-top="14" |
|---|
| | | ></u-icon> |
|---|
| | | <image |
|---|
| | | v-else |
|---|
| | | :style="{ |
|---|
| | | width: $u.addUnit(width), |
|---|
| | | height: $u.addUnit(height), |
|---|
| | | }" |
|---|
| | | :src="icon" |
|---|
| | | mode="widthFix" |
|---|
| | | ></image> |
|---|
| | | <text |
|---|
| | | class="u-empty__text" |
|---|
| | | :style="[textStyle]" |
|---|
| | | >{{text ? text : icons[mode]}}</text> |
|---|
| | | <view class="u-empty__wrap" v-if="$slots.default || $slots.$default"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * empty å
容为空 |
|---|
| | | * @description 该ç»ä»¶ç¨äºéè¦å è½½å
容ï¼ä½æ¯å è½½ç第ä¸é¡µæ°æ®å°±ä¸ºç©ºï¼æ示ä¸ä¸ª"没æå
容"çåºæ¯ï¼ æ们精å¿æéäºåå 个åºæ¯çå¾æ ï¼æ¹ä¾¿æ¨ä½¿ç¨ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/empty.html |
|---|
| | | * @property {String} icon å
ç½®å¾æ å称ï¼æå¾çè·¯å¾ï¼å»ºè®®ç»å¯¹è·¯å¾ |
|---|
| | | * @property {String} text æ示æå |
|---|
| | | * @property {String} textColor æåé¢è² (é»è®¤ '#c0c4cc' ) |
|---|
| | | * @property {String | Number} textSize æåå¤§å° ï¼é»è®¤ 14 ï¼ |
|---|
| | | * @property {String} iconColor å¾æ çé¢è² ï¼é»è®¤ '#c0c4cc' ï¼ |
|---|
| | | * @property {String | Number} iconSize å¾æ çå¤§å° ï¼é»è®¤ 90 ï¼ |
|---|
| | | * @property {String} mode éæ©é¢ç½®çå¾æ ç±»å ï¼é»è®¤ 'data' ï¼ |
|---|
| | | * @property {String | Number} width å¾æ 宽度ï¼åä½px ï¼é»è®¤ 160 ï¼ |
|---|
| | | * @property {String | Number} height å¾æ é«åº¦ï¼åä½px ï¼é»è®¤ 160 ï¼ |
|---|
| | | * @property {Boolean} show æ¯å¦æ¾ç¤ºç»ä»¶ ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String | Number} marginTop ç»ä»¶è·ç¦»ä¸ä¸ä¸ªå
ç´ ä¹é´çè·ç¦»ï¼é»è®¤pxåä½ ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @event {Function} click ç¹å»ç»ä»¶æ¶è§¦å |
|---|
| | | * @event {Function} close ç¹å»å
³éæé®æ¶è§¦å |
|---|
| | | * @example <u-empty text="æè°ä¼äººï¼å¨æ°´ä¸æ¹" mode="list"></u-empty> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-empty", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | icons: { |
|---|
| | | car: 'è´ç©è½¦ä¸ºç©º', |
|---|
| | | page: '页é¢ä¸åå¨', |
|---|
| | | search: '没ææç´¢ç»æ', |
|---|
| | | address: '没ææ¶è´§å°å', |
|---|
| | | wifi: '没æWiFi', |
|---|
| | | order: '订å为空', |
|---|
| | | coupon: '没æä¼æ å¸', |
|---|
| | | favor: 'ææ æ¶è', |
|---|
| | | permission: 'æ æé', |
|---|
| | | history: 'æ åå²è®°å½', |
|---|
| | | news: 'æ æ°é»å表', |
|---|
| | | message: 'æ¶æ¯å表为空', |
|---|
| | | list: 'å表为空', |
|---|
| | | data: 'æ°æ®ä¸ºç©º', |
|---|
| | | comment: 'ææ è¯è®º', |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // ç»ä»¶æ ·å¼ |
|---|
| | | emptyStyle() { |
|---|
| | | const style = {} |
|---|
| | | style.marginTop = uni.$u.addUnit(this.marginTop) |
|---|
| | | // å并customStyleæ ·å¼ï¼æ¤åæ°éè¿mixinä¸çpropsä¼ é |
|---|
| | | return uni.$u.deepMerge(uni.$u.addStyle(this.customStyle), style) |
|---|
| | | }, |
|---|
| | | // ææ¬æ ·å¼ |
|---|
| | | textStyle() { |
|---|
| | | const style = {} |
|---|
| | | style.color = this.textColor |
|---|
| | | style.fontSize = uni.$u.addUnit(this.textSize) |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // å¤æiconæ¯å¦å¾çè·¯å¾ |
|---|
| | | isSrc() { |
|---|
| | | return this.icon.indexOf('/') >= 0 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../libs/css/components.scss'; |
|---|
| | | $u-empty-text-margin-top:20rpx !default; |
|---|
| | | $u-empty-slot-margin-top:20rpx !default; |
|---|
| | | |
|---|
| | | .u-empty { |
|---|
| | | @include flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | margin-top: $u-empty-text-margin-top; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .u-slot-wrap { |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | margin-top:$u-empty-slot-margin-top; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // inputçlabelæç¤ºè¯ |
|---|
| | | label: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.formItem.label |
|---|
| | | }, |
|---|
| | | // ç»å®çå¼ |
|---|
| | | prop: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.formItem.prop |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¡¨ååçä¸åçº¿è¾¹æ¡ |
|---|
| | | borderBottom: { |
|---|
| | | type: [String, Boolean], |
|---|
| | | default: uni.$u.props.formItem.borderBottom |
|---|
| | | }, |
|---|
| | | // labelç宽度ï¼åä½px |
|---|
| | | labelWidth: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.formItem.labelWidth |
|---|
| | | }, |
|---|
| | | // å³ä¾§å¾æ |
|---|
| | | rightIcon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.formItem.rightIcon |
|---|
| | | }, |
|---|
| | | // 左侧å¾æ |
|---|
| | | leftIcon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.formItem.leftIcon |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå·¦è¾¹çå¿
å¡«æå·ï¼åªä½æ¾ç¤ºç¨ï¼å
·ä½æ ¡éªå¿
å¡«çé»è¾ï¼è¯·å¨rulesä¸é
ç½® |
|---|
| | | required: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.formItem.required |
|---|
| | | }, |
|---|
| | | leftIconStyle: { |
|---|
| | | type: [String, Object], |
|---|
| | | default: uni.$u.props.formItem.leftIconStyle, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-form-item"> |
|---|
| | | <view |
|---|
| | | class="u-form-item__body" |
|---|
| | | @tap="clickHandler" |
|---|
| | | :style="[$u.addStyle(customStyle), { |
|---|
| | | flexDirection: parentData.labelPosition === 'left' ? 'row' : 'column' |
|---|
| | | }]" |
|---|
| | | > |
|---|
| | | <!-- 微信å°ç¨åºä¸ï¼å°ä¸ä¸ªåæ°è®¾ç½®ç©ºå符串ï¼ç»æä¼åæå符串"true" --> |
|---|
| | | <slot name="label"> |
|---|
| | | <!-- {{required}} --> |
|---|
| | | <view |
|---|
| | | class="u-form-item__body__left" |
|---|
| | | v-if="required || leftIcon || label" |
|---|
| | | :style="{ |
|---|
| | | width: $u.addUnit(labelWidth || parentData.labelWidth), |
|---|
| | | marginBottom: parentData.labelPosition === 'left' ? 0 : '5px', |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <!-- 为äºåå¯¹é½ --> |
|---|
| | | <view class="u-form-item__body__left__content"> |
|---|
| | | <!-- nvueä¸æ¯æ伪å
ç´ before --> |
|---|
| | | <text |
|---|
| | | v-if="required" |
|---|
| | | class="u-form-item__body__left__content__required" |
|---|
| | | >*</text> |
|---|
| | | <view |
|---|
| | | class="u-form-item__body__left__content__icon" |
|---|
| | | v-if="leftIcon" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | :name="leftIcon" |
|---|
| | | :custom-style="leftIconStyle" |
|---|
| | | ></u-icon> |
|---|
| | | </view> |
|---|
| | | <text |
|---|
| | | class="u-form-item__body__left__content__label" |
|---|
| | | :style="[parentData.labelStyle, { |
|---|
| | | justifyContent: parentData.labelAlign === 'left' ? 'flex-start' : parentData.labelAlign === 'center' ? 'center' : 'flex-end' |
|---|
| | | }]" |
|---|
| | | >{{ label }}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </slot> |
|---|
| | | <view class="u-form-item__body__right"> |
|---|
| | | <view class="u-form-item__body__right__content"> |
|---|
| | | <view class="u-form-item__body__right__content__slot"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | class="item__body__right__content__icon" |
|---|
| | | v-if="$slots.right" |
|---|
| | | > |
|---|
| | | <slot name="right" /> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <slot name="error"> |
|---|
| | | <text |
|---|
| | | v-if="!!message && parentData.errorType === 'message'" |
|---|
| | | class="u-form-item__body__right__message" |
|---|
| | | :style="{ |
|---|
| | | marginLeft: $u.addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth)) |
|---|
| | | }" |
|---|
| | | >{{ message }}</text> |
|---|
| | | </slot> |
|---|
| | | <u-line |
|---|
| | | v-if="borderBottom" |
|---|
| | | :color="message && parentData.errorType === 'border-bottom' ? $u.color.error : propsLine.color" |
|---|
| | | :customStyle="`margin-top: ${message && parentData.errorType === 'message' ? '5px' : 0}`" |
|---|
| | | ></u-line> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * Form 表å |
|---|
| | | * @description æ¤ç»ä»¶ä¸è¬ç¨äºè¡¨ååºæ¯ï¼å¯ä»¥é
ç½®Inputè¾å
¥æ¡ï¼Selectå¼¹åºæ¡ï¼è¿è¡è¡¨åéªè¯çã |
|---|
| | | * @tutorial https://www.uviewui.com/components/form.html |
|---|
| | | * @property {String} label inputçlabelæç¤ºè¯ |
|---|
| | | * @property {String} prop ç»å®çå¼ |
|---|
| | | * @property {String | Boolean} borderBottom æ¯å¦æ¾ç¤ºè¡¨ååçä¸åçº¿è¾¹æ¡ |
|---|
| | | * @property {String | Number} labelWidth labelç宽度ï¼åä½px |
|---|
| | | * @property {String} rightIcon å³ä¾§å¾æ |
|---|
| | | * @property {String} leftIcon 左侧å¾æ |
|---|
| | | * @property {String | Object} leftIconStyle 左侧å¾æ çæ ·å¼ |
|---|
| | | * @property {Boolean} required æ¯å¦æ¾ç¤ºå·¦è¾¹çå¿
å¡«æå·ï¼åªä½æ¾ç¤ºç¨ï¼å
·ä½æ ¡éªå¿
å¡«çé»è¾ï¼è¯·å¨rulesä¸é
ç½® (é»è®¤ false ) |
|---|
| | | * |
|---|
| | | * @example <u-form-item label="å§å" prop="userInfo.name" borderBottom ref="item1"></u-form-item> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-form-item', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // é误æç¤ºè¯ |
|---|
| | | message: '', |
|---|
| | | parentData: { |
|---|
| | | // æ示ææ¬çä½ç½® |
|---|
| | | labelPosition: 'left', |
|---|
| | | // æ示ææ¬å¯¹é½æ¹å¼ |
|---|
| | | labelAlign: 'left', |
|---|
| | | // æ示ææ¬çæ ·å¼ |
|---|
| | | labelStyle: {}, |
|---|
| | | // æ示ææ¬ç宽度 |
|---|
| | | labelWidth: 45, |
|---|
| | | // é误æ示æ¹å¼ |
|---|
| | | errorType: 'message' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // ç»ä»¶å建å®ææ¶ï¼å°å½åå®ä¾ä¿åå°u-formä¸ |
|---|
| | | computed: { |
|---|
| | | propsLine() { |
|---|
| | | return uni.$u.props.line |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | // ç¶ç»ä»¶çå®ä¾ |
|---|
| | | this.updateParentData() |
|---|
| | | if (!this.parent) { |
|---|
| | | uni.$u.error('u-form-iteméè¦ç»åu-formç»ä»¶ä½¿ç¨') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·åç¶ç»ä»¶çåæ° |
|---|
| | | updateParentData() { |
|---|
| | | // æ¤æ¹æ³åå¨mixinä¸ |
|---|
| | | this.getParentData('u-form'); |
|---|
| | | }, |
|---|
| | | // 移é¤u-form-itemçæ ¡éªç»æ |
|---|
| | | clearValidate() { |
|---|
| | | this.message = null |
|---|
| | | }, |
|---|
| | | // æ¸
空å½åçç»ä»¶çæ ¡éªç»æï¼å¹¶é置为åå§å¼ |
|---|
| | | resetField() { |
|---|
| | | // æ¾å°åå§å¼ |
|---|
| | | const value = uni.$u.getProperty(this.parent.originalModel, this.prop) |
|---|
| | | // å°u-formçmodelçpropå±æ§é¾è¿ååå§å¼ |
|---|
| | | uni.$u.setProperty(this.parent.model, this.prop, value) |
|---|
| | | // 移é¤æ ¡éªç»æ |
|---|
| | | this.message = null |
|---|
| | | }, |
|---|
| | | // ç¹å»ç»ä»¶ |
|---|
| | | clickHandler() { |
|---|
| | | this.$emit('click') |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-form-item { |
|---|
| | | @include flex(column); |
|---|
| | | font-size: 14px; |
|---|
| | | color: $u-main-color; |
|---|
| | | |
|---|
| | | &__body { |
|---|
| | | @include flex; |
|---|
| | | padding: 10px 0; |
|---|
| | | |
|---|
| | | &__left { |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | position: relative; |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | padding-right: 10rpx; |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | margin-right: 8rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__required { |
|---|
| | | position: absolute; |
|---|
| | | left: -9px; |
|---|
| | | color: $u-error; |
|---|
| | | line-height: 20px; |
|---|
| | | font-size: 20px; |
|---|
| | | top: 3px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__label { |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | flex: 1; |
|---|
| | | color: $u-main-color; |
|---|
| | | font-size: 15px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__right { |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &__slot { |
|---|
| | | flex: 1; |
|---|
| | | /* #ifndef MP */ |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | margin-left: 10rpx; |
|---|
| | | color: $u-light-color; |
|---|
| | | font-size: 30rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__message { |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 12px; |
|---|
| | | color: $u-error; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å½åformçéè¦éªè¯å段çéå |
|---|
| | | model: { |
|---|
| | | type: Object, |
|---|
| | | default: uni.$u.props.form.model |
|---|
| | | }, |
|---|
| | | // éªè¯è§å |
|---|
| | | rules: { |
|---|
| | | type: [Object, Function, Array], |
|---|
| | | default: uni.$u.props.form.rules |
|---|
| | | }, |
|---|
| | | // æé误æ¶çæ示æ¹å¼ï¼message-æ示信æ¯ï¼toast-è¿è¡toastæ示 |
|---|
| | | // border-bottom-ä¸è¾¹æ¡åç°çº¢è²ï¼none-æ æ示 |
|---|
| | | errorType: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.form.errorType |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¡¨ååçä¸åçº¿è¾¹æ¡ |
|---|
| | | borderBottom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.form.borderBottom |
|---|
| | | }, |
|---|
| | | // labelçä½ç½®ï¼left-左边ï¼top-ä¸è¾¹ |
|---|
| | | labelPosition: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.form.labelPosition |
|---|
| | | }, |
|---|
| | | // labelç宽度ï¼åä½px |
|---|
| | | labelWidth: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.form.labelWidth |
|---|
| | | }, |
|---|
| | | // lableåä½ç对é½æ¹å¼ |
|---|
| | | labelAlign: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.form.labelAlign |
|---|
| | | }, |
|---|
| | | // lableçæ ·å¼ï¼å¯¹è±¡å½¢å¼ |
|---|
| | | labelStyle: { |
|---|
| | | type: Object, |
|---|
| | | default: uni.$u.props.form.labelStyle |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-form"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from "./props.js"; |
|---|
| | | import Schema from "../../libs/util/async-validator"; |
|---|
| | | // å»é¤è¦åä¿¡æ¯ |
|---|
| | | Schema.warning = function() {}; |
|---|
| | | /** |
|---|
| | | * Form 表å |
|---|
| | | * @description æ¤ç»ä»¶ä¸è¬ç¨äºè¡¨ååºæ¯ï¼å¯ä»¥é
ç½®Inputè¾å
¥æ¡ï¼Selectå¼¹åºæ¡ï¼è¿è¡è¡¨åéªè¯çã |
|---|
| | | * @tutorial https://www.uviewui.com/components/form.html |
|---|
| | | * @property {Object} model å½åformçéè¦éªè¯å段çéå |
|---|
| | | * @property {Object | Function | Array} rules éªè¯è§å |
|---|
| | | * @property {String} errorType é误çæ示æ¹å¼ï¼è§ä¸æ¹è¯´æ ( é»è®¤ message ) |
|---|
| | | * @property {Boolean} borderBottom æ¯å¦æ¾ç¤ºè¡¨ååçä¸åçº¿è¾¹æ¡ ( é»è®¤ true ï¼ |
|---|
| | | * @property {String} labelPosition 表ååæ示æåçä½ç½®ï¼left-左侧ï¼top-ä¸æ¹ ( é»è®¤ 'left' ï¼ |
|---|
| | | * @property {String | Number} labelWidth æ示æåç宽度ï¼åä½px ( é»è®¤ 45 ï¼ |
|---|
| | | * @property {String} labelAlign lableåä½ç对é½æ¹å¼ ( é»è®¤ âleft' ï¼ |
|---|
| | | * @property {Object} labelStyle lableçæ ·å¼ï¼å¯¹è±¡å½¢å¼ |
|---|
| | | * @example <u--formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></u--form> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-form", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | provide() { |
|---|
| | | return { |
|---|
| | | uForm: this, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | formRules: {}, |
|---|
| | | // è§åæ ¡éªå¨ |
|---|
| | | validator: {}, |
|---|
| | | // åå§çmodelå¿«ç
§ï¼ç¨äºresetFieldsæ¹æ³é置表åæ¶ä½¿ç¨ |
|---|
| | | originalModel: null, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // çå¬è§åçåå |
|---|
| | | rules: { |
|---|
| | | immediate: true, |
|---|
| | | handler(n) { |
|---|
| | | this.setRules(n); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | // çå¬å±æ§çååï¼éç¥åç»ä»¶u-form-iteméæ°è·åä¿¡æ¯ |
|---|
| | | propsChange(n) { |
|---|
| | | if (this.children?.length) { |
|---|
| | | this.children.map((child) => { |
|---|
| | | // å¤æåç»ä»¶(u-form-item)å¦ææupdateParentDataæ¹æ³çè¯ï¼å°±å°±æ§è¡(æ§è¡çç»ææ¯åç»ä»¶éæ°ä»ç¶ç»ä»¶æåäºææ°çå¼) |
|---|
| | | typeof child.updateParentData == "function" && |
|---|
| | | child.updateParentData(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // çå¬modelçåå§å¼ä½ä¸ºé置表åçå¿«ç
§ |
|---|
| | | model: { |
|---|
| | | immediate: true, |
|---|
| | | handler(n) { |
|---|
| | | if (!this.originalModel) { |
|---|
| | | this.originalModel = uni.$u.deepClone(n); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | propsChange() { |
|---|
| | | return [ |
|---|
| | | this.errorType, |
|---|
| | | this.borderBottom, |
|---|
| | | this.labelPosition, |
|---|
| | | this.labelWidth, |
|---|
| | | this.labelAlign, |
|---|
| | | this.labelStyle, |
|---|
| | | ]; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // åå¨å½åformä¸çææu-form-itemçå®ä¾ |
|---|
| | | // ä¸è½å®ä¹å¨dataä¸ï¼å¦å微信å°ç¨åºä¼é æ循ç¯å¼ç¨èæ¥é |
|---|
| | | this.children = []; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æå¨è®¾ç½®æ ¡éªçè§åï¼å¦æè§åä¸æå½æ°çè¯ï¼å¾®ä¿¡å°ç¨åºä¸ä¼è¿æ»¤æï¼æ以åªè½æå¨è°ç¨è®¾ç½®è§å |
|---|
| | | setRules(rules) { |
|---|
| | | // å¤ææ¯å¦æè§å |
|---|
| | | if (Object.keys(rules).length === 0) return; |
|---|
| | | if (process.env.NODE_ENV === 'development' && Object.keys(this.model).length === 0) { |
|---|
| | | uni.$u.error('设置rulesï¼modelå¿
须设置ï¼å¦æå·²ç»è®¾ç½®ï¼è¯·å·æ°é¡µé¢ã'); |
|---|
| | | return; |
|---|
| | | }; |
|---|
| | | this.formRules = rules; |
|---|
| | | // éæ°å°è§åèµäºValidator |
|---|
| | | this.validator = new Schema(rules); |
|---|
| | | }, |
|---|
| | | // æ¸
空ææu-form-itemç»ä»¶çå
容ï¼æ¬è´¨ä¸æ¯è°ç¨äºu-form-itemç»ä»¶ä¸çresetField()æ¹æ³ |
|---|
| | | resetFields() { |
|---|
| | | this.resetModel(); |
|---|
| | | }, |
|---|
| | | // éç½®model为åå§å¼çå¿«ç
§ |
|---|
| | | resetModel(obj) { |
|---|
| | | // åéææu-form-itemï¼æ ¹æ®å
¶propå±æ§ï¼è¿åmodelçåå§å¿«ç
§ |
|---|
| | | this.children.map((child) => { |
|---|
| | | const prop = child?.prop; |
|---|
| | | const value = uni.$u.getProperty(this.originalModel, prop); |
|---|
| | | uni.$u.setProperty(this.model, prop, value); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // æ¸
ç©ºæ ¡éªç»æ |
|---|
| | | clearValidate(props) { |
|---|
| | | props = [].concat(props); |
|---|
| | | this.children.map((child) => { |
|---|
| | | // å¦æu-form-itemçpropå¨propsæ°ç»ä¸ï¼åæ¸
é¤å¯¹åºçæ ¡éªç»æä¿¡æ¯ |
|---|
| | | if (props[0] === undefined || props.includes(child.prop)) { |
|---|
| | | child.message = null; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 对é¨å表åå段è¿è¡æ ¡éª |
|---|
| | | async validateField(value, callback, event = null) { |
|---|
| | | // $nextTickæ¯å¿
é¡»çï¼å¦åmodelçåæ´ï¼å¯è½ä¼å»¶åäºæ¤æ¹æ³çæ§è¡ |
|---|
| | | this.$nextTick(() => { |
|---|
| | | // æ ¡éªé误信æ¯ï¼è¿åç»åè°æ¹æ³ï¼ç¨äºåæ¾ææform-itemçéè¯¯ä¿¡æ¯ |
|---|
| | | const errorsRes = []; |
|---|
| | | // å¦æ为å符串ï¼è½¬ä¸ºæ°ç» |
|---|
| | | value = [].concat(value); |
|---|
| | | // åéchildrenææåform-item |
|---|
| | | this.children.map((child) => { |
|---|
| | | // ç¨äºåæ¾form-itemçéè¯¯ä¿¡æ¯ |
|---|
| | | const childErrors = []; |
|---|
| | | if (value.includes(child.prop)) { |
|---|
| | | // è·å对åºçå±æ§ï¼éè¿ç±»ä¼¼'a.b.c'çå½¢å¼ |
|---|
| | | const propertyVal = uni.$u.getProperty( |
|---|
| | | this.model, |
|---|
| | | child.prop |
|---|
| | | ); |
|---|
| | | // å±æ§é¾æ°ç» |
|---|
| | | const propertyChain = child.prop.split("."); |
|---|
| | | const propertyName = |
|---|
| | | propertyChain[propertyChain.length - 1]; |
|---|
| | | |
|---|
| | | const rule = this.formRules[child.prop]; |
|---|
| | | // å¦æä¸åå¨å¯¹åºçè§åï¼ç´æ¥è¿åï¼å¦åæ ¡éªå¨ä¼æ¥é |
|---|
| | | if (!rule) return; |
|---|
| | | // ruleè§åå¯ä¸ºæ°ç»å½¢å¼ï¼ä¹å¯ä¸ºå¯¹è±¡å½¢å¼ï¼æ¤å¤æ¼æ¥æ为æ°ç» |
|---|
| | | const rules = [].concat(rule); |
|---|
| | | |
|---|
| | | // 对rulesæ°ç»è¿è¡æ ¡éª |
|---|
| | | for (let i = 0; i < rules.length; i++) { |
|---|
| | | const ruleItem = rules[i]; |
|---|
| | | // å°u-form-itemç触åå¨è½¬ä¸ºæ°ç»å½¢å¼ |
|---|
| | | const trigger = [].concat(ruleItem?.trigger); |
|---|
| | | // å¦ææ¯æä¼ å
¥è§¦åäºä»¶ï¼ä½æ¯æ¤form-itemå´æ²¡æé
ç½®æ¤è§¦åå¨çè¯ï¼ä¸æ§è¡æ ¡éªæä½ |
|---|
| | | if (event && !trigger.includes(event)) continue; |
|---|
| | | // å®ä¾åæ ¡éªå¯¹è±¡ï¼ä¼ å
¥æé è§å |
|---|
| | | const validator = new Schema({ |
|---|
| | | [propertyName]: ruleItem, |
|---|
| | | }); |
|---|
| | | validator.validate({ |
|---|
| | | [propertyName]: propertyVal, |
|---|
| | | }, |
|---|
| | | (errors, fields) => { |
|---|
| | | if (uni.$u.test.array(errors)) { |
|---|
| | | errorsRes.push(...errors); |
|---|
| | | childErrors.push(...errors); |
|---|
| | | } |
|---|
| | | child.message = |
|---|
| | | childErrors[0]?.message ?? null; |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | // æ§è¡åè°å½æ° |
|---|
| | | typeof callback === "function" && callback(errorsRes); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // æ ¡éªå
¨é¨æ°æ® |
|---|
| | | validate(callback) { |
|---|
| | | // å¼åç¯å¢ææ示ï¼ç产ç¯å¢ä¸ä¼æ示 |
|---|
| | | if (process.env.NODE_ENV === 'development' && Object.keys(this.formRules).length === 0) { |
|---|
| | | uni.$u.error('æªè®¾ç½®rulesï¼è¯·çæ档说æï¼å¦æå·²ç»è®¾ç½®ï¼è¯·å·æ°é¡µé¢ã'); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | // $nextTickæ¯å¿
é¡»çï¼å¦åmodelçåæ´ï¼å¯è½ä¼å»¶åäºvalidateæ¹æ³ |
|---|
| | | this.$nextTick(() => { |
|---|
| | | // è·åææform-itemçpropï¼äº¤ç»validateFieldæ¹æ³è¿è¡æ ¡éª |
|---|
| | | const formItemProps = this.children.map( |
|---|
| | | (item) => item.prop |
|---|
| | | ); |
|---|
| | | this.validateField(formItemProps, (errors) => { |
|---|
| | | if(errors.length) { |
|---|
| | | // å¦æé误æ示æ¹å¼ä¸ºtoastï¼åè¿è¡æ示 |
|---|
| | | this.errorType === 'toast' && uni.$u.toast(errors[0].message) |
|---|
| | | reject(errors) |
|---|
| | | } else { |
|---|
| | | resolve(true) |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // èæ¯é¢è²ï¼é»è®¤transparentï¼ |
|---|
| | | bgColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.gap.bgColor |
|---|
| | | }, |
|---|
| | | // åå²æ§½é«åº¦ï¼åä½pxï¼é»è®¤30ï¼ |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.gap.height |
|---|
| | | }, |
|---|
| | | // ä¸ä¸ä¸ä¸ªç»ä»¶çè·ç¦» |
|---|
| | | marginTop: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.gap.marginTop |
|---|
| | | }, |
|---|
| | | // ä¸ä¸ä¸ä¸ªç»ä»¶çè·ç¦» |
|---|
| | | marginBottom: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.gap.marginBottom |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-gap" :style="[gapStyle]"></view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * gap é´é槽 |
|---|
| | | * @description 该ç»ä»¶ä¸è¬ç¨äºå
容åä¹é´çç¨ä¸ä¸ªç°è²åéå¼çåºæ¯ï¼æ¹ä¾¿ç¨æ·é£æ ¼ç»ä¸ï¼åå°å·¥ä½é |
|---|
| | | * @tutorial https://www.uviewui.com/components/gap.html |
|---|
| | | * @property {String} bgColor èæ¯é¢è² ï¼é»è®¤ 'transparent' ï¼ |
|---|
| | | * @property {String | Number} height åå²æ§½é«åº¦ï¼åä½px ï¼é»è®¤ 20 ï¼ |
|---|
| | | * @property {String | Number} marginTop ä¸åä¸ä¸ªç»ä»¶çè·ç¦»ï¼åä½pxï¼ é»è®¤ 0 ï¼ |
|---|
| | | * @property {String | Number} marginBottom ä¸åä¸ä¸ªç»ä»¶çè·ç¦»ï¼åä½px ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @example <u-gap height="80" bg-color="#bbb"></u-gap> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-gap", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | computed: { |
|---|
| | | gapStyle() { |
|---|
| | | const style = { |
|---|
| | | backgroundColor: this.bgColor, |
|---|
| | | height: uni.$u.addUnit(this.height), |
|---|
| | | marginTop: uni.$u.addUnit(this.marginTop), |
|---|
| | | marginBottom: uni.$u.addUnit(this.marginBottom), |
|---|
| | | } |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å®«æ ¼çname |
|---|
| | | name: { |
|---|
| | | type: [String, Number, null], |
|---|
| | | default: uni.$u.props.gridItem.name |
|---|
| | | }, |
|---|
| | | // èæ¯é¢è² |
|---|
| | | bgColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.gridItem.bgColor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <view |
|---|
| | | class="u-grid-item" |
|---|
| | | hover-class="u-grid-item--hover-class" |
|---|
| | | :hover-stay-time="200" |
|---|
| | | @tap="clickHandler" |
|---|
| | | :class="classes" |
|---|
| | | :style="[itemStyle]" |
|---|
| | | > |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <view |
|---|
| | | class="u-grid-item" |
|---|
| | | :hover-stay-time="200" |
|---|
| | | @tap="clickHandler" |
|---|
| | | :class="classes" |
|---|
| | | :style="[itemStyle]" |
|---|
| | | > |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * gridItem æ示 |
|---|
| | | * @description å®«æ ¼ç»ä»¶ä¸è¬ç¨äºåæ¶å±ç¤ºå¤ä¸ªå类项ç®çåºæ¯ï¼å¯ä»¥ç»å®«æ ¼ç项ç®è®¾ç½®å¾½æ ç»ä»¶(badge)ï¼æè
å¾æ çï¼ä¹å¯ä»¥æ©å±ä¸ºå·¦å³æ»å¨çè½®æå½¢å¼ãæé
u-gridä½¿ç¨ |
|---|
| | | * @tutorial https://www.uviewui.com/components/grid.html |
|---|
| | | * @property {String | Number} name å®«æ ¼çname ( é»è®¤ null ) |
|---|
| | | * @property {String} bgColor å®«æ ¼çèæ¯é¢è² ï¼é»è®¤ 'transparent' ï¼ |
|---|
| | | * @property {Object} customStyle èªå®ä¹æ ·å¼ï¼å¯¹è±¡å½¢å¼ |
|---|
| | | * @event {Function} click ç¹å»å®«æ ¼è§¦å |
|---|
| | | * @example <u-grid-item></u-grid-item> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-grid-item", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | parentData: { |
|---|
| | | col: 3, // ç¶ç»ä»¶ååçå®«æ ¼æ° |
|---|
| | | border: true, // æ¯å¦æ¾ç¤ºè¾¹æ¡ï¼æ ¹æ®ç¶ç»ä»¶å³å® |
|---|
| | | }, |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | width: 0, // nvueä¸æè¿ä¹è®¡ç®ï¼vueä¸æ¾å°computedä¸ï¼å¦åä¼å 为延æ¶é æéªç |
|---|
| | | // #endif |
|---|
| | | classes: [], // ç±»åéåï¼ç¨äºå¤ææ¯å¦æ¾ç¤ºå³è¾¹åä¸è¾¹æ¡ |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | // vueä¸æ¾å°computedä¸ï¼å¦åä¼å 为延æ¶é æéªç |
|---|
| | | width() { |
|---|
| | | return 100 / Number(this.parentData.col) + '%' |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | itemStyle() { |
|---|
| | | const style = { |
|---|
| | | background: this.bgColor, |
|---|
| | | width: this.width |
|---|
| | | } |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | // ç¨äºå¨ç¶ç»ä»¶u-gridçchildrenä¸è¢«æ·»å å
¥åç»ä»¶æ¶ï¼ |
|---|
| | | // éæ°è®¡ç®itemçè¾¹æ¡ |
|---|
| | | uni.$on('$uGridItem', () => { |
|---|
| | | this.gridItemClasses() |
|---|
| | | }) |
|---|
| | | // ç¶ç»ä»¶çå®ä¾ |
|---|
| | | this.updateParentData() |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // è·åå
ç´ è¯¥æçé¿åº¦ï¼nvueä¸è¦å»¶æ¶æåç¡® |
|---|
| | | this.$nextTick(function(){ |
|---|
| | | this.getItemWidth() |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | // ååºäºä»¶ï¼éç¥ææçgrid-itemé½éæ°è®¡ç®èªå·±çè¾¹æ¡ |
|---|
| | | uni.$emit('$uGridItem') |
|---|
| | | this.gridItemClasses() |
|---|
| | | }, |
|---|
| | | // è·åç¶ç»ä»¶çåæ° |
|---|
| | | updateParentData() { |
|---|
| | | // æ¤æ¹æ³åå¨mixinä¸ |
|---|
| | | this.getParentData('u-grid'); |
|---|
| | | }, |
|---|
| | | clickHandler() { |
|---|
| | | let name = this.name |
|---|
| | | // å¦æ没æ设置nameå±æ§ï¼åéç¶ç»ä»¶çchildrenæ°ç»ï¼å¤æå½åçå
ç´ æ¯å¦åæ¬å®ä¾thisç¸çï¼æ¾åºå½åç»ä»¶çç´¢å¼ |
|---|
| | | const children = this.parent?.children |
|---|
| | | if(children && this.name === null) { |
|---|
| | | name = children.findIndex(child => child === this) |
|---|
| | | } |
|---|
| | | // è°ç¨ç¶ç»ä»¶æ¹æ³ï¼ååºäºä»¶ |
|---|
| | | this.parent && this.parent.childClick(name) |
|---|
| | | this.$emit('click', name) |
|---|
| | | }, |
|---|
| | | async getItemWidth() { |
|---|
| | | // å¦ææ¯nvueï¼ä¸è½ä½¿ç¨ç¾åæ¯ï¼åªè½ä½¿ç¨åºå®å®½åº¦ |
|---|
| | | let width = 0 |
|---|
| | | if(this.parent) { |
|---|
| | | // è·åç¶ç»ä»¶å®½åº¦åï¼é¤ä»¥æ
æ ¼æ°ï¼å¾åºæ¯ä¸ªitemç宽度 |
|---|
| | | const parentWidth = await this.getParentWidth() |
|---|
| | | width = parentWidth / Number(this.parentData.col) + 'px' |
|---|
| | | } |
|---|
| | | this.width = width |
|---|
| | | }, |
|---|
| | | // è·åç¶å
ç´ ç尺寸 |
|---|
| | | getParentWidth() { |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // è¿åä¸ä¸ªpromiseï¼è®©è°ç¨è
å¯ä»¥ç¨awaitåæ¥è·å |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | return new Promise(resolve => { |
|---|
| | | // è°ç¨ç¶ç»ä»¶çref |
|---|
| | | dom.getComponentRect(this.parent.$refs['u-grid'], res => { |
|---|
| | | resolve(res.size.width) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | gridItemClasses() { |
|---|
| | | if(this.parentData.border) { |
|---|
| | | const classes = [] |
|---|
| | | this.parent.children.map((child, index) =>{ |
|---|
| | | if(this === child) { |
|---|
| | | const len = this.parent.children.length |
|---|
| | | // è´´è¿å³è¾¹å±å¹è¾¹æ²¿çchildï¼å¹¶ä¸æåä¸ä¸ªï¼æ¯å¦åªæ横å2个çæ¶åï¼ï¼æ éå³è¾¹æ¡ |
|---|
| | | if((index + 1) % this.parentData.col !== 0 && index + 1 !== len) { |
|---|
| | | classes.push('u-border-right') |
|---|
| | | } |
|---|
| | | // æ»çå®«æ ¼æ°é对åæ°åä½çå¼ |
|---|
| | | // å¦æåä½åï¼å¼ä¸º0ï¼åæå³çè¦å°æåä¸æçå®«æ ¼ï¼é½ä¸éè¦ä¸è¾¹æ¡ |
|---|
| | | const lessNum = len % this.parentData.col === 0 ? this.parentData.col : len % this.parentData.col |
|---|
| | | // æä¸é¢çä¸æchildï¼æ éä¸è¾¹æ¡ |
|---|
| | | if(index < len - lessNum) { |
|---|
| | | classes.push('u-border-bottom') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | // æ¯ä»å®ï¼å¤´æ¡å°ç¨åºæ æ³å¨æç»å®ä¸ä¸ªæ°ç»ç±»åï¼å¦å解æåºæ¥çç»æä¼å¸¦æ","ï¼è导è´å¤±æ |
|---|
| | | // #ifdef MP-ALIPAY || MP-TOUTIAO |
|---|
| | | classes = classes.join(' ') |
|---|
| | | // #endif |
|---|
| | | this.classes = classes |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | // 移é¤äºä»¶çå¬ï¼éæ¾æ§è½ |
|---|
| | | uni.$off('$uGridItem') |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | $u-grid-item-hover-class-opcatiy:.5 !default; |
|---|
| | | $u-grid-item-margin-top:1rpx !default; |
|---|
| | | $u-grid-item-border-right-width:0.5px !default; |
|---|
| | | $u-grid-item-border-bottom-width:0.5px !default; |
|---|
| | | $u-grid-item-border-right-color:$u-border-color !default; |
|---|
| | | $u-grid-item-border-bottom-color:$u-border-color !default; |
|---|
| | | .u-grid-item { |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: relative; |
|---|
| | | flex-direction: column; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | /* #ifdef MP */ |
|---|
| | | position: relative; |
|---|
| | | float: left; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | /* #ifdef MP-WEIXIN */ |
|---|
| | | margin-top:$u-grid-item-margin-top; |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | &--hover-class { |
|---|
| | | opacity:$u-grid-item-hover-class-opcatiy; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifdef APP-NVUE */ |
|---|
| | | // ç±äºnvueä¸æ¯æç»ä»¶å
å¼å
¥app.vueä¸åå¼å
¥çæ ·å¼ï¼æ以éè¦åå¨è¿é |
|---|
| | | .u-border-right { |
|---|
| | | border-right-width:$u-grid-item-border-right-width; |
|---|
| | | border-color: $u-grid-item-border-right-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-border-bottom { |
|---|
| | | border-bottom-width:$u-grid-item-border-bottom-width; |
|---|
| | | border-color:$u-grid-item-border-bottom-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // åæå å |
|---|
| | | col: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.grid.col |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¾¹æ¡ |
|---|
| | | border: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.grid.border |
|---|
| | | }, |
|---|
| | | // å®«æ ¼å¯¹é½æ¹å¼ï¼è¡¨ç°ä¸ºæ°éå°çæ¶åï¼é å·¦ï¼å±
ä¸ï¼è¿æ¯é å³ |
|---|
| | | align: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.grid.align |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-grid" |
|---|
| | | ref='u-grid' |
|---|
| | | :style="[gridStyle]" |
|---|
| | | > |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * grid å®«æ ¼å¸å± |
|---|
| | | * @description å®«æ ¼ç»ä»¶ä¸è¬ç¨äºåæ¶å±ç¤ºå¤ä¸ªå类项ç®çåºæ¯ï¼å¯ä»¥ç»å®«æ ¼ç项ç®è®¾ç½®å¾½æ ç»ä»¶(badge)ï¼æè
å¾æ çï¼ä¹å¯ä»¥æ©å±ä¸ºå·¦å³æ»å¨çè½®æå½¢å¼ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/grid.html |
|---|
| | | * @property {String | Number} col å®«æ ¼çåæ°ï¼é»è®¤ 3 ï¼ |
|---|
| | | * @property {Boolean} border æ¯å¦æ¾ç¤ºå®«æ ¼çè¾¹æ¡ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} align å®«æ ¼å¯¹é½æ¹å¼ï¼è¡¨ç°ä¸ºæ°éå°çæ¶åï¼é å·¦ï¼å±
ä¸ï¼è¿æ¯é å³ ï¼é»è®¤ 'left' ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * @event {Function} click ç¹å»å®«æ ¼è§¦å |
|---|
| | | * @example <u-grid :col="3" @click="click"></u-grid> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-grid', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | index: 0, |
|---|
| | | width: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // å½ç¶ç»ä»¶éè¦åç»ä»¶éè¦å
±äº«çåæ°åçäºååï¼æå¨éç¥åç»ä»¶ |
|---|
| | | parentData() { |
|---|
| | | if (this.children.length) { |
|---|
| | | this.children.map(child => { |
|---|
| | | // å¤æåç»ä»¶(u-radio)å¦ææupdateParentDataæ¹æ³çè¯ï¼å°±å°±æ§è¡(æ§è¡çç»ææ¯åç»ä»¶éæ°ä»ç¶ç»ä»¶æåäºææ°çå¼) |
|---|
| | | typeof(child.updateParentData) == 'function' && child.updateParentData(); |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // å¦æå°childrenå®ä¹å¨dataä¸ï¼å¨å¾®ä¿¡å°ç¨åºä¼é æ循ç¯å¼ç¨èæ¥é |
|---|
| | | this.children = [] |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // 计ç®ç¶ç»ä»¶çå¼æ¯å¦åçåå |
|---|
| | | parentData() { |
|---|
| | | return [this.hoverClass, this.col, this.size, this.border]; |
|---|
| | | }, |
|---|
| | | // å®«æ ¼å¯¹é½æ¹å¼ |
|---|
| | | gridStyle() { |
|---|
| | | let style = {}; |
|---|
| | | switch (this.align) { |
|---|
| | | case 'left': |
|---|
| | | style.justifyContent = 'flex-start'; |
|---|
| | | break; |
|---|
| | | case 'center': |
|---|
| | | style.justifyContent = 'center'; |
|---|
| | | break; |
|---|
| | | case 'right': |
|---|
| | | style.justifyContent = 'flex-end'; |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | style.justifyContent = 'flex-start'; |
|---|
| | | }; |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æ¤æ¹æ³ç±u-grid-item触åï¼ç¨äºå¨u-gridååºäºä»¶ |
|---|
| | | childClick(name) { |
|---|
| | | this.$emit('click', name) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | $u-grid-width:100% !default; |
|---|
| | | .u-grid { |
|---|
| | | /* #ifdef MP */ |
|---|
| | | width: $u-grid-width; |
|---|
| | | position: relative; |
|---|
| | | box-sizing: border-box; |
|---|
| | | overflow: hidden; |
|---|
| | | display: block; |
|---|
| | | /* #endif */ |
|---|
| | | justify-content: center; |
|---|
| | | @include flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | 'uicon-level': '\ue693', |
|---|
| | | 'uicon-column-line': '\ue68e', |
|---|
| | | 'uicon-checkbox-mark': '\ue807', |
|---|
| | | 'uicon-folder': '\ue7f5', |
|---|
| | | 'uicon-movie': '\ue7f6', |
|---|
| | | 'uicon-star-fill': '\ue669', |
|---|
| | | 'uicon-star': '\ue65f', |
|---|
| | | 'uicon-phone-fill': '\ue64f', |
|---|
| | | 'uicon-phone': '\ue622', |
|---|
| | | 'uicon-apple-fill': '\ue881', |
|---|
| | | 'uicon-chrome-circle-fill': '\ue885', |
|---|
| | | 'uicon-backspace': '\ue67b', |
|---|
| | | 'uicon-attach': '\ue632', |
|---|
| | | 'uicon-cut': '\ue948', |
|---|
| | | 'uicon-empty-car': '\ue602', |
|---|
| | | 'uicon-empty-coupon': '\ue682', |
|---|
| | | 'uicon-empty-address': '\ue646', |
|---|
| | | 'uicon-empty-favor': '\ue67c', |
|---|
| | | 'uicon-empty-permission': '\ue686', |
|---|
| | | 'uicon-empty-news': '\ue687', |
|---|
| | | 'uicon-empty-search': '\ue664', |
|---|
| | | 'uicon-github-circle-fill': '\ue887', |
|---|
| | | 'uicon-rmb': '\ue608', |
|---|
| | | 'uicon-person-delete-fill': '\ue66a', |
|---|
| | | 'uicon-reload': '\ue788', |
|---|
| | | 'uicon-order': '\ue68f', |
|---|
| | | 'uicon-server-man': '\ue6bc', |
|---|
| | | 'uicon-search': '\ue62a', |
|---|
| | | 'uicon-fingerprint': '\ue955', |
|---|
| | | 'uicon-more-dot-fill': '\ue630', |
|---|
| | | 'uicon-scan': '\ue662', |
|---|
| | | 'uicon-share-square': '\ue60b', |
|---|
| | | 'uicon-map': '\ue61d', |
|---|
| | | 'uicon-map-fill': '\ue64e', |
|---|
| | | 'uicon-tags': '\ue629', |
|---|
| | | 'uicon-tags-fill': '\ue651', |
|---|
| | | 'uicon-bookmark-fill': '\ue63b', |
|---|
| | | 'uicon-bookmark': '\ue60a', |
|---|
| | | 'uicon-eye': '\ue613', |
|---|
| | | 'uicon-eye-fill': '\ue641', |
|---|
| | | 'uicon-mic': '\ue64a', |
|---|
| | | 'uicon-mic-off': '\ue649', |
|---|
| | | 'uicon-calendar': '\ue66e', |
|---|
| | | 'uicon-calendar-fill': '\ue634', |
|---|
| | | 'uicon-trash': '\ue623', |
|---|
| | | 'uicon-trash-fill': '\ue658', |
|---|
| | | 'uicon-play-left': '\ue66d', |
|---|
| | | 'uicon-play-right': '\ue610', |
|---|
| | | 'uicon-minus': '\ue618', |
|---|
| | | 'uicon-plus': '\ue62d', |
|---|
| | | 'uicon-info': '\ue653', |
|---|
| | | 'uicon-info-circle': '\ue7d2', |
|---|
| | | 'uicon-info-circle-fill': '\ue64b', |
|---|
| | | 'uicon-question': '\ue715', |
|---|
| | | 'uicon-error': '\ue6d3', |
|---|
| | | 'uicon-close': '\ue685', |
|---|
| | | 'uicon-checkmark': '\ue6a8', |
|---|
| | | 'uicon-android-circle-fill': '\ue67e', |
|---|
| | | 'uicon-android-fill': '\ue67d', |
|---|
| | | 'uicon-ie': '\ue87b', |
|---|
| | | 'uicon-IE-circle-fill': '\ue889', |
|---|
| | | 'uicon-google': '\ue87a', |
|---|
| | | 'uicon-google-circle-fill': '\ue88a', |
|---|
| | | 'uicon-setting-fill': '\ue872', |
|---|
| | | 'uicon-setting': '\ue61f', |
|---|
| | | 'uicon-minus-square-fill': '\ue855', |
|---|
| | | 'uicon-plus-square-fill': '\ue856', |
|---|
| | | 'uicon-heart': '\ue7df', |
|---|
| | | 'uicon-heart-fill': '\ue851', |
|---|
| | | 'uicon-camera': '\ue7d7', |
|---|
| | | 'uicon-camera-fill': '\ue870', |
|---|
| | | 'uicon-more-circle': '\ue63e', |
|---|
| | | 'uicon-more-circle-fill': '\ue645', |
|---|
| | | 'uicon-chat': '\ue620', |
|---|
| | | 'uicon-chat-fill': '\ue61e', |
|---|
| | | 'uicon-bag-fill': '\ue617', |
|---|
| | | 'uicon-bag': '\ue619', |
|---|
| | | 'uicon-error-circle-fill': '\ue62c', |
|---|
| | | 'uicon-error-circle': '\ue624', |
|---|
| | | 'uicon-close-circle': '\ue63f', |
|---|
| | | 'uicon-close-circle-fill': '\ue637', |
|---|
| | | 'uicon-checkmark-circle': '\ue63d', |
|---|
| | | 'uicon-checkmark-circle-fill': '\ue635', |
|---|
| | | 'uicon-question-circle-fill': '\ue666', |
|---|
| | | 'uicon-question-circle': '\ue625', |
|---|
| | | 'uicon-share': '\ue631', |
|---|
| | | 'uicon-share-fill': '\ue65e', |
|---|
| | | 'uicon-shopping-cart': '\ue621', |
|---|
| | | 'uicon-shopping-cart-fill': '\ue65d', |
|---|
| | | 'uicon-bell': '\ue609', |
|---|
| | | 'uicon-bell-fill': '\ue640', |
|---|
| | | 'uicon-list': '\ue650', |
|---|
| | | 'uicon-list-dot': '\ue616', |
|---|
| | | 'uicon-zhihu': '\ue6ba', |
|---|
| | | 'uicon-zhihu-circle-fill': '\ue709', |
|---|
| | | 'uicon-zhifubao': '\ue6b9', |
|---|
| | | 'uicon-zhifubao-circle-fill': '\ue6b8', |
|---|
| | | 'uicon-weixin-circle-fill': '\ue6b1', |
|---|
| | | 'uicon-weixin-fill': '\ue6b2', |
|---|
| | | 'uicon-twitter-circle-fill': '\ue6ab', |
|---|
| | | 'uicon-twitter': '\ue6aa', |
|---|
| | | 'uicon-taobao-circle-fill': '\ue6a7', |
|---|
| | | 'uicon-taobao': '\ue6a6', |
|---|
| | | 'uicon-weibo-circle-fill': '\ue6a5', |
|---|
| | | 'uicon-weibo': '\ue6a4', |
|---|
| | | 'uicon-qq-fill': '\ue6a1', |
|---|
| | | 'uicon-qq-circle-fill': '\ue6a0', |
|---|
| | | 'uicon-moments-circel-fill': '\ue69a', |
|---|
| | | 'uicon-moments': '\ue69b', |
|---|
| | | 'uicon-qzone': '\ue695', |
|---|
| | | 'uicon-qzone-circle-fill': '\ue696', |
|---|
| | | 'uicon-baidu-circle-fill': '\ue680', |
|---|
| | | 'uicon-baidu': '\ue681', |
|---|
| | | 'uicon-facebook-circle-fill': '\ue68a', |
|---|
| | | 'uicon-facebook': '\ue689', |
|---|
| | | 'uicon-car': '\ue60c', |
|---|
| | | 'uicon-car-fill': '\ue636', |
|---|
| | | 'uicon-warning-fill': '\ue64d', |
|---|
| | | 'uicon-warning': '\ue694', |
|---|
| | | 'uicon-clock-fill': '\ue638', |
|---|
| | | 'uicon-clock': '\ue60f', |
|---|
| | | 'uicon-edit-pen': '\ue612', |
|---|
| | | 'uicon-edit-pen-fill': '\ue66b', |
|---|
| | | 'uicon-email': '\ue611', |
|---|
| | | 'uicon-email-fill': '\ue642', |
|---|
| | | 'uicon-minus-circle': '\ue61b', |
|---|
| | | 'uicon-minus-circle-fill': '\ue652', |
|---|
| | | 'uicon-plus-circle': '\ue62e', |
|---|
| | | 'uicon-plus-circle-fill': '\ue661', |
|---|
| | | 'uicon-file-text': '\ue663', |
|---|
| | | 'uicon-file-text-fill': '\ue665', |
|---|
| | | 'uicon-pushpin': '\ue7e3', |
|---|
| | | 'uicon-pushpin-fill': '\ue86e', |
|---|
| | | 'uicon-grid': '\ue673', |
|---|
| | | 'uicon-grid-fill': '\ue678', |
|---|
| | | 'uicon-play-circle': '\ue647', |
|---|
| | | 'uicon-play-circle-fill': '\ue655', |
|---|
| | | 'uicon-pause-circle-fill': '\ue654', |
|---|
| | | 'uicon-pause': '\ue8fa', |
|---|
| | | 'uicon-pause-circle': '\ue643', |
|---|
| | | 'uicon-eye-off': '\ue648', |
|---|
| | | 'uicon-eye-off-outline': '\ue62b', |
|---|
| | | 'uicon-gift-fill': '\ue65c', |
|---|
| | | 'uicon-gift': '\ue65b', |
|---|
| | | 'uicon-rmb-circle-fill': '\ue657', |
|---|
| | | 'uicon-rmb-circle': '\ue677', |
|---|
| | | 'uicon-kefu-ermai': '\ue656', |
|---|
| | | 'uicon-server-fill': '\ue751', |
|---|
| | | 'uicon-coupon-fill': '\ue8c4', |
|---|
| | | 'uicon-coupon': '\ue8ae', |
|---|
| | | 'uicon-integral': '\ue704', |
|---|
| | | 'uicon-integral-fill': '\ue703', |
|---|
| | | 'uicon-home-fill': '\ue964', |
|---|
| | | 'uicon-home': '\ue965', |
|---|
| | | 'uicon-hourglass-half-fill': '\ue966', |
|---|
| | | 'uicon-hourglass': '\ue967', |
|---|
| | | 'uicon-account': '\ue628', |
|---|
| | | 'uicon-plus-people-fill': '\ue626', |
|---|
| | | 'uicon-minus-people-fill': '\ue615', |
|---|
| | | 'uicon-account-fill': '\ue614', |
|---|
| | | 'uicon-thumb-down-fill': '\ue726', |
|---|
| | | 'uicon-thumb-down': '\ue727', |
|---|
| | | 'uicon-thumb-up': '\ue733', |
|---|
| | | 'uicon-thumb-up-fill': '\ue72f', |
|---|
| | | 'uicon-lock-fill': '\ue979', |
|---|
| | | 'uicon-lock-open': '\ue973', |
|---|
| | | 'uicon-lock-opened-fill': '\ue974', |
|---|
| | | 'uicon-lock': '\ue97a', |
|---|
| | | 'uicon-red-packet-fill': '\ue690', |
|---|
| | | 'uicon-photo-fill': '\ue98b', |
|---|
| | | 'uicon-photo': '\ue98d', |
|---|
| | | 'uicon-volume-off-fill': '\ue659', |
|---|
| | | 'uicon-volume-off': '\ue644', |
|---|
| | | 'uicon-volume-fill': '\ue670', |
|---|
| | | 'uicon-volume': '\ue633', |
|---|
| | | 'uicon-red-packet': '\ue691', |
|---|
| | | 'uicon-download': '\ue63c', |
|---|
| | | 'uicon-arrow-up-fill': '\ue6b0', |
|---|
| | | 'uicon-arrow-down-fill': '\ue600', |
|---|
| | | 'uicon-play-left-fill': '\ue675', |
|---|
| | | 'uicon-play-right-fill': '\ue676', |
|---|
| | | 'uicon-rewind-left-fill': '\ue679', |
|---|
| | | 'uicon-rewind-right-fill': '\ue67a', |
|---|
| | | 'uicon-arrow-downward': '\ue604', |
|---|
| | | 'uicon-arrow-leftward': '\ue601', |
|---|
| | | 'uicon-arrow-rightward': '\ue603', |
|---|
| | | 'uicon-arrow-upward': '\ue607', |
|---|
| | | 'uicon-arrow-down': '\ue60d', |
|---|
| | | 'uicon-arrow-right': '\ue605', |
|---|
| | | 'uicon-arrow-left': '\ue60e', |
|---|
| | | 'uicon-arrow-up': '\ue606', |
|---|
| | | 'uicon-skip-back-left': '\ue674', |
|---|
| | | 'uicon-skip-forward-right': '\ue672', |
|---|
| | | 'uicon-rewind-right': '\ue66f', |
|---|
| | | 'uicon-rewind-left': '\ue671', |
|---|
| | | 'uicon-arrow-right-double': '\ue68d', |
|---|
| | | 'uicon-arrow-left-double': '\ue68c', |
|---|
| | | 'uicon-wifi-off': '\ue668', |
|---|
| | | 'uicon-wifi': '\ue667', |
|---|
| | | 'uicon-empty-data': '\ue62f', |
|---|
| | | 'uicon-empty-history': '\ue684', |
|---|
| | | 'uicon-empty-list': '\ue68b', |
|---|
| | | 'uicon-empty-page': '\ue627', |
|---|
| | | 'uicon-empty-order': '\ue639', |
|---|
| | | 'uicon-man': '\ue697', |
|---|
| | | 'uicon-woman': '\ue69c', |
|---|
| | | 'uicon-man-add': '\ue61c', |
|---|
| | | 'uicon-man-add-fill': '\ue64c', |
|---|
| | | 'uicon-man-delete': '\ue61a', |
|---|
| | | 'uicon-man-delete-fill': '\ue66a', |
|---|
| | | 'uicon-zh': '\ue70a', |
|---|
| | | 'uicon-en': '\ue692' |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å¾æ ç±»å |
|---|
| | | name: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.icon.name |
|---|
| | | }, |
|---|
| | | // å¾æ é¢è²ï¼å¯æ¥å主é¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.icon.color |
|---|
| | | }, |
|---|
| | | // åä½å¤§å°ï¼åä½px |
|---|
| | | size: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.icon.size |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºç²ä½ |
|---|
| | | bold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.icon.bold |
|---|
| | | }, |
|---|
| | | // ç¹å»å¾æ çæ¶åä¼ éäºä»¶åºå»çindexï¼ç¨äºåºåç¹å»äºåªä¸ä¸ªï¼ |
|---|
| | | index: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.icon.index |
|---|
| | | }, |
|---|
| | | // 触æ¸å¾æ æ¶çç±»å |
|---|
| | | hoverClass: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.icon.hoverClass |
|---|
| | | }, |
|---|
| | | // èªå®ä¹æ©å±åç¼ï¼æ¹ä¾¿ç¨æ·æ©å±èªå·±çå¾æ åº |
|---|
| | | customPrefix: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.icon.customPrefix |
|---|
| | | }, |
|---|
| | | // å¾æ å³è¾¹æè
ä¸é¢çæå |
|---|
| | | label: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.icon.label |
|---|
| | | }, |
|---|
| | | // labelçä½ç½®ï¼åªè½å³è¾¹æè
ä¸è¾¹ |
|---|
| | | labelPos: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.icon.labelPos |
|---|
| | | }, |
|---|
| | | // labelçå¤§å° |
|---|
| | | labelSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.icon.labelSize |
|---|
| | | }, |
|---|
| | | // labelçé¢è² |
|---|
| | | labelColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.icon.labelColor |
|---|
| | | }, |
|---|
| | | // labelä¸å¾æ çè·ç¦» |
|---|
| | | space: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.icon.space |
|---|
| | | }, |
|---|
| | | // å¾ççmode |
|---|
| | | imgMode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.icon.imgMode |
|---|
| | | }, |
|---|
| | | // ç¨äºæ¾ç¤ºå¾çå°å¾æ æ¶ï¼å¾çç宽度 |
|---|
| | | width: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.icon.width |
|---|
| | | }, |
|---|
| | | // ç¨äºæ¾ç¤ºå¾çå°å¾æ æ¶ï¼å¾ççé«åº¦ |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.icon.height |
|---|
| | | }, |
|---|
| | | // ç¨äºè§£å³æäºæ
åµä¸ï¼è®©å¾æ åç´å±
ä¸çç¨é |
|---|
| | | top: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.icon.top |
|---|
| | | }, |
|---|
| | | // æ¯å¦é»æ¢äºä»¶ä¼ æ |
|---|
| | | stop: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.icon.stop |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-icon" |
|---|
| | | @tap="clickHandler" |
|---|
| | | :class="['u-icon--' + labelPos]" |
|---|
| | | > |
|---|
| | | <image |
|---|
| | | class="u-icon__img" |
|---|
| | | v-if="isImg" |
|---|
| | | :src="name" |
|---|
| | | :mode="imgMode" |
|---|
| | | :style="[imgStyle, $u.addStyle(customStyle)]" |
|---|
| | | ></image> |
|---|
| | | <text |
|---|
| | | v-else |
|---|
| | | class="u-icon__icon" |
|---|
| | | :class="uClasses" |
|---|
| | | :style="[iconStyle, $u.addStyle(customStyle)]" |
|---|
| | | :hover-class="hoverClass" |
|---|
| | | >{{icon}}</text> |
|---|
| | | <!-- è¿éè¿è¡ç©ºå符串å¤æï¼å¦æä»
ä»
æ¯v-if="label"ï¼å¯è½ä¼åºç°ä¼ é0çæ¶åï¼ç»æä¹æ æ³æ¾ç¤º --> |
|---|
| | | <text |
|---|
| | | v-if="label !== ''" |
|---|
| | | class="u-icon__label" |
|---|
| | | :style="{ |
|---|
| | | color: labelColor, |
|---|
| | | fontSize: $u.addUnit(labelSize), |
|---|
| | | marginLeft: labelPos == 'right' ? $u.addUnit(space) : 0, |
|---|
| | | marginTop: labelPos == 'bottom' ? $u.addUnit(space) : 0, |
|---|
| | | marginRight: labelPos == 'left' ? $u.addUnit(space) : 0, |
|---|
| | | marginBottom: labelPos == 'top' ? $u.addUnit(space) : 0, |
|---|
| | | }" |
|---|
| | | >{{ label }}</text> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // nvueéè¿weexçdom模åå¼å
¥åä½ï¼ç¸å
³ææ¡£å°åå¦ä¸ï¼ |
|---|
| | | // https://weex.apache.org/zh/docs/modules/dom.html#addrule |
|---|
| | | const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf' |
|---|
| | | const domModule = weex.requireModule('dom') |
|---|
| | | domModule.addRule('fontFace', { |
|---|
| | | 'fontFamily': "uicon-iconfont", |
|---|
| | | 'src': `url('${fontUrl}')` |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // å¼å
¥å¾æ å称ï¼å·²ç»å¯¹åºçunicode |
|---|
| | | import icons from './icons' |
|---|
| | | |
|---|
| | | import props from './props.js';; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * icon å¾æ |
|---|
| | | * @description åºäºåä½çå¾æ éï¼å
å«äºå¤§å¤æ°å¸¸è§åºæ¯çå¾æ ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/icon.html |
|---|
| | | * @property {String} name å¾æ å称ï¼è§ç¤ºä¾å¾æ é |
|---|
| | | * @property {String} color å¾æ é¢è²,å¯æ¥å主é¢è² ï¼é»è®¤ color['u-content-color'] ï¼ |
|---|
| | | * @property {String | Number} size å¾æ åä½å¤§å°ï¼åä½px ï¼é»è®¤ '16px' ï¼ |
|---|
| | | * @property {Boolean} bold æ¯å¦æ¾ç¤ºç²ä½ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String | Number} index ç¹å»å¾æ çæ¶åä¼ éäºä»¶åºå»çindexï¼ç¨äºåºåç¹å»äºåªä¸ä¸ªï¼ |
|---|
| | | * @property {String} hoverClass å¾æ æä¸å»çæ ·å¼ç±»ï¼ç¨æ³åuniçviewç»ä»¶çhoverClassåæ°ï¼è¯¦æ
è§å®ç½ |
|---|
| | | * @property {String} customPrefix èªå®ä¹æ©å±åç¼ï¼æ¹ä¾¿ç¨æ·æ©å±èªå·±çå¾æ åº ï¼é»è®¤ 'uicon' ï¼ |
|---|
| | | * @property {String | Number} label å¾æ å³ä¾§çlabelæå |
|---|
| | | * @property {String} labelPos labelç¸å¯¹äºå¾æ çä½ç½®ï¼åªè½rightæbottom ï¼é»è®¤ 'right' ï¼ |
|---|
| | | * @property {String | Number} labelSize labelåä½å¤§å°ï¼åä½px ï¼é»è®¤ '15px' ï¼ |
|---|
| | | * @property {String} labelColor å¾æ å³ä¾§çlabelæåé¢è² ï¼ é»è®¤ color['u-content-color'] ï¼ |
|---|
| | | * @property {String | Number} space labelä¸å¾æ çè·ç¦»ï¼åä½px ï¼é»è®¤ '3px' ï¼ |
|---|
| | | * @property {String} imgMode å¾ççmode |
|---|
| | | * @property {String | Number} width æ¾ç¤ºå¾çå°å¾æ æ¶ç宽度 |
|---|
| | | * @property {String | Number} height æ¾ç¤ºå¾çå°å¾æ æ¶çé«åº¦ |
|---|
| | | * @property {String | Number} top å¾æ å¨åç´æ¹åä¸çå®ä½ ç¨äºè§£å³æäºæ
åµä¸ï¼è®©å¾æ åç´å±
ä¸çç¨é ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {Boolean} stop æ¯å¦é»æ¢äºä»¶ä¼ æ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Object} customStyle iconçæ ·å¼ï¼å¯¹è±¡å½¢å¼ |
|---|
| | | * @event {Function} click ç¹å»å¾æ æ¶è§¦å |
|---|
| | | * @event {Function} touchstart äºä»¶è§¦æ¸æ¶è§¦å |
|---|
| | | * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-icon', |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | computed: { |
|---|
| | | uClasses() { |
|---|
| | | let classes = [] |
|---|
| | | classes.push(this.customPrefix + '-' + this.name) |
|---|
| | | // // uViewçèªå®ä¹å¾æ ç±»å为u-iconfont |
|---|
| | | // if (this.customPrefix == 'uicon') { |
|---|
| | | // classes.push('u-iconfont') |
|---|
| | | // } else { |
|---|
| | | // classes.push(this.customPrefix) |
|---|
| | | // } |
|---|
| | | // 主é¢è²ï¼éè¿ç±»é
ç½® |
|---|
| | | if (this.color && uni.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color) |
|---|
| | | // é¿éï¼å¤´æ¡ï¼ç¾åº¦å°ç¨åºéè¿æ°ç»ç»å®ç±»åæ¶ï¼æ æ³ç´æ¥ä½¿ç¨[a, b, c]çå½¢å¼ï¼å¦åæ æ³è¯å« |
|---|
| | | // æ
éå°å
¶ææä¸ä¸ªå符串çå½¢å¼ï¼éè¿ç©ºæ ¼éå¼å个类å |
|---|
| | | //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU |
|---|
| | | classes = classes.join(' ') |
|---|
| | | //#endif |
|---|
| | | return classes |
|---|
| | | }, |
|---|
| | | iconStyle() { |
|---|
| | | let style = {} |
|---|
| | | style = { |
|---|
| | | fontSize: uni.$u.addUnit(this.size), |
|---|
| | | lineHeight: uni.$u.addUnit(this.size), |
|---|
| | | fontWeight: this.bold ? 'bold' : 'normal', |
|---|
| | | // æäºç¹æ®æ
åµéè¦è®¾ç½®ä¸ä¸ªå°é¡¶é¨çè·ç¦»ï¼æè½æ´å¥½çåç´å±
ä¸ |
|---|
| | | top: uni.$u.addUnit(this.top) |
|---|
| | | } |
|---|
| | | // é主é¢è²å¼æ¶ï¼æå½ä½é¢è²å¼ |
|---|
| | | if (this.color && !uni.$u.config.type.includes(this.color)) style.color = this.color |
|---|
| | | |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // å¤æä¼ å
¥çnameå±æ§ï¼æ¯å¦å¾çè·¯å¾ï¼åªè¦å¸¦æ"/"å认为æ¯å¾çå½¢å¼ |
|---|
| | | isImg() { |
|---|
| | | return this.name.indexOf('/') !== -1 |
|---|
| | | }, |
|---|
| | | imgStyle() { |
|---|
| | | let style = {} |
|---|
| | | // å¦æ设置widthåheightå±æ§ï¼åä¼å
使ç¨ï¼å¦å使ç¨sizeå±æ§ |
|---|
| | | style.width = this.width ? uni.$u.addUnit(this.width) : uni.$u.addUnit(this.size) |
|---|
| | | style.height = this.height ? uni.$u.addUnit(this.height) : uni.$u.addUnit(this.size) |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | // éè¿å¾æ åï¼æ¥æ¾å¯¹åºçå¾æ |
|---|
| | | icon() { |
|---|
| | | // å¦æå
ç½®çå¾æ ä¸æ¾ä¸å°å¯¹åºçå¾æ ï¼å°±ç´æ¥è¿ånameå¼ï¼å 为ç¨æ·å¯è½ä¼ å
¥çæ¯unicode代ç |
|---|
| | | return icons['uicon-' + this.name] || this.name |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | clickHandler(e) { |
|---|
| | | this.$emit('click', this.index) |
|---|
| | | // æ¯å¦é»æ¢äºä»¶å泡 |
|---|
| | | this.stop && this.preventEvent(e) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | // åéå®ä¹ |
|---|
| | | $u-icon-primary: $u-primary !default; |
|---|
| | | $u-icon-success: $u-success !default; |
|---|
| | | $u-icon-info: $u-info !default; |
|---|
| | | $u-icon-warning: $u-warning !default; |
|---|
| | | $u-icon-error: $u-error !default; |
|---|
| | | $u-icon-label-line-height:1 !default; |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | // énvueä¸å è½½åä½ |
|---|
| | | @font-face { |
|---|
| | | font-family: 'uicon-iconfont'; |
|---|
| | | src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | |
|---|
| | | .u-icon { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | display: flex; |
|---|
| | | /* #endif */ |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &--left { |
|---|
| | | flex-direction: row-reverse; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--right { |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--top { |
|---|
| | | flex-direction: column-reverse; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--bottom { |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__icon { |
|---|
| | | font-family: uicon-iconfont; |
|---|
| | | position: relative; |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &--primary { |
|---|
| | | color: $u-icon-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--success { |
|---|
| | | color: $u-icon-success; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--error { |
|---|
| | | color: $u-icon-error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--warning { |
|---|
| | | color: $u-icon-warning; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--info { |
|---|
| | | color: $u-icon-info; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__img { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | height: auto; |
|---|
| | | will-change: transform; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__label { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | line-height: $u-icon-label-line-height; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å¾çå°å |
|---|
| | | src: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.image.src |
|---|
| | | }, |
|---|
| | | // è£åªæ¨¡å¼ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.image.mode |
|---|
| | | }, |
|---|
| | | // 宽度ï¼åä½ä»»æ |
|---|
| | | width: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.image.width |
|---|
| | | }, |
|---|
| | | // é«åº¦ï¼åä½ä»»æ |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.image.height |
|---|
| | | }, |
|---|
| | | // å¾çå½¢ç¶ï¼circle-åå½¢ï¼square-æ¹å½¢ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.image.shape |
|---|
| | | }, |
|---|
| | | // åè§ï¼åä½ä»»æ |
|---|
| | | radius: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.image.radius |
|---|
| | | }, |
|---|
| | | // æ¯å¦æå è½½ï¼å¾®ä¿¡å°ç¨åºãAppãç¾åº¦å°ç¨åºãåèè·³å¨å°ç¨åº |
|---|
| | | lazyLoad: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.image.lazyLoad |
|---|
| | | }, |
|---|
| | | // å¼å¯é¿æå¾çæ¾ç¤ºè¯å«å¾®ä¿¡å°ç¨åºç èå |
|---|
| | | showMenuByLongpress: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.image.showMenuByLongpress |
|---|
| | | }, |
|---|
| | | // å è½½ä¸çå¾æ ï¼æè
å°å¾ç |
|---|
| | | loadingIcon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.image.loadingIcon |
|---|
| | | }, |
|---|
| | | // å 载失败çå¾æ ï¼æè
å°å¾ç |
|---|
| | | errorIcon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.image.errorIcon |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå è½½ä¸çå¾æ æè
èªå®ä¹çslot |
|---|
| | | showLoading: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.image.showLoading |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå è½½é误çå¾æ æè
èªå®ä¹çslot |
|---|
| | | showError: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.image.showError |
|---|
| | | }, |
|---|
| | | // æ¯å¦éè¦æ·¡å
¥ææ |
|---|
| | | fade: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.image.fade |
|---|
| | | }, |
|---|
| | | // åªæ¯æç½ç»èµæºï¼åªå¯¹å¾®ä¿¡å°ç¨åºææ |
|---|
| | | webp: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.image.webp |
|---|
| | | }, |
|---|
| | | // è¿æ¸¡æ¶é´ï¼åä½ms |
|---|
| | | duration: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.image.duration |
|---|
| | | }, |
|---|
| | | // èæ¯é¢è²ï¼ç¨äºæ·±è²é¡µé¢å è½½å¾çæ¶ï¼ä¸ºäºåèæ¯è²èå |
|---|
| | | bgColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.image.bgColor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <u-transition |
|---|
| | | mode="fade" |
|---|
| | | :show="show" |
|---|
| | | :duration="fade ? 1000 : 0" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-image" |
|---|
| | | @tap="onClick" |
|---|
| | | :style="[wrapStyle, backgroundStyle]" |
|---|
| | | > |
|---|
| | | <image |
|---|
| | | v-if="!isError" |
|---|
| | | :src="src" |
|---|
| | | :mode="mode" |
|---|
| | | @error="onErrorHandler" |
|---|
| | | @load="onLoadHandler" |
|---|
| | | :show-menu-by-longpress="showMenuByLongpress" |
|---|
| | | :lazy-load="lazyLoad" |
|---|
| | | class="u-image__image" |
|---|
| | | :style="{ |
|---|
| | | borderRadius: shape == 'circle' ? '10000px' : $u.addUnit(radius), |
|---|
| | | width: $u.addUnit(width), |
|---|
| | | height: $u.addUnit(height) |
|---|
| | | }" |
|---|
| | | ></image> |
|---|
| | | <view |
|---|
| | | v-if="showLoading && loading" |
|---|
| | | class="u-image__loading" |
|---|
| | | :style="{ |
|---|
| | | borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius), |
|---|
| | | backgroundColor: this.bgColor, |
|---|
| | | width: $u.addUnit(width), |
|---|
| | | height: $u.addUnit(height) |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <slot name="loading"> |
|---|
| | | <u-icon |
|---|
| | | :name="loadingIcon" |
|---|
| | | :width="width" |
|---|
| | | :height="height" |
|---|
| | | ></u-icon> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | v-if="showError && isError && !loading" |
|---|
| | | class="u-image__error" |
|---|
| | | :style="{ |
|---|
| | | borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius), |
|---|
| | | width: $u.addUnit(width), |
|---|
| | | height: $u.addUnit(height) |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <slot name="error"> |
|---|
| | | <u-icon |
|---|
| | | :name="errorIcon" |
|---|
| | | :width="width" |
|---|
| | | :height="height" |
|---|
| | | ></u-icon> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </u-transition> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * Image å¾ç |
|---|
| | | * @description æ¤ç»ä»¶ä¸ºuni-appçimageç»ä»¶çå 强çï¼å¨ç»§æ¿äºåæåè½å¤ï¼è¿æ¯ææ·¡å
¥å¨ç»ãå è½½ä¸ãå 载失败æ示ãåè§å¼åå½¢ç¶çã |
|---|
| | | * @tutorial https://uviewui.com/components/image.html |
|---|
| | | * @property {String} src å¾çå°å |
|---|
| | | * @property {String} mode è£åªæ¨¡å¼ï¼è§å®ç½è¯´æ ï¼é»è®¤ 'aspectFill' ï¼ |
|---|
| | | * @property {String | Number} width 宽度ï¼åä½ä»»æï¼å¦æ为æ°å¼ï¼å为pxåä½ ï¼é»è®¤ '300' ï¼ |
|---|
| | | * @property {String | Number} height é«åº¦ï¼åä½ä»»æï¼å¦æ为æ°å¼ï¼å为pxåä½ ï¼é»è®¤ '225' ï¼ |
|---|
| | | * @property {String} shape å¾çå½¢ç¶ï¼circle-åå½¢ï¼square-æ¹å½¢ ï¼é»è®¤ 'square' ï¼ |
|---|
| | | * @property {String | Number} radius åè§å¼ï¼åä½ä»»æï¼å¦æ为æ°å¼ï¼å为pxåä½ ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {Boolean} lazyLoad æ¯å¦æå è½½ï¼ä»
微信å°ç¨åºãAppãç¾åº¦å°ç¨åºãåèè·³å¨å°ç¨åºææ ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} showMenuByLongpress æ¯å¦å¼å¯é¿æå¾çæ¾ç¤ºè¯å«å°ç¨åºç èåï¼ä»
微信å°ç¨åºææ ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String} loadingIcon å è½½ä¸çå¾æ ï¼æè
å°å¾ç ï¼é»è®¤ 'photo' ï¼ |
|---|
| | | * @property {String} errorIcon å 载失败çå¾æ ï¼æè
å°å¾ç ï¼é»è®¤ 'error-circle' ï¼ |
|---|
| | | * @property {Boolean} showLoading æ¯å¦æ¾ç¤ºå è½½ä¸çå¾æ æè
èªå®ä¹çslot ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} showError æ¯å¦æ¾ç¤ºå è½½é误çå¾æ æè
èªå®ä¹çslot ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} fade æ¯å¦éè¦æ·¡å
¥ææ ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} webp åªæ¯æç½ç»èµæºï¼åªå¯¹å¾®ä¿¡å°ç¨åºææ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String | Number} duration æé
fadeåæ°çè¿æ¸¡æ¶é´ï¼åä½ms ï¼é»è®¤ 500 ï¼ |
|---|
| | | * @property {String} bgColor èæ¯é¢è²ï¼ç¨äºæ·±è²é¡µé¢å è½½å¾çæ¶ï¼ä¸ºäºåèæ¯è²èå (é»è®¤ '#f3f4f6' ) |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * @event {Function} click ç¹å»å¾çæ¶è§¦å |
|---|
| | | * @event {Function} error å¾çå 载失败æ¶è§¦å |
|---|
| | | * @event {Function} load å¾çå è½½æåæ¶è§¦å |
|---|
| | | * @example <u-image width="100%" height="300px" :src="src"></u-image> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-image', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // å¾çæ¯å¦å è½½é误ï¼å¦ææ¯ï¼åæ¾ç¤ºé误å ä½å¾ |
|---|
| | | isError: false, |
|---|
| | | // åå§åç»ä»¶æ¶ï¼é»è®¤ä¸ºå è½½ä¸ç¶æ |
|---|
| | | loading: true, |
|---|
| | | // ä¸éæ度ï¼ä¸ºäºå®ç°æ·¡å
¥æ·¡åºçææ |
|---|
| | | opacity: 1, |
|---|
| | | // è¿æ¸¡æ¶é´ï¼å 为propsçå¼æ æ³ä¿®æ¹ï¼æ
éè¦ä¸ä¸ªä¸é´å¼ |
|---|
| | | durationTime: this.duration, |
|---|
| | | // å¾çå è½½å®ææ¶ï¼å»æèæ¯é¢è²ï¼å 为å¦ææ¯pngå¾çï¼å°±ä¼æ¾ç¤ºç°è²çèæ¯ |
|---|
| | | backgroundStyle: {}, |
|---|
| | | // ç¨äºfade模å¼çæ§å¶ç»ä»¶æ¾ç¤ºä¸å¦ |
|---|
| | | show: false |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | src: { |
|---|
| | | immediate: true, |
|---|
| | | handler(n) { |
|---|
| | | if (!n) { |
|---|
| | | // å¦æä¼ å
¥nullæè
''ï¼æè
falseï¼æè
undefinedï¼æ 记为é误ç¶æ |
|---|
| | | this.isError = true |
|---|
| | | |
|---|
| | | } else { |
|---|
| | | this.isError = false; |
|---|
| | | this.loading = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | wrapStyle() { |
|---|
| | | let style = {}; |
|---|
| | | // éè¿è°ç¨addUnit()æ¹æ³ï¼å¦ææåä½ï¼å¦ç¾åæ¯ï¼pxåä½çï¼ç´æ¥è¿åï¼å¦ææ¯çº¯ç²¹çæ°å¼ï¼åå ä¸rpxåä½ |
|---|
| | | style.width = this.$u.addUnit(this.width); |
|---|
| | | style.height = this.$u.addUnit(this.height); |
|---|
| | | // å¦ææ¯æ¾ç¤ºåå½¢ï¼è®¾ç½®ä¸ä¸ªå¾å¤çåå¾å¼å³å¯ |
|---|
| | | style.borderRadius = this.shape == 'circle' ? '10000px' : uni.$u.addUnit(this.radius) |
|---|
| | | // å¦æ设置åè§ï¼å¿
é¡»è¦æhiddenï¼å¦åå¯è½åè§æ æ |
|---|
| | | style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible' |
|---|
| | | // if (this.fade) { |
|---|
| | | // style.opacity = this.opacity |
|---|
| | | // // nvueä¸ï¼è¿å 个å±æ§å¿
é¡»è¦åå¼å |
|---|
| | | // style.transitionDuration = `${this.durationTime}ms` |
|---|
| | | // style.transitionTimingFunction = 'ease-in-out' |
|---|
| | | // style.transitionProperty = 'opacity' |
|---|
| | | // } |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)); |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.show = true |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // ç¹å»å¾ç |
|---|
| | | onClick() { |
|---|
| | | this.$emit('click') |
|---|
| | | }, |
|---|
| | | // å¾çå 载失败 |
|---|
| | | onErrorHandler(err) { |
|---|
| | | this.loading = false |
|---|
| | | this.isError = true |
|---|
| | | this.$emit('error', err) |
|---|
| | | }, |
|---|
| | | // å¾çå è½½å®æï¼æ è®°loadingç»æ |
|---|
| | | onLoadHandler() { |
|---|
| | | this.loading = false |
|---|
| | | this.isError = false |
|---|
| | | this.$emit('load') |
|---|
| | | this.removeBgColor() |
|---|
| | | // å¦æä¸éè¦å¨ç»ææï¼å°±ä¸æ§è¡ä¸æ¹ä»£ç ï¼åæ¶ç§»é¤å è½½æ¶çèæ¯é¢è² |
|---|
| | | // å¦åæ éfadeæææ¶ï¼pngå¾çä¾ç¶è½çå°ä¸æ¹çèæ¯è² |
|---|
| | | // if (!this.fade) return this.removeBgColor(); |
|---|
| | | // // åæ¥opacity为1(ä¸éæï¼æ¯ä¸ºäºæ¾ç¤ºå ä½å¾)ï¼æ¹æ0(éæï¼æå³ç该å
ç´ æ¾ç¤ºçæ¯èæ¯é¢è²ï¼é»è®¤çç°è²)ï¼åæ¹æ1ï¼æ¯ä¸ºäºè·å¾è¿æ¸¡ææ |
|---|
| | | // this.opacity = 0; |
|---|
| | | // // è¿é设置为0ï¼æ¯ä¸ºäºå¾çå±ç¤ºå°èæ¯å
¨éæè¿ä¸ªè¿ç¨æ¶é´ä¸º0ï¼å»¶æ¶ä¹å延æ¶ä¹åéæ°è®¾ç½®ä¸ºdurationï¼æ¯ä¸ºäºè·å¾èæ¯éæ(ç°è²) |
|---|
| | | // // å°å¾çå±ç¤ºçè¿ç¨ä¸çæ·¡å
¥ææ |
|---|
| | | // this.durationTime = 0; |
|---|
| | | // // 延æ¶50msï¼å¦åå¨æµè§å¨H5ï¼è¿æ¸¡æææ æ |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.durationTime = this.duration; |
|---|
| | | // this.opacity = 1; |
|---|
| | | // setTimeout(() => { |
|---|
| | | // this.removeBgColor(); |
|---|
| | | // }, this.durationTime); |
|---|
| | | // }, 50); |
|---|
| | | }, |
|---|
| | | // 移é¤å¾ççèæ¯è² |
|---|
| | | removeBgColor() { |
|---|
| | | // æ·¡å
¥å¨ç»è¿æ¸¡å®æåï¼å°èæ¯è®¾ç½®ä¸ºéæè²ï¼å¦åpngå¾çä¼çå°ç°è²çèæ¯ |
|---|
| | | this.backgroundStyle = { |
|---|
| | | backgroundColor: 'transparent' |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import '../../libs/css/components.scss'; |
|---|
| | | |
|---|
| | | $u-image-error-top:0px !default; |
|---|
| | | $u-image-error-left:0px !default; |
|---|
| | | $u-image-error-width:100% !default; |
|---|
| | | $u-image-error-hight:100% !default; |
|---|
| | | $u-image-error-background-color:$u-bg-color !default; |
|---|
| | | $u-image-error-color:$u-tips-color !default; |
|---|
| | | $u-image-error-font-size: 46rpx !default; |
|---|
| | | |
|---|
| | | .u-image { |
|---|
| | | position: relative; |
|---|
| | | transition: opacity 0.5s ease-in-out; |
|---|
| | | |
|---|
| | | &__image { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__loading, |
|---|
| | | &__error { |
|---|
| | | position: absolute; |
|---|
| | | top: $u-image-error-top; |
|---|
| | | left: $u-image-error-left; |
|---|
| | | width: $u-image-error-width; |
|---|
| | | height: $u-image-error-hight; |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | background-color: $u-image-error-background-color; |
|---|
| | | color: $u-image-error-color; |
|---|
| | | font-size: $u-image-error-font-size; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å表éç¹ææ¬å
容 |
|---|
| | | text: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.indexAnchor.text |
|---|
| | | }, |
|---|
| | | // å表éç¹æåé¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.indexAnchor.color |
|---|
| | | }, |
|---|
| | | // å表éç¹æå大å°ï¼åä½é»è®¤px |
|---|
| | | size: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.indexAnchor.size |
|---|
| | | }, |
|---|
| | | // å表éç¹èæ¯é¢è² |
|---|
| | | bgColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.indexAnchor.bgColor |
|---|
| | | }, |
|---|
| | | // å表éç¹é«åº¦ï¼åä½é»è®¤px |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.indexAnchor.height |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <header> |
|---|
| | | <!-- #endif --> |
|---|
| | | <view |
|---|
| | | class="u-index-anchor u-border-bottom" |
|---|
| | | :ref="`u-index-anchor-${text}`" |
|---|
| | | :style="{ |
|---|
| | | height: $u.addUnit(height), |
|---|
| | | backgroundColor: bgColor |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <text |
|---|
| | | class="u-index-anchor__text" |
|---|
| | | :style="{ |
|---|
| | | fontSize: $u.addUnit(size), |
|---|
| | | color: color |
|---|
| | | }" |
|---|
| | | >{{ text }}</text> |
|---|
| | | </view> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | </header> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * IndexAnchor å表éç¹ |
|---|
| | | * @description |
|---|
| | | * @tutorial https://uviewui.com/components/indexList.html |
|---|
| | | * @property {String | Number} text å表éç¹ææ¬å
容 |
|---|
| | | * @property {String} color å表éç¹æåé¢è² ( é»è®¤ '#606266' ) |
|---|
| | | * @property {String | Number} size å表éç¹æå大å°ï¼åä½é»è®¤px ( é»è®¤ 14 ) |
|---|
| | | * @property {String} bgColor å表éç¹èæ¯é¢è² ( é»è®¤ '#dedede' ) |
|---|
| | | * @property {String | Number} height å表éç¹é«åº¦ï¼åä½é»è®¤px ( é»è®¤ 32 ) |
|---|
| | | * @example <u-index-anchor :text="indexList[index]"></u-index-anchor> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-index-anchor', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | // æ¤å¤ä¼æ´»å¨ç¶ç»ä»¶å®ä¾ï¼å¹¶èµå¼ç»å®ä¾çparentå±æ§ |
|---|
| | | const indexList = uni.$u.$parent.call(this, 'u-index-list') |
|---|
| | | if (!indexList) { |
|---|
| | | return uni.$u.error('u-index-anchorå¿
é¡»è¦æé
u-index-listç»ä»¶ä½¿ç¨') |
|---|
| | | } |
|---|
| | | // å°å½åå®ä¾æ¾å
¥å°u-index-listä¸ |
|---|
| | | indexList.anchors.push(this) |
|---|
| | | const indexListItem = uni.$u.$parent.call(this, 'u-index-item') |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | // åªæå¨énvueä¸ï¼u-index-anchorææ¯åµå¥å¨u-index-itemä¸ç |
|---|
| | | if (!indexListItem) { |
|---|
| | | return uni.$u.error('u-index-anchorå¿
é¡»è¦æé
u-index-itemç»ä»¶ä½¿ç¨') |
|---|
| | | } |
|---|
| | | // 设置u-index-itemçid为anchorçtextæ è¯ç¬¦ï¼å 为énvueä¸æ»å¨å表éè¦ä¾èµscroll-viewæ»å¨å°å
ç´ çç¹æ§ |
|---|
| | | indexListItem.id = this.text.charCodeAt(0) |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-index-anchor { |
|---|
| | | position: sticky; |
|---|
| | | top: 0; |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | padding-left: 15px; |
|---|
| | | z-index: 1; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <cell ref="u-index-item"> |
|---|
| | | <!-- #endif --> |
|---|
| | | <view |
|---|
| | | class="u-index-item" |
|---|
| | | :id="`u-index-item-${id}`" |
|---|
| | | :class="[`u-index-item-${id}`]" |
|---|
| | | > |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | </cell> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // ç±äºweex为é¿éçKPIä¸ç»©èæ ¸ç产ç©ï¼æ以ä¸æ¯æç¾åæ¯åä½ï¼è¿ééè¦éè¿domæ¥è¯¢ç»ä»¶ç宽度 |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * IndexItem |
|---|
| | | * @description |
|---|
| | | * @tutorial https://uviewui.com/components/indexList.html |
|---|
| | | * @property {String} |
|---|
| | | * @event {Function} |
|---|
| | | * @example |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-index-item', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // æ¬ç»ä»¶å°æ»å¨æ¡é¡¶é¨çè·ç¦» |
|---|
| | | top: 0, |
|---|
| | | height: 0, |
|---|
| | | id: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | // åç»ä»¶u-index-anchorçå®ä¾ |
|---|
| | | this.anchor = {} |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | // æ¤å¤ä¼æ´»å¨ç¶ç»ä»¶å®ä¾ï¼å¹¶èµå¼ç»å®ä¾çparentå±æ§ |
|---|
| | | this.getParentData('u-index-list') |
|---|
| | | if (!this.parent) { |
|---|
| | | return uni.$u.error('u-index-itemå¿
é¡»è¦æé
u-index-listç»ä»¶ä½¿ç¨') |
|---|
| | | } |
|---|
| | | uni.$u.sleep().then(() =>{ |
|---|
| | | this.getIndexItemRect().then(size => { |
|---|
| | | // ç±äºå¯¹è±¡çå¼ç¨ç¹æ§ï¼æ¤å¤ä¼åæ¶çæå°ç¶ç»ä»¶çchildrenæ°ç»çæ¬å®ä¾çtopå±æ§ä¸ï¼ä¾ç¶ç»ä»¶å¤æ读å |
|---|
| | | this.top = Math.ceil(size.top) |
|---|
| | | this.height = Math.ceil(size.height) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | getIndexItemRect() { |
|---|
| | | return new Promise(resolve => { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | this.$uGetRect('.u-index-item').then(size => { |
|---|
| | | resolve(size) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const ref = this.$refs['u-index-item'] |
|---|
| | | dom.getComponentRect(ref, res => { |
|---|
| | | resolve(res.size) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // å³è¾¹éç¹éæ¿æ´»çé¢è² |
|---|
| | | inactiveColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.indexList.inactiveColor |
|---|
| | | }, |
|---|
| | | // å³è¾¹éç¹æ¿æ´»çé¢è² |
|---|
| | | activeColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.indexList.activeColor |
|---|
| | | }, |
|---|
| | | // ç´¢å¼å符å表ï¼æ°ç»å½¢å¼ |
|---|
| | | indexList: { |
|---|
| | | type: Array, |
|---|
| | | default: uni.$u.props.indexList.indexList |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¼å¯éç¹èªå¨å¸é¡¶ |
|---|
| | | sticky: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.indexList.sticky |
|---|
| | | }, |
|---|
| | | // èªå®ä¹å¯¼èªæ çé«åº¦ |
|---|
| | | customNavHeight: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.indexList.customNavHeight |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-index-list"> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <list |
|---|
| | | :scrollTop="scrollTop" |
|---|
| | | enable-back-to-top |
|---|
| | | :offset-accuracy="1" |
|---|
| | | :style="{ |
|---|
| | | maxHeight: $u.addUnit(scrollViewHeight) |
|---|
| | | }" |
|---|
| | | @scroll="scrollHandler" |
|---|
| | | ref="uList" |
|---|
| | | > |
|---|
| | | <cell |
|---|
| | | v-if="$slots.header" |
|---|
| | | ref="header" |
|---|
| | | > |
|---|
| | | <slot name="header" /> |
|---|
| | | </cell> |
|---|
| | | <slot /> |
|---|
| | | <cell v-if="$slots.footer"> |
|---|
| | | <slot name="footer" /> |
|---|
| | | </cell> |
|---|
| | | </list> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <scroll-view |
|---|
| | | :scrollTop="scrollTop" |
|---|
| | | :scrollIntoView="scrollIntoView" |
|---|
| | | :offset-accuracy="1" |
|---|
| | | :style="{ |
|---|
| | | maxHeight: $u.addUnit(scrollViewHeight) |
|---|
| | | }" |
|---|
| | | scroll-y |
|---|
| | | @scroll="scrollHandler" |
|---|
| | | ref="uList" |
|---|
| | | > |
|---|
| | | <view v-if="$slots.header"> |
|---|
| | | <slot name="header" /> |
|---|
| | | </view> |
|---|
| | | <slot /> |
|---|
| | | <view v-if="$slots.footer"> |
|---|
| | | <slot name="footer" /> |
|---|
| | | </view> |
|---|
| | | </scroll-view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <view |
|---|
| | | class="u-index-list__letter" |
|---|
| | | ref="u-index-list__letter" |
|---|
| | | :style="{ top: $u.addUnit(letterInfo.top || 100) }" |
|---|
| | | @touchstart="touchStart" |
|---|
| | | @touchmove.stop.prevent="touchMove" |
|---|
| | | @touchend.stop.prevent="touchEnd" |
|---|
| | | @touchcancel.stop.prevent="touchEnd" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-index-list__letter__item" |
|---|
| | | v-for="(item, index) in uIndexList" |
|---|
| | | :key="index" |
|---|
| | | :style="{ |
|---|
| | | backgroundColor: activeIndex === index ? activeColor : 'transparent' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <text |
|---|
| | | class="u-index-list__letter__item__index" |
|---|
| | | :style="{color: activeIndex === index ? '#fff' : inactiveColor}" |
|---|
| | | >{{ item }}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <u-transition |
|---|
| | | mode="fade" |
|---|
| | | :show="touching" |
|---|
| | | :customStyle="{ |
|---|
| | | position: 'fixed', |
|---|
| | | right: '50px', |
|---|
| | | top: $u.addUnit(indicatorTop), |
|---|
| | | zIndex: 2 |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-index-list__indicator" |
|---|
| | | :class="['u-index-list__indicator--show']" |
|---|
| | | :style="{ |
|---|
| | | height: $u.addUnit(indicatorHeight), |
|---|
| | | width: $u.addUnit(indicatorHeight) |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text> |
|---|
| | | </view> |
|---|
| | | </u-transition> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const indexList = () => { |
|---|
| | | const indexList = []; |
|---|
| | | const charCodeOfA = 'A'.charCodeAt(0); |
|---|
| | | for (let i = 0; i < 26; i++) { |
|---|
| | | indexList.push(String.fromCharCode(charCodeOfA + i)); |
|---|
| | | } |
|---|
| | | return indexList; |
|---|
| | | } |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // ç±äºweex为é¿éçKPIä¸ç»©èæ ¸ç产ç©ï¼æ以ä¸æ¯æç¾åæ¯åä½ï¼è¿ééè¦éè¿domæ¥è¯¢ç»ä»¶ç宽度 |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * IndexList ç´¢å¼å表 |
|---|
| | | * @description éè¿æå é¢æ¿æ¶çº³å
容åºå |
|---|
| | | * @tutorial https://uviewui.com/components/indexList.html |
|---|
| | | * @property {String} inactiveColor å³è¾¹éç¹éæ¿æ´»çé¢è² ( é»è®¤ '#606266' ) |
|---|
| | | * @property {String} activeColor å³è¾¹éç¹æ¿æ´»çé¢è² ( é»è®¤ '#5677fc' ) |
|---|
| | | * @property {Array} indexList ç´¢å¼å符å表ï¼æ°ç»å½¢å¼ |
|---|
| | | * @property {Boolean} sticky æ¯å¦å¼å¯éç¹èªå¨å¸é¡¶ ( é»è®¤ true ) |
|---|
| | | * @property {String | Number} customNavHeight èªå®ä¹å¯¼èªæ çé«åº¦ ( é»è®¤ 0 ) |
|---|
| | | * */ |
|---|
| | | export default { |
|---|
| | | name: 'u-index-list', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | // å°èªå®ä¹èç¹è®¾ç½®æèæçï¼æ´å æ¥è¿Vueç»ä»¶ç表ç°ï¼è½æ´å¥½ç使ç¨flexå±æ§ |
|---|
| | | options: { |
|---|
| | | virtualHost: true |
|---|
| | | }, |
|---|
| | | // #endif |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // å½åæ£å¨è¢«éä¸çåæ¯ç´¢å¼ |
|---|
| | | activeIndex: -1, |
|---|
| | | touchmoveIndex: 1, |
|---|
| | | // ç´¢å¼åæ¯çä¿¡æ¯ |
|---|
| | | letterInfo: { |
|---|
| | | height: 0, |
|---|
| | | itemHeight: 0, |
|---|
| | | top: 0 |
|---|
| | | }, |
|---|
| | | // 设置åæ¯æ示å¨çé«åº¦ï¼åé¢ä¸ºäºè®©æ示å¨è·éåæ¯ï¼å¹¶å°å°è§é¨åæååæ¯çä¸é¨ï¼éè¦ä¾èµæ¤å¼ |
|---|
| | | indicatorHeight: 50, |
|---|
| | | // åæ¯æ¾å¤§æ示å¨çtopå¼ï¼ä¸ºäºè®©å
¶æåå½åæ¿æ´»çåæ¯ |
|---|
| | | // indicatorTop: 0 |
|---|
| | | // å½åæ¯å¦æ£å¨è¢«è§¦æ¸ç¶æ |
|---|
| | | touching: false, |
|---|
| | | // æ»å¨æ¡é¡¶é¨topå¼ |
|---|
| | | scrollTop: 0, |
|---|
| | | // scroll-viewçé«åº¦ |
|---|
| | | scrollViewHeight: 0, |
|---|
| | | // ç³»ç»ä¿¡æ¯ |
|---|
| | | sys: uni.$u.sys(), |
|---|
| | | scrolling: false, |
|---|
| | | scrollIntoView: '', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // å¦ææä¼ å
¥å¤é¨çindexListéç¹æ°ç»å使ç¨ï¼å¦å使ç¨å
é¨çæA-Zåæ¯ |
|---|
| | | uIndexList() { |
|---|
| | | return this.indexList.length ? this.indexList : indexList() |
|---|
| | | }, |
|---|
| | | // åæ¯æ¾å¤§æ示å¨çtopå¼ï¼ä¸ºäºè®©å
¶æåå½åæ¿æ´»çåæ¯ |
|---|
| | | indicatorTop() { |
|---|
| | | const { |
|---|
| | | top, |
|---|
| | | itemHeight |
|---|
| | | } = this.letterInfo |
|---|
| | | return Math.floor(top + itemHeight * this.activeIndex + itemHeight / 2 - this.indicatorHeight / 2) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | // çå¬åæ¯ç´¢å¼çååï¼éæ°è®¾ç½®å°ºå¯¸ |
|---|
| | | uIndexList: { |
|---|
| | | immediate: true, |
|---|
| | | handler() { |
|---|
| | | uni.$u.sleep().then(() => { |
|---|
| | | this.setIndexListLetterInfo() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.children = [] |
|---|
| | | this.anchors = [] |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.setIndexListLetterInfo() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | // 设置å表çé«åº¦ä¸ºæ´ä¸ªå±å¹çé«åº¦ |
|---|
| | | //åå»this.customNavHeightï¼å¹¶å°this.scrollViewHeight设置为maxHeight |
|---|
| | | //解å³å½u-index-listç»ä»¶æ¾å¨tabbar页é¢æ¶,scroll-viewå
容è¾å°æ¶ï¼è¿è½æ»å¨ |
|---|
| | | this.scrollViewHeight = this.sys.windowHeight - this.customNavHeight |
|---|
| | | }, |
|---|
| | | // ç´¢å¼åè¡¨è¢«è§¦æ¸ |
|---|
| | | touchStart(e) { |
|---|
| | | // è·å触æ¸ç¹ä¿¡æ¯ |
|---|
| | | const touchStart = e.changedTouches[0] |
|---|
| | | if (!touchStart) return |
|---|
| | | this.touching = true |
|---|
| | | const { |
|---|
| | | pageY |
|---|
| | | } = touchStart |
|---|
| | | // æ ¹æ®å½å触æ¸ç¹çåæ ï¼è·åå½å触æ¸ç为第å 个åæ¯ |
|---|
| | | const currentIndex = this.getIndexListLetter(pageY) |
|---|
| | | this.setValueForTouch(currentIndex) |
|---|
| | | }, |
|---|
| | | // ç´¢å¼åæ¯å表被触æ¸æ»å¨ä¸ |
|---|
| | | touchMove(e) { |
|---|
| | | // è·å触æ¸ç¹ä¿¡æ¯ |
|---|
| | | let touchMove = e.changedTouches[0] |
|---|
| | | if (!touchMove) return; |
|---|
| | | |
|---|
| | | // æ»å¨ç»æåè¿
éå¼å§ç¬¬äºæ¬¡æ»å¨æ¶å touching 为 false é æä¸æ¾ç¤º indicator é®é¢ |
|---|
| | | if (!this.touching) { |
|---|
| | | this.touching = true |
|---|
| | | } |
|---|
| | | const { |
|---|
| | | pageY |
|---|
| | | } = touchMove |
|---|
| | | const currentIndex = this.getIndexListLetter(pageY) |
|---|
| | | this.setValueForTouch(currentIndex) |
|---|
| | | }, |
|---|
| | | // 触æ¸ç»æ |
|---|
| | | touchEnd(e) { |
|---|
| | | // 延æ¶ä¸å®æ¶é´ååéèæ示å¨ï¼ä¸ºäºè®©ç¨æ·ççæ´ç´è§ï¼åæ¶ä¹æ¯ä¸ºäºæ¶é¤å¿«éåæ¢u-transitionçshow带æ¥çå½±å |
|---|
| | | uni.$u.sleep(300).then(() => { |
|---|
| | | this.touching = false |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è·åç´¢å¼å表ç尺寸以åå个å符çå°ºå¯¸ä¿¡æ¯ |
|---|
| | | getIndexListLetterRect() { |
|---|
| | | return new Promise(resolve => { |
|---|
| | | // 延æ¶ä¸å®æ¶é´ï¼ä»¥è·ådom尺寸 |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | this.$uGetRect('.u-index-list__letter').then(size => { |
|---|
| | | resolve(size) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const ref = this.$refs['u-index-list__letter'] |
|---|
| | | dom.getComponentRect(ref, res => { |
|---|
| | | resolve(res.size) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 设置indexListç´¢å¼çå°ºå¯¸ä¿¡æ¯ |
|---|
| | | setIndexListLetterInfo() { |
|---|
| | | this.getIndexListLetterRect().then(size => { |
|---|
| | | const { |
|---|
| | | height |
|---|
| | | } = size |
|---|
| | | const sys = uni.$u.sys() |
|---|
| | | const windowHeight = sys.windowHeight |
|---|
| | | let customNavHeight = 0 |
|---|
| | | // æ¶é¤å端导èªæ éåçååç导è´çå·®å¼ï¼è®©ç´¢å¼å表åæ¯å¯¹å±å¹åç´å±
ä¸ |
|---|
| | | if (this.customNavHeight == 0) { |
|---|
| | | // #ifdef H5 |
|---|
| | | customNavHeight = sys.windowTop |
|---|
| | | // #endif |
|---|
| | | // #ifndef H5 |
|---|
| | | // å¨éH5ä¸ï¼ä¸ºåç导èªæ ï¼å
¶é«åº¦ä¸ç®å¨windowHeightå
ï¼è¿é设置为è´å¼ï¼åé¢ç¸å æ¶åæåå»å
¶é«åº¦çä¸å |
|---|
| | | customNavHeight = -(sys.statusBarHeight + 44) |
|---|
| | | // #endif |
|---|
| | | } else { |
|---|
| | | customNavHeight = uni.$u.getPx(this.customNavHeight) |
|---|
| | | } |
|---|
| | | this.letterInfo = { |
|---|
| | | height, |
|---|
| | | // 为äºè®©åæ¯å表对å±å¹ç»å¯¹å±
ä¸ï¼è®©å
¶å¯¹å¯¼èªæ è¿è¡ä¿®æ£ï¼ä¹å³å¾ä¸å移导èªæ çä¸åé«åº¦ |
|---|
| | | top: (windowHeight - height) / 2 + customNavHeight / 2, |
|---|
| | | itemHeight: Math.floor(height / this.uIndexList.length) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è·åå½å被触æ¸çç´¢å¼åæ¯ |
|---|
| | | getIndexListLetter(pageY) { |
|---|
| | | const { |
|---|
| | | top, |
|---|
| | | height, |
|---|
| | | itemHeight |
|---|
| | | } = this.letterInfo |
|---|
| | | // 对H5çpageYè¿è¡ä¿®æ£ï¼è¿æ¯ç±äºuni-appèªä½å¤æ
å¨H5ä¸å°è§¦æ¸ç¹çåæ è·H5ç导èªæ ç»å导è´çé®é¢ |
|---|
| | | // #ifdef H5 |
|---|
| | | pageY += uni.$u.sys().windowTop |
|---|
| | | // #endif |
|---|
| | | // 对第ä¸åæåä¸ä¸ªåæ¯åè¾¹çå¤çï¼å 为ç¨æ·å¯è½å¨åæ¯å表ä¸è§¦æ¸å°ä¸¤ç«¯ç尽头åä¾ç¶ç»§ç»æ»å¨ |
|---|
| | | if (pageY < top) { |
|---|
| | | return 0 |
|---|
| | | } else if (pageY >= top + height) { |
|---|
| | | // å¦æè¶
åºäºï¼åæåä¸ä¸ªåæ¯ |
|---|
| | | return this.uIndexList.length - 1 |
|---|
| | | } else { |
|---|
| | | // å°è§¦æ¸ç¹çYè½´å移å¼ï¼åå»ç´¢å¼åæ¯çtopå¼ï¼é¤ä»¥æ¯ä¸ªåæ¯çé«åº¦ï¼å³å¯å¾å°å½å触æ¸ç¹è½å¨åªä¸ªåæ¯ä¸ |
|---|
| | | return Math.floor((pageY - top) / itemHeight); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 设置å项ç±è§¦æ¸è导è´ååçå¼ |
|---|
| | | setValueForTouch(currentIndex) { |
|---|
| | | // å¦æå移é太å°ï¼ååå¾åºçä¼æ¯åä¸ä¸ªç´¢å¼åæ¯ï¼ä¸ºäºé²æï¼è¿è¡è¿å |
|---|
| | | if (currentIndex === this.activeIndex) return |
|---|
| | | this.activeIndex = currentIndex |
|---|
| | | // #ifndef APP-NVUE || MP-WEIXIN |
|---|
| | | // å¨énvueä¸ï¼ç±äºanchoråitemé½å¨u-index-itemä¸ï¼æ以éè¦å¯¹index-itemè¿è¡å移 |
|---|
| | | this.scrollIntoView = `u-index-item-${this.uIndexList[currentIndex].charCodeAt(0)}` |
|---|
| | | // #endif |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | // 微信å°ç¨åºä¸ï¼scroll-viewçscroll-into-viewå±æ§æ æ³å¯¹slotä¸çå
容çidçæï¼åªè½éè¿è®¾ç½®scrollTopçå½¢å¼å»ç§»å¨æ»å¨æ¡ |
|---|
| | | this.scrollTop = this.children[currentIndex].top |
|---|
| | | // #endif |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // å¨nvueä¸ï¼ç±äºcellåheader为å级å
ç´ ï¼æ以å®é
æ¯éè¦å¯¹header(anchor)è¿è¡å移 |
|---|
| | | const anchor = `u-index-anchor-${this.uIndexList[currentIndex]}` |
|---|
| | | dom.scrollToElement(this.anchors[currentIndex].$refs[anchor], { |
|---|
| | | offset: 0, |
|---|
| | | animated: false |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | getHeaderRect() { |
|---|
| | | // è·åheader slotçé«åº¦ï¼å 为listç»ä»¶ä¸è·åå
ç´ ç尺寸æ¯æ²¡ætopå¼ç |
|---|
| | | return new Promise(resolve => { |
|---|
| | | dom.getComponentRect(this.$refs.header, res => { |
|---|
| | | resolve(res.size) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // scroll-viewçæ»å¨äºä»¶ |
|---|
| | | async scrollHandler(e) { |
|---|
| | | if (this.touching || this.scrolling) return |
|---|
| | | // æ¯è¿ä¸å®æ¶é´åæ ·ä¸æ¬¡ï¼åå°èµæºæè以åå¯è½å¸¦æ¥çå¡é¡¿ |
|---|
| | | this.scrolling = true |
|---|
| | | uni.$u.sleep(10).then(() => { |
|---|
| | | this.scrolling = false |
|---|
| | | }) |
|---|
| | | let scrollTop = 0 |
|---|
| | | const len = this.children.length |
|---|
| | | let children = this.children |
|---|
| | | const anchors = this.anchors |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // nvueä¸è·åçæ»å¨æ¡å移为è´æ°ï¼éè¦è½¬ä¸ºæ£æ° |
|---|
| | | scrollTop = Math.abs(e.contentOffset.y) |
|---|
| | | // è·åheader slotçå°ºå¯¸ä¿¡æ¯ |
|---|
| | | const header = await this.getHeaderRect() |
|---|
| | | // itemçtopå¼ï¼å¨nvueä¸ï¼æ¨¡æåºçanchorçtopï¼ç±»ä¼¼énvueä¸çindex-itemçtop |
|---|
| | | let top = header.height |
|---|
| | | // ç±äºlistç»ä»¶æ æ³è·åcellçtopå¼ï¼è¿ééè¿header slotåå个itemä¹é´çheightï¼æ¨¡æåºç±»ä¼¼énvueä¸çä½ç½®ä¿¡æ¯ |
|---|
| | | children = this.children.map((item, index) => { |
|---|
| | | const child = { |
|---|
| | | height: item.height, |
|---|
| | | top |
|---|
| | | } |
|---|
| | | // è¿è¡ç´¯å ï¼ç»ä¸ä¸ä¸ªitemæä¾è®¡ç®ä¾æ® |
|---|
| | | top += item.height + anchors[index].height |
|---|
| | | return child |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | // énvueéè¿detailè·åæ»å¨æ¡ä½ç§» |
|---|
| | | scrollTop = e.detail.scrollTop |
|---|
| | | // #endif |
|---|
| | | for (let i = 0; i < len; i++) { |
|---|
| | | const item = children[i], |
|---|
| | | nextItem = children[i + 1] |
|---|
| | | // å¦ææ»å¨æ¡é«åº¦å°äºç¬¬ä¸ä¸ªitemçtopå¼ï¼æ¤æ¶æ é设置任æåæ¯ä¸ºé«äº® |
|---|
| | | if (scrollTop <= children[0].top || scrollTop >= children[len - 1].top + children[len - |
|---|
| | | 1].height) { |
|---|
| | | this.activeIndex = -1 |
|---|
| | | break |
|---|
| | | } else if (!nextItem) { |
|---|
| | | // å½ä¸åå¨ä¸ä¸ä¸ªitemæ¶ï¼æå³çåéå°äºæåä¸ä¸ª |
|---|
| | | this.activeIndex = len - 1 |
|---|
| | | break |
|---|
| | | } else if (scrollTop > item.top && scrollTop < nextItem.top) { |
|---|
| | | this.activeIndex = i |
|---|
| | | break |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-index-list { |
|---|
| | | |
|---|
| | | &__letter { |
|---|
| | | position: fixed; |
|---|
| | | right: 0; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 3; |
|---|
| | | padding: 0 6px; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | width: 16px; |
|---|
| | | height: 16px; |
|---|
| | | border-radius: 100px; |
|---|
| | | margin: 1px 0; |
|---|
| | | @include flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | &--active { |
|---|
| | | background-color: $u-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__index { |
|---|
| | | font-size: 12px; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 12px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__indicator { |
|---|
| | | width: 50px; |
|---|
| | | height: 50px; |
|---|
| | | border-radius: 100px 100px 0 100px; |
|---|
| | | text-align: center; |
|---|
| | | color: #ffffff; |
|---|
| | | background-color: #c9c9c9; |
|---|
| | | transform: rotate(-45deg); |
|---|
| | | @include flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: 28px; |
|---|
| | | line-height: 28px; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #fff; |
|---|
| | | transform: rotate(45deg); |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // è¾å
¥çå¼ |
|---|
| | | value: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.input.value |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡ç±»å |
|---|
| | | // number-æ°åè¾å
¥é®çï¼app-vueä¸å¯ä»¥è¾å
¥æµ®ç¹æ°ï¼app-nvueåå°ç¨åºå¹³å°ä¸åªè½è¾å
¥æ´æ° |
|---|
| | | // idcard-身份è¯è¾å
¥é®çï¼å¾®ä¿¡ãæ¯ä»å®ãç¾åº¦ãQQå°ç¨åº |
|---|
| | | // digit-带å°æ°ç¹çæ°åé®çï¼Appçnvue页é¢ã微信ãæ¯ä»å®ãç¾åº¦ã头æ¡ãQQå°ç¨åº |
|---|
| | | // text-ææ¬è¾å
¥é®ç |
|---|
| | | type: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.type |
|---|
| | | }, |
|---|
| | | // å¦æ textarea æ¯å¨ä¸ä¸ª position:fixed çåºåï¼éè¦æ¾ç¤ºæå®å±æ§ fixed 为 trueï¼ |
|---|
| | | // å
¼å®¹æ§ï¼å¾®ä¿¡å°ç¨åºãç¾åº¦å°ç¨åºãåèè·³å¨å°ç¨åºãQQå°ç¨åº |
|---|
| | | fixed: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.fixed |
|---|
| | | }, |
|---|
| | | // æ¯å¦ç¦ç¨è¾å
¥æ¡ |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.disabled |
|---|
| | | }, |
|---|
| | | // ç¦ç¨ç¶ææ¶çèæ¯è² |
|---|
| | | disabledColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.disabledColor |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºæ¸
é¤æ§ä»¶ |
|---|
| | | clearable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.clearable |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¯ç ç±»å |
|---|
| | | password: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.password |
|---|
| | | }, |
|---|
| | | // æ大è¾å
¥é¿åº¦ï¼è®¾ç½®ä¸º -1 çæ¶åä¸éå¶æ大é¿åº¦ |
|---|
| | | maxlength: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.input.maxlength |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡ä¸ºç©ºæ¶çå ä½ç¬¦ |
|---|
| | | placeholder: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.placeholder |
|---|
| | | }, |
|---|
| | | // æå®placeholderçæ ·å¼ç±»ï¼æ³¨æ页é¢æç»ä»¶çstyleä¸åäºscopedæ¶ï¼éè¦å¨ç±»ååå/deep/ |
|---|
| | | placeholderClass: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.placeholderClass |
|---|
| | | }, |
|---|
| | | // æå®placeholderçæ ·å¼ |
|---|
| | | placeholderStyle: { |
|---|
| | | type: [String, Object], |
|---|
| | | default: uni.$u.props.input.placeholderStyle |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºè¾å
¥åæ°ç»è®¡ï¼åªå¨ type ="text"ætype ="textarea"æ¶ææ |
|---|
| | | showWordLimit: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.showWordLimit |
|---|
| | | }, |
|---|
| | | // 设置å³ä¸è§æé®çæåï¼ææå¼ï¼send|search|next|go|doneï¼å
¼å®¹æ§è¯¦è§uni-appææ¡£ |
|---|
| | | // https://uniapp.dcloud.io/component/input |
|---|
| | | // https://uniapp.dcloud.io/component/textarea |
|---|
| | | confirmType: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.confirmType |
|---|
| | | }, |
|---|
| | | // ç¹å»é®çå³ä¸è§æé®æ¶æ¯å¦ä¿æé®çä¸æ¶èµ·ï¼H5æ æ |
|---|
| | | confirmHold: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.confirmHold |
|---|
| | | }, |
|---|
| | | // focusæ¶ï¼ç¹å»é¡µé¢çæ¶åä¸æ¶èµ·é®çï¼å¾®ä¿¡å°ç¨åºææ |
|---|
| | | holdKeyboard: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.holdKeyboard |
|---|
| | | }, |
|---|
| | | // èªå¨è·åç¦ç¹ |
|---|
| | | // å¨ H5 å¹³å°è½å¦èç¦ä»¥å软é®çæ¯å¦è·éå¼¹åºï¼åå³äºå½åæµè§å¨æ¬èº«çå®ç°ãnvue 页é¢ä¸æ¯æï¼é使ç¨ç»ä»¶ç focus()ãblur() æ¹æ³æ§å¶ç¦ç¹ |
|---|
| | | focus: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.focus |
|---|
| | | }, |
|---|
| | | // é®çæ¶èµ·æ¶ï¼æ¯å¦èªå¨å¤±å»ç¦ç¹ï¼ç®åä»
App3.0.0+ææ |
|---|
| | | autoBlur: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.autoBlur |
|---|
| | | }, |
|---|
| | | // æ¯å¦å»æ iOS ä¸çé»è®¤å
è¾¹è·ï¼ä»
微信å°ç¨åºï¼ä¸type=textareaæ¶ææ |
|---|
| | | disableDefaultPadding: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.disableDefaultPadding |
|---|
| | | }, |
|---|
| | | // æå®focusæ¶å
æ çä½ç½® |
|---|
| | | cursor: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.input.cursor |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡èç¦æ¶åºé¨ä¸é®ççè·ç¦» |
|---|
| | | cursorSpacing: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.input.cursorSpacing |
|---|
| | | }, |
|---|
| | | // å
æ èµ·å§ä½ç½®ï¼èªå¨èéæ¶ææï¼éä¸selection-endæé
ä½¿ç¨ |
|---|
| | | selectionStart: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.input.selectionStart |
|---|
| | | }, |
|---|
| | | // å
æ ç»æä½ç½®ï¼èªå¨èéæ¶ææï¼éä¸selection-startæé
ä½¿ç¨ |
|---|
| | | selectionEnd: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.input.selectionEnd |
|---|
| | | }, |
|---|
| | | // é®ç弹起æ¶ï¼æ¯å¦èªå¨ä¸æ¨é¡µé¢ |
|---|
| | | adjustPosition: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.adjustPosition |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡å
容对é½æ¹å¼ï¼å¯éå¼ä¸ºï¼left|center|right |
|---|
| | | inputAlign: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.inputAlign |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡åä½çå¤§å° |
|---|
| | | fontSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.input.fontSize |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡åä½é¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.color |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡åç½®å¾æ |
|---|
| | | prefixIcon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.prefixIcon |
|---|
| | | }, |
|---|
| | | // åç½®å¾æ æ ·å¼ï¼å¯¹è±¡æå符串 |
|---|
| | | prefixIconStyle: { |
|---|
| | | type: [String, Object], |
|---|
| | | default: uni.$u.props.input.prefixIconStyle |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡åç½®å¾æ |
|---|
| | | suffixIcon: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.suffixIcon |
|---|
| | | }, |
|---|
| | | // åç½®å¾æ æ ·å¼ï¼å¯¹è±¡æå符串 |
|---|
| | | suffixIconStyle: { |
|---|
| | | type: [String, Object], |
|---|
| | | default: uni.$u.props.input.suffixIconStyle |
|---|
| | | }, |
|---|
| | | // è¾¹æ¡ç±»åï¼surround-åå¨è¾¹æ¡ï¼bottom-åºé¨è¾¹æ¡ï¼none-æ è¾¹æ¡ |
|---|
| | | border: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.border |
|---|
| | | }, |
|---|
| | | // æ¯å¦åªè¯»ï¼ä¸disabledä¸åä¹å¤å¨äºdisabledä¼ç½®ç°ç»ä»¶ï¼èreadonlyåä¸ä¼ |
|---|
| | | readonly: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.input.readonly |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡å½¢ç¶ï¼circle-åå½¢ï¼square-æ¹å½¢ |
|---|
| | | shape: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.input.shape |
|---|
| | | }, |
|---|
| | | // ç¨äºå¤çæè
è¿æ»¤è¾å
¥æ¡å
容çæ¹æ³ |
|---|
| | | formatter: { |
|---|
| | | type: [Function, null], |
|---|
| | | default: uni.$u.props.input.formatter |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view class="u-input" :class="inputClass" :style="[wrapperStyle]"> |
|---|
| | | <view class="u-input__content"> |
|---|
| | | <view |
|---|
| | | class="u-input__content__prefix-icon" |
|---|
| | | v-if="prefixIcon || $slots.prefix" |
|---|
| | | > |
|---|
| | | <slot name="prefix"> |
|---|
| | | <u-icon |
|---|
| | | :name="prefixIcon" |
|---|
| | | size="18" |
|---|
| | | :customStyle="prefixIconStyle" |
|---|
| | | ></u-icon> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | <view class="u-input__content__field-wrapper" @tap="clickHandler"> |
|---|
| | | <!-- æ ¹æ®uni-appçinputç»ä»¶ææ¡£ï¼H5åAPPä¸åªè¦å£°æäºpasswordåæ°(æ 论trueè¿æ¯false)ï¼typeå失æï¼æ¤æ¶ |
|---|
| | | 为äºé²æ¢type=numberæ¶ï¼ååå¨passwordå±æ§ï¼typeæ æï¼æ¤æ¶éè¦è®¾ç½®password为undefined |
|---|
| | | --> |
|---|
| | | <input |
|---|
| | | class="u-input__content__field-wrapper__field" |
|---|
| | | :style="[inputStyle]" |
|---|
| | | :type="type" |
|---|
| | | :focus="focus" |
|---|
| | | :cursor="cursor" |
|---|
| | | :value="innerValue" |
|---|
| | | :auto-blur="autoBlur" |
|---|
| | | :disabled="disabled || readonly" |
|---|
| | | :maxlength="maxlength" |
|---|
| | | :placeholder="placeholder" |
|---|
| | | :placeholder-style="placeholderStyle" |
|---|
| | | :placeholder-class="placeholderClass" |
|---|
| | | :confirm-type="confirmType" |
|---|
| | | :confirm-hold="confirmHold" |
|---|
| | | :hold-keyboard="holdKeyboard" |
|---|
| | | :cursor-spacing="cursorSpacing" |
|---|
| | | :adjust-position="adjustPosition" |
|---|
| | | :selection-end="selectionEnd" |
|---|
| | | :selection-start="selectionStart" |
|---|
| | | :password="password || type === 'password' || undefined" |
|---|
| | | @input="onInput" |
|---|
| | | @blur="onBlur" |
|---|
| | | @focus="onFocus" |
|---|
| | | @confirm="onConfirm" |
|---|
| | | @keyboardheightchange="onkeyboardheightchange" |
|---|
| | | /> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | class="u-input__content__clear" |
|---|
| | | v-if="isShowClear" |
|---|
| | | @tap="onClear" |
|---|
| | | > |
|---|
| | | <u-icon |
|---|
| | | name="close" |
|---|
| | | size="11" |
|---|
| | | color="#ffffff" |
|---|
| | | customStyle="line-height: 12px" |
|---|
| | | ></u-icon> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | class="u-input__content__subfix-icon" |
|---|
| | | v-if="suffixIcon || $slots.suffix" |
|---|
| | | > |
|---|
| | | <slot name="suffix"> |
|---|
| | | <u-icon |
|---|
| | | :name="suffixIcon" |
|---|
| | | size="18" |
|---|
| | | :customStyle="suffixIconStyle" |
|---|
| | | ></u-icon> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from "./props.js"; |
|---|
| | | /** |
|---|
| | | * Input è¾å
¥æ¡ |
|---|
| | | * @description æ¤ç»ä»¶ä¸ºä¸ä¸ªè¾å
¥æ¡ï¼é»è®¤æ²¡æè¾¹æ¡åæ ·å¼ï¼æ¯ä¸é¨ä¸ºé
å表åç»ä»¶u-formè设计çï¼å©ç¨å®å¯ä»¥å¿«éå®ç°è¡¨åéªè¯ï¼è¾å
¥å
容ï¼ä¸æéæ©çåè½ã |
|---|
| | | * @tutorial https://uviewui.com/components/input.html |
|---|
| | | * @property {String | Number} value è¾å
¥çå¼ |
|---|
| | | * @property {String} type è¾å
¥æ¡ç±»åï¼è§ä¸æ¹è¯´æ ï¼ é»è®¤ 'text' ï¼ |
|---|
| | | * @property {Boolean} fixed å¦æ textarea æ¯å¨ä¸ä¸ª position:fixed çåºåï¼éè¦æ¾ç¤ºæå®å±æ§ fixed 为 trueï¼å
¼å®¹æ§ï¼å¾®ä¿¡å°ç¨åºãç¾åº¦å°ç¨åºãåèè·³å¨å°ç¨åºãQQå°ç¨åº ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} disabled æ¯å¦ç¦ç¨è¾å
¥æ¡ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {String} disabledColor ç¦ç¨ç¶ææ¶çèæ¯è²ï¼ é»è®¤ '#f5f7fa' ï¼ |
|---|
| | | * @property {Boolean} clearable æ¯å¦æ¾ç¤ºæ¸
é¤æ§ä»¶ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} password æ¯å¦å¯ç ç±»å ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {String | Number} maxlength æ大è¾å
¥é¿åº¦ï¼è®¾ç½®ä¸º -1 çæ¶åä¸éå¶æ大é¿åº¦ ï¼ é»è®¤ -1 ï¼ |
|---|
| | | * @property {String} placeholder è¾å
¥æ¡ä¸ºç©ºæ¶çå ä½ç¬¦ |
|---|
| | | * @property {String} placeholderClass æå®placeholderçæ ·å¼ç±»ï¼æ³¨æ页é¢æç»ä»¶çstyleä¸åäºscopedæ¶ï¼éè¦å¨ç±»ååå/deep/ ï¼ é»è®¤ 'input-placeholder' ï¼ |
|---|
| | | * @property {String | Object} placeholderStyle æå®placeholderçæ ·å¼ï¼å符串/对象形å¼ï¼å¦"color: red;" |
|---|
| | | * @property {Boolean} showWordLimit æ¯å¦æ¾ç¤ºè¾å
¥åæ°ç»è®¡ï¼åªå¨ type ="text"ætype ="textarea"æ¶ææ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {String} confirmType 设置å³ä¸è§æé®çæåï¼å
¼å®¹æ§è¯¦è§uni-appææ¡£ ï¼ é»è®¤ 'done' ï¼ |
|---|
| | | * @property {Boolean} confirmHold ç¹å»é®çå³ä¸è§æé®æ¶æ¯å¦ä¿æé®çä¸æ¶èµ·ï¼H5æ æ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} holdKeyboard focusæ¶ï¼ç¹å»é¡µé¢çæ¶åä¸æ¶èµ·é®çï¼å¾®ä¿¡å°ç¨åºææ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} focus èªå¨è·åç¦ç¹ï¼å¨ H5 å¹³å°è½å¦èç¦ä»¥å软é®çæ¯å¦è·éå¼¹åºï¼åå³äºå½åæµè§å¨æ¬èº«çå®ç°ãnvue 页é¢ä¸æ¯æï¼é使ç¨ç»ä»¶ç focus()ãblur() æ¹æ³æ§å¶ç¦ç¹ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} autoBlur é®çæ¶èµ·æ¶ï¼æ¯å¦èªå¨å¤±å»ç¦ç¹ï¼ç®åä»
App3.0.0+ææ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} disableDefaultPadding æ¯å¦å»æ iOS ä¸çé»è®¤å
è¾¹è·ï¼ä»
微信å°ç¨åºï¼ä¸type=textareaæ¶ææ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {String ï½ Number} cursor æå®focusæ¶å
æ çä½ç½®ï¼ é»è®¤ -1 ï¼ |
|---|
| | | * @property {String ï½ Number} cursorSpacing è¾å
¥æ¡èç¦æ¶åºé¨ä¸é®ççè·ç¦» ï¼ é»è®¤ 30 ï¼ |
|---|
| | | * @property {String ï½ Number} selectionStart å
æ èµ·å§ä½ç½®ï¼èªå¨èéæ¶ææï¼éä¸selection-endæé
ä½¿ç¨ ï¼ é»è®¤ -1 ï¼ |
|---|
| | | * @property {String ï½ Number} selectionEnd å
æ ç»æä½ç½®ï¼èªå¨èéæ¶ææï¼éä¸selection-startæé
ä½¿ç¨ ï¼ é»è®¤ -1 ï¼ |
|---|
| | | * @property {Boolean} adjustPosition é®ç弹起æ¶ï¼æ¯å¦èªå¨ä¸æ¨é¡µé¢ ï¼ é»è®¤ true ï¼ |
|---|
| | | * @property {String} inputAlign è¾å
¥æ¡å
容对é½æ¹å¼ï¼ é»è®¤ 'left' ï¼ |
|---|
| | | * @property {String | Number} fontSize è¾å
¥æ¡åä½çå¤§å° ï¼ é»è®¤ '15px' ï¼ |
|---|
| | | * @property {String} color è¾å
¥æ¡åä½é¢è² ï¼ é»è®¤ '#303133' ï¼ |
|---|
| | | * @property {Function} formatter å
容å¼åå½æ° |
|---|
| | | * @property {String} prefixIcon è¾å
¥æ¡åç½®å¾æ |
|---|
| | | * @property {String | Object} prefixIconStyle åç½®å¾æ æ ·å¼ï¼å¯¹è±¡æå符串 |
|---|
| | | * @property {String} suffixIcon è¾å
¥æ¡åç½®å¾æ |
|---|
| | | * @property {String | Object} suffixIconStyle åç½®å¾æ æ ·å¼ï¼å¯¹è±¡æå符串 |
|---|
| | | * @property {String} border è¾¹æ¡ç±»åï¼surround-åå¨è¾¹æ¡ï¼bottom-åºé¨è¾¹æ¡ï¼none-æ è¾¹æ¡ ï¼ é»è®¤ 'surround' ï¼ |
|---|
| | | * @property {Boolean} readonly æ¯å¦åªè¯»ï¼ä¸disabledä¸åä¹å¤å¨äºdisabledä¼ç½®ç°ç»ä»¶ï¼èreadonlyåä¸ä¼ ï¼ é»è®¤ false ï¼ |
|---|
| | | * @property {String} shape è¾å
¥æ¡å½¢ç¶ï¼circle-åå½¢ï¼square-æ¹å½¢ ï¼ é»è®¤ 'square' ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @example <u-input v-model="value" :password="true" suffix-icon="lock-fill" /> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-input", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // è¾å
¥æ¡çå¼ |
|---|
| | | innerValue: "", |
|---|
| | | // æ¯å¦å¤äºè·å¾ç¦ç¹ç¶æ |
|---|
| | | focused: false, |
|---|
| | | // valueæ¯å¦ç¬¬ä¸æ¬¡ååï¼å¨watchä¸ï¼ç±äºå å
¥immediateå±æ§ï¼ä¼å¨ç¬¬ä¸æ¬¡è§¦åï¼æ¤æ¶ä¸åºè¯¥è®¤ä¸ºvalueåçäºåå |
|---|
| | | firstChange: true, |
|---|
| | | // valueç»å®å¼çååæ¯ç±å
é¨è¿æ¯å¤é¨å¼èµ·ç |
|---|
| | | changeFromInner: false, |
|---|
| | | // è¿æ»¤å¤çæ¹æ³ |
|---|
| | | innerFormatter: value => value |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | value: { |
|---|
| | | immediate: true, |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | this.innerValue = newVal; |
|---|
| | | /* #ifdef H5 */ |
|---|
| | | // å¨H5ä¸ï¼å¤é¨valueåååï¼ä¿®æ¹inputä¸çå¼ï¼ä¸ä¼è§¦å@inputäºä»¶ï¼æ¤æ¶æå¨è°ç¨å¼ååæ¹æ³ |
|---|
| | | if ( |
|---|
| | | this.firstChange === false && |
|---|
| | | this.changeFromInner === false |
|---|
| | | ) { |
|---|
| | | this.valueChange(); |
|---|
| | | } |
|---|
| | | /* #endif */ |
|---|
| | | this.firstChange = false; |
|---|
| | | // éç½®changeFromInnerçå¼ä¸ºfalseï¼æ è¯ä¸ä¸æ¬¡å¼èµ·é»è®¤ä¸ºå¤é¨å¼èµ·ç |
|---|
| | | this.changeFromInner = false; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // æ¯å¦æ¾ç¤ºæ¸
é¤æ§ä»¶ |
|---|
| | | isShowClear() { |
|---|
| | | const { clearable, readonly, focused, innerValue } = this; |
|---|
| | | return !!clearable && !readonly && !!focused && innerValue !== ""; |
|---|
| | | }, |
|---|
| | | // ç»ä»¶çç±»å |
|---|
| | | inputClass() { |
|---|
| | | let classes = [], |
|---|
| | | { border, disabled, shape } = this; |
|---|
| | | border === "surround" && |
|---|
| | | (classes = classes.concat(["u-border", "u-input--radius"])); |
|---|
| | | classes.push(`u-input--${shape}`); |
|---|
| | | border === "bottom" && |
|---|
| | | (classes = classes.concat([ |
|---|
| | | "u-border-bottom", |
|---|
| | | "u-input--no-radius", |
|---|
| | | ])); |
|---|
| | | return classes.join(" "); |
|---|
| | | }, |
|---|
| | | // ç»ä»¶çæ ·å¼ |
|---|
| | | wrapperStyle() { |
|---|
| | | const style = {}; |
|---|
| | | // ç¦ç¨ç¶æä¸ï¼è¢«èæ¯è²å ä¸å¯¹åºçæ ·å¼ |
|---|
| | | if (this.disabled) { |
|---|
| | | style.backgroundColor = this.disabledColor; |
|---|
| | | } |
|---|
| | | // æ è¾¹æ¡æ¶ï¼å»é¤å
è¾¹è· |
|---|
| | | if (this.border === "none") { |
|---|
| | | style.padding = "0"; |
|---|
| | | } else { |
|---|
| | | // ç±äºuni-appçiOSå¼åè
è½åæéï¼å¯¼è´éè¦åå¼åæææ |
|---|
| | | style.paddingTop = "6px"; |
|---|
| | | style.paddingBottom = "6px"; |
|---|
| | | style.paddingLeft = "9px"; |
|---|
| | | style.paddingRight = "9px"; |
|---|
| | | } |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)); |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡çæ ·å¼ |
|---|
| | | inputStyle() { |
|---|
| | | const style = { |
|---|
| | | color: this.color, |
|---|
| | | fontSize: uni.$u.addUnit(this.fontSize), |
|---|
| | | textAlign: this.inputAlign |
|---|
| | | }; |
|---|
| | | return style; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å¨å¾®ä¿¡å°ç¨åºä¸ï¼ä¸æ¯æå°å½æ°å½åpropsåæ°ï¼æ
åªè½éè¿refå½¢å¼è°ç¨ |
|---|
| | | setFormatter(e) { |
|---|
| | | this.innerFormatter = e |
|---|
| | | }, |
|---|
| | | // å½é®çè¾å
¥æ¶ï¼è§¦åinputäºä»¶ |
|---|
| | | onInput(e) { |
|---|
| | | let { value = "" } = e.detail || {}; |
|---|
| | | // æ ¼å¼åè¿æ»¤æ¹æ³ |
|---|
| | | const formatter = this.formatter || this.innerFormatter |
|---|
| | | const formatValue = formatter(value) |
|---|
| | | // 为äºé¿å
propsçååæ°æ®æµç¹æ§ï¼éè¦å
å°innerValueå¼è®¾ç½®ä¸ºå½åå¼ï¼åå¨$nextTickä¸éæ°èµäºè®¾ç½®åçå¼æææ |
|---|
| | | this.innerValue = value |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.innerValue = formatValue; |
|---|
| | | this.valueChange(); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡å¤±å»ç¦ç¹æ¶è§¦å |
|---|
| | | onBlur(event) { |
|---|
| | | this.$emit("blur", event.detail.value); |
|---|
| | | // H5端çblurä¼å
äºç¹å»æ¸
é¤æ§ä»¶çç¹å»clickäºä»¶è§¦åï¼å¯¼è´focused |
|---|
| | | // ç¬é´ä¸ºfalseï¼ä»èéèäºæ¸
é¤æ§ä»¶èæ æ³è¢«ç¹å»å° |
|---|
| | | uni.$u.sleep(50).then(() => { |
|---|
| | | this.focused = false; |
|---|
| | | }); |
|---|
| | | // å°è¯è°ç¨u-formçéªè¯æ¹æ³ |
|---|
| | | uni.$u.formValidate(this, "blur"); |
|---|
| | | }, |
|---|
| | | // è¾å
¥æ¡èç¦æ¶è§¦å |
|---|
| | | onFocus(event) { |
|---|
| | | this.focused = true; |
|---|
| | | this.$emit("focus"); |
|---|
| | | }, |
|---|
| | | // ç¹å»å®ææé®æ¶è§¦å |
|---|
| | | onConfirm(event) { |
|---|
| | | this.$emit("confirm", this.innerValue); |
|---|
| | | }, |
|---|
| | | // é®çé«åº¦åçååçæ¶å触åæ¤äºä»¶ |
|---|
| | | // å
¼å®¹æ§ï¼å¾®ä¿¡å°ç¨åº2.7.0+ãApp 3.1.0+ |
|---|
| | | onkeyboardheightchange() { |
|---|
| | | this.$emit("keyboardheightchange"); |
|---|
| | | }, |
|---|
| | | // å
容åçååï¼è¿è¡å¤ç |
|---|
| | | valueChange() { |
|---|
| | | const value = this.innerValue; |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.$emit("input", value); |
|---|
| | | // æ è¯valueå¼çååæ¯ç±å
é¨å¼èµ·ç |
|---|
| | | this.changeFromInner = true; |
|---|
| | | this.$emit("change", value); |
|---|
| | | // å°è¯è°ç¨u-formçéªè¯æ¹æ³ |
|---|
| | | uni.$u.formValidate(this, "change"); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // ç¹å»æ¸
é¤æ§ä»¶ |
|---|
| | | onClear() { |
|---|
| | | this.innerValue = ""; |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.valueChange(); |
|---|
| | | this.$emit("clear"); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * å¨å®ånvueä¸ï¼äºä»¶æ æ³å泡 |
|---|
| | | * å¨æäºæ¶é´ï¼æ们å¸æçå¬u-from-itemçç¹å»äºä»¶ï¼æ¤æ¶ä¼å¯¼è´ç¹å»u-form-itemå
çu-inputå |
|---|
| | | * æ æ³è§¦åu-form-itemçç¹å»äºä»¶ï¼è¿ééè¿æå¨è°ç¨u-form-itemçæ¹æ³è¿è¡è§¦å |
|---|
| | | */ |
|---|
| | | clickHandler() { |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | if (uni.$u.os() === "android") { |
|---|
| | | const formItem = uni.$u.$parent.call(this, "u-form-item"); |
|---|
| | | if (formItem) { |
|---|
| | | formItem.clickHandler(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-input { |
|---|
| | | @include flex(row); |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &--radius, |
|---|
| | | &--square { |
|---|
| | | border-radius: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--no-radius { |
|---|
| | | border-radius: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--circle { |
|---|
| | | border-radius: 100px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__content { |
|---|
| | | flex: 1; |
|---|
| | | @include flex(row); |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | &__field-wrapper { |
|---|
| | | position: relative; |
|---|
| | | @include flex(row); |
|---|
| | | margin: 0; |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | &__field { |
|---|
| | | line-height: 26px; |
|---|
| | | text-align: left; |
|---|
| | | color: $u-main-color; |
|---|
| | | height: 24px; |
|---|
| | | font-size: 15px; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__clear { |
|---|
| | | width: 20px; |
|---|
| | | height: 20px; |
|---|
| | | border-radius: 100px; |
|---|
| | | background-color: #c6c7cb; |
|---|
| | | @include flex(row); |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | transform: scale(0.82); |
|---|
| | | margin-left: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__subfix-icon { |
|---|
| | | margin-left: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__prefix-icon { |
|---|
| | | margin-right: 4px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // é®ççç±»åï¼number-æ°åé®çï¼card-身份è¯é®çï¼car-车çå·é®ç |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.keyboard.mode |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºé®çç"."ç¬¦å· |
|---|
| | | dotDisabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.dotDisabled |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºé¡¶é¨å·¥å
·æ¡ |
|---|
| | | tooltip: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.tooltip |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå·¥å
·æ¡ä¸é´çæ示 |
|---|
| | | showTips: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.showTips |
|---|
| | | }, |
|---|
| | | // å·¥å
·æ¡ä¸é´çæ示æå |
|---|
| | | tips: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.keyboard.tips |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå·¥å
·æ¡å·¦è¾¹ç"åæ¶"æé® |
|---|
| | | showCancel: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.showCancel |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºå·¥å
·æ¡å³è¾¹ç"å®æ"æé® |
|---|
| | | showConfirm: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.showConfirm |
|---|
| | | }, |
|---|
| | | // æ¯å¦æä¹±é®çæé®çé¡ºåº |
|---|
| | | random: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.random |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¼å¯åºé¨å®å
¨åºéé
ï¼å¼å¯çè¯ï¼ä¼å¨iPhoneXæºååºé¨æ·»å ä¸å®çå
è¾¹è· |
|---|
| | | safeAreaInsetBottom: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.safeAreaInsetBottom |
|---|
| | | }, |
|---|
| | | // æ¯å¦å
许éè¿ç¹å»é®ç½©å
³éé®ç |
|---|
| | | closeOnClickOverlay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.closeOnClickOverlay |
|---|
| | | }, |
|---|
| | | // æ§å¶é®ççå¼¹åºä¸æ¶èµ· |
|---|
| | | show: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.show |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºé®ç½©ï¼æäºæ¶åæ°åé®çæ¶ï¼ç¨æ·å¸æçå°èªå·±çæ°å¼ï¼æ以å¯è½ä¸æ³è¦é®ç½© |
|---|
| | | overlay: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.overlay |
|---|
| | | }, |
|---|
| | | // z-indexå¼ |
|---|
| | | zIndex: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.keyboard.zIndex |
|---|
| | | }, |
|---|
| | | // åæ¶æé®çæå |
|---|
| | | cancelText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.keyboard.cancelText |
|---|
| | | }, |
|---|
| | | // 确认æé®çæå |
|---|
| | | confirmText: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.keyboard.confirmText |
|---|
| | | }, |
|---|
| | | // è¾å
¥ä¸ä¸ªä¸æåï¼æ¯å¦èªå¨åæ¢å°è±æ |
|---|
| | | autoChange: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.keyboard.autoChange |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <u-popup |
|---|
| | | :overlay="overlay" |
|---|
| | | :closeOnClickOverlay="closeOnClickOverlay" |
|---|
| | | mode="bottom" |
|---|
| | | :popup="false" |
|---|
| | | :show="show" |
|---|
| | | :safeAreaInsetBottom="safeAreaInsetBottom" |
|---|
| | | @close="popupClose" |
|---|
| | | :zIndex="zIndex" |
|---|
| | | :customStyle="{ |
|---|
| | | backgroundColor: 'rgb(214, 218, 220)' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <view class="u-keyboard"> |
|---|
| | | <slot /> |
|---|
| | | <view |
|---|
| | | class="u-keyboard__tooltip" |
|---|
| | | v-if="tooltip" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | hover-class="u-hover-class" |
|---|
| | | :hover-stay-time="100" |
|---|
| | | > |
|---|
| | | <text |
|---|
| | | class="u-keyboard__tooltip__item u-keyboard__tooltip__cancel" |
|---|
| | | v-if="showCancel" |
|---|
| | | @tap="onCancel" |
|---|
| | | >{{showCancel && cancelText}}</text> |
|---|
| | | </view> |
|---|
| | | <view> |
|---|
| | | <text |
|---|
| | | v-if="showTips" |
|---|
| | | class="u-keyboard__tooltip__item u-keyboard__tooltip__tips" |
|---|
| | | >{{tips ? tips : mode == 'number' ? 'æ°åé®ç' : mode == 'card' ? '身份è¯é®ç' : '车çå·é®ç'}}</text> |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | hover-class="u-hover-class" |
|---|
| | | :hover-stay-time="100" |
|---|
| | | > |
|---|
| | | <text |
|---|
| | | v-if="showConfirm" |
|---|
| | | @tap="onConfirm" |
|---|
| | | class="u-keyboard__tooltip__item u-keyboard__tooltip__submit" |
|---|
| | | hover-class="u-hover-class" |
|---|
| | | >{{showConfirm && confirmText}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <template v-if="mode == 'number' || mode == 'card'"> |
|---|
| | | <u-number-keyboard |
|---|
| | | :random="random" |
|---|
| | | @backspace="backspace" |
|---|
| | | @change="change" |
|---|
| | | :mode="mode" |
|---|
| | | :dotDisabled="dotDisabled" |
|---|
| | | ></u-number-keyboard> |
|---|
| | | </template> |
|---|
| | | <template v-else> |
|---|
| | | <u-car-keyboard |
|---|
| | | :random="random" |
|---|
| | | :autoChange="autoChange" |
|---|
| | | @backspace="backspace" |
|---|
| | | @change="change" |
|---|
| | | ></u-car-keyboard> |
|---|
| | | </template> |
|---|
| | | </view> |
|---|
| | | </u-popup> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * keyboard é®ç |
|---|
| | | * @description æ¤ä¸ºuViwèªå®ä¹çé®çé¢æ¿ï¼å
å«äºæ°åé®çï¼è½¦çå·é®ï¼èº«ä»½è¯å·é®ç3ä¸æ¨¡å¼ï¼é½æå¯ä»¥æä¹±æé®é¡ºåºçé项ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/keyboard.html |
|---|
| | | * @property {String} mode é®çç±»åï¼è§å®ç½åºæ¬ä½¿ç¨ç说æ ï¼é»è®¤ 'number' ï¼ |
|---|
| | | * @property {Boolean} dotDisabled æ¯å¦æ¾ç¤º"."æé®ï¼åªå¨mode=numberæ¶ææ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} tooltip æ¯å¦æ¾ç¤ºé®ç顶é¨å·¥å
·æ¡ ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} showTips æ¯å¦æ¾ç¤ºå·¥å
·æ¡ä¸é´çæ示 ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String} tips å·¥å
·æ¡ä¸é´çæ示æåï¼è§ä¸æ¹åºæ¬ä½¿ç¨ç说æï¼å¦ä¸éè¦ï¼è¯·ä¼ ""空å符 |
|---|
| | | * @property {Boolean} showCancel æ¯å¦æ¾ç¤ºå·¥å
·æ¡å·¦è¾¹ç"åæ¶"æé® ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} showConfirm æ¯å¦æ¾ç¤ºå·¥å
·æ¡å³è¾¹ç"å®æ"æé®ï¼ é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} random æ¯å¦æä¹±é®çæé®çé¡ºåº ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} safeAreaInsetBottom æ¯å¦å¼å¯åºé¨å®å
¨åºéé
ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} closeOnClickOverlay æ¯å¦å
许ç¹å»é®ç½©æ¶èµ·é®ç ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {Boolean} show æ§å¶é®ççå¼¹åºä¸æ¶èµ·ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} overlay æ¯å¦æ¾ç¤ºé®ç½© ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String | Number} zIndex å¼¹åºé®ççz-indexå¼ ï¼é»è®¤ 1075 ï¼ |
|---|
| | | * @property {String} cancelText åæ¶æé®çæå ï¼é»è®¤ 'åæ¶' ï¼ |
|---|
| | | * @property {String} confirmText 确认æé®çæå ï¼é»è®¤ '确认' ï¼ |
|---|
| | | * @property {Object} customStyle èªå®ä¹æ ·å¼ï¼å¯¹è±¡å½¢å¼ |
|---|
| | | * @event {Function} change æé®è¢«ç¹å»(ä¸å
å«éæ ¼é®è¢«ç¹å») |
|---|
| | | * @event {Function} cancel é®ç顶é¨å·¥å
·æ¡å·¦è¾¹ç"åæ¶"æé®è¢«ç¹å» |
|---|
| | | * @event {Function} confirm é®ç顶é¨å·¥å
·æ¡å³è¾¹ç"å®æ"æé®è¢«ç¹å» |
|---|
| | | * @event {Function} backspace é®çéæ ¼é®è¢«ç¹å» |
|---|
| | | * @example <u-keyboard mode="number" v-model="show"></u-keyboard> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-keyboard", |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | methods: { |
|---|
| | | change(e) { |
|---|
| | | this.$emit('change', e); |
|---|
| | | }, |
|---|
| | | // é®çå
³é |
|---|
| | | popupClose() { |
|---|
| | | this.$emit('close'); |
|---|
| | | }, |
|---|
| | | // è¾å
¥å®æ |
|---|
| | | onConfirm() { |
|---|
| | | this.$emit('confirm'); |
|---|
| | | }, |
|---|
| | | // åæ¶è¾å
¥ |
|---|
| | | onCancel() { |
|---|
| | | this.$emit('cancel'); |
|---|
| | | }, |
|---|
| | | // éæ ¼é® |
|---|
| | | backspace() { |
|---|
| | | this.$emit('backspace'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-keyboard { |
|---|
| | | |
|---|
| | | &__tooltip { |
|---|
| | | @include flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | background-color: #FFFFFF; |
|---|
| | | padding: 14px 12px; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | color: #333333; |
|---|
| | | flex: 1; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__submit { |
|---|
| | | text-align: right; |
|---|
| | | color: $u-primary; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__cancel { |
|---|
| | | text-align: left; |
|---|
| | | color: #888888; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__tips { |
|---|
| | | color: $u-tips-color; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¿æ´»é¨åçé¢è² |
|---|
| | | activeColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.lineProgress.activeColor |
|---|
| | | }, |
|---|
| | | inactiveColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.lineProgress.color |
|---|
| | | }, |
|---|
| | | // è¿åº¦ç¾åæ¯ï¼æ°å¼ |
|---|
| | | percentage: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.lineProgress.inactiveColor |
|---|
| | | }, |
|---|
| | | // æ¯å¦å¨è¿åº¦æ¡å
é¨æ¾ç¤ºç¾åæ¯çå¼ |
|---|
| | | showText: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.lineProgress.showText |
|---|
| | | }, |
|---|
| | | // è¿åº¦æ¡çé«åº¦ï¼åä½px |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.lineProgress.height |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-line-progress" |
|---|
| | | :style="[$u.addStyle(customStyle)]" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | class="u-line-progress__background" |
|---|
| | | ref="u-line-progress__background" |
|---|
| | | :style="[{ |
|---|
| | | backgroundColor: inactiveColor, |
|---|
| | | height: $u.addUnit(height), |
|---|
| | | }]" |
|---|
| | | > |
|---|
| | | </view> |
|---|
| | | <view |
|---|
| | | class="u-line-progress__line" |
|---|
| | | :style="[progressStyle]" |
|---|
| | | > |
|---|
| | | <slot> |
|---|
| | | <text v-if="showText && percentage >= 10" class="u-line-progress__text">{{innserPercentage + '%'}}</text> |
|---|
| | | </slot> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * lineProgress 线åè¿åº¦æ¡ |
|---|
| | | * @description å±ç¤ºæä½æä»»å¡çå½åè¿åº¦ï¼æ¯å¦ä¸ä¼ æ件ï¼æ¯ä¸ä¸ªçº¿å½¢çè¿åº¦æ¡ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/lineProgress.html |
|---|
| | | * @property {String} activeColor æ¿æ´»é¨åçé¢è² ( é»è®¤ '#19be6b' ) |
|---|
| | | * @property {String} inactiveColor èæ¯è² ( é»è®¤ '#ececec' ) |
|---|
| | | * @property {String | Number} percentage è¿åº¦ç¾åæ¯ï¼æ°å¼ ( é»è®¤ 0 ) |
|---|
| | | * @property {Boolean} showText æ¯å¦å¨è¿åº¦æ¡å
é¨æ¾ç¤ºç¾åæ¯çå¼ ( é»è®¤ true ) |
|---|
| | | * @property {String | Number} height è¿åº¦æ¡çé«åº¦ï¼åä½px ( é»è®¤ 12 ) |
|---|
| | | * |
|---|
| | | * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-line-progress", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | lineWidth: 0, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | percentage(n) { |
|---|
| | | this.resizeProgressWidth() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | progressStyle() { |
|---|
| | | let style = {} |
|---|
| | | style.width = this.lineWidth |
|---|
| | | style.backgroundColor = this.activeColor |
|---|
| | | style.height = uni.$u.addUnit(this.height) |
|---|
| | | return style |
|---|
| | | }, |
|---|
| | | innserPercentage() { |
|---|
| | | // æ§å¶èå´å¨0-100ä¹é´ |
|---|
| | | return uni.$u.range(0, 100, this.percentage) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | uni.$u.sleep(20).then(() => { |
|---|
| | | this.resizeProgressWidth() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | getProgressWidth() { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | return this.$uGetRect('.u-line-progress__background') |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // è¿åä¸ä¸ªpromise |
|---|
| | | return new Promise(resolve => { |
|---|
| | | dom.getComponentRect(this.$refs['u-line-progress__background'], (res) => { |
|---|
| | | resolve(res.size) |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | resizeProgressWidth() { |
|---|
| | | this.getProgressWidth().then(size => { |
|---|
| | | const { |
|---|
| | | width |
|---|
| | | } = size |
|---|
| | | // éè¿è®¾ç½®çpercentageå¼ï¼è®¡ç®å
¶æå æ»é¿åº¦çç¾åæ¯ |
|---|
| | | this.lineWidth = width * this.innserPercentage / 100 + 'px' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-line-progress { |
|---|
| | | align-items: stretch; |
|---|
| | | position: relative; |
|---|
| | | @include flex(row); |
|---|
| | | flex: 1; |
|---|
| | | overflow: hidden; |
|---|
| | | border-radius: 100px; |
|---|
| | | |
|---|
| | | &__background { |
|---|
| | | background-color: #ececec; |
|---|
| | | border-radius: 100px; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__line { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | bottom: 0; |
|---|
| | | align-items: center; |
|---|
| | | @include flex(row); |
|---|
| | | color: #ffffff; |
|---|
| | | border-radius: 100px; |
|---|
| | | transition: width 0.5s ease; |
|---|
| | | justify-content: flex-end; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | font-size: 10px; |
|---|
| | | align-items: center; |
|---|
| | | text-align: right; |
|---|
| | | color: #FFFFFF; |
|---|
| | | margin-right: 5px; |
|---|
| | | transform: scale(0.9); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.line.color |
|---|
| | | }, |
|---|
| | | // é¿åº¦ï¼ç«åæ¶è¡¨ç°ä¸ºé«åº¦ï¼æ¨ªåæ¶è¡¨ç°ä¸ºé¿åº¦ï¼å¯ä»¥ä¸ºç¾åæ¯ï¼å¸¦pxåä½çå¼ç |
|---|
| | | length: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.line.length |
|---|
| | | }, |
|---|
| | | // 线æ¡æ¹åï¼col-ç«åï¼row-横å |
|---|
| | | direction: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.line.direction |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºç»è¾¹æ¡ |
|---|
| | | hairline: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.line.hairline |
|---|
| | | }, |
|---|
| | | // 线æ¡ä¸ä¸ä¸å·¦å³å
ç´ çé´è·ï¼å符串形å¼ï¼å¦"30px"ã"20px 30px" |
|---|
| | | margin: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.line.margin |
|---|
| | | }, |
|---|
| | | // æ¯å¦è线ï¼true-å®çº¿ï¼false-è线 |
|---|
| | | dashed: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.line.dashed |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-line" |
|---|
| | | :style="[lineStyle]" |
|---|
| | | > |
|---|
| | | |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | /** |
|---|
| | | * line çº¿æ¡ |
|---|
| | | * @description æ¤ç»ä»¶ä¸è¬ç¨äºæ¾ç¤ºä¸æ ¹çº¿æ¡ï¼ç¨äºåéå
容åï¼æ横ååç«å两ç§æ¨¡å¼ï¼ä¸è½è®¾ç½®0.5px线æ¡ï¼ä½¿ç¨ä¹å¾ç®å |
|---|
| | | * @tutorial https://www.uviewui.com/components/line.html |
|---|
| | | * @property {String} color 线æ¡çé¢è² ( é»è®¤ '#d6d7d9' ) |
|---|
| | | * @property {String | Number} length é¿åº¦ï¼ç«åæ¶è¡¨ç°ä¸ºé«åº¦ï¼æ¨ªåæ¶è¡¨ç°ä¸ºé¿åº¦ï¼å¯ä»¥ä¸ºç¾åæ¯ï¼å¸¦pxåä½çå¼ç ( é»è®¤ '100%' ) |
|---|
| | | * @property {String} direction 线æ¡çæ¹åï¼row-横åï¼col-ç«å (é»è®¤ 'row' ) |
|---|
| | | * @property {Boolean} hairline æ¯å¦æ¾ç¤ºç»çº¿æ¡ (é»è®¤ true ) |
|---|
| | | * @property {String | Number} margin 线æ¡ä¸ä¸ä¸å·¦å³å
ç´ çé´è·ï¼å符串形å¼ï¼å¦"30px" (é»è®¤ 0 ) |
|---|
| | | * @property {Boolean} dashed æ¯å¦è线ï¼true-è线ï¼false-å®çº¿ (é»è®¤ false ) |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * @example <u-line color="red"></u-line> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-line', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | computed: { |
|---|
| | | lineStyle() { |
|---|
| | | const style = {} |
|---|
| | | style.margin = this.margin |
|---|
| | | // å¦ææ¯æ°´å¹³çº¿æ¡ï¼è¾¹æ¡é«åº¦ä¸º1pxï¼åéè¿transform缩å°ä¸åï¼å°±æ¯0.5pxäº |
|---|
| | | if (this.direction === 'row') { |
|---|
| | | // æ¤å¤éç¨å
¼å®¹åå¼åï¼å
¼å®¹nvueçåæ³ |
|---|
| | | style.borderBottomWidth = '1px' |
|---|
| | | style.borderBottomStyle = this.dashed ? 'dashed' : 'solid' |
|---|
| | | style.width = uni.$u.addUnit(this.length) |
|---|
| | | if (this.hairline) style.transform = 'scaleY(0.5)' |
|---|
| | | } else { |
|---|
| | | // å¦ææ¯ç«å线æ¡ï¼è¾¹æ¡å®½åº¦ä¸º1pxï¼åéè¿transform缩å°ä¸åï¼å°±æ¯0.5pxäº |
|---|
| | | style.borderLeftWidth = '1px' |
|---|
| | | style.borderLeftStyle = this.dashed ? 'dashed' : 'solid' |
|---|
| | | style.height = uni.$u.addUnit(this.length) |
|---|
| | | if (this.hairline) style.transform = 'scaleX(0.5)' |
|---|
| | | } |
|---|
| | | |
|---|
| | | style.borderColor = this.color |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-line { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | vertical-align: middle; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æåé¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.link.color |
|---|
| | | }, |
|---|
| | | // åä½å¤§å°ï¼åä½px |
|---|
| | | fontSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.link.fontSize |
|---|
| | | }, |
|---|
| | | // æ¯å¦æ¾ç¤ºä¸å线 |
|---|
| | | underLine: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.link.underLine |
|---|
| | | }, |
|---|
| | | // è¦è·³è½¬çé¾æ¥ |
|---|
| | | href: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.link.href |
|---|
| | | }, |
|---|
| | | // å°ç¨åºä¸å¤å¶å°ç²è´´æ¿çæç¤ºè¯ |
|---|
| | | mpTips: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.link.mpTips |
|---|
| | | }, |
|---|
| | | // ä¸å线é¢è² |
|---|
| | | lineColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.link.lineColor |
|---|
| | | }, |
|---|
| | | // è¶
é¾æ¥çé®é¢ï¼ä¸ä½¿ç¨slotå½¢å¼ä¼ å
¥ï¼æ¯å 为nvueä¸æ æ³ä¿®æ¹é¢è² |
|---|
| | | text: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.link.text |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <text |
|---|
| | | class="u-link" |
|---|
| | | @tap.stop="openLink" |
|---|
| | | :style="[linkStyle, $u.addStyle(customStyle)]" |
|---|
| | | >{{text}}</text> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * link è¶
é¾æ¥ |
|---|
| | | * @description 该ç»ä»¶ä¸ºè¶
é¾æ¥ç»ä»¶ï¼å¨ä¸åå¹³å°æä¸å表ç°å½¢å¼ï¼å¨APPå¹³å°ä¼éè¿plusç¯å¢æå¼å
ç½®æµè§å¨ï¼å¨å°ç¨åºä¸æé¾æ¥å¤å¶å°ç²è´´æ¿ï¼åæ¶æ示信æ¯ï¼å¨H5ä¸éè¿window.openæå¼é¾æ¥ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/link.html |
|---|
| | | * @property {String} color æåé¢è² ï¼é»è®¤ color['u-primary'] ï¼ |
|---|
| | | * @property {String ï½ Number} fontSize åä½å¤§å°ï¼åä½px ï¼é»è®¤ 15 ï¼ |
|---|
| | | * @property {Boolean} underLine æ¯å¦æ¾ç¤ºä¸å线 ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String} href 跳转çé¾æ¥ï¼è¦å¸¦ä¸http(s) |
|---|
| | | * @property {String} mpTips å个å°ç¨åºå¹³å°æé¾æ¥å¤å¶å°ç²è´´æ¿åçæ示è¯ï¼é»è®¤âé¾æ¥å·²å¤å¶ï¼è¯·å¨æµè§å¨æå¼âï¼ |
|---|
| | | * @property {String} lineColor ä¸å线é¢è²ï¼é»è®¤åcoloråæ°é¢è² |
|---|
| | | * @property {String} text è¶
é¾æ¥çé®é¢ï¼ä¸ä½¿ç¨slotå½¢å¼ä¼ å
¥ï¼æ¯å 为nvueä¸æ æ³ä¿®æ¹é¢è² |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @example <u-link href="http://www.uviewui.com">èéé¾ï¼é¾äºä¸é天</u-link> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-link", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | computed: { |
|---|
| | | linkStyle() { |
|---|
| | | const style = { |
|---|
| | | color: this.color, |
|---|
| | | fontSize: uni.$u.addUnit(this.fontSize), |
|---|
| | | // line-height设置为æ¯åä½å¤§å°å¤2px |
|---|
| | | lineHeight: uni.$u.addUnit(uni.$u.getPx(this.fontSize) + 2), |
|---|
| | | textDecoration: this.underLine ? 'underline' : 'none' |
|---|
| | | } |
|---|
| | | // if (this.underLine) { |
|---|
| | | // style.borderBottomColor = this.lineColor || this.color |
|---|
| | | // style.borderBottomWidth = '1px' |
|---|
| | | // } |
|---|
| | | return style |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | openLink() { |
|---|
| | | // #ifdef APP-PLUS |
|---|
| | | plus.runtime.openURL(this.href) |
|---|
| | | // #endif |
|---|
| | | // #ifdef H5 |
|---|
| | | window.open(this.href) |
|---|
| | | // #endif |
|---|
| | | // #ifdef MP |
|---|
| | | uni.setClipboardData({ |
|---|
| | | data: this.href, |
|---|
| | | success: () => { |
|---|
| | | uni.hideToast(); |
|---|
| | | this.$nextTick(() => { |
|---|
| | | uni.$u.toast(this.mpTips); |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | // #endif |
|---|
| | | this.$emit('click') |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | $u-link-line-height:1 !default; |
|---|
| | | |
|---|
| | | .u-link { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | line-height: $u-link-line-height; |
|---|
| | | /* #endif */ |
|---|
| | | @include flex; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // ç¨äºæ»å¨å°æå®item |
|---|
| | | anchor: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.listItem.anchor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <cell> |
|---|
| | | <!-- #endif --> |
|---|
| | | <view |
|---|
| | | class="u-list-item" |
|---|
| | | :ref="`u-list-item-${anchor}`" |
|---|
| | | :anchor="`u-list-item-${anchor}`" |
|---|
| | | :class="[`u-list-item-${anchor}`]" |
|---|
| | | > |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | </cell> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * List å表 |
|---|
| | | * @description 该ç»ä»¶ä¸ºé«æ§è½å表ç»ä»¶ |
|---|
| | | * @tutorial https://www.uviewui.com/components/list.html |
|---|
| | | * @property {String | Number} anchor ç¨äºæ»å¨å°æå®item |
|---|
| | | * @example <u-list-ite v-for="(item, index) in indexList" :key="index" ></u-list-item> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-list-item', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // èç¹ä¿¡æ¯ |
|---|
| | | rect: {}, |
|---|
| | | index: 0, |
|---|
| | | show: true, |
|---|
| | | sys: uni.$u.sys() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | inject: ['uList'], |
|---|
| | | watch: { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | 'uList.innerScrollTop'(n) { |
|---|
| | | const preLoadScreen = this.uList.preLoadScreen |
|---|
| | | const windowHeight = this.sys.windowHeight |
|---|
| | | if(n <= windowHeight * preLoadScreen) { |
|---|
| | | this.parent.updateOffsetFromChild(0) |
|---|
| | | } else if (this.rect.top <= n - windowHeight * preLoadScreen) { |
|---|
| | | this.parent.updateOffsetFromChild(this.rect.top) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.parent = {} |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | // åå§åæ°æ® |
|---|
| | | this.updateParentData() |
|---|
| | | this.index = this.parent.children.indexOf(this) |
|---|
| | | this.resize() |
|---|
| | | }, |
|---|
| | | updateParentData() { |
|---|
| | | // æ¤æ¹æ³å¨mixinä¸ |
|---|
| | | this.getParentData('u-list') |
|---|
| | | }, |
|---|
| | | resize() { |
|---|
| | | this.queryRect(`u-list-item-${this.anchor}`).then(size => { |
|---|
| | | const lastChild = this.parent.children[this.index - 1] |
|---|
| | | this.rect = size |
|---|
| | | const preLoadScreen = this.uList.preLoadScreen |
|---|
| | | const windowHeight = this.sys.windowHeight |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | if (lastChild) { |
|---|
| | | this.rect.top = lastChild.rect.top + lastChild.rect.height |
|---|
| | | } |
|---|
| | | if (size.top >= this.uList.innerScrollTop + (1 + preLoadScreen) * windowHeight) this.show = |
|---|
| | | false |
|---|
| | | // #endif |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // æ¥è¯¢å
ç´ å°ºå¯¸ |
|---|
| | | queryRect(el) { |
|---|
| | | return new Promise(resolve => { |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | this.$uGetRect(`.${el}`).then(size => { |
|---|
| | | resolve(size) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const ref = this.$refs[el] |
|---|
| | | dom.getComponentRect(ref, res => { |
|---|
| | | resolve(res.size) |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-list-item {} |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ§å¶æ¯å¦åºç°æ»å¨æ¡ï¼ä»
nvueææ |
|---|
| | | showScrollbar: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.list.showScrollbar |
|---|
| | | }, |
|---|
| | | // è·åºé¨å¤å°æ¶è§¦åscrolltoloweräºä»¶ |
|---|
| | | lowerThreshold: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.list.lowerThreshold |
|---|
| | | }, |
|---|
| | | // è·é¡¶é¨å¤å°æ¶è§¦åscrolltoupperäºä»¶ï¼énvueææ |
|---|
| | | upperThreshold: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.list.upperThreshold |
|---|
| | | }, |
|---|
| | | // 设置ç«åæ»å¨æ¡ä½ç½® |
|---|
| | | scrollTop: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.list.scrollTop |
|---|
| | | }, |
|---|
| | | // æ§å¶ onscroll äºä»¶è§¦åçé¢çï¼ä»
nvueææ |
|---|
| | | offsetAccuracy: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.list.offsetAccuracy |
|---|
| | | }, |
|---|
| | | // å¯ç¨ flexbox å¸å±ãå¼å¯åï¼å½åèç¹å£°æäºdisplay: flexå°±ä¼æ为flex containerï¼å¹¶ä½ç¨äºå
¶å©åèç¹ï¼ä»
微信å°ç¨åºææ |
|---|
| | | enableFlex: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.list.enableFlex |
|---|
| | | }, |
|---|
| | | // æ¯å¦æå页模å¼æ¾ç¤ºListï¼é»è®¤å¼false |
|---|
| | | pagingEnabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.list.pagingEnabled |
|---|
| | | }, |
|---|
| | | // æ¯å¦å
许Listæ»å¨ |
|---|
| | | scrollable: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.list.scrollable |
|---|
| | | }, |
|---|
| | | // å¼åºä¸ºæåå
ç´ idï¼idä¸è½ä»¥æ°åå¼å¤´ï¼ |
|---|
| | | scrollIntoView: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.list.scrollIntoView |
|---|
| | | }, |
|---|
| | | // å¨è®¾ç½®æ»å¨æ¡ä½ç½®æ¶ä½¿ç¨å¨ç»è¿æ¸¡ |
|---|
| | | scrollWithAnimation: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.list.scrollWithAnimation |
|---|
| | | }, |
|---|
| | | // iOSç¹å»é¡¶é¨ç¶ææ ãå®ååå»æ é¢æ æ¶ï¼æ»å¨æ¡è¿å顶é¨ï¼åªå¯¹å¾®ä¿¡å°ç¨åºææ |
|---|
| | | enableBackToTop: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.list.enableBackToTop |
|---|
| | | }, |
|---|
| | | // å表çé«åº¦ |
|---|
| | | height: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.list.height |
|---|
| | | }, |
|---|
| | | // å表宽度 |
|---|
| | | width: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.list.width |
|---|
| | | }, |
|---|
| | | // å表ååé¢æ¸²æçå±æ°ï¼1代表ä¸ä¸ªå±å¹çé«åº¦ï¼1.5代表1个åå±å¹é«åº¦ |
|---|
| | | preLoadScreen: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.list.preLoadScreen |
|---|
| | | } |
|---|
| | | // vueä¸ï¼æ¯å¦å¼å¯èæå表 |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <list |
|---|
| | | class="u-list" |
|---|
| | | :enableBackToTop="enableBackToTop" |
|---|
| | | :loadmoreoffset="lowerThreshold" |
|---|
| | | :showScrollbar="showScrollbar" |
|---|
| | | :style="[listStyle]" |
|---|
| | | :offset-accuracy="Number(offsetAccuracy)" |
|---|
| | | @scroll="onScroll" |
|---|
| | | @loadmore="scrolltolower" |
|---|
| | | > |
|---|
| | | <slot /> |
|---|
| | | </list> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <scroll-view |
|---|
| | | class="u-list" |
|---|
| | | :scroll-into-view="scrollIntoView" |
|---|
| | | :style="[listStyle]" |
|---|
| | | scroll-y |
|---|
| | | :scroll-top="Number(scrollTop)" |
|---|
| | | :lower-threshold="Number(lowerThreshold)" |
|---|
| | | :upper-threshold="Number(upperThreshold)" |
|---|
| | | :show-scrollbar="showScrollbar" |
|---|
| | | :enable-back-to-top="enableBackToTop" |
|---|
| | | :scroll-with-animation="scrollWithAnimation" |
|---|
| | | @scroll="onScroll" |
|---|
| | | @scrolltolower="scrolltolower" |
|---|
| | | @scrolltoupper="scrolltoupper" |
|---|
| | | > |
|---|
| | | <view :style="{ |
|---|
| | | paddingTop: `${offset}px` |
|---|
| | | }"> |
|---|
| | | <slot /> |
|---|
| | | </view> |
|---|
| | | </scroll-view> |
|---|
| | | <!-- #endif --> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const dom = uni.requireNativePlugin('dom') |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * List å表 |
|---|
| | | * @description 该ç»ä»¶ä¸ºé«æ§è½å表ç»ä»¶ |
|---|
| | | * @tutorial https://www.uviewui.com/components/list.html |
|---|
| | | * @property {Boolean} showScrollbar æ§å¶æ¯å¦åºç°æ»å¨æ¡ï¼ä»
nvueææ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String ï½ Number} lowerThreshold è·åºé¨å¤å°æ¶è§¦åscrolltoloweräºä»¶ ï¼é»è®¤ 50 ï¼ |
|---|
| | | * @property {String ï½ Number} upperThreshold è·é¡¶é¨å¤å°æ¶è§¦åscrolltoupperäºä»¶ï¼énvueææ ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {String ï½ Number} scrollTop 设置ç«åæ»å¨æ¡ä½ç½®ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {String ï½ Number} offsetAccuracy æ§å¶ onscroll äºä»¶è§¦åçé¢çï¼ä»
nvueææï¼é»è®¤ 10 ï¼ |
|---|
| | | * @property {Boolean} enableFlex å¯ç¨ flexbox å¸å±ãå¼å¯åï¼å½åèç¹å£°æäºdisplay: flexå°±ä¼æ为flex containerï¼å¹¶ä½ç¨äºå
¶å©åèç¹ï¼ä»
微信å°ç¨åºææï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} pagingEnabled æ¯å¦æå页模å¼æ¾ç¤ºListï¼ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} scrollable æ¯å¦å
许Listæ»å¨ï¼é»è®¤ true ï¼ |
|---|
| | | * @property {String} scrollIntoView å¼åºä¸ºæåå
ç´ idï¼idä¸è½ä»¥æ°åå¼å¤´ï¼ |
|---|
| | | * @property {Boolean} scrollWithAnimation å¨è®¾ç½®æ»å¨æ¡ä½ç½®æ¶ä½¿ç¨å¨ç»è¿æ¸¡ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {Boolean} enableBackToTop iOSç¹å»é¡¶é¨ç¶ææ ãå®ååå»æ é¢æ æ¶ï¼æ»å¨æ¡è¿å顶é¨ï¼åªå¯¹å¾®ä¿¡å°ç¨åºææ ï¼é»è®¤ false ï¼ |
|---|
| | | * @property {String ï½ Number} height å表çé«åº¦ ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {String ï½ Number} width å表宽度 ï¼é»è®¤ 0 ï¼ |
|---|
| | | * @property {String ï½ Number} preLoadScreen å表ååé¢æ¸²æçå±æ°ï¼1代表ä¸ä¸ªå±å¹çé«åº¦ï¼1.5代表1个åå±å¹é«åº¦ ï¼é»è®¤ 1 ï¼ |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * |
|---|
| | | * @example <u-list @scrolltolower="scrolltolower"></u-list> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-list', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|---|
| | | watch: { |
|---|
| | | scrollIntoView(n) { |
|---|
| | | this.scrollIntoViewById(n) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // è®°å½å
é¨æ»å¨çè·ç¦» |
|---|
| | | innerScrollTop: 0, |
|---|
| | | // vueä¸ï¼scroll-viewå¨ä¸æå è½½æ¶çåç§»å¼ |
|---|
| | | offset: 0, |
|---|
| | | sys: uni.$u.sys() |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | listStyle() { |
|---|
| | | const style = {}, |
|---|
| | | addUnit = uni.$u.addUnit |
|---|
| | | if (this.width != 0) style.width = addUnit(this.width) |
|---|
| | | if (this.height != 0) style.height = addUnit(this.height) |
|---|
| | | // å¦æ没æå®ä¹å表é«åº¦ï¼åé»è®¤ä½¿ç¨å±å¹é«åº¦ |
|---|
| | | if (!style.height) style.height = addUnit(this.sys.windowHeight, 'px') |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | provide() { |
|---|
| | | return { |
|---|
| | | uList: this |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.refs = [] |
|---|
| | | this.children = [] |
|---|
| | | this.anchors = [] |
|---|
| | | }, |
|---|
| | | mounted() {}, |
|---|
| | | methods: { |
|---|
| | | updateOffsetFromChild(top) { |
|---|
| | | this.offset = top |
|---|
| | | }, |
|---|
| | | onScroll(e) { |
|---|
| | | let scrollTop = 0 |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | scrollTop = e.contentOffset.y |
|---|
| | | // #endif |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | scrollTop = e.detail.scrollTop |
|---|
| | | // #endif |
|---|
| | | this.innerScrollTop = scrollTop |
|---|
| | | this.$emit('scroll', Math.abs(scrollTop)) |
|---|
| | | }, |
|---|
| | | scrollIntoViewById(id) { |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // æ ¹æ®idåæ°ï¼æ¾å°ææu-list-itemä¸å¹é
çèç¹ï¼åéè¿dom模åæ»å¨å°å¯¹åºçä½ç½® |
|---|
| | | const item = this.refs.find(item => item.$refs[id] ? true : false) |
|---|
| | | dom.scrollToElement(item.$refs[id], { |
|---|
| | | // æ¯å¦éè¦æ»å¨å¨ç» |
|---|
| | | animated: this.scrollWithAnimation |
|---|
| | | }) |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | // æ»å¨å°åºé¨è§¦åäºä»¶ |
|---|
| | | scrolltolower(e) { |
|---|
| | | uni.$u.sleep(30).then(() => { |
|---|
| | | this.$emit('scrolltolower') |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // #ifndef APP-NVUE |
|---|
| | | // æ»å¨å°åºé¨æ¶è§¦åï¼énvueææ |
|---|
| | | scrolltoupper(e) { |
|---|
| | | uni.$u.sleep(30).then(() => { |
|---|
| | | this.$emit('scrolltoupper') |
|---|
| | | // è¿ä¸å¥å¾éè¦ï¼è½ç»å¯¹ä¿è¯å¨æ§åè½éç¢çwebviewï¼æ»å¨æ¡å°é¡¶æ¶ï¼åæ¶å移å¼ï¼è®©é¡µé¢ç½®é¡¶ |
|---|
| | | this.offset = 0 |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | |
|---|
| | | .u-list { |
|---|
| | | @include flex(column); |
|---|
| | | |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | // æ¯å¦æ¾ç¤ºç»ä»¶ |
|---|
| | | show: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.loadingIcon.show |
|---|
| | | }, |
|---|
| | | // é¢è² |
|---|
| | | color: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.loadingIcon.color |
|---|
| | | }, |
|---|
| | | // æ示æåé¢è² |
|---|
| | | textColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.loadingIcon.textColor |
|---|
| | | }, |
|---|
| | | // æååå¾æ æ¯å¦åç´æå |
|---|
| | | vertical: { |
|---|
| | | type: Boolean, |
|---|
| | | default: uni.$u.props.loadingIcon.vertical |
|---|
| | | }, |
|---|
| | | // 模å¼éæ©ï¼circle-åå½¢ï¼spinner-è±æµå½¢ï¼semicircle-ååå½¢ |
|---|
| | | mode: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.loadingIcon.mode |
|---|
| | | }, |
|---|
| | | // å¾æ 大å°ï¼åä½é»è®¤px |
|---|
| | | size: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.loadingIcon.size |
|---|
| | | }, |
|---|
| | | // æåå¤§å° |
|---|
| | | textSize: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.loadingIcon.textSize |
|---|
| | | }, |
|---|
| | | // æåå
容 |
|---|
| | | text: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.loadingIcon.text |
|---|
| | | }, |
|---|
| | | // å¨ç»æ¨¡å¼ |
|---|
| | | timingFunction: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.loadingIcon.timingFunction |
|---|
| | | }, |
|---|
| | | // å¨ç»æ§è¡å¨ææ¶é´ |
|---|
| | | duration: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: uni.$u.props.loadingIcon.duration |
|---|
| | | }, |
|---|
| | | // mode=circleæ¶çæè¾¹é¢è² |
|---|
| | | inactiveColor: { |
|---|
| | | type: String, |
|---|
| | | default: uni.$u.props.loadingIcon.inactiveColor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-loading-icon" |
|---|
| | | :style="[$u.addStyle(customStyle)]" |
|---|
| | | :class="[vertical && 'u-loading-icon--vertical']" |
|---|
| | | v-if="show" |
|---|
| | | > |
|---|
| | | <view |
|---|
| | | v-if="!webviewHide" |
|---|
| | | class="u-loading-icon__spinner" |
|---|
| | | :class="[`u-loading-icon__spinner--${mode}`]" |
|---|
| | | ref="ani" |
|---|
| | | :style="{ |
|---|
| | | color: color, |
|---|
| | | width: $u.addUnit(size), |
|---|
| | | height: $u.addUnit(size), |
|---|
| | | borderTopColor: color, |
|---|
| | | borderBottomColor: otherBorderColor, |
|---|
| | | borderLeftColor: otherBorderColor, |
|---|
| | | borderRightColor: otherBorderColor, |
|---|
| | | 'animation-duration': `${duration}ms`, |
|---|
| | | 'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : '' |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <block v-if="mode === 'spinner'"> |
|---|
| | | <!-- #ifndef APP-NVUE --> |
|---|
| | | <view |
|---|
| | | v-for="(item, index) in array12" |
|---|
| | | :key="index" |
|---|
| | | class="u-loading-icon__dot" |
|---|
| | | > |
|---|
| | | </view> |
|---|
| | | <!-- #endif --> |
|---|
| | | <!-- #ifdef APP-NVUE --> |
|---|
| | | <!-- æ¤ç»ä»¶å
é¨å¾æ é¨åæ æ³è®¾ç½®å®½é«ï¼å³ä½¿éè¿widthåheighté
ç½®äºä¹æ æ --> |
|---|
| | | <loading-indicator |
|---|
| | | v-if="!webviewHide" |
|---|
| | | class="u-loading-indicator" |
|---|
| | | :animating="true" |
|---|
| | | :style="{ |
|---|
| | | color: color, |
|---|
| | | width: $u.addUnit(size), |
|---|
| | | height: $u.addUnit(size) |
|---|
| | | }" |
|---|
| | | /> |
|---|
| | | <!-- #endif --> |
|---|
| | | </block> |
|---|
| | | </view> |
|---|
| | | <text |
|---|
| | | v-if="text" |
|---|
| | | class="u-loading-icon__text" |
|---|
| | | :style="{ |
|---|
| | | fontSize: $u.addUnit(textSize), |
|---|
| | | color: textColor, |
|---|
| | | }" |
|---|
| | | >{{text}}</text> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from './props.js'; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | const animation = weex.requireModule('animation'); |
|---|
| | | // #endif |
|---|
| | | /** |
|---|
| | | * loading å è½½å¨ç» |
|---|
| | | * @description è¦æ¤ç»ä»¶ä¸ºä¸ä¸ªå°å¨ç»ï¼ç®åç¨å¨uViewçloadmoreå è½½æ´å¤åswitchå¼å
³çç»ä»¶çæ£å¨å è½½ç¶æåºæ¯ã |
|---|
| | | * @tutorial https://www.uviewui.com/components/loading.html |
|---|
| | | * @property {Boolean} show æ¯å¦æ¾ç¤ºç»ä»¶ (é»è®¤ true) |
|---|
| | | * @property {String} color å¨ç»æ´»å¨åºåçé¢è²ï¼åªå¯¹ mode = flower 模å¼ææï¼é»è®¤color['u-tips-color']ï¼ |
|---|
| | | * @property {String} textColor æ示ææ¬çé¢è²ï¼é»è®¤color['u-tips-color']ï¼ |
|---|
| | | * @property {Boolean} vertical æååå¾æ æ¯å¦åç´æå (é»è®¤ false ) |
|---|
| | | * @property {String} mode 模å¼éæ©ï¼è§å®ç½è¯´æï¼é»è®¤ 'circle' ï¼ |
|---|
| | | * @property {String | Number} size å è½½å¾æ ç大å°ï¼åä½px ï¼é»è®¤ 24 ï¼ |
|---|
| | | * @property {String | Number} textSize æå大å°ï¼é»è®¤ 15 ï¼ |
|---|
| | | * @property {String | Number} text æåå
容 |
|---|
| | | * @property {String} timingFunction å¨ç»æ¨¡å¼ ï¼é»è®¤ 'ease-in-out' ï¼ |
|---|
| | | * @property {String | Number} duration å¨ç»æ§è¡å¨ææ¶é´ï¼é»è®¤ 1200ï¼ |
|---|
| | | * @property {String} inactiveColor mode=circleæ¶çæè¾¹é¢è² |
|---|
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
|---|
| | | * @example <u-loading mode="circle"></u-loading> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: 'u-loading-icon', |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // Array.formå¯ä»¥éè¿ä¸ä¸ªä¼ªæ°ç»å¯¹è±¡å建æå®é¿åº¦çæ°ç» |
|---|
| | | // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from |
|---|
| | | array12: Array.from({ |
|---|
| | | length: 12 |
|---|
| | | }), |
|---|
| | | // è¿ééè¦è®¾ç½®é»è®¤å¼ä¸º360ï¼å¦åå¨å®ånvueä¸ï¼ä¼å»¶è¿ä¸ä¸ªdurationå¨æåææ§è¡ |
|---|
| | | // å¨iOS nvueä¸ï¼åä¼ä¸å¼å§é»è®¤æ§è¡ä¸¤ä¸ªå¨æçå¨ç» |
|---|
| | | aniAngel: 360, // å¨ç»æ转è§åº¦ |
|---|
| | | webviewHide: false, // çå¬webviewçç¶æï¼å¦æéèäºé¡µé¢ï¼ååæ¢å¨ç»ï¼ä»¥å
æ§è½æ¶è |
|---|
| | | loading: false, // æ¯å¦è¿è¡ä¸ï¼é对nvueä½¿ç¨ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | // å½ä¸ºcircleç±»åæ¶ï¼ç»å
¶å¦å¤ä¸è¾¹è®¾ç½®ä¸ä¸ªæ´è½»ä¸äºçé¢è² |
|---|
| | | // ä¹æ以éè¦è¿ä¹åçåå æ¯ï¼æ¯å¦ç¶ç»ä»¶ä¼ äºcolor为红è²ï¼é£ä¹éè¦å¦å¤çä¸ä¸ªè¾¹ä¸ºæµ
çº¢è² |
|---|
| | | // èä¸è½æ¯åºå®çæä¸ä¸ªå
¶ä»é¢è²(å 为è¿ä¸ªåºå®çé¢è²å¯è½æµ
èï¼å¯¼è´ææ没æé£ä¹ç»è
»è¯å¥½) |
|---|
| | | otherBorderColor() { |
|---|
| | | const lightColor = uni.$u.colorGradient(this.color, '#ffffff', 100)[80] |
|---|
| | | if (this.mode === 'circle') { |
|---|
| | | return this.inactiveColor ? this.inactiveColor : lightColor |
|---|
| | | } else { |
|---|
| | | return 'transparent' |
|---|
| | | } |
|---|
| | | // return this.mode === 'circle' ? this.inactiveColor ? this.inactiveColor : lightColor : 'transparent' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | show(n) { |
|---|
| | | // nvueä¸ï¼show为trueï¼ä¸ä¸ºéloadingç¶æï¼å°±éæ°æ§è¡å¨ç»æ¨¡å |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | if (n && !this.loading) { |
|---|
| | | setTimeout(() => { |
|---|
| | | this.startAnimate() |
|---|
| | | }, 30) |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init() { |
|---|
| | | setTimeout(() => { |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | this.show && this.nvueAnimate() |
|---|
| | | // #endif |
|---|
| | | // #ifdef APP-PLUS |
|---|
| | | this.show && this.addEventListenerToWebview() |
|---|
| | | // #endif |
|---|
| | | }, 20) |
|---|
| | | }, |
|---|
| | | // çå¬webviewçæ¾ç¤ºä¸éè |
|---|
| | | addEventListenerToWebview() { |
|---|
| | | // webviewçå æ |
|---|
| | | const pages = getCurrentPages() |
|---|
| | | // å½åé¡µé¢ |
|---|
| | | const page = pages[pages.length - 1] |
|---|
| | | // å½å页é¢çwebviewå®ä¾ |
|---|
| | | const currentWebview = page.$getAppWebview() |
|---|
| | | // çå¬webviewçæ¾ç¤ºä¸éèï¼ä»èåæ¢æè
å¼å§å¨ç»(为äºæ§è½) |
|---|
| | | currentWebview.addEventListener('hide', () => { |
|---|
| | | this.webviewHide = true |
|---|
| | | }) |
|---|
| | | currentWebview.addEventListener('show', () => { |
|---|
| | | this.webviewHide = false |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | nvueAnimate() { |
|---|
| | | // nvueä¸ï¼éspinnerç±»åæ¶æéè¦æ转ï¼å 为nvueçspinnerç±»åï¼ä½¿ç¨äºweexç |
|---|
| | | // loading-indicatorç»ä»¶ï¼èªå¸¦æ转åè½ |
|---|
| | | this.mode !== 'spinner' && this.startAnimate() |
|---|
| | | }, |
|---|
| | | // æ§è¡nvueçanimate模åå¨ç» |
|---|
| | | startAnimate() { |
|---|
| | | this.loading = true |
|---|
| | | const ani = this.$refs.ani |
|---|
| | | if (!ani) return |
|---|
| | | animation.transition(ani, { |
|---|
| | | // è¿è¡è§åº¦æ转 |
|---|
| | | styles: { |
|---|
| | | transform: `rotate(${this.aniAngel}deg)`, |
|---|
| | | transformOrigin: 'center center' |
|---|
| | | }, |
|---|
| | | duration: this.duration, |
|---|
| | | timingFunction: this.timingFunction, |
|---|
| | | // delay: 10 |
|---|
| | | }, () => { |
|---|
| | | // æ¯æ¬¡å¢å 360degï¼ä¸ºäºè®©å
¶éæ°æ转ä¸å¨ |
|---|
| | | this.aniAngel += 360 |
|---|
| | | // å¨ç»ç»æåï¼ç»§ç»å¾ªç¯æ§è¡å¨ç»ï¼éè¦åæ¶å¤æwebviewHideåé |
|---|
| | | // nvueå®åï¼é¡µé¢éèåä¾ç¶ä¼ç»§ç»æ§è¡startAnimateæ¹æ³ |
|---|
| | | this.show && !this.webviewHide ? this.startAnimate() : this.loading = false |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // #endif |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | @import "../../libs/css/components.scss"; |
|---|
| | | $u-loading-icon-color: #c8c9cc !default; |
|---|
| | | $u-loading-icon-text-margin-left:4px !default; |
|---|
| | | $u-loading-icon-text-color:$u-content-color !default; |
|---|
| | | $u-loading-icon-text-font-size:14px !default; |
|---|
| | | $u-loading-icon-text-line-height:20px !default; |
|---|
| | | $u-loading-width:30px !default; |
|---|
| | | $u-loading-height:30px !default; |
|---|
| | | $u-loading-max-width:100% !default; |
|---|
| | | $u-loading-max-height:100% !default; |
|---|
| | | $u-loading-semicircle-border-width: 2px !default; |
|---|
| | | $u-loading-semicircle-border-color:transparent !default; |
|---|
| | | $u-loading-semicircle-border-top-right-radius: 100px !default; |
|---|
| | | $u-loading-semicircle-border-top-left-radius: 100px !default; |
|---|
| | | $u-loading-semicircle-border-bottom-left-radius: 100px !default; |
|---|
| | | $u-loading-semicircle-border-bottom-right-radiu: 100px !default; |
|---|
| | | $u-loading-semicircle-border-style: solid !default; |
|---|
| | | $u-loading-circle-border-top-right-radius: 100px !default; |
|---|
| | | $u-loading-circle-border-top-left-radius: 100px !default; |
|---|
| | | $u-loading-circle-border-bottom-left-radius: 100px !default; |
|---|
| | | $u-loading-circle-border-bottom-right-radiu: 100px !default; |
|---|
| | | $u-loading-circle-border-width:2px !default; |
|---|
| | | $u-loading-circle-border-top-color:#e5e5e5 !default; |
|---|
| | | $u-loading-circle-border-right-color:$u-loading-circle-border-top-color !default; |
|---|
| | | $u-loading-circle-border-bottom-color:$u-loading-circle-border-top-color !default; |
|---|
| | | $u-loading-circle-border-left-color:$u-loading-circle-border-top-color !default; |
|---|
| | | $u-loading-circle-border-style:solid !default; |
|---|
| | | $u-loading-icon-host-font-size:0px !default; |
|---|
| | | $u-loading-icon-host-line-height:1 !default; |
|---|
| | | $u-loading-icon-vertical-margin:6px 0 0 !default; |
|---|
| | | $u-loading-icon-dot-top:0 !default; |
|---|
| | | $u-loading-icon-dot-left:0 !default; |
|---|
| | | $u-loading-icon-dot-width:100% !default; |
|---|
| | | $u-loading-icon-dot-height:100% !default; |
|---|
| | | $u-loading-icon-dot-before-width:2px !default; |
|---|
| | | $u-loading-icon-dot-before-height:25% !default; |
|---|
| | | $u-loading-icon-dot-before-margin:0 auto !default; |
|---|
| | | $u-loading-icon-dot-before-background-color:currentColor !default; |
|---|
| | | $u-loading-icon-dot-before-border-radius:40% !default; |
|---|
| | | |
|---|
| | | .u-loading-icon { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | // display: inline-flex; |
|---|
| | | /* #endif */ |
|---|
| | | flex-direction: row; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | color: $u-loading-icon-color; |
|---|
| | | |
|---|
| | | &__text { |
|---|
| | | margin-left: $u-loading-icon-text-margin-left; |
|---|
| | | color: $u-loading-icon-text-color; |
|---|
| | | font-size: $u-loading-icon-text-font-size; |
|---|
| | | line-height: $u-loading-icon-text-line-height; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__spinner { |
|---|
| | | width: $u-loading-width; |
|---|
| | | height: $u-loading-height; |
|---|
| | | position: relative; |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | box-sizing: border-box; |
|---|
| | | max-width: $u-loading-max-width; |
|---|
| | | max-height: $u-loading-max-height; |
|---|
| | | animation: u-rotate 1s linear infinite; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__spinner--semicircle { |
|---|
| | | border-width: $u-loading-semicircle-border-width; |
|---|
| | | border-color: $u-loading-semicircle-border-color; |
|---|
| | | border-top-right-radius: $u-loading-semicircle-border-top-right-radius; |
|---|
| | | border-top-left-radius: $u-loading-semicircle-border-top-left-radius; |
|---|
| | | border-bottom-left-radius: $u-loading-semicircle-border-bottom-left-radius; |
|---|
| | | border-bottom-right-radius: $u-loading-semicircle-border-bottom-right-radiu; |
|---|
| | | border-style: $u-loading-semicircle-border-style; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__spinner--circle { |
|---|
| | | border-top-right-radius: $u-loading-circle-border-top-right-radius; |
|---|
| | | border-top-left-radius: $u-loading-circle-border-top-left-radius; |
|---|
| | | border-bottom-left-radius: $u-loading-circle-border-bottom-left-radius; |
|---|
| | | border-bottom-right-radius: $u-loading-circle-border-bottom-right-radiu; |
|---|
| | | border-width: $u-loading-circle-border-width; |
|---|
| | | border-top-color: $u-loading-circle-border-top-color; |
|---|
| | | border-right-color: $u-loading-circle-border-right-color; |
|---|
| | | border-bottom-color: $u-loading-circle-border-bottom-color; |
|---|
| | | border-left-color: $u-loading-circle-border-left-color; |
|---|
| | | border-style: $u-loading-circle-border-style; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--vertical { |
|---|
| | | flex-direction: column |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | :host { |
|---|
| | | font-size: $u-loading-icon-host-font-size; |
|---|
| | | line-height: $u-loading-icon-host-line-height; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .u-loading-icon { |
|---|
| | | &__spinner--spinner { |
|---|
| | | animation-timing-function: steps(12) |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__text:empty { |
|---|
| | | display: none |
|---|
| | | } |
|---|
| | | |
|---|
| | | &--vertical &__text { |
|---|
| | | margin: $u-loading-icon-vertical-margin; |
|---|
| | | color: $u-content-color; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__dot { |
|---|
| | | position: absolute; |
|---|
| | | top: $u-loading-icon-dot-top; |
|---|
| | | left: $u-loading-icon-dot-left; |
|---|
| | | width: $u-loading-icon-dot-width; |
|---|
| | | height: $u-loading-icon-dot-height; |
|---|
| | | |
|---|
| | | &:before { |
|---|
| | | display: block; |
|---|
| | | width: $u-loading-icon-dot-before-width; |
|---|
| | | height: $u-loading-icon-dot-before-height; |
|---|
| | | margin: $u-loading-icon-dot-before-margin; |
|---|
| | | background-color: $u-loading-icon-dot-before-background-color; |
|---|
| | | border-radius: $u-loading-icon-dot-before-border-radius; |
|---|
| | | content: " " |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @for $i from 1 through 12 { |
|---|
| | | .u-loading-icon__dot:nth-of-type(#{$i}) { |
|---|
| | | transform: rotate($i * 30deg); |
|---|
| | | opacity: 1 - 0.0625 * ($i - 1); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes u-rotate { |
|---|
| | | 0% { |
|---|
| | | transform: rotate(0deg) |
|---|
| | | } |
|---|
| | | |
|---|
| | | to { |
|---|
| | | transform: rotate(1turn) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* #endif */ |
|---|
| | | </style> |
|---|
| uni_modules/uview-ui/components/u-loading-page/props.js
uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue
uni_modules/uview-ui/components/u-loadmore/props.js
uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue
uni_modules/uview-ui/components/u-modal/props.js
uni_modules/uview-ui/components/u-modal/u-modal.vue
uni_modules/uview-ui/components/u-navbar/props.js
uni_modules/uview-ui/components/u-navbar/u-navbar.vue
uni_modules/uview-ui/components/u-no-network/props.js
uni_modules/uview-ui/components/u-no-network/u-no-network.vue
uni_modules/uview-ui/components/u-notice-bar/props.js
uni_modules/uview-ui/components/u-notice-bar/u-notice-bar.vue
uni_modules/uview-ui/components/u-notify/props.js
uni_modules/uview-ui/components/u-notify/u-notify.vue
uni_modules/uview-ui/components/u-number-box/props.js
uni_modules/uview-ui/components/u-number-box/u-number-box.vue
uni_modules/uview-ui/components/u-number-keyboard/props.js
uni_modules/uview-ui/components/u-number-keyboard/u-number-keyboard.vue
uni_modules/uview-ui/components/u-overlay/props.js
uni_modules/uview-ui/components/u-overlay/u-overlay.vue
uni_modules/uview-ui/components/u-parse/node/node.vue
uni_modules/uview-ui/components/u-parse/parser.js
uni_modules/uview-ui/components/u-parse/props.js
uni_modules/uview-ui/components/u-parse/u-parse.vue
uni_modules/uview-ui/components/u-picker-column/props.js
uni_modules/uview-ui/components/u-picker-column/u-picker-column.vue
uni_modules/uview-ui/components/u-picker/props.js
uni_modules/uview-ui/components/u-picker/u-picker.vue
uni_modules/uview-ui/components/u-popup/props.js
uni_modules/uview-ui/components/u-popup/u-popup.vue
uni_modules/uview-ui/components/u-radio-group/props.js
uni_modules/uview-ui/components/u-radio-group/u-radio-group.vue
uni_modules/uview-ui/components/u-radio/props.js
uni_modules/uview-ui/components/u-radio/u-radio.vue
uni_modules/uview-ui/components/u-rate/props.js
uni_modules/uview-ui/components/u-rate/u-rate.vue
uni_modules/uview-ui/components/u-read-more/props.js
uni_modules/uview-ui/components/u-read-more/u-read-more.vue
uni_modules/uview-ui/components/u-row-notice/props.js
uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
uni_modules/uview-ui/components/u-row/props.js
uni_modules/uview-ui/components/u-row/u-row.vue
uni_modules/uview-ui/components/u-safe-bottom/props.js
uni_modules/uview-ui/components/u-safe-bottom/u-safe-bottom.vue
uni_modules/uview-ui/components/u-scroll-list/nvue.js
uni_modules/uview-ui/components/u-scroll-list/other.js
uni_modules/uview-ui/components/u-scroll-list/props.js
uni_modules/uview-ui/components/u-scroll-list/scrollWxs.wxs
uni_modules/uview-ui/components/u-scroll-list/u-scroll-list.vue
uni_modules/uview-ui/components/u-search/props.js
uni_modules/uview-ui/components/u-search/u-search.vue
uni_modules/uview-ui/components/u-skeleton/props.js
uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue
uni_modules/uview-ui/components/u-slider/mpother.js
uni_modules/uview-ui/components/u-slider/mpwxs.js
uni_modules/uview-ui/components/u-slider/mpwxs.wxs
uni_modules/uview-ui/components/u-slider/nvue - 副本.js
uni_modules/uview-ui/components/u-slider/nvue.js
uni_modules/uview-ui/components/u-slider/props.js
uni_modules/uview-ui/components/u-slider/u-slider.vue
uni_modules/uview-ui/components/u-status-bar/props.js
uni_modules/uview-ui/components/u-status-bar/u-status-bar.vue
uni_modules/uview-ui/components/u-steps-item/props.js
uni_modules/uview-ui/components/u-steps-item/u-steps-item.vue
uni_modules/uview-ui/components/u-steps/props.js
uni_modules/uview-ui/components/u-steps/u-steps.vue
uni_modules/uview-ui/components/u-sticky/props.js
uni_modules/uview-ui/components/u-sticky/u-sticky.vue
uni_modules/uview-ui/components/u-subsection/props.js
uni_modules/uview-ui/components/u-subsection/u-subsection.vue
uni_modules/uview-ui/components/u-swipe-action-item/index - backup.wxs
uni_modules/uview-ui/components/u-swipe-action-item/index.wxs
uni_modules/uview-ui/components/u-swipe-action-item/nvue - backup.js
uni_modules/uview-ui/components/u-swipe-action-item/nvue.js
uni_modules/uview-ui/components/u-swipe-action-item/props.js
uni_modules/uview-ui/components/u-swipe-action-item/u-swipe-action-item.vue
uni_modules/uview-ui/components/u-swipe-action-item/wxs.js
uni_modules/uview-ui/components/u-swipe-action/props.js
uni_modules/uview-ui/components/u-swipe-action/u-swipe-action.vue
uni_modules/uview-ui/components/u-swiper-indicator/props.js
uni_modules/uview-ui/components/u-swiper-indicator/u-swiper-indicator.vue
uni_modules/uview-ui/components/u-swiper/props.js
uni_modules/uview-ui/components/u-swiper/u-swiper.vue
uni_modules/uview-ui/components/u-switch/props.js
uni_modules/uview-ui/components/u-switch/u-switch.vue
uni_modules/uview-ui/components/u-tabbar-item/props.js
uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue
uni_modules/uview-ui/components/u-tabbar/props.js
uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue
uni_modules/uview-ui/components/u-table/props.js
uni_modules/uview-ui/components/u-table/u-table.vue
uni_modules/uview-ui/components/u-tabs-item/props.js
uni_modules/uview-ui/components/u-tabs-item/u-tabs-item.vue
uni_modules/uview-ui/components/u-tabs/props.js
uni_modules/uview-ui/components/u-tabs/u-tabs.vue
uni_modules/uview-ui/components/u-tag/props.js
uni_modules/uview-ui/components/u-tag/u-tag.vue
uni_modules/uview-ui/components/u-td/props.js
uni_modules/uview-ui/components/u-td/u-td.vue
uni_modules/uview-ui/components/u-text/props.js
uni_modules/uview-ui/components/u-text/u-text.vue
uni_modules/uview-ui/components/u-text/value.js
uni_modules/uview-ui/components/u-textarea/props.js
uni_modules/uview-ui/components/u-textarea/u-textarea.vue
uni_modules/uview-ui/components/u-toast/u-toast.vue
uni_modules/uview-ui/components/u-toolbar/props.js
uni_modules/uview-ui/components/u-toolbar/u-toolbar.vue
uni_modules/uview-ui/components/u-tooltip/clipboard.min.js
uni_modules/uview-ui/components/u-tooltip/props.js
uni_modules/uview-ui/components/u-tooltip/u-tooltip.vue
uni_modules/uview-ui/components/u-tr/props.js
uni_modules/uview-ui/components/u-tr/u-tr.vue
uni_modules/uview-ui/components/u-transition/nvue.ani-map.js
uni_modules/uview-ui/components/u-transition/props.js
uni_modules/uview-ui/components/u-transition/transition.js
uni_modules/uview-ui/components/u-transition/u-transition.vue
uni_modules/uview-ui/components/u-transition/vue.ani-style.scss
uni_modules/uview-ui/components/u-upload/mixin.js
uni_modules/uview-ui/components/u-upload/props.js
uni_modules/uview-ui/components/u-upload/u-upload.vue
uni_modules/uview-ui/components/u-upload/utils.js
uni_modules/uview-ui/components/uview-ui/uview-ui.vue
uni_modules/uview-ui/index.js
uni_modules/uview-ui/index.scss
uni_modules/uview-ui/libs/config/color.js
uni_modules/uview-ui/libs/config/config.js
uni_modules/uview-ui/libs/config/props.js
uni_modules/uview-ui/libs/config/props/actionSheet.js
uni_modules/uview-ui/libs/config/props/album.js
uni_modules/uview-ui/libs/config/props/alert.js
uni_modules/uview-ui/libs/config/props/avatar.js
uni_modules/uview-ui/libs/config/props/avatarGroup.js
uni_modules/uview-ui/libs/config/props/backtop.js
uni_modules/uview-ui/libs/config/props/badge.js
uni_modules/uview-ui/libs/config/props/button.js
uni_modules/uview-ui/libs/config/props/calendar.js
uni_modules/uview-ui/libs/config/props/carKeyboard.js
uni_modules/uview-ui/libs/config/props/cell.js
uni_modules/uview-ui/libs/config/props/cellGroup.js
uni_modules/uview-ui/libs/config/props/checkbox.js
uni_modules/uview-ui/libs/config/props/checkboxGroup.js
uni_modules/uview-ui/libs/config/props/circleProgress.js
uni_modules/uview-ui/libs/config/props/code.js
uni_modules/uview-ui/libs/config/props/codeInput.js
uni_modules/uview-ui/libs/config/props/col.js
uni_modules/uview-ui/libs/config/props/collapse.js
uni_modules/uview-ui/libs/config/props/collapseItem.js
uni_modules/uview-ui/libs/config/props/columnNotice.js
uni_modules/uview-ui/libs/config/props/countDown.js
uni_modules/uview-ui/libs/config/props/countTo.js
uni_modules/uview-ui/libs/config/props/datetimePicker.js
uni_modules/uview-ui/libs/config/props/divider.js
uni_modules/uview-ui/libs/config/props/empty.js
uni_modules/uview-ui/libs/config/props/form.js
uni_modules/uview-ui/libs/config/props/formItem.js
uni_modules/uview-ui/libs/config/props/gap.js
uni_modules/uview-ui/libs/config/props/grid.js
uni_modules/uview-ui/libs/config/props/gridItem.js
uni_modules/uview-ui/libs/config/props/icon.js
uni_modules/uview-ui/libs/config/props/image.js
uni_modules/uview-ui/libs/config/props/indexAnchor.js
uni_modules/uview-ui/libs/config/props/indexList.js
uni_modules/uview-ui/libs/config/props/input.js
uni_modules/uview-ui/libs/config/props/keyboard.js
uni_modules/uview-ui/libs/config/props/line.js
uni_modules/uview-ui/libs/config/props/lineProgress.js
uni_modules/uview-ui/libs/config/props/link.js
uni_modules/uview-ui/libs/config/props/list.js
uni_modules/uview-ui/libs/config/props/listItem.js
uni_modules/uview-ui/libs/config/props/loadingIcon.js
uni_modules/uview-ui/libs/config/props/loadingPage.js
uni_modules/uview-ui/libs/config/props/loadmore.js
uni_modules/uview-ui/libs/config/props/modal.js
uni_modules/uview-ui/libs/config/props/navbar.js
uni_modules/uview-ui/libs/config/props/noNetwork.js
uni_modules/uview-ui/libs/config/props/noticeBar.js
uni_modules/uview-ui/libs/config/props/notify.js
uni_modules/uview-ui/libs/config/props/numberBox.js
uni_modules/uview-ui/libs/config/props/numberKeyboard.js
uni_modules/uview-ui/libs/config/props/overlay.js
uni_modules/uview-ui/libs/config/props/parse.js
uni_modules/uview-ui/libs/config/props/picker.js
uni_modules/uview-ui/libs/config/props/popup.js
uni_modules/uview-ui/libs/config/props/radio.js
uni_modules/uview-ui/libs/config/props/radioGroup.js
uni_modules/uview-ui/libs/config/props/rate.js
uni_modules/uview-ui/libs/config/props/readMore.js
uni_modules/uview-ui/libs/config/props/row.js
uni_modules/uview-ui/libs/config/props/rowNotice.js
uni_modules/uview-ui/libs/config/props/scrollList.js
uni_modules/uview-ui/libs/config/props/search.js
uni_modules/uview-ui/libs/config/props/section.js
uni_modules/uview-ui/libs/config/props/skeleton.js
uni_modules/uview-ui/libs/config/props/slider.js
uni_modules/uview-ui/libs/config/props/statusBar.js
uni_modules/uview-ui/libs/config/props/steps.js
uni_modules/uview-ui/libs/config/props/stepsItem.js
uni_modules/uview-ui/libs/config/props/sticky.js
uni_modules/uview-ui/libs/config/props/subsection.js
uni_modules/uview-ui/libs/config/props/swipeAction.js
uni_modules/uview-ui/libs/config/props/swipeActionItem.js
uni_modules/uview-ui/libs/config/props/swiper.js
uni_modules/uview-ui/libs/config/props/swipterIndicator.js
uni_modules/uview-ui/libs/config/props/switch.js
uni_modules/uview-ui/libs/config/props/tabbar.js
uni_modules/uview-ui/libs/config/props/tabbarItem.js
uni_modules/uview-ui/libs/config/props/tabs.js
uni_modules/uview-ui/libs/config/props/tag.js
uni_modules/uview-ui/libs/config/props/text.js
uni_modules/uview-ui/libs/config/props/textarea.js
uni_modules/uview-ui/libs/config/props/toast.js
uni_modules/uview-ui/libs/config/props/toolbar.js
uni_modules/uview-ui/libs/config/props/tooltip.js
uni_modules/uview-ui/libs/config/props/transition.js
uni_modules/uview-ui/libs/config/props/upload.js
uni_modules/uview-ui/libs/config/zIndex.js
uni_modules/uview-ui/libs/css/color.scss
uni_modules/uview-ui/libs/css/common.scss
uni_modules/uview-ui/libs/css/components.scss
uni_modules/uview-ui/libs/css/flex.scss
uni_modules/uview-ui/libs/css/h5.scss
uni_modules/uview-ui/libs/css/mixin.scss
uni_modules/uview-ui/libs/css/mp.scss
uni_modules/uview-ui/libs/css/nvue.scss
uni_modules/uview-ui/libs/css/vue.scss
uni_modules/uview-ui/libs/function/colorGradient.js
uni_modules/uview-ui/libs/function/debounce.js
uni_modules/uview-ui/libs/function/digit.js
uni_modules/uview-ui/libs/function/index.js
uni_modules/uview-ui/libs/function/platform.js
uni_modules/uview-ui/libs/function/test.js
uni_modules/uview-ui/libs/function/throttle.js
uni_modules/uview-ui/libs/luch-request/adapters/index.js
uni_modules/uview-ui/libs/luch-request/core/InterceptorManager.js
uni_modules/uview-ui/libs/luch-request/core/Request.js
uni_modules/uview-ui/libs/luch-request/core/buildFullPath.js
uni_modules/uview-ui/libs/luch-request/core/defaults.js
uni_modules/uview-ui/libs/luch-request/core/dispatchRequest.js
uni_modules/uview-ui/libs/luch-request/core/mergeConfig.js
uni_modules/uview-ui/libs/luch-request/core/settle.js
uni_modules/uview-ui/libs/luch-request/helpers/buildURL.js
uni_modules/uview-ui/libs/luch-request/helpers/combineURLs.js
uni_modules/uview-ui/libs/luch-request/helpers/isAbsoluteURL.js
uni_modules/uview-ui/libs/luch-request/index.d.ts
uni_modules/uview-ui/libs/luch-request/index.js
uni_modules/uview-ui/libs/luch-request/utils.js
uni_modules/uview-ui/libs/luch-request/utils/clone.js
uni_modules/uview-ui/libs/mixin/button.js
uni_modules/uview-ui/libs/mixin/mixin.js
uni_modules/uview-ui/libs/mixin/mpMixin.js
uni_modules/uview-ui/libs/mixin/mpShare.js
uni_modules/uview-ui/libs/mixin/openType.js
uni_modules/uview-ui/libs/mixin/style.js
uni_modules/uview-ui/libs/mixin/touch.js
uni_modules/uview-ui/libs/util/async-validator.js
uni_modules/uview-ui/libs/util/calendar.js
uni_modules/uview-ui/libs/util/dayjs.js
uni_modules/uview-ui/libs/util/emitter.js
uni_modules/uview-ui/libs/util/route.js
uni_modules/uview-ui/package.json
uni_modules/uview-ui/theme.scss
utils/storage.js
utils/verify.js
vite.config.js （已删除）
vue.config.js
yarn.lock （已删除） |
