会员权益
This commit is contained in:
201
uni_modules/Sansnn-uQRCode/LICENSE.md
Normal file
201
uni_modules/Sansnn-uQRCode/LICENSE.md
Normal file
@@ -0,0 +1,201 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"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.
|
||||
392
uni_modules/Sansnn-uQRCode/README.md
Normal file
392
uni_modules/Sansnn-uQRCode/README.md
Normal file
@@ -0,0 +1,392 @@
|
||||
# 介绍
|
||||
|
||||
`uQRCode`是一款基于`Javascript`环境开发的二维码生成插件，适用所有`Javascript`运行环境的前端应用和`Node.js`应用。
|
||||
|
||||
`uQRCode`可扩展性高，它支持自定义渲染二维码，可通过`uQRCode API`得到二维码绘制关键信息后，使用`canvas`、`svg`或`js`操作`dom`的方式绘制二维码图案。还可自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等。
|
||||
|
||||
欢迎加入群聊【uQRCode交流群】：[695070434](https://jq.qq.com/?_wv=1027&k=JRjzDqiw)。
|
||||
|
||||
# 设计器
|
||||
|
||||
uQRCode发布了配套的可视化设计器，可根据自己喜好在设计器中设计二维码样式，一键生成配置代码复制到项目中，详情请在微信小程序搜索“柚子二维码”，或扫描下方小程序码体验。
|
||||
|
||||
|
||||
|
||||
## 设计器模板示例
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 快速上手
|
||||
|
||||
> 在`uni-app`中，我们更推荐使用组件方式来生成二维码，组件方式大大提高了页面的可读性以及避开了一些平台容易出问题的地方，当组件无法满足需求的时候，再考虑切换成原生方式。
|
||||
|
||||
官方文档：[https://uqrcode.cn/doc](https://uqrcode.cn/doc)。
|
||||
|
||||
github地址：[https://github.com/Sansnn/uQRCode](https://github.com/Sansnn/uQRCode)。
|
||||
|
||||
npm地址：[https://www.npmjs.com/package/uqrcodejs](https://www.npmjs.com/package/uqrcodejs)。
|
||||
|
||||
uni-app插件市场地址：[https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)。
|
||||
|
||||
## 原生方式
|
||||
|
||||
原生方式仅需要获取`uqrcode.js`文件便可使用。详细配置请移步到：文档 > [原生](https://uqrcode.cn/doc/document/native.html)。
|
||||
|
||||
### 安装
|
||||
|
||||
1. 通过`npm`安装，成功后即可使用`import`或`require`进行引用。
|
||||
``` bash
|
||||
# npm安装
|
||||
npm install uqrcodejs
|
||||
# 或者
|
||||
npm install @uqrcode/js
|
||||
```
|
||||
|
||||
2. 通过项目开源地址获取`uqrcode.js`，下载`uqrcode.js`后，将其复制到您项目指定目录，在页面中引入`uqrcode.js`文件即可开始使用。
|
||||
|
||||
### 引入
|
||||
|
||||
- 通过`import`引入。
|
||||
``` javascript
|
||||
// npm安装
|
||||
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
|
||||
// 或者
|
||||
import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js
|
||||
```
|
||||
|
||||
- `Node.js`通过`require`引入。
|
||||
``` javascript
|
||||
// npm安装
|
||||
const UQRCode = require('uqrcodejs'); // npm install uqrcodejs
|
||||
// 或者
|
||||
const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js
|
||||
```
|
||||
|
||||
- 原生浏览器环境，在js脚本加载时添加到`window`。
|
||||
``` html
|
||||
<script type="text/javascript" src="uqrcode.js"></script>
|
||||
<script>
|
||||
var UQRCode = window.UQRCode;
|
||||
</script>
|
||||
```
|
||||
|
||||
### 简单用法
|
||||
|
||||
`uQRCode`基于`Canvas API`封装了一套方法，建议开发者使用`canvas`生成，一键调用，非常方便。以下是示例：
|
||||
|
||||
- HTML示例
|
||||
- DOM部分
|
||||
``` html
|
||||
<canvas id="qrcode" width="200" height="200"></canvas>
|
||||
```
|
||||
|
||||
- JS部分
|
||||
``` javascript
|
||||
// 获取uQRCode实例
|
||||
var qr = new UQRCode();
|
||||
// 设置二维码内容
|
||||
qr.data = "https://uqrcode.cn/doc";
|
||||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||||
qr.size = 200;
|
||||
// 调用制作二维码方法
|
||||
qr.make();
|
||||
// 获取canvas元素
|
||||
var canvas = document.getElementById("qrcode");
|
||||
// 获取canvas上下文
|
||||
var canvasContext = canvas.getContext("2d");
|
||||
// 设置uQRCode实例的canvas上下文
|
||||
qr.canvasContext = canvasContext;
|
||||
// 调用绘制方法将二维码图案绘制到canvas上
|
||||
qr.drawCanvas();
|
||||
```
|
||||
|
||||
- uni-app示例
|
||||
- Template部分
|
||||
``` html
|
||||
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
|
||||
```
|
||||
|
||||
- JS部分
|
||||
``` javascript
|
||||
onReady() {
|
||||
// 获取uQRCode实例
|
||||
var qr = new UQRCode();
|
||||
// 设置二维码内容
|
||||
qr.data = "https://uqrcode.cn/doc";
|
||||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||||
qr.size = 200;
|
||||
// 调用制作二维码方法
|
||||
qr.make();
|
||||
// 获取canvas上下文
|
||||
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
|
||||
// 设置uQRCode实例的canvas上下文
|
||||
qr.canvasContext = canvasContext;
|
||||
// 调用绘制方法将二维码图案绘制到canvas上
|
||||
qr.drawCanvas();
|
||||
}
|
||||
```
|
||||
|
||||
- 微信小程序，推荐使用Canvas 2D，关于Canvas 2D的使用请参考微信开放文档。
|
||||
|
||||
### 高级用法
|
||||
|
||||
考虑到部分平台可能不支持`canvas`，所以`uQRCode`并没有强制要求和`canvas`一起使用，您还可以选择其他方式来生成二维码，例如使用`js`操作`dom`进行绘制或是使用`svg`绘制等。以下是示例：
|
||||
|
||||
- uni-app v-for+view
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<view class="qrcode">
|
||||
<view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
|
||||
<view v-for="(col, colI) in row" :key="colI">
|
||||
<view v-if="col.isBlack" style="width: 10px;height: 10px;background-color: black;">
|
||||
<!-- 黑色码点 -->
|
||||
</view>
|
||||
<view v-else style="width: 10px;height: 10px;background-color: white;">
|
||||
<!-- 白色码点 -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
modules: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const qr = new UQRCode();
|
||||
qr.data = 'uQRCode';
|
||||
qr.make();
|
||||
this.modules = qr.modules;
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
- js操作dom
|
||||
|
||||
``` html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>uQRCode二维码生成</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="qrcode" style="position: relative;"></div>
|
||||
<script type="text/javascript" src="uqrcode.js"></script>
|
||||
<script>
|
||||
// 引入uQRCode
|
||||
var UQRCode = window.UQRCode;
|
||||
// 获取uQRCode实例
|
||||
var qr = new UQRCode();
|
||||
// 设置二维码内容
|
||||
qr.data = "https://uqrcode.cn/doc";
|
||||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||||
qr.size = 200;
|
||||
// 设置二维码前景图，可以是路径
|
||||
qr.foregroundImageSrc =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAC3xJREFUeJztnd1vFNcZxodSJ3y3EL7SYIQwu15wI5FSAkqVkISKgEkuSIEC6127RrloL9r8D4n5UFUZp/9C24A/okqUOzCmSdoohQtkXIkiRS1VC7YQF41Kbe/unL7PzHt2z45ndnZmd1l75hzrSSwzMzvn+c15z8ee3dcwdIlkWaRlqSnF62a+4dDiiMtZ36cKyc183NQ3WS2sZ2IqWX/phwTWEDhuEKT5S0hLSctJK1grWasiLllPWe9l7MUSowTJDU7oopKVICSEZXwz3yKtJj1HWkdaT9pA2hgTbeA6r2MPVrMnEpCEI8HU1FpUGC18cbQEPB1r+Ea+Q2olbSFtJbWREqxkxCXr2cZ1hwebSM+zN2vYq+XsXYtRQ2uRJ8hWgaa4kl8ET0Ur30SK9F3STtL3SLtJL5P2kPZGXHu4rru57vCgg9TO3mxir1azd0uNUmuRUALBWKzAAOm1pBcM+4nYwTeBG3uNtJ/0FukQqZP0NuudiErWr5PrfID0JulVwwb1Enu0lT1byx6qUKpqJWoH3qLAQIzcbNhNFU/CKwzhMOld0o9JaVKW1EP6CamXdDqi6uU69nCdUffjpCPsyZvs0U72bDN7KKHI8OULRcIAQcQ9NDXQRYhCeNpF2ocXPXjw4M8uX748eP/+/b9NT08/ETEv8ABekCcXDx069FMGs489SzGUtezpEqPK0KWGKnRGiH8vMGVc+I1UKnXy3r17N5ttwHwvd+/e/bKjo+Mkt5bvG3bfAi/RD69gj2Ur8YQhO/Il3LzQKbVx09t35MiR9x4/fvzvZld2oRTy6l8HDhxAiHvdsPsVeInhMobGSw2fvkTtO5YxSYQqdE6Ih4cnJiY+b3YlF1q5ffv2p4Y9APiBYY/CELqe4wj0TKWwpYYrxLn1TBSjqf1Hjx79eYGK3w1sGz4VK/kVeHbs2LFfkIc/ZC/b2FtEoGcrhS01XKFJYdKHzghD28NjY2N/0BDCwSHvrnAreYU9RV/ybUfY8gSyVAlXmPRhnvHuw4cP/65hhIPy4MGDf5CHPzLsUdeLHLbWVAKi9h/LOcZtMezOHPONE25D22ZXfr7KWeAdeXiSw9ZO9nYte91iuPQjEgj6DwzJMInBLBNDXczA07p1hAeCQh52sZe7lH5EDn99geDgbYa9ToOlgayGURsU8rCbvdzN3voCUUdYmH9gJRPrMphx9mggNQPpYS/3sLcb2GvXCaITyEYFCEYHvRpIzUB62UsJZGO1QFbxwVgu2auB1B3IXvZ2I3sdGAiWm09rIDUDOc1eaiAaSEWlHQp7ntc1Kh0XRlEHMtQ1V2HPm3N+uvJxYRQSyoIB0j6Ymash/0onyBy3c5MkeUzS45haFFEg9pOLCk6LgsgJs0xPxKxIDbu1lNITn7l2hs7N0U/p/Bn6vf/OkEgM28dcuDMy59rhlbfuKzmUCdaSFxoQVNZZUHk/INlrZ+mo8tV/k34GCMI2BvLRnU/mXDt8MQlHLs5AMhWBdI+e00CeJpDtw9lQQD7SQBoBJCdSQ+FaSHVA5r6m/xExB6KOtBIj6boBMemUWTNntUIvTZP1pmnOuboG0gAgOKebBgQpeu3UYNZVHRd7ilA0kAYDwTHZ0TPWtXBdN7XTuTlqRc4zNZAGAelmIF73ZwPJayBOICUQ9evUqwYiNBAFCM3U6d+bBSTlASSngTSrhaTFZ1Pj4k+TE+LPk39lTYhPJ8et9bEYAslb85BmAYESCJmkJC9YQok4LC66AUGsbqfhpysQa42ri0ZKtY6yqrxPfj0oEd3l98pA/idmRM+1cyJ7vc9Tv/ziY5rgFQhJ6fzq5iGmOP+X34nM9Q+L18qQuki7fv9e8f4y1z4Q6bEPRfqPfSJ9g/597Az9rY+um41fyMKELFeA2bbhc1UQecAwTQtCECA4JmedW37tWfpv1/UPrPtDuHwi/kvwgM8Wjp+hR2X7pTgC4Se5UjGLP+V/81/LkhDKC/6GloJ7w7B31pwph02/YrJovUkVNyDVFJNNDA7EvRSB0HlJC0hOOJcY8zRZTGkg7sVUJP9gAxkuARkPCGS0z+q4k4MAMivKgJgxATLDz3mYH+eZCEMDAMKGDYyPVH0tvBUMIEkJhPqLvBBlr5WnMLb9UoRHWRjb908Mi4GJESvU1KZhC8YJ6pgTDCRNIylce8DnXBxzge7jjSvv88QvI341fkn00/UusHD9/vFhe6YePSAlJZRxfs0aknMFBXzA8+VWn4TrvYar44ICUvd9U04goc4PvyFuAQNJW+HhghU2Pqld1IGjz0CYkrsM0zRqCnc995DYf2eQW3TwXYzzHEjtoyy30uhdJ7Fd7Q1vmd4GVCzzBYjeBsRFA4kwEGzVyftMGPPFlaxgi4s4vGD6Xd1l4miaYpomhqUN17Hp1E1rHQlbdbKjZ0W3m66fE+e//K29ahsQCGCcvfUbmpWfcb+2i3AfOB7L720jJwPWdcED4XcMBzOe23QgLJXbS+gqyiqACNMyN1FhG5Cr6Pi2EfcJY2yAVLoG1p0KjnPr+RZuvRURIN4fLfMC4jfs1UBqAeK5tNFlvfWqgTxFIDsuZSt+tKyHOli87ZoXpbdhc9YnqJT3QzSQ+gCBaV8U90O5a+irMWolNPLB5gP8n0JYF+n1K+8XW5IGUicg1ZTPpyZEu/WhHu9VWw2kKUBcOv0KQDAl7L16TrQPZQKqy9px0jYS7jPr8QEyZzPdqcothF5umrDMWgshwX7+Y20D6o7f0ollnB+QyQnryW0LCoShlJZdqhP2is0QyFiuZeG7TnPWNrWCpz6bvE1AsmRQt/UBUfyOkJL0AVJLwagudkBMq+Kz4sWPs9b+3hSMdihFELJXz1trXnkIXx5g5kUuVxAD40MaSG1A8qIsNNDPDJmMz/p5rTfh/OzVPguCiaVhbCnFulbBFL8eL98G5Ni9FbogzM2aCFmnot2pP6HIPGt9IkRqRnxtPqF/6/asNBb4eq7iqzVmLJOKn6Cl3/uphST4Kb5AcMo/YVuoQXnxNb3ijsFgLWOBACk9ZUk5rEQ/MIw+ICO2Y9lkxP989BkpGvWkBruLn6BNKMNf/J4sqqs2DWWs19kazeV3RRW38TTgvCZJA5lnWjhAYiINZJ6pkUD018TWB0jor4nVX6TcWCCBv0hZf9V4Y4D0GAG/alx/GX9jgQT+Mn6drqJBMBiIM13FumqA6IQuDQDikdBFJgZzTegiociUR8hfWJbyaGpq6p+6lQSHgRIm5ZEKRCYFQ9bjYlKwGzdu6KRgIWCguCQFQ8K1qpKCqSOt9dyPICHi/uPHj+u0eQEgyALPkHLQmJs2Dx77ps2rlFiy89atW9d870CXsnLz5s1RpXUETiyphi2ZehWtxEq9unnz5mOPHj263+xKLpQyOTn5VWtrKzJp7zPKU6/KrNG+abzVsOWanLijo+OETk7sX+AREjkb7smJZevwDFfOsAVyiG9e6bs7OX33RZ2+2y5K+u5LnL6706hT+m61L1ET3Lca7gnukdRdJ7ivnOC+1QiZ4F6FIkOXhAK6aHKIg+joMWLAkPg1vgHMQrE0gCfjbdY7EZWsXyfX+QB78Kphr1W9xB5tZc/WKjDgqW/f4SxqBy+hoKkh/qGj38QvhriIySOeBADCOs3LfFN7I649XNfdXHd40MGebGWP4NVq9k6F4Ruq3IraUtDEEPfQGYE0wGAsjckjmuMWvgm0ngQrGXHJerZx3bewF8+zN2vYK3j2rBEwTLmVRUY5FNlaAAbzFFDHjB5PAMbV6/hG8FRsjIk2cJ3XsQer2ZOV7NESo9QqVBihgMiidvQSTItRgoOmiKdgBWsla1XEJesp672MvZAQWowSCBmiagKhlkUOqXAkIAkpjpL1l344IdQVhrM4X0SFpGpxxOWsr5cvTSleNxM36RK18n+GJEwNAYal3QAAAABJRU5ErkJggg==';
|
||||
// 调用制作二维码方法
|
||||
qr.make();
|
||||
|
||||
var drawModules = qr.getDrawModules();
|
||||
// 遍历drawModules创建dom元素
|
||||
var qrHtml = '';
|
||||
for (var i = 0; i < drawModules.length; i++) {
|
||||
var drawModule = drawModules[i];
|
||||
switch (drawModule.type) {
|
||||
case 'tile':
|
||||
/* 绘制小块 */
|
||||
qrHtml += `<div style="position: absolute;left: ${drawModule.x}px;top: ${drawModule.y}px;width: ${drawModule.width}px;height: ${drawModule.height}px;background: ${drawModule.color};"></div>`;
|
||||
break;
|
||||
case 'image':
|
||||
/* 绘制图像 */
|
||||
qrHtml += `<img style="position: absolute;left: ${drawModule.x}px;top: ${drawModule.y}px;width: ${drawModule.width}px;height: ${drawModule.height}px;" src="${drawModule.imageSrc}" />`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
document.getElementById('qrcode').innerHTML = qrHtml;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
- svg
|
||||
``` html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>uQRCode二维码生成</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg id="qrcode" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
|
||||
<script type="text/javascript" src="uqrcode.js"></script>
|
||||
<script>
|
||||
// 引入uQRCode
|
||||
var UQRCode = window.UQRCode;
|
||||
// 获取uQRCode实例
|
||||
var qr = new UQRCode();
|
||||
// 设置二维码内容
|
||||
qr.data = "https://uqrcode.cn/doc";
|
||||
// 设置二维码大小，必须与canvas设置的宽高一致
|
||||
qr.size = 200;
|
||||
// 设置二维码前景图，可以是路径
|
||||
qr.foregroundImageSrc =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAC3xJREFUeJztnd1vFNcZxodSJ3y3EL7SYIQwu15wI5FSAkqVkISKgEkuSIEC6127RrloL9r8D4n5UFUZp/9C24A/okqUOzCmSdoohQtkXIkiRS1VC7YQF41Kbe/unL7PzHt2z45ndnZmd1l75hzrSSwzMzvn+c15z8ee3dcwdIlkWaRlqSnF62a+4dDiiMtZ36cKyc183NQ3WS2sZ2IqWX/phwTWEDhuEKT5S0hLSctJK1grWasiLllPWe9l7MUSowTJDU7oopKVICSEZXwz3yKtJj1HWkdaT9pA2hgTbeA6r2MPVrMnEpCEI8HU1FpUGC18cbQEPB1r+Ea+Q2olbSFtJbWREqxkxCXr2cZ1hwebSM+zN2vYq+XsXYtRQ2uRJ8hWgaa4kl8ET0Ur30SK9F3STtL3SLtJL5P2kPZGXHu4rru57vCgg9TO3mxir1azd0uNUmuRUALBWKzAAOm1pBcM+4nYwTeBG3uNtJ/0FukQqZP0NuudiErWr5PrfID0JulVwwb1Enu0lT1byx6qUKpqJWoH3qLAQIzcbNhNFU/CKwzhMOld0o9JaVKW1EP6CamXdDqi6uU69nCdUffjpCPsyZvs0U72bDN7KKHI8OULRcIAQcQ9NDXQRYhCeNpF2ocXPXjw4M8uX748eP/+/b9NT08/ETEv8ABekCcXDx069FMGs489SzGUtezpEqPK0KWGKnRGiH8vMGVc+I1UKnXy3r17N5ttwHwvd+/e/bKjo+Mkt5bvG3bfAi/RD69gj2Ur8YQhO/Il3LzQKbVx09t35MiR9x4/fvzvZld2oRTy6l8HDhxAiHvdsPsVeInhMobGSw2fvkTtO5YxSYQqdE6Ih4cnJiY+b3YlF1q5ffv2p4Y9APiBYY/CELqe4wj0TKWwpYYrxLn1TBSjqf1Hjx79eYGK3w1sGz4VK/kVeHbs2LFfkIc/ZC/b2FtEoGcrhS01XKFJYdKHzghD28NjY2N/0BDCwSHvrnAreYU9RV/ybUfY8gSyVAlXmPRhnvHuw4cP/65hhIPy4MGDf5CHPzLsUdeLHLbWVAKi9h/LOcZtMezOHPONE25D22ZXfr7KWeAdeXiSw9ZO9nYte91iuPQjEgj6DwzJMInBLBNDXczA07p1hAeCQh52sZe7lH5EDn99geDgbYa9ToOlgayGURsU8rCbvdzN3voCUUdYmH9gJRPrMphx9mggNQPpYS/3sLcb2GvXCaITyEYFCEYHvRpIzUB62UsJZGO1QFbxwVgu2auB1B3IXvZ2I3sdGAiWm09rIDUDOc1eaiAaSEWlHQp7ntc1Kh0XRlEHMtQ1V2HPm3N+uvJxYRQSyoIB0j6Ymash/0onyBy3c5MkeUzS45haFFEg9pOLCk6LgsgJs0xPxKxIDbu1lNITn7l2hs7N0U/p/Bn6vf/OkEgM28dcuDMy59rhlbfuKzmUCdaSFxoQVNZZUHk/INlrZ+mo8tV/k34GCMI2BvLRnU/mXDt8MQlHLs5AMhWBdI+e00CeJpDtw9lQQD7SQBoBJCdSQ+FaSHVA5r6m/xExB6KOtBIj6boBMemUWTNntUIvTZP1pmnOuboG0gAgOKebBgQpeu3UYNZVHRd7ilA0kAYDwTHZ0TPWtXBdN7XTuTlqRc4zNZAGAelmIF73ZwPJayBOICUQ9evUqwYiNBAFCM3U6d+bBSTlASSngTSrhaTFZ1Pj4k+TE+LPk39lTYhPJ8et9bEYAslb85BmAYESCJmkJC9YQok4LC66AUGsbqfhpysQa42ri0ZKtY6yqrxPfj0oEd3l98pA/idmRM+1cyJ7vc9Tv/ziY5rgFQhJ6fzq5iGmOP+X34nM9Q+L18qQuki7fv9e8f4y1z4Q6bEPRfqPfSJ9g/597Az9rY+um41fyMKELFeA2bbhc1UQecAwTQtCECA4JmedW37tWfpv1/UPrPtDuHwi/kvwgM8Wjp+hR2X7pTgC4Se5UjGLP+V/81/LkhDKC/6GloJ7w7B31pwph02/YrJovUkVNyDVFJNNDA7EvRSB0HlJC0hOOJcY8zRZTGkg7sVUJP9gAxkuARkPCGS0z+q4k4MAMivKgJgxATLDz3mYH+eZCEMDAMKGDYyPVH0tvBUMIEkJhPqLvBBlr5WnMLb9UoRHWRjb908Mi4GJESvU1KZhC8YJ6pgTDCRNIylce8DnXBxzge7jjSvv88QvI341fkn00/UusHD9/vFhe6YePSAlJZRxfs0aknMFBXzA8+VWn4TrvYar44ICUvd9U04goc4PvyFuAQNJW+HhghU2Pqld1IGjz0CYkrsM0zRqCnc995DYf2eQW3TwXYzzHEjtoyy30uhdJ7Fd7Q1vmd4GVCzzBYjeBsRFA4kwEGzVyftMGPPFlaxgi4s4vGD6Xd1l4miaYpomhqUN17Hp1E1rHQlbdbKjZ0W3m66fE+e//K29ahsQCGCcvfUbmpWfcb+2i3AfOB7L720jJwPWdcED4XcMBzOe23QgLJXbS+gqyiqACNMyN1FhG5Cr6Pi2EfcJY2yAVLoG1p0KjnPr+RZuvRURIN4fLfMC4jfs1UBqAeK5tNFlvfWqgTxFIDsuZSt+tKyHOli87ZoXpbdhc9YnqJT3QzSQ+gCBaV8U90O5a+irMWolNPLB5gP8n0JYF+n1K+8XW5IGUicg1ZTPpyZEu/WhHu9VWw2kKUBcOv0KQDAl7L16TrQPZQKqy9px0jYS7jPr8QEyZzPdqcothF5umrDMWgshwX7+Y20D6o7f0ollnB+QyQnryW0LCoShlJZdqhP2is0QyFiuZeG7TnPWNrWCpz6bvE1AsmRQt/UBUfyOkJL0AVJLwagudkBMq+Kz4sWPs9b+3hSMdihFELJXz1trXnkIXx5g5kUuVxAD40MaSG1A8qIsNNDPDJmMz/p5rTfh/OzVPguCiaVhbCnFulbBFL8eL98G5Ni9FbogzM2aCFmnot2pP6HIPGt9IkRqRnxtPqF/6/asNBb4eq7iqzVmLJOKn6Cl3/uphST4Kb5AcMo/YVuoQXnxNb3ijsFgLWOBACk9ZUk5rEQ/MIw+ICO2Y9lkxP989BkpGvWkBruLn6BNKMNf/J4sqqs2DWWs19kazeV3RRW38TTgvCZJA5lnWjhAYiINZJ6pkUD018TWB0jor4nVX6TcWCCBv0hZf9V4Y4D0GAG/alx/GX9jgQT+Mn6drqJBMBiIM13FumqA6IQuDQDikdBFJgZzTegiociUR8hfWJbyaGpq6p+6lQSHgRIm5ZEKRCYFQ9bjYlKwGzdu6KRgIWCguCQFQ8K1qpKCqSOt9dyPICHi/uPHj+u0eQEgyALPkHLQmJs2Dx77ps2rlFiy89atW9d870CXsnLz5s1RpXUETiyphi2ZehWtxEq9unnz5mOPHj263+xKLpQyOTn5VWtrKzJp7zPKU6/KrNG+abzVsOWanLijo+OETk7sX+AREjkb7smJZevwDFfOsAVyiG9e6bs7OX33RZ2+2y5K+u5LnL6706hT+m61L1ET3Lca7gnukdRdJ7ivnOC+1QiZ4F6FIkOXhAK6aHKIg+joMWLAkPg1vgHMQrE0gCfjbdY7EZWsXyfX+QB78Kphr1W9xB5tZc/WKjDgqW/f4SxqBy+hoKkh/qGj38QvhriIySOeBADCOs3LfFN7I649XNfdXHd40MGebGWP4NVq9k6F4Ruq3IraUtDEEPfQGYE0wGAsjckjmuMWvgm0ngQrGXHJerZx3bewF8+zN2vYK3j2rBEwTLmVRUY5FNlaAAbzFFDHjB5PAMbV6/hG8FRsjIk2cJ3XsQer2ZOV7NESo9QqVBihgMiidvQSTItRgoOmiKdgBWsla1XEJesp672MvZAQWowSCBmiagKhlkUOqXAkIAkpjpL1l344IdQVhrM4X0SFpGpxxOWsr5cvTSleNxM36RK18n+GJEwNAYal3QAAAABJRU5ErkJggg==';
|
||||
// 调用制作二维码方法
|
||||
qr.make();
|
||||
|
||||
var drawModules = qr.getDrawModules();
|
||||
// 遍历drawModules创建svg元素
|
||||
var qrHtml = '';
|
||||
for (var i = 0; i < drawModules.length; i++) {
|
||||
var drawModule = drawModules[i];
|
||||
switch (drawModule.type) {
|
||||
case 'tile':
|
||||
/* 绘制小块 */
|
||||
qrHtml += `<rect x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" style="fill: ${drawModule.color};" />`;
|
||||
break;
|
||||
case 'image':
|
||||
/* 绘制图像 */
|
||||
qrHtml += `<image href="${drawModule.imageSrc}" x="${drawModule.x}" y="${drawModule.y}" width="${drawModule.width}" height="${drawModule.height}" />`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
document.getElementById('qrcode').innerHTML = qrHtml;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
> 更多用法大家自行探索咯，期待分享哟~
|
||||
|
||||
### 导出临时文件路径
|
||||
|
||||
原生方式基于`Canvas`的，请自行参阅各平台`Canvas`的导出方式。以下是部分示例：
|
||||
|
||||
- uni-app
|
||||
```javascript
|
||||
// 通过uni.createCanvasContext方式创建绘制上下文的，对应导出API为uni.canvasToTempFilePath
|
||||
// 调用完ctx.draw()方法后不能第一时间导出，否则会异常，需要有一定的延时
|
||||
setTimeout(() => {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
canvasId: this.canvasId,
|
||||
fileType: this.fileType,
|
||||
width: this.canvasWidth,
|
||||
height: this.canvasHeight,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
},
|
||||
fail: err => {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
// this // 组件内使用必传当前实例
|
||||
);
|
||||
}, 300);
|
||||
```
|
||||
|
||||
- Canvas2D
|
||||
```javascript
|
||||
// 得到base64
|
||||
console.log(canvas.toDataURL());
|
||||
// 得到buffer
|
||||
console.log(canvas.toBuffer());
|
||||
```
|
||||
|
||||
### 保存二维码到本地相册
|
||||
|
||||
必须在导出临时文件路径成功后再执行保存。uni-app通用保存方式（H5除外）：
|
||||
```javascript
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: tempFilePath,
|
||||
success: res => {
|
||||
console.log(res);
|
||||
},
|
||||
fail: err => {
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
H5可以通过设置`<a>`标签`href`属性的方式进行保存：
|
||||
```javascript
|
||||
const aEle = document.createElement('a');
|
||||
aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
|
||||
aEle.href = tempFilePath;
|
||||
document.body.appendChild(aEle);
|
||||
aEle.click();
|
||||
aEle.remove(); // 下载之后把创建的元素删除
|
||||
```
|
||||
经过测试，PC端浏览器可以下载，部分安卓自带或第三方浏览器可以下载，安卓微信浏览器不适用，移动端iOS所有浏览器均不适用，差异较大，还是推荐各位导出文件给图片组件显示，然后提示用户通过长按图片进行保存这种方式。
|
||||
|
||||
## uni-app组件方式
|
||||
|
||||
### 安装
|
||||
|
||||
通过uni-app插件市场地址安装：[https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)。详细配置请移步到：文档 > [uni-app组件](https://uqrcode.cn/doc/document/uni-app.html)。
|
||||
|
||||
### 引入
|
||||
|
||||
uni-app默认为easycom模式，可直接键入`<uqrcode>`标签。
|
||||
|
||||
### 简单用法
|
||||
|
||||
安装`uqrcode`组件后，在`template`中键入`<uqrcode/>`。设置`ref`属性可使用组件内部方法，`canvas-id`属性为组件内部的canvas组件标识，`value`属性为二维码生成对应内容，`options`为配置选项，可配置二维码样式，绘制Logo等，详见：[options](https://uqrcode.cn/doc/document/uni-app.html#options) 。
|
||||
|
||||
``` html
|
||||
<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>
|
||||
```
|
||||
|
||||
### 导出临时文件路径
|
||||
|
||||
为了保证方法调用成功，请在 [complete](https://uqrcode.cn/doc/document/uni-app.html#complete) 事件返回`success=true`后调用。
|
||||
|
||||
```javascript
|
||||
// uqrcode为组件的ref名称
|
||||
this.$refs.uqrcode.toTempFilePath({
|
||||
success: res => {
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 保存二维码到本地相册
|
||||
|
||||
为了保证方法调用成功，请在 [complete](https://uqrcode.cn/doc/document/uni-app.html#complete) 事件返回`success=true`后调用。
|
||||
|
||||
```javascript
|
||||
// uqrcode为组件的ref名称
|
||||
this.$refs.uqrcode.save({
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '保存成功'
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 更多使用说明请前往官方文档查看：[https://uqrcode.cn/doc](https://uqrcode.cn/doc)。
|
||||
12
uni_modules/Sansnn-uQRCode/changelog.md
Normal file
12
uni_modules/Sansnn-uQRCode/changelog.md
Normal file
@@ -0,0 +1,12 @@
|
||||
## 4.0.6（2022-12-12）
|
||||
修复`getDrawModules`，第一次获取结果正常，后续获取`tile`模块不存在的问题；
|
||||
修复安卓type:normal因Canvas API使用了小数或为0的参数导致生成异常的问题（注：安卓非2d Canvas部分API参数不支持携带小数，部分API参数必须大于0）。
|
||||
## 4.0.1（2022-11-28）
|
||||
优化组件loading属性的表现；
|
||||
新增组件type选项normal，以便于在某些条件编译初始为type=2d时还可以选择使用非2d组件类型；
|
||||
修复组件条件编译在其他编辑器语法提示报错；
|
||||
修复原生对es5的支持。
|
||||
## 4.0.0（2022-11-21）
|
||||
v4版本源代码全面开放，开源地址：[https://github.com/Sansnn/uQRCode](https://github.com/Sansnn/uQRCode)；
|
||||
|
||||
升级说明：v4为大版本更新，虽然已尽可能兼容上一代版本，但不可避免的还是存在一些细节差异，若更新后出现问题，请参考对照[v3 文档](https://uqrcode.cn/doc/v3)，[v4 文档](https://uqrcode.cn/doc)进行修改。
|
||||
1
uni_modules/Sansnn-uQRCode/common/cache.js
Normal file
1
uni_modules/Sansnn-uQRCode/common/cache.js
Normal file
@@ -0,0 +1 @@
|
||||
export const cacheImageList = [];
|
||||
41
uni_modules/Sansnn-uQRCode/common/queue.js
Normal file
41
uni_modules/Sansnn-uQRCode/common/queue.js
Normal file
@@ -0,0 +1,41 @@
|
||||
function Queue() {
|
||||
let waitingQueue = this.waitingQueue = [];
|
||||
let isRunning = this.isRunning = false; // 记录是否有未完成的任务
|
||||
|
||||
function execute(task, resolve, reject) {
|
||||
task()
|
||||
.then((data) => {
|
||||
resolve(data);
|
||||
})
|
||||
.catch((e) => {
|
||||
reject(e);
|
||||
})
|
||||
.finally(() => {
|
||||
// 等待任务队列中如果有任务，则触发它；否则设置isRunning = false,表示无任务状态
|
||||
if (waitingQueue.length) {
|
||||
const next = waitingQueue.shift();
|
||||
execute(next.task, next.resolve, next.reject);
|
||||
} else {
|
||||
isRunning = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.exec = function(task) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (isRunning) {
|
||||
waitingQueue.push({
|
||||
task,
|
||||
resolve,
|
||||
reject
|
||||
});
|
||||
} else {
|
||||
isRunning = true;
|
||||
execute(task, resolve, reject);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* 队列实例，某些平台一起使用多个组件时需要通过队列逐一绘制，否则部分绘制方法异常，nvue端的iOS gcanvas尤其明显，在不通过队列绘制时会出现图片丢失的情况 */
|
||||
export const queueDraw = new Queue();
|
||||
export const queueLoadImage = new Queue();
|
||||
3
uni_modules/Sansnn-uQRCode/common/types/cache.d.ts
vendored
Normal file
3
uni_modules/Sansnn-uQRCode/common/types/cache.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
declare module '*/common/cache' {
|
||||
export const cacheImageList: Array;
|
||||
}
|
||||
4
uni_modules/Sansnn-uQRCode/common/types/queue.d.ts
vendored
Normal file
4
uni_modules/Sansnn-uQRCode/common/types/queue.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
declare module '*/common/queue' {
|
||||
export const queueDraw: any;
|
||||
export const queueLoadImage: any;
|
||||
}
|
||||
1131
uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue
Normal file
1131
uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue
Normal file
File diff suppressed because one or more lines are too long
1131
uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue
Normal file
1131
uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue
Normal file
File diff suppressed because one or more lines are too long
241
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/bridge/bridge-weex.js
Normal file
241
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/bridge/bridge-weex.js
Normal file
@@ -0,0 +1,241 @@
|
||||
const isWeex = typeof WXEnvironment !== 'undefined';
|
||||
const isWeexIOS = isWeex && /ios/i.test(WXEnvironment.platform);
|
||||
const isWeexAndroid = isWeex && !isWeexIOS;
|
||||
|
||||
import GLmethod from '../context-webgl/GLmethod';
|
||||
|
||||
const GCanvasModule =
|
||||
(typeof weex !== 'undefined' && weex.requireModule) ? (weex.requireModule('gcanvas')) :
|
||||
(typeof __weex_require__ !== 'undefined') ? (__weex_require__('@weex-module/gcanvas')) : {};
|
||||
|
||||
let isDebugging = false;
|
||||
|
||||
let isComboDisabled = false;
|
||||
|
||||
const logCommand = (function () {
|
||||
const methodQuery = [];
|
||||
Object.keys(GLmethod).forEach(key => {
|
||||
methodQuery[GLmethod[key]] = key;
|
||||
})
|
||||
const queryMethod = (id) => {
|
||||
return methodQuery[parseInt(id)] || 'NotFoundMethod';
|
||||
}
|
||||
const logCommand = (id, cmds) => {
|
||||
const mId = cmds.split(',')[0];
|
||||
const mName = queryMethod(mId);
|
||||
console.log(`=== callNative - componentId:${id}; method: ${mName}; cmds: ${cmds}`);
|
||||
}
|
||||
return logCommand;
|
||||
})();
|
||||
|
||||
function joinArray(arr, sep) {
|
||||
let res = '';
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (i !== 0) {
|
||||
res += sep;
|
||||
}
|
||||
res += arr[i];
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
const commandsCache = {}
|
||||
|
||||
const GBridge = {
|
||||
|
||||
callEnable: (ref, configArray) => {
|
||||
|
||||
commandsCache[ref] = [];
|
||||
|
||||
return GCanvasModule.enable({
|
||||
componentId: ref,
|
||||
config: configArray
|
||||
});
|
||||
},
|
||||
|
||||
callEnableDebug: () => {
|
||||
isDebugging = true;
|
||||
},
|
||||
|
||||
callEnableDisableCombo: () => {
|
||||
isComboDisabled = true;
|
||||
},
|
||||
|
||||
callSetContextType: function (componentId, context_type) {
|
||||
GCanvasModule.setContextType(context_type, componentId);
|
||||
},
|
||||
|
||||
callReset: function(id){
|
||||
GCanvasModule.resetComponent && canvasModule.resetComponent(componentId);
|
||||
},
|
||||
|
||||
render: isWeexIOS ? function (componentId) {
|
||||
return GCanvasModule.extendCallNative({
|
||||
contextId: componentId,
|
||||
type: 0x60000001
|
||||
});
|
||||
} : function (componentId) {
|
||||
return callGCanvasLinkNative(componentId, 0x60000001, 'render');
|
||||
},
|
||||
|
||||
render2d: isWeexIOS ? function (componentId, commands, callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
GCanvasModule.render([commands, callback?true:false], componentId, callback);
|
||||
|
||||
} : function (componentId, commands,callback) {
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> render2d ===');
|
||||
console.log('>>> commands: ' + commands);
|
||||
}
|
||||
|
||||
callGCanvasLinkNative(componentId, 0x20000001, commands);
|
||||
if(callback){
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
callExtendCallNative: isWeexIOS ? function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
} : function (componentId, cmdArgs) {
|
||||
|
||||
throw 'should not be here anymore ' + cmdArgs;
|
||||
|
||||
},
|
||||
|
||||
|
||||
flushNative: isWeexIOS ? function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = GCanvasModule.extendCallNative({
|
||||
"contextId": componentId,
|
||||
"type": 0x60000000,
|
||||
"args": cmdArgs
|
||||
});
|
||||
|
||||
const res = result && result.result;
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + res);
|
||||
}
|
||||
|
||||
return res;
|
||||
|
||||
} : function (componentId) {
|
||||
|
||||
const cmdArgs = joinArray(commandsCache[componentId], ';');
|
||||
commandsCache[componentId] = [];
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> >>> flush native ===');
|
||||
console.log('>>> commands: ' + cmdArgs);
|
||||
}
|
||||
|
||||
const result = callGCanvasLinkNative(componentId, 0x60000000, cmdArgs);
|
||||
|
||||
if (isDebugging) {
|
||||
console.log('>>> result: ' + result);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
callNative: function (componentId, cmdArgs, cache) {
|
||||
|
||||
if (isDebugging) {
|
||||
logCommand(componentId, cmdArgs);
|
||||
}
|
||||
|
||||
commandsCache[componentId].push(cmdArgs);
|
||||
|
||||
if (!cache || isComboDisabled) {
|
||||
return GBridge.flushNative(componentId);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
|
||||
texImage2D(componentId, ...args) {
|
||||
if (isWeexIOS) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 6 + ',' + target + ',' + level + ',' + internalformat + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texImage2D + ',' + 9 + ',' + target + ',' + level + ',' + internalformat + ',' + width + ',' + height + ',' + border + ',' +
|
||||
+ format + ',' + type + ',' + (image ? image.src : 0)
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
if (args.length === 6) {
|
||||
const [target, level, internalformat, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, format, type, image.src);
|
||||
} else if (args.length === 9) {
|
||||
const [target, level, internalformat, width, height, border, format, type, image] = args;
|
||||
GCanvasModule.texImage2D(componentId, target, level, internalformat, width, height, border, format, type, (image ? image.src : 0));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image) {
|
||||
if (isWeexIOS) {
|
||||
if (arguments.length === 8) {
|
||||
GBridge.callNative(
|
||||
componentId,
|
||||
GLmethod.texSubImage2D + ',' + 6 + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset, + ',' + format + ',' + type + ',' + image.src
|
||||
)
|
||||
}
|
||||
} else if (isWeexAndroid) {
|
||||
GCanvasModule.texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image.src);
|
||||
}
|
||||
},
|
||||
|
||||
bindImageTexture(componentId, src, imageId) {
|
||||
GCanvasModule.bindImageTexture([src, imageId], componentId);
|
||||
},
|
||||
|
||||
perloadImage([url, id], callback) {
|
||||
GCanvasModule.preLoadImage([url, id], function (image) {
|
||||
image.url = url;
|
||||
image.id = id;
|
||||
callback(image);
|
||||
});
|
||||
},
|
||||
|
||||
measureText(text, fontStyle, componentId) {
|
||||
return GCanvasModule.measureText([text, fontStyle], componentId);
|
||||
},
|
||||
|
||||
getImageData (componentId, x, y, w, h, callback) {
|
||||
GCanvasModule.getImageData([x, y,w,h],componentId,callback);
|
||||
},
|
||||
|
||||
putImageData (componentId, data, x, y, w, h, callback) {
|
||||
GCanvasModule.putImageData([x, y,w,h,data],componentId,callback);
|
||||
},
|
||||
|
||||
toTempFilePath(componentId, x, y, width, height, destWidth, destHeight, fileType, quality, callback){
|
||||
GCanvasModule.toTempFilePath([x, y, width,height, destWidth, destHeight, fileType, quality], componentId, callback);
|
||||
}
|
||||
}
|
||||
|
||||
export default GBridge;
|
||||
@@ -0,0 +1,18 @@
|
||||
class FillStyleLinearGradient {
|
||||
|
||||
constructor(x0, y0, x1, y1) {
|
||||
this._start_pos = { _x: x0, _y: y0 };
|
||||
this._end_pos = { _x: x1, _y: y1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop = function (pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleLinearGradient;
|
||||
@@ -0,0 +1,8 @@
|
||||
class FillStylePattern {
|
||||
constructor(img, pattern) {
|
||||
this._style = pattern;
|
||||
this._img = img;
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStylePattern;
|
||||
@@ -0,0 +1,17 @@
|
||||
class FillStyleRadialGradient {
|
||||
constructor(x0, y0, r0, x1, y1, r1) {
|
||||
this._start_pos = { _x: x0, _y: y0, _r: r0 };
|
||||
this._end_pos = { _x: x1, _y: y1, _r: r1 };
|
||||
this._stop_count = 0;
|
||||
this._stops = [0, 0, 0, 0, 0];
|
||||
}
|
||||
|
||||
addColorStop(pos, color) {
|
||||
if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
|
||||
this._stops[this._stop_count] = { _pos: pos, _color: color };
|
||||
this._stop_count++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default FillStyleRadialGradient;
|
||||
@@ -0,0 +1,666 @@
|
||||
import FillStylePattern from './FillStylePattern';
|
||||
import FillStyleLinearGradient from './FillStyleLinearGradient';
|
||||
import FillStyleRadialGradient from './FillStyleRadialGradient';
|
||||
import GImage from '../env/image.js';
|
||||
import {
|
||||
ArrayBufferToBase64,
|
||||
Base64ToUint8ClampedArray
|
||||
} from '../env/tool.js';
|
||||
|
||||
export default class CanvasRenderingContext2D {
|
||||
|
||||
_drawCommands = '';
|
||||
|
||||
_globalAlpha = 1.0;
|
||||
|
||||
_fillStyle = 'rgb(0,0,0)';
|
||||
_strokeStyle = 'rgb(0,0,0)';
|
||||
|
||||
_lineWidth = 1;
|
||||
_lineCap = 'butt';
|
||||
_lineJoin = 'miter';
|
||||
|
||||
_miterLimit = 10;
|
||||
|
||||
_globalCompositeOperation = 'source-over';
|
||||
|
||||
_textAlign = 'start';
|
||||
_textBaseline = 'alphabetic';
|
||||
|
||||
_font = '10px sans-serif';
|
||||
|
||||
_savedGlobalAlpha = [];
|
||||
|
||||
timer = null;
|
||||
componentId = null;
|
||||
|
||||
_notCommitDrawImageCache = [];
|
||||
_needRedrawImageCache = [];
|
||||
_redrawCommands = '';
|
||||
_autoSaveContext = true;
|
||||
// _imageMap = new GHashMap();
|
||||
// _textureMap = new GHashMap();
|
||||
|
||||
constructor() {
|
||||
this.className = 'CanvasRenderingContext2D';
|
||||
//this.save()
|
||||
}
|
||||
|
||||
setFillStyle(value) {
|
||||
this.fillStyle = value;
|
||||
}
|
||||
|
||||
set fillStyle(value) {
|
||||
this._fillStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("F" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
const image = value._img;
|
||||
if (!image.complete) {
|
||||
image.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
|
||||
//CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get fillStyle() {
|
||||
return this._fillStyle;
|
||||
}
|
||||
|
||||
get globalAlpha() {
|
||||
return this._globalAlpha;
|
||||
}
|
||||
|
||||
setGlobalAlpha(value) {
|
||||
this.globalAlpha = value;
|
||||
}
|
||||
|
||||
set globalAlpha(value) {
|
||||
this._globalAlpha = value;
|
||||
this._drawCommands = this._drawCommands.concat("a" + value.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
|
||||
get strokeStyle() {
|
||||
return this._strokeStyle;
|
||||
}
|
||||
|
||||
setStrokeStyle(value) {
|
||||
this.strokeStyle = value;
|
||||
}
|
||||
|
||||
set strokeStyle(value) {
|
||||
|
||||
this._strokeStyle = value;
|
||||
|
||||
if (typeof(value) == 'string') {
|
||||
this._drawCommands = this._drawCommands.concat("S" + value + ";");
|
||||
} else if (value instanceof FillStylePattern) {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._drawCommands = this._drawCommands.concat("G" + image._id + "," + value._style + ";");
|
||||
} else if (value instanceof FillStyleLinearGradient) {
|
||||
var command = "D" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
} else if (value instanceof FillStyleRadialGradient) {
|
||||
var command = "H" + value._start_pos._x.toFixed(2) + "," + value._start_pos._y.toFixed(2) + "," + value._start_pos._r
|
||||
.toFixed(2) + "," +
|
||||
value._end_pos._x.toFixed(2) + "," + value._end_pos._y + ",".toFixed(2) + value._end_pos._r.toFixed(2) + "," +
|
||||
value._stop_count;
|
||||
|
||||
for (var i = 0; i < value._stop_count; ++i) {
|
||||
command += ("," + value._stops[i]._pos + "," + value._stops[i]._color);
|
||||
}
|
||||
this._drawCommands = this._drawCommands.concat(command + ";");
|
||||
}
|
||||
}
|
||||
|
||||
get lineWidth() {
|
||||
return this._lineWidth;
|
||||
}
|
||||
|
||||
setLineWidth(value) {
|
||||
this.lineWidth = value;
|
||||
}
|
||||
|
||||
set lineWidth(value) {
|
||||
this._lineWidth = value;
|
||||
this._drawCommands = this._drawCommands.concat("W" + value + ";");
|
||||
}
|
||||
|
||||
get lineCap() {
|
||||
return this._lineCap;
|
||||
}
|
||||
|
||||
setLineCap(value) {
|
||||
this.lineCap = value;
|
||||
}
|
||||
|
||||
set lineCap(value) {
|
||||
this._lineCap = value;
|
||||
this._drawCommands = this._drawCommands.concat("C" + value + ";");
|
||||
}
|
||||
|
||||
get lineJoin() {
|
||||
return this._lineJoin;
|
||||
}
|
||||
|
||||
setLineJoin(value) {
|
||||
this.lineJoin = value
|
||||
}
|
||||
|
||||
set lineJoin(value) {
|
||||
this._lineJoin = value;
|
||||
this._drawCommands = this._drawCommands.concat("J" + value + ";");
|
||||
}
|
||||
|
||||
get miterLimit() {
|
||||
return this._miterLimit;
|
||||
}
|
||||
|
||||
setMiterLimit(value) {
|
||||
this.miterLimit = value
|
||||
}
|
||||
|
||||
set miterLimit(value) {
|
||||
this._miterLimit = value;
|
||||
this._drawCommands = this._drawCommands.concat("M" + value + ";");
|
||||
}
|
||||
|
||||
get globalCompositeOperation() {
|
||||
return this._globalCompositeOperation;
|
||||
}
|
||||
|
||||
set globalCompositeOperation(value) {
|
||||
|
||||
this._globalCompositeOperation = value;
|
||||
let mode = 0;
|
||||
switch (value) {
|
||||
case "source-over":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-atop":
|
||||
mode = 5;
|
||||
break;
|
||||
case "source-in":
|
||||
mode = 0;
|
||||
break;
|
||||
case "source-out":
|
||||
mode = 2;
|
||||
break;
|
||||
case "destination-over":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-atop":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-in":
|
||||
mode = 4;
|
||||
break;
|
||||
case "destination-out":
|
||||
mode = 3;
|
||||
break;
|
||||
case "lighter":
|
||||
mode = 1;
|
||||
break;
|
||||
case "copy":
|
||||
mode = 2;
|
||||
break;
|
||||
case "xor":
|
||||
mode = 6;
|
||||
break;
|
||||
default:
|
||||
mode = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("B" + mode + ";");
|
||||
}
|
||||
|
||||
get textAlign() {
|
||||
return this._textAlign;
|
||||
}
|
||||
|
||||
setTextAlign(value) {
|
||||
this.textAlign = value
|
||||
}
|
||||
|
||||
set textAlign(value) {
|
||||
|
||||
this._textAlign = value;
|
||||
let Align = 0;
|
||||
switch (value) {
|
||||
case "start":
|
||||
Align = 0;
|
||||
break;
|
||||
case "end":
|
||||
Align = 1;
|
||||
break;
|
||||
case "left":
|
||||
Align = 2;
|
||||
break;
|
||||
case "center":
|
||||
Align = 3;
|
||||
break;
|
||||
case "right":
|
||||
Align = 4;
|
||||
break;
|
||||
default:
|
||||
Align = 0;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("A" + Align + ";");
|
||||
}
|
||||
|
||||
get textBaseline() {
|
||||
return this._textBaseline;
|
||||
}
|
||||
|
||||
setTextBaseline(value) {
|
||||
this.textBaseline = value
|
||||
}
|
||||
|
||||
set textBaseline(value) {
|
||||
this._textBaseline = value;
|
||||
let baseline = 0;
|
||||
switch (value) {
|
||||
case "alphabetic":
|
||||
baseline = 0;
|
||||
break;
|
||||
case "middle":
|
||||
baseline = 1;
|
||||
break;
|
||||
case "top":
|
||||
baseline = 2;
|
||||
break;
|
||||
case "hanging":
|
||||
baseline = 3;
|
||||
break;
|
||||
case "bottom":
|
||||
baseline = 4;
|
||||
break;
|
||||
case "ideographic":
|
||||
baseline = 5;
|
||||
break;
|
||||
default:
|
||||
baseline = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat("E" + baseline + ";");
|
||||
}
|
||||
|
||||
get font() {
|
||||
return this._font;
|
||||
}
|
||||
|
||||
setFontSize(size) {
|
||||
var str = this._font;
|
||||
var strs = str.trim().split(/\s+/);
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
var values = ["normal", "italic", "oblique", "normal", "small-caps", "normal", "bold",
|
||||
"bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900",
|
||||
"normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
|
||||
"semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
|
||||
];
|
||||
|
||||
if (-1 == values.indexOf(strs[i].trim())) {
|
||||
if (typeof size === 'string') {
|
||||
strs[i] = size;
|
||||
} else if (typeof size === 'number') {
|
||||
strs[i] = String(size) + 'px';
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.font = strs.join(" ");
|
||||
}
|
||||
|
||||
set font(value) {
|
||||
this._font = value;
|
||||
this._drawCommands = this._drawCommands.concat("j" + value + ";");
|
||||
}
|
||||
|
||||
setTransform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("t" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
transform(a, b, c, d, tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("f" +
|
||||
(a === 1 ? "1" : a.toFixed(2)) + "," +
|
||||
(b === 0 ? "0" : b.toFixed(2)) + "," +
|
||||
(c === 0 ? "0" : c.toFixed(2)) + "," +
|
||||
(d === 1 ? "1" : d.toFixed(2)) + "," + tx + "," + ty + ";");
|
||||
}
|
||||
|
||||
resetTransform() {
|
||||
this._drawCommands = this._drawCommands.concat("m;");
|
||||
}
|
||||
|
||||
scale(a, d) {
|
||||
this._drawCommands = this._drawCommands.concat("k" + a.toFixed(2) + "," +
|
||||
d.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
rotate(angle) {
|
||||
this._drawCommands = this._drawCommands
|
||||
.concat("r" + angle.toFixed(6) + ";");
|
||||
}
|
||||
|
||||
translate(tx, ty) {
|
||||
this._drawCommands = this._drawCommands.concat("l" + tx.toFixed(2) + "," + ty.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
save() {
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._drawCommands = this._drawCommands.concat("v;");
|
||||
}
|
||||
|
||||
restore() {
|
||||
this._drawCommands = this._drawCommands.concat("e;");
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
}
|
||||
|
||||
createPattern(img, pattern) {
|
||||
if (typeof img === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = img;
|
||||
img = imgObj;
|
||||
}
|
||||
return new FillStylePattern(img, pattern);
|
||||
}
|
||||
|
||||
createLinearGradient(x0, y0, x1, y1) {
|
||||
return new FillStyleLinearGradient(x0, y0, x1, y1);
|
||||
}
|
||||
|
||||
createRadialGradient = function(x0, y0, r0, x1, y1, r1) {
|
||||
return new FillStyleRadialGradient(x0, y0, r0, x1, y1, r1);
|
||||
};
|
||||
|
||||
createCircularGradient = function(x0, y0, r0) {
|
||||
return new FillStyleRadialGradient(x0, y0, 0, x0, y0, r0);
|
||||
};
|
||||
|
||||
strokeRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("s" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
|
||||
clearRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("c" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
clip() {
|
||||
this._drawCommands = this._drawCommands.concat("p;");
|
||||
}
|
||||
|
||||
resetClip() {
|
||||
this._drawCommands = this._drawCommands.concat("q;");
|
||||
}
|
||||
|
||||
closePath() {
|
||||
this._drawCommands = this._drawCommands.concat("o;");
|
||||
}
|
||||
|
||||
moveTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("g" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
lineTo(x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("i" + x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
quadraticCurveTo = function(cpx, cpy, x, y) {
|
||||
this._drawCommands = this._drawCommands.concat("u" + cpx + "," + cpy + "," + x + "," + y + ";");
|
||||
}
|
||||
|
||||
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, ) {
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"z" + cp1x.toFixed(2) + "," + cp1y.toFixed(2) + "," + cp2x.toFixed(2) + "," + cp2y.toFixed(2) + "," +
|
||||
x.toFixed(2) + "," + y.toFixed(2) + ";");
|
||||
}
|
||||
|
||||
arcTo(x1, y1, x2, y2, radius) {
|
||||
this._drawCommands = this._drawCommands.concat("h" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + radius + ";");
|
||||
}
|
||||
|
||||
beginPath() {
|
||||
this._drawCommands = this._drawCommands.concat("b;");
|
||||
}
|
||||
|
||||
|
||||
fillRect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("n" + x + "," + y + "," + w +
|
||||
"," + h + ";");
|
||||
}
|
||||
|
||||
rect(x, y, w, h) {
|
||||
this._drawCommands = this._drawCommands.concat("w" + x + "," + y + "," + w + "," + h + ";");
|
||||
}
|
||||
|
||||
fill() {
|
||||
this._drawCommands = this._drawCommands.concat("L;");
|
||||
}
|
||||
|
||||
stroke(path) {
|
||||
this._drawCommands = this._drawCommands.concat("x;");
|
||||
}
|
||||
|
||||
arc(x, y, radius, startAngle, endAngle, anticlockwise) {
|
||||
|
||||
let ianticlockwise = 0;
|
||||
if (anticlockwise) {
|
||||
ianticlockwise = 1;
|
||||
}
|
||||
|
||||
this._drawCommands = this._drawCommands.concat(
|
||||
"y" + x.toFixed(2) + "," + y.toFixed(2) + "," +
|
||||
radius.toFixed(2) + "," + startAngle + "," + endAngle + "," + ianticlockwise +
|
||||
";"
|
||||
);
|
||||
}
|
||||
|
||||
fillText(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("T" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
strokeText = function(text, x, y) {
|
||||
let tmptext = text.replace(/!/g, "!!");
|
||||
tmptext = tmptext.replace(/,/g, "!,");
|
||||
tmptext = tmptext.replace(/;/g, "!;");
|
||||
this._drawCommands = this._drawCommands.concat("U" + tmptext + "," + x + "," + y + ",0.0;");
|
||||
}
|
||||
|
||||
measureText(text) {
|
||||
return CanvasRenderingContext2D.GBridge.measureText(text, this.font, this.componentId);
|
||||
}
|
||||
|
||||
isPointInPath = function(x, y) {
|
||||
throw new Error('GCanvas not supported yet');
|
||||
}
|
||||
|
||||
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
if (typeof image === 'string') {
|
||||
var imgObj = new GImage();
|
||||
imgObj.src = image;
|
||||
image = imgObj;
|
||||
}
|
||||
if (image instanceof GImage) {
|
||||
if (!image.complete) {
|
||||
imgObj.onload = () => {
|
||||
var index = this._needRedrawImageCache.indexOf(image);
|
||||
if (index > -1) {
|
||||
this._needRedrawImageCache.splice(index, 1);
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
this._redrawflush(true);
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache.push(image);
|
||||
} else {
|
||||
CanvasRenderingContext2D.GBridge.bindImageTexture(this.componentId, image.src, image._id);
|
||||
}
|
||||
var srcArgs = [image, sx, sy, sw, sh, dx, dy, dw, dh];
|
||||
var args = [];
|
||||
for (var arg in srcArgs) {
|
||||
if (typeof(srcArgs[arg]) != 'undefined') {
|
||||
args.push(srcArgs[arg]);
|
||||
}
|
||||
}
|
||||
this.__drawImage.apply(this, args);
|
||||
//this.__drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh);
|
||||
}
|
||||
}
|
||||
|
||||
__drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
const numArgs = arguments.length;
|
||||
|
||||
function drawImageCommands() {
|
||||
|
||||
if (numArgs === 3) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + image.width + "," + image.height + ";");
|
||||
} else if (numArgs === 5) {
|
||||
const x = parseFloat(sx) || 0.0;
|
||||
const y = parseFloat(sy) || 0.0;
|
||||
const width = parseInt(sw) || image.width;
|
||||
const height = parseInt(sh) || image.height;
|
||||
|
||||
return ("d" + image._id + ",0,0," +
|
||||
image.width + "," + image.height + "," +
|
||||
x + "," + y + "," + width + "," + height + ";");
|
||||
} else if (numArgs === 9) {
|
||||
sx = parseFloat(sx) || 0.0;
|
||||
sy = parseFloat(sy) || 0.0;
|
||||
sw = parseInt(sw) || image.width;
|
||||
sh = parseInt(sh) || image.height;
|
||||
dx = parseFloat(dx) || 0.0;
|
||||
dy = parseFloat(dy) || 0.0;
|
||||
dw = parseInt(dw) || image.width;
|
||||
dh = parseInt(dh) || image.height;
|
||||
|
||||
return ("d" + image._id + "," +
|
||||
sx + "," + sy + "," + sw + "," + sh + "," +
|
||||
dx + "," + dy + "," + dw + "," + dh + ";");
|
||||
}
|
||||
}
|
||||
this._drawCommands += drawImageCommands();
|
||||
}
|
||||
|
||||
_flush(reserve, callback) {
|
||||
const commands = this._drawCommands;
|
||||
this._drawCommands = '';
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
this._needRender = false;
|
||||
}
|
||||
|
||||
_redrawflush(reserve, callback) {
|
||||
const commands = this._redrawCommands;
|
||||
CanvasRenderingContext2D.GBridge.render2d(this.componentId, commands, callback);
|
||||
if (this._needRedrawImageCache.length == 0) {
|
||||
this._redrawCommands = '';
|
||||
}
|
||||
}
|
||||
|
||||
draw(reserve, callback) {
|
||||
if (!reserve) {
|
||||
this._globalAlpha = this._savedGlobalAlpha.pop();
|
||||
this._savedGlobalAlpha.push(this._globalAlpha);
|
||||
this._redrawCommands = this._drawCommands;
|
||||
this._needRedrawImageCache = this._notCommitDrawImageCache;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
} else {
|
||||
this._drawCommands = ("e;X;v;" + this._drawCommands);
|
||||
}
|
||||
} else {
|
||||
this._needRedrawImageCache = this._needRedrawImageCache.concat(this._notCommitDrawImageCache);
|
||||
this._redrawCommands += this._drawCommands;
|
||||
if (this._autoSaveContext) {
|
||||
this._drawCommands = ("v;" + this._drawCommands);
|
||||
this._autoSaveContext = false;
|
||||
}
|
||||
}
|
||||
this._notCommitDrawImageCache = [];
|
||||
if (this._flush) {
|
||||
this._flush(reserve, callback);
|
||||
}
|
||||
}
|
||||
|
||||
getImageData(x, y, w, h, callback) {
|
||||
CanvasRenderingContext2D.GBridge.getImageData(this.componentId, x, y, w, h, function(res) {
|
||||
res.data = Base64ToUint8ClampedArray(res.data);
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
putImageData(data, x, y, w, h, callback) {
|
||||
if (data instanceof Uint8ClampedArray) {
|
||||
data = ArrayBufferToBase64(data);
|
||||
CanvasRenderingContext2D.GBridge.putImageData(this.componentId, data, x, y, w, h, function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toTempFilePath(x, y, width, height, destWidth, destHeight, fileType, quality, callback) {
|
||||
CanvasRenderingContext2D.GBridge.toTempFilePath(this.componentId, x, y, width, height, destWidth, destHeight,
|
||||
fileType, quality,
|
||||
function(res) {
|
||||
if (typeof(callback) == 'function') {
|
||||
callback(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export default class WebGLActiveInfo {
|
||||
className = 'WebGLActiveInfo';
|
||||
|
||||
constructor({
|
||||
type, name, size
|
||||
}) {
|
||||
this.type = type;
|
||||
this.name = name;
|
||||
this.size = size;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLBuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLFrameBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLFramebuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
export default {
|
||||
"DEPTH_BUFFER_BIT": 256,
|
||||
"STENCIL_BUFFER_BIT": 1024,
|
||||
"COLOR_BUFFER_BIT": 16384,
|
||||
"POINTS": 0,
|
||||
"LINES": 1,
|
||||
"LINE_LOOP": 2,
|
||||
"LINE_STRIP": 3,
|
||||
"TRIANGLES": 4,
|
||||
"TRIANGLE_STRIP": 5,
|
||||
"TRIANGLE_FAN": 6,
|
||||
"ZERO": 0,
|
||||
"ONE": 1,
|
||||
"SRC_COLOR": 768,
|
||||
"ONE_MINUS_SRC_COLOR": 769,
|
||||
"SRC_ALPHA": 770,
|
||||
"ONE_MINUS_SRC_ALPHA": 771,
|
||||
"DST_ALPHA": 772,
|
||||
"ONE_MINUS_DST_ALPHA": 773,
|
||||
"DST_COLOR": 774,
|
||||
"ONE_MINUS_DST_COLOR": 775,
|
||||
"SRC_ALPHA_SATURATE": 776,
|
||||
"FUNC_ADD": 32774,
|
||||
"BLEND_EQUATION": 32777,
|
||||
"BLEND_EQUATION_RGB": 32777,
|
||||
"BLEND_EQUATION_ALPHA": 34877,
|
||||
"FUNC_SUBTRACT": 32778,
|
||||
"FUNC_REVERSE_SUBTRACT": 32779,
|
||||
"BLEND_DST_RGB": 32968,
|
||||
"BLEND_SRC_RGB": 32969,
|
||||
"BLEND_DST_ALPHA": 32970,
|
||||
"BLEND_SRC_ALPHA": 32971,
|
||||
"CONSTANT_COLOR": 32769,
|
||||
"ONE_MINUS_CONSTANT_COLOR": 32770,
|
||||
"CONSTANT_ALPHA": 32771,
|
||||
"ONE_MINUS_CONSTANT_ALPHA": 32772,
|
||||
"BLEND_COLOR": 32773,
|
||||
"ARRAY_BUFFER": 34962,
|
||||
"ELEMENT_ARRAY_BUFFER": 34963,
|
||||
"ARRAY_BUFFER_BINDING": 34964,
|
||||
"ELEMENT_ARRAY_BUFFER_BINDING": 34965,
|
||||
"STREAM_DRAW": 35040,
|
||||
"STATIC_DRAW": 35044,
|
||||
"DYNAMIC_DRAW": 35048,
|
||||
"BUFFER_SIZE": 34660,
|
||||
"BUFFER_USAGE": 34661,
|
||||
"CURRENT_VERTEX_ATTRIB": 34342,
|
||||
"FRONT": 1028,
|
||||
"BACK": 1029,
|
||||
"FRONT_AND_BACK": 1032,
|
||||
"TEXTURE_2D": 3553,
|
||||
"CULL_FACE": 2884,
|
||||
"BLEND": 3042,
|
||||
"DITHER": 3024,
|
||||
"STENCIL_TEST": 2960,
|
||||
"DEPTH_TEST": 2929,
|
||||
"SCISSOR_TEST": 3089,
|
||||
"POLYGON_OFFSET_FILL": 32823,
|
||||
"SAMPLE_ALPHA_TO_COVERAGE": 32926,
|
||||
"SAMPLE_COVERAGE": 32928,
|
||||
"NO_ERROR": 0,
|
||||
"INVALID_ENUM": 1280,
|
||||
"INVALID_VALUE": 1281,
|
||||
"INVALID_OPERATION": 1282,
|
||||
"OUT_OF_MEMORY": 1285,
|
||||
"CW": 2304,
|
||||
"CCW": 2305,
|
||||
"LINE_WIDTH": 2849,
|
||||
"ALIASED_POINT_SIZE_RANGE": 33901,
|
||||
"ALIASED_LINE_WIDTH_RANGE": 33902,
|
||||
"CULL_FACE_MODE": 2885,
|
||||
"FRONT_FACE": 2886,
|
||||
"DEPTH_RANGE": 2928,
|
||||
"DEPTH_WRITEMASK": 2930,
|
||||
"DEPTH_CLEAR_VALUE": 2931,
|
||||
"DEPTH_FUNC": 2932,
|
||||
"STENCIL_CLEAR_VALUE": 2961,
|
||||
"STENCIL_FUNC": 2962,
|
||||
"STENCIL_FAIL": 2964,
|
||||
"STENCIL_PASS_DEPTH_FAIL": 2965,
|
||||
"STENCIL_PASS_DEPTH_PASS": 2966,
|
||||
"STENCIL_REF": 2967,
|
||||
"STENCIL_VALUE_MASK": 2963,
|
||||
"STENCIL_WRITEMASK": 2968,
|
||||
"STENCIL_BACK_FUNC": 34816,
|
||||
"STENCIL_BACK_FAIL": 34817,
|
||||
"STENCIL_BACK_PASS_DEPTH_FAIL": 34818,
|
||||
"STENCIL_BACK_PASS_DEPTH_PASS": 34819,
|
||||
"STENCIL_BACK_REF": 36003,
|
||||
"STENCIL_BACK_VALUE_MASK": 36004,
|
||||
"STENCIL_BACK_WRITEMASK": 36005,
|
||||
"VIEWPORT": 2978,
|
||||
"SCISSOR_BOX": 3088,
|
||||
"COLOR_CLEAR_VALUE": 3106,
|
||||
"COLOR_WRITEMASK": 3107,
|
||||
"UNPACK_ALIGNMENT": 3317,
|
||||
"PACK_ALIGNMENT": 3333,
|
||||
"MAX_TEXTURE_SIZE": 3379,
|
||||
"MAX_VIEWPORT_DIMS": 3386,
|
||||
"SUBPIXEL_BITS": 3408,
|
||||
"RED_BITS": 3410,
|
||||
"GREEN_BITS": 3411,
|
||||
"BLUE_BITS": 3412,
|
||||
"ALPHA_BITS": 3413,
|
||||
"DEPTH_BITS": 3414,
|
||||
"STENCIL_BITS": 3415,
|
||||
"POLYGON_OFFSET_UNITS": 10752,
|
||||
"POLYGON_OFFSET_FACTOR": 32824,
|
||||
"TEXTURE_BINDING_2D": 32873,
|
||||
"SAMPLE_BUFFERS": 32936,
|
||||
"SAMPLES": 32937,
|
||||
"SAMPLE_COVERAGE_VALUE": 32938,
|
||||
"SAMPLE_COVERAGE_INVERT": 32939,
|
||||
"COMPRESSED_TEXTURE_FORMATS": 34467,
|
||||
"DONT_CARE": 4352,
|
||||
"FASTEST": 4353,
|
||||
"NICEST": 4354,
|
||||
"GENERATE_MIPMAP_HINT": 33170,
|
||||
"BYTE": 5120,
|
||||
"UNSIGNED_BYTE": 5121,
|
||||
"SHORT": 5122,
|
||||
"UNSIGNED_SHORT": 5123,
|
||||
"INT": 5124,
|
||||
"UNSIGNED_INT": 5125,
|
||||
"FLOAT": 5126,
|
||||
"DEPTH_COMPONENT": 6402,
|
||||
"ALPHA": 6406,
|
||||
"RGB": 6407,
|
||||
"RGBA": 6408,
|
||||
"LUMINANCE": 6409,
|
||||
"LUMINANCE_ALPHA": 6410,
|
||||
"UNSIGNED_SHORT_4_4_4_4": 32819,
|
||||
"UNSIGNED_SHORT_5_5_5_1": 32820,
|
||||
"UNSIGNED_SHORT_5_6_5": 33635,
|
||||
"FRAGMENT_SHADER": 35632,
|
||||
"VERTEX_SHADER": 35633,
|
||||
"MAX_VERTEX_ATTRIBS": 34921,
|
||||
"MAX_VERTEX_UNIFORM_VECTORS": 36347,
|
||||
"MAX_VARYING_VECTORS": 36348,
|
||||
"MAX_COMBINED_TEXTURE_IMAGE_UNITS": 35661,
|
||||
"MAX_VERTEX_TEXTURE_IMAGE_UNITS": 35660,
|
||||
"MAX_TEXTURE_IMAGE_UNITS": 34930,
|
||||
"MAX_FRAGMENT_UNIFORM_VECTORS": 36349,
|
||||
"SHADER_TYPE": 35663,
|
||||
"DELETE_STATUS": 35712,
|
||||
"LINK_STATUS": 35714,
|
||||
"VALIDATE_STATUS": 35715,
|
||||
"ATTACHED_SHADERS": 35717,
|
||||
"ACTIVE_UNIFORMS": 35718,
|
||||
"ACTIVE_ATTRIBUTES": 35721,
|
||||
"SHADING_LANGUAGE_VERSION": 35724,
|
||||
"CURRENT_PROGRAM": 35725,
|
||||
"NEVER": 512,
|
||||
"LESS": 513,
|
||||
"EQUAL": 514,
|
||||
"LEQUAL": 515,
|
||||
"GREATER": 516,
|
||||
"NOTEQUAL": 517,
|
||||
"GEQUAL": 518,
|
||||
"ALWAYS": 519,
|
||||
"KEEP": 7680,
|
||||
"REPLACE": 7681,
|
||||
"INCR": 7682,
|
||||
"DECR": 7683,
|
||||
"INVERT": 5386,
|
||||
"INCR_WRAP": 34055,
|
||||
"DECR_WRAP": 34056,
|
||||
"VENDOR": 7936,
|
||||
"RENDERER": 7937,
|
||||
"VERSION": 7938,
|
||||
"NEAREST": 9728,
|
||||
"LINEAR": 9729,
|
||||
"NEAREST_MIPMAP_NEAREST": 9984,
|
||||
"LINEAR_MIPMAP_NEAREST": 9985,
|
||||
"NEAREST_MIPMAP_LINEAR": 9986,
|
||||
"LINEAR_MIPMAP_LINEAR": 9987,
|
||||
"TEXTURE_MAG_FILTER": 10240,
|
||||
"TEXTURE_MIN_FILTER": 10241,
|
||||
"TEXTURE_WRAP_S": 10242,
|
||||
"TEXTURE_WRAP_T": 10243,
|
||||
"TEXTURE": 5890,
|
||||
"TEXTURE_CUBE_MAP": 34067,
|
||||
"TEXTURE_BINDING_CUBE_MAP": 34068,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_X": 34069,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_X": 34070,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Y": 34071,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Y": 34072,
|
||||
"TEXTURE_CUBE_MAP_POSITIVE_Z": 34073,
|
||||
"TEXTURE_CUBE_MAP_NEGATIVE_Z": 34074,
|
||||
"MAX_CUBE_MAP_TEXTURE_SIZE": 34076,
|
||||
"TEXTURE0": 33984,
|
||||
"TEXTURE1": 33985,
|
||||
"TEXTURE2": 33986,
|
||||
"TEXTURE3": 33987,
|
||||
"TEXTURE4": 33988,
|
||||
"TEXTURE5": 33989,
|
||||
"TEXTURE6": 33990,
|
||||
"TEXTURE7": 33991,
|
||||
"TEXTURE8": 33992,
|
||||
"TEXTURE9": 33993,
|
||||
"TEXTURE10": 33994,
|
||||
"TEXTURE11": 33995,
|
||||
"TEXTURE12": 33996,
|
||||
"TEXTURE13": 33997,
|
||||
"TEXTURE14": 33998,
|
||||
"TEXTURE15": 33999,
|
||||
"TEXTURE16": 34000,
|
||||
"TEXTURE17": 34001,
|
||||
"TEXTURE18": 34002,
|
||||
"TEXTURE19": 34003,
|
||||
"TEXTURE20": 34004,
|
||||
"TEXTURE21": 34005,
|
||||
"TEXTURE22": 34006,
|
||||
"TEXTURE23": 34007,
|
||||
"TEXTURE24": 34008,
|
||||
"TEXTURE25": 34009,
|
||||
"TEXTURE26": 34010,
|
||||
"TEXTURE27": 34011,
|
||||
"TEXTURE28": 34012,
|
||||
"TEXTURE29": 34013,
|
||||
"TEXTURE30": 34014,
|
||||
"TEXTURE31": 34015,
|
||||
"ACTIVE_TEXTURE": 34016,
|
||||
"REPEAT": 10497,
|
||||
"CLAMP_TO_EDGE": 33071,
|
||||
"MIRRORED_REPEAT": 33648,
|
||||
"FLOAT_VEC2": 35664,
|
||||
"FLOAT_VEC3": 35665,
|
||||
"FLOAT_VEC4": 35666,
|
||||
"INT_VEC2": 35667,
|
||||
"INT_VEC3": 35668,
|
||||
"INT_VEC4": 35669,
|
||||
"BOOL": 35670,
|
||||
"BOOL_VEC2": 35671,
|
||||
"BOOL_VEC3": 35672,
|
||||
"BOOL_VEC4": 35673,
|
||||
"FLOAT_MAT2": 35674,
|
||||
"FLOAT_MAT3": 35675,
|
||||
"FLOAT_MAT4": 35676,
|
||||
"SAMPLER_2D": 35678,
|
||||
"SAMPLER_CUBE": 35680,
|
||||
"VERTEX_ATTRIB_ARRAY_ENABLED": 34338,
|
||||
"VERTEX_ATTRIB_ARRAY_SIZE": 34339,
|
||||
"VERTEX_ATTRIB_ARRAY_STRIDE": 34340,
|
||||
"VERTEX_ATTRIB_ARRAY_TYPE": 34341,
|
||||
"VERTEX_ATTRIB_ARRAY_NORMALIZED": 34922,
|
||||
"VERTEX_ATTRIB_ARRAY_POINTER": 34373,
|
||||
"VERTEX_ATTRIB_ARRAY_BUFFER_BINDING": 34975,
|
||||
"IMPLEMENTATION_COLOR_READ_TYPE": 35738,
|
||||
"IMPLEMENTATION_COLOR_READ_FORMAT": 35739,
|
||||
"COMPILE_STATUS": 35713,
|
||||
"LOW_FLOAT": 36336,
|
||||
"MEDIUM_FLOAT": 36337,
|
||||
"HIGH_FLOAT": 36338,
|
||||
"LOW_INT": 36339,
|
||||
"MEDIUM_INT": 36340,
|
||||
"HIGH_INT": 36341,
|
||||
"FRAMEBUFFER": 36160,
|
||||
"RENDERBUFFER": 36161,
|
||||
"RGBA4": 32854,
|
||||
"RGB5_A1": 32855,
|
||||
"RGB565": 36194,
|
||||
"DEPTH_COMPONENT16": 33189,
|
||||
"STENCIL_INDEX8": 36168,
|
||||
"DEPTH_STENCIL": 34041,
|
||||
"RENDERBUFFER_WIDTH": 36162,
|
||||
"RENDERBUFFER_HEIGHT": 36163,
|
||||
"RENDERBUFFER_INTERNAL_FORMAT": 36164,
|
||||
"RENDERBUFFER_RED_SIZE": 36176,
|
||||
"RENDERBUFFER_GREEN_SIZE": 36177,
|
||||
"RENDERBUFFER_BLUE_SIZE": 36178,
|
||||
"RENDERBUFFER_ALPHA_SIZE": 36179,
|
||||
"RENDERBUFFER_DEPTH_SIZE": 36180,
|
||||
"RENDERBUFFER_STENCIL_SIZE": 36181,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE": 36048,
|
||||
"FRAMEBUFFER_ATTACHMENT_OBJECT_NAME": 36049,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL": 36050,
|
||||
"FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE": 36051,
|
||||
"COLOR_ATTACHMENT0": 36064,
|
||||
"DEPTH_ATTACHMENT": 36096,
|
||||
"STENCIL_ATTACHMENT": 36128,
|
||||
"DEPTH_STENCIL_ATTACHMENT": 33306,
|
||||
"NONE": 0,
|
||||
"FRAMEBUFFER_COMPLETE": 36053,
|
||||
"FRAMEBUFFER_INCOMPLETE_ATTACHMENT": 36054,
|
||||
"FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT": 36055,
|
||||
"FRAMEBUFFER_INCOMPLETE_DIMENSIONS": 36057,
|
||||
"FRAMEBUFFER_UNSUPPORTED": 36061,
|
||||
"FRAMEBUFFER_BINDING": 36006,
|
||||
"RENDERBUFFER_BINDING": 36007,
|
||||
"MAX_RENDERBUFFER_SIZE": 34024,
|
||||
"INVALID_FRAMEBUFFER_OPERATION": 1286,
|
||||
"UNPACK_FLIP_Y_WEBGL": 37440,
|
||||
"UNPACK_PREMULTIPLY_ALPHA_WEBGL": 37441,
|
||||
"CONTEXT_LOST_WEBGL": 37442,
|
||||
"UNPACK_COLORSPACE_CONVERSION_WEBGL": 37443,
|
||||
"BROWSER_DEFAULT_WEBGL": 37444
|
||||
};
|
||||
@@ -0,0 +1,142 @@
|
||||
let i = 1;
|
||||
|
||||
const GLmethod = {};
|
||||
|
||||
GLmethod.activeTexture = i++; //1
|
||||
GLmethod.attachShader = i++;
|
||||
GLmethod.bindAttribLocation = i++;
|
||||
GLmethod.bindBuffer = i++;
|
||||
GLmethod.bindFramebuffer = i++;
|
||||
GLmethod.bindRenderbuffer = i++;
|
||||
GLmethod.bindTexture = i++;
|
||||
GLmethod.blendColor = i++;
|
||||
GLmethod.blendEquation = i++;
|
||||
GLmethod.blendEquationSeparate = i++; //10
|
||||
GLmethod.blendFunc = i++;
|
||||
GLmethod.blendFuncSeparate = i++;
|
||||
GLmethod.bufferData = i++;
|
||||
GLmethod.bufferSubData = i++;
|
||||
GLmethod.checkFramebufferStatus = i++;
|
||||
GLmethod.clear = i++;
|
||||
GLmethod.clearColor = i++;
|
||||
GLmethod.clearDepth = i++;
|
||||
GLmethod.clearStencil = i++;
|
||||
GLmethod.colorMask = i++; //20
|
||||
GLmethod.compileShader = i++;
|
||||
GLmethod.compressedTexImage2D = i++;
|
||||
GLmethod.compressedTexSubImage2D = i++;
|
||||
GLmethod.copyTexImage2D = i++;
|
||||
GLmethod.copyTexSubImage2D = i++;
|
||||
GLmethod.createBuffer = i++;
|
||||
GLmethod.createFramebuffer = i++;
|
||||
GLmethod.createProgram = i++;
|
||||
GLmethod.createRenderbuffer = i++;
|
||||
GLmethod.createShader = i++; //30
|
||||
GLmethod.createTexture = i++;
|
||||
GLmethod.cullFace = i++;
|
||||
GLmethod.deleteBuffer = i++;
|
||||
GLmethod.deleteFramebuffer = i++;
|
||||
GLmethod.deleteProgram = i++;
|
||||
GLmethod.deleteRenderbuffer = i++;
|
||||
GLmethod.deleteShader = i++;
|
||||
GLmethod.deleteTexture = i++;
|
||||
GLmethod.depthFunc = i++;
|
||||
GLmethod.depthMask = i++; //40
|
||||
GLmethod.depthRange = i++;
|
||||
GLmethod.detachShader = i++;
|
||||
GLmethod.disable = i++;
|
||||
GLmethod.disableVertexAttribArray = i++;
|
||||
GLmethod.drawArrays = i++;
|
||||
GLmethod.drawArraysInstancedANGLE = i++;
|
||||
GLmethod.drawElements = i++;
|
||||
GLmethod.drawElementsInstancedANGLE = i++;
|
||||
GLmethod.enable = i++;
|
||||
GLmethod.enableVertexAttribArray = i++; //50
|
||||
GLmethod.flush = i++;
|
||||
GLmethod.framebufferRenderbuffer = i++;
|
||||
GLmethod.framebufferTexture2D = i++;
|
||||
GLmethod.frontFace = i++;
|
||||
GLmethod.generateMipmap = i++;
|
||||
GLmethod.getActiveAttrib = i++;
|
||||
GLmethod.getActiveUniform = i++;
|
||||
GLmethod.getAttachedShaders = i++;
|
||||
GLmethod.getAttribLocation = i++;
|
||||
GLmethod.getBufferParameter = i++; //60
|
||||
GLmethod.getContextAttributes = i++;
|
||||
GLmethod.getError = i++;
|
||||
GLmethod.getExtension = i++;
|
||||
GLmethod.getFramebufferAttachmentParameter = i++;
|
||||
GLmethod.getParameter = i++;
|
||||
GLmethod.getProgramInfoLog = i++;
|
||||
GLmethod.getProgramParameter = i++;
|
||||
GLmethod.getRenderbufferParameter = i++;
|
||||
GLmethod.getShaderInfoLog = i++;
|
||||
GLmethod.getShaderParameter = i++; //70
|
||||
GLmethod.getShaderPrecisionFormat = i++;
|
||||
GLmethod.getShaderSource = i++;
|
||||
GLmethod.getSupportedExtensions = i++;
|
||||
GLmethod.getTexParameter = i++;
|
||||
GLmethod.getUniform = i++;
|
||||
GLmethod.getUniformLocation = i++;
|
||||
GLmethod.getVertexAttrib = i++;
|
||||
GLmethod.getVertexAttribOffset = i++;
|
||||
GLmethod.isBuffer = i++;
|
||||
GLmethod.isContextLost = i++; //80
|
||||
GLmethod.isEnabled = i++;
|
||||
GLmethod.isFramebuffer = i++;
|
||||
GLmethod.isProgram = i++;
|
||||
GLmethod.isRenderbuffer = i++;
|
||||
GLmethod.isShader = i++;
|
||||
GLmethod.isTexture = i++;
|
||||
GLmethod.lineWidth = i++;
|
||||
GLmethod.linkProgram = i++;
|
||||
GLmethod.pixelStorei = i++;
|
||||
GLmethod.polygonOffset = i++; //90
|
||||
GLmethod.readPixels = i++;
|
||||
GLmethod.renderbufferStorage = i++;
|
||||
GLmethod.sampleCoverage = i++;
|
||||
GLmethod.scissor = i++;
|
||||
GLmethod.shaderSource = i++;
|
||||
GLmethod.stencilFunc = i++;
|
||||
GLmethod.stencilFuncSeparate = i++;
|
||||
GLmethod.stencilMask = i++;
|
||||
GLmethod.stencilMaskSeparate = i++;
|
||||
GLmethod.stencilOp = i++; //100
|
||||
GLmethod.stencilOpSeparate = i++;
|
||||
GLmethod.texImage2D = i++;
|
||||
GLmethod.texParameterf = i++;
|
||||
GLmethod.texParameteri = i++;
|
||||
GLmethod.texSubImage2D = i++;
|
||||
GLmethod.uniform1f = i++;
|
||||
GLmethod.uniform1fv = i++;
|
||||
GLmethod.uniform1i = i++;
|
||||
GLmethod.uniform1iv = i++;
|
||||
GLmethod.uniform2f = i++; //110
|
||||
GLmethod.uniform2fv = i++;
|
||||
GLmethod.uniform2i = i++;
|
||||
GLmethod.uniform2iv = i++;
|
||||
GLmethod.uniform3f = i++;
|
||||
GLmethod.uniform3fv = i++;
|
||||
GLmethod.uniform3i = i++;
|
||||
GLmethod.uniform3iv = i++;
|
||||
GLmethod.uniform4f = i++;
|
||||
GLmethod.uniform4fv = i++;
|
||||
GLmethod.uniform4i = i++; //120
|
||||
GLmethod.uniform4iv = i++;
|
||||
GLmethod.uniformMatrix2fv = i++;
|
||||
GLmethod.uniformMatrix3fv = i++;
|
||||
GLmethod.uniformMatrix4fv = i++;
|
||||
GLmethod.useProgram = i++;
|
||||
GLmethod.validateProgram = i++;
|
||||
GLmethod.vertexAttrib1f = i++; //new
|
||||
GLmethod.vertexAttrib2f = i++; //new
|
||||
GLmethod.vertexAttrib3f = i++; //new
|
||||
GLmethod.vertexAttrib4f = i++; //new //130
|
||||
GLmethod.vertexAttrib1fv = i++; //new
|
||||
GLmethod.vertexAttrib2fv = i++; //new
|
||||
GLmethod.vertexAttrib3fv = i++; //new
|
||||
GLmethod.vertexAttrib4fv = i++; //new
|
||||
GLmethod.vertexAttribPointer = i++;
|
||||
GLmethod.viewport = i++;
|
||||
|
||||
export default GLmethod;
|
||||
@@ -0,0 +1,23 @@
|
||||
const GLtype = {};
|
||||
|
||||
[
|
||||
"GLbitfield",
|
||||
"GLboolean",
|
||||
"GLbyte",
|
||||
"GLclampf",
|
||||
"GLenum",
|
||||
"GLfloat",
|
||||
"GLint",
|
||||
"GLintptr",
|
||||
"GLsizei",
|
||||
"GLsizeiptr",
|
||||
"GLshort",
|
||||
"GLubyte",
|
||||
"GLuint",
|
||||
"GLushort"
|
||||
].sort().map((typeName, i) => GLtype[typeName] = 1 >> (i + 1));
|
||||
|
||||
export default GLtype;
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLProgram';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLProgram {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLRenderBuffer';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLRenderbuffer {
|
||||
className = name;
|
||||
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLShader';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLShader {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export default class WebGLShaderPrecisionFormat {
|
||||
className = 'WebGLShaderPrecisionFormat';
|
||||
|
||||
constructor({
|
||||
rangeMin, rangeMax, precision
|
||||
}) {
|
||||
this.rangeMin = rangeMin;
|
||||
this.rangeMax = rangeMax;
|
||||
this.precision = precision;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLTexture';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLTexture {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import {getTransferedObjectUUID} from './classUtils';
|
||||
|
||||
const name = 'WebGLUniformLocation';
|
||||
|
||||
function uuid(id) {
|
||||
return getTransferedObjectUUID(name, id);
|
||||
}
|
||||
|
||||
export default class WebGLUniformLocation {
|
||||
className = name;
|
||||
|
||||
constructor(id, type) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
static uuid = uuid;
|
||||
|
||||
uuid() {
|
||||
return uuid(this.id);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export function getTransferedObjectUUID(name, id) {
|
||||
return `${name.toLowerCase()}-${id}`;
|
||||
}
|
||||
74
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/env/canvas.js
vendored
Normal file
74
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/env/canvas.js
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
import GContext2D from '../context-2d/RenderingContext';
|
||||
import GContextWebGL from '../context-webgl/RenderingContext';
|
||||
|
||||
export default class GCanvas {
|
||||
|
||||
// static GBridge = null;
|
||||
|
||||
id = null;
|
||||
|
||||
_needRender = true;
|
||||
|
||||
constructor(id, { disableAutoSwap }) {
|
||||
this.id = id;
|
||||
|
||||
this._disableAutoSwap = disableAutoSwap;
|
||||
if (disableAutoSwap) {
|
||||
this._swapBuffers = () => {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getContext(type) {
|
||||
|
||||
let context = null;
|
||||
|
||||
if (type.match(/webgl/i)) {
|
||||
context = new GContextWebGL(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
if (!this._disableAutoSwap) {
|
||||
const render = () => {
|
||||
if (this._needRender) {
|
||||
GCanvas.GBridge.render(this.id);
|
||||
this._needRender = false;
|
||||
}
|
||||
}
|
||||
setInterval(render, 16);
|
||||
}
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 1); // 0 for 2d; 1 for webgl
|
||||
} else if (type.match(/2d/i)) {
|
||||
context = new GContext2D(this);
|
||||
|
||||
context.componentId = this.id;
|
||||
|
||||
// const render = ( callback ) => {
|
||||
//
|
||||
// const commands = context._drawCommands;
|
||||
// context._drawCommands = '';
|
||||
//
|
||||
// GCanvas.GBridge.render2d(this.id, commands, callback);
|
||||
// this._needRender = false;
|
||||
// }
|
||||
// //draw方法触发
|
||||
// context._flush = render;
|
||||
// //setInterval(render, 16);
|
||||
|
||||
GCanvas.GBridge.callSetContextType(this.id, 0);
|
||||
} else {
|
||||
throw new Error('not supported context ' + type);
|
||||
}
|
||||
|
||||
return context;
|
||||
|
||||
}
|
||||
|
||||
reset() {
|
||||
GCanvas.GBridge.callReset(this.id);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
96
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/env/image.js
vendored
Normal file
96
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/env/image.js
vendored
Normal file
@@ -0,0 +1,96 @@
|
||||
let incId = 1;
|
||||
|
||||
const noop = function () { };
|
||||
|
||||
class GImage {
|
||||
|
||||
static GBridge = null;
|
||||
|
||||
constructor() {
|
||||
this._id = incId++;
|
||||
this._width = 0;
|
||||
this._height = 0;
|
||||
this._src = undefined;
|
||||
this._onload = noop;
|
||||
this._onerror = noop;
|
||||
this.complete = false;
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this._width;
|
||||
}
|
||||
set width(v) {
|
||||
this._width = v;
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this._height;
|
||||
}
|
||||
|
||||
set height(v) {
|
||||
this._height = v;
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this._src;
|
||||
}
|
||||
|
||||
set src(v) {
|
||||
|
||||
if (v.startsWith('//')) {
|
||||
v = 'http:' + v;
|
||||
}
|
||||
|
||||
this._src = v;
|
||||
|
||||
GImage.GBridge.perloadImage([this._src, this._id], (data) => {
|
||||
if (typeof data === 'string') {
|
||||
data = JSON.parse(data);
|
||||
}
|
||||
if (data.error) {
|
||||
var evt = { type: 'error', target: this };
|
||||
this.onerror(evt);
|
||||
} else {
|
||||
this.complete = true;
|
||||
this.width = typeof data.width === 'number' ? data.width : 0;
|
||||
this.height = typeof data.height === 'number' ? data.height : 0;
|
||||
var evt = { type: 'load', target: this };
|
||||
this.onload(evt);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = listener;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = listener;
|
||||
}
|
||||
}
|
||||
|
||||
removeEventListener(name, listener) {
|
||||
if (name === 'load') {
|
||||
this.onload = noop;
|
||||
} else if (name === 'error') {
|
||||
this.onerror = noop;
|
||||
}
|
||||
}
|
||||
|
||||
get onload() {
|
||||
return this._onload;
|
||||
}
|
||||
|
||||
set onload(v) {
|
||||
this._onload = v;
|
||||
}
|
||||
|
||||
get onerror() {
|
||||
return this._onerror;
|
||||
}
|
||||
|
||||
set onerror(v) {
|
||||
this._onerror = v;
|
||||
}
|
||||
}
|
||||
|
||||
export default GImage;
|
||||
24
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/env/tool.js
vendored
Normal file
24
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/env/tool.js
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
|
||||
export function ArrayBufferToBase64 (buffer) {
|
||||
var binary = '';
|
||||
var bytes = new Uint8ClampedArray(buffer);
|
||||
for (var len = bytes.byteLength, i = 0; i < len; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
export function Base64ToUint8ClampedArray(base64String) {
|
||||
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
||||
const base64 = (base64String + padding)
|
||||
.replace(/\-/g, '+')
|
||||
.replace(/_/g, '/');
|
||||
|
||||
const rawData = atob(base64);
|
||||
const outputArray = new Uint8ClampedArray(rawData.length);
|
||||
|
||||
for (let i = 0; i < rawData.length; ++i) {
|
||||
outputArray[i] = rawData.charCodeAt(i);
|
||||
}
|
||||
return outputArray;
|
||||
}
|
||||
39
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/index.js
Normal file
39
uni_modules/Sansnn-uQRCode/js_sdk/gcanvas/index.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import GCanvas from './env/canvas';
|
||||
import GImage from './env/image';
|
||||
|
||||
import GWebGLRenderingContext from './context-webgl/RenderingContext';
|
||||
import GContext2D from './context-2d/RenderingContext';
|
||||
|
||||
import GBridgeWeex from './bridge/bridge-weex';
|
||||
|
||||
export let Image = GImage;
|
||||
|
||||
export let WeexBridge = GBridgeWeex;
|
||||
|
||||
export function enable(el, { bridge, debug, disableAutoSwap, disableComboCommands } = {}) {
|
||||
|
||||
const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
|
||||
|
||||
GBridge.callEnable(el.ref, [
|
||||
0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
|
||||
-1, // hybridLayerType: 0--LAYER_TYPE_NONE 1--LAYER_TYPE_SOFTWARE 2--LAYER_TYPE_HARDWARE
|
||||
false, // supportScroll
|
||||
false, // newCanvasMode
|
||||
1, // compatible
|
||||
'white',// clearColor
|
||||
false // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
|
||||
]);
|
||||
|
||||
if (debug === true) {
|
||||
GBridge.callEnableDebug();
|
||||
}
|
||||
if (disableComboCommands) {
|
||||
GBridge.callEnableDisableCombo();
|
||||
}
|
||||
|
||||
var canvas = new GCanvas(el.ref, { disableAutoSwap });
|
||||
canvas.width = el.style.width;
|
||||
canvas.height = el.style.height;
|
||||
|
||||
return canvas;
|
||||
};
|
||||
34
uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js
Normal file
34
uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js
Normal file
File diff suppressed because one or more lines are too long
80
uni_modules/Sansnn-uQRCode/package.json
Normal file
80
uni_modules/Sansnn-uQRCode/package.json
Normal file
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"id": "Sansnn-uQRCode",
|
||||
"displayName": "uQRCode 全端二维码生成插件 支持nvue 支持nodejs服务端",
|
||||
"version": "4.0.6",
|
||||
"description": "uQRCode是一款基于Javascript环境开发的二维码生成插件，适用所有Javascript运行环境的前端应用和Node.js。",
|
||||
"keywords": [
|
||||
"二维码",
|
||||
"uQRCode",
|
||||
"qrcode",
|
||||
"qr"
|
||||
],
|
||||
"repository": "https://github.com/Sansnn/uQRCode",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/uqrcodejs",
|
||||
"type": "sdk-js"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
193
uni_modules/mp-html/README.md
Normal file
193
uni_modules/mp-html/README.md
Normal file
@@ -0,0 +1,193 @@
|
||||
## 为减小组件包的大小，默认组件包中不包含编辑、latex 公式等扩展功能，需要使用扩展功能的请参考下方的 插件扩展 栏的说明
|
||||
|
||||
## 功能介绍
|
||||
- 全端支持（含 `v3、NVUE`）
|
||||
- 支持丰富的标签（包括 `table`、`video`、`svg` 等）
|
||||
- 支持丰富的事件效果（自动预览图片、链接处理等）
|
||||
- 支持设置占位图（加载中、出错时、预览时）
|
||||
- 支持锚点跳转、长按复制等丰富功能
|
||||
- 支持大部分 *html* 实体
|
||||
- 丰富的插件（关键词搜索、内容编辑、`latex` 公式等）
|
||||
- 效率高、容错性强且轻量化
|
||||
|
||||
查看 [功能介绍](https://jin-yufeng.gitee.io/mp-html/#/overview/feature) 了解更多
|
||||
|
||||
## 使用方法
|
||||
- `uni_modules` 方式
|
||||
1. 点击右上角的 `使用 HBuilder X 导入插件` 按钮直接导入项目或点击 `下载插件 ZIP` 按钮下载插件包并解压到项目的 `uni_modules/mp-html` 目录下
|
||||
2. 在需要使用页面的 `(n)vue` 文件中添加
|
||||
```html
|
||||
<!-- 不需要引入，可直接使用 -->
|
||||
<mp-html :content="html" />
|
||||
```
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
html: '<div>Hello World!</div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
3. 需要更新版本时在 `HBuilder X` 中右键 `uni_modules/mp-html` 目录选择 `从插件市场更新` 即可
|
||||
|
||||
- 源码方式
|
||||
1. 从 [github](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 或 [gitee](https://gitee.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 下载源码
|
||||
插件市场的 **非 uni_modules 版本** 无法更新，不建议从插件市场获取
|
||||
2. 在需要使用页面的 `(n)vue` 文件中添加
|
||||
```html
|
||||
<mp-html :content="html" />
|
||||
```
|
||||
```javascript
|
||||
import mpHtml from '@/components/mp-html/mp-html'
|
||||
export default {
|
||||
// HBuilderX 2.5.5+ 可以通过 easycom 自动引入
|
||||
components: {
|
||||
mpHtml
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
html: '<div>Hello World!</div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- npm 方式
|
||||
1. 在项目根目录下执行
|
||||
```bash
|
||||
npm install mp-html
|
||||
```
|
||||
2. 在需要使用页面的 `(n)vue` 文件中添加
|
||||
```html
|
||||
<mp-html :content="html" />
|
||||
```
|
||||
```javascript
|
||||
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
|
||||
export default {
|
||||
// 不可省略
|
||||
components: {
|
||||
mpHtml
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
html: '<div>Hello World!</div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
3. 需要更新版本时执行以下命令即可
|
||||
```bash
|
||||
npm update mp-html
|
||||
```
|
||||
|
||||
使用 *cli* 方式运行的项目，通过 *npm* 方式引入时，需要在 *vue.config.js* 中配置 *transpileDependencies*，详情可见 [#330](https://github.com/jin-yufeng/mp-html/issues/330#issuecomment-913617687)
|
||||
如果在 **nvue** 中使用还要将 `dist/uni-app/static` 目录下的内容拷贝到项目的 `static` 目录下，否则无法运行
|
||||
|
||||
查看 [快速开始](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart) 了解更多
|
||||
|
||||
## 组件属性
|
||||
|
||||
| 属性 | 类型 | 默认值 | 说明 |
|
||||
|:---:|:---:|:---:|---|
|
||||
| container-style | String | | 容器的样式（[2.1.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v210)） |
|
||||
| content | String | | 用于渲染的 html 字符串 |
|
||||
| copy-link | Boolean | true | 是否允许外部链接被点击时自动复制 |
|
||||
| domain | String | | 主域名（用于链接拼接） |
|
||||
| error-img | String | | 图片出错时的占位图链接 |
|
||||
| lazy-load | Boolean | false | 是否开启图片懒加载 |
|
||||
| loading-img | String | | 图片加载过程中的占位图链接 |
|
||||
| pause-video | Boolean | true | 是否在播放一个视频时自动暂停其他视频 |
|
||||
| preview-img | Boolean | true | 是否允许图片被点击时自动预览 |
|
||||
| scroll-table | Boolean | false | 是否给每个表格添加一个滚动层使其能单独横向滚动 |
|
||||
| selectable | Boolean | false | 是否开启文本长按复制 |
|
||||
| set-title | Boolean | true | 是否将 title 标签的内容设置到页面标题 |
|
||||
| show-img-menu | Boolean | true | 是否允许图片被长按时显示菜单 |
|
||||
| tag-style | Object | | 设置标签的默认样式 |
|
||||
| use-anchor | Boolean | false | 是否使用锚点链接 |
|
||||
|
||||
查看 [属性](https://jin-yufeng.gitee.io/mp-html/#/basic/prop) 了解更多
|
||||
|
||||
## 组件事件
|
||||
|
||||
| 名称 | 触发时机 |
|
||||
|:---:|---|
|
||||
| load | dom 树加载完毕时 |
|
||||
| ready | 图片加载完毕时 |
|
||||
| error | 发生渲染错误时 |
|
||||
| imgtap | 图片被点击时 |
|
||||
| linktap | 链接被点击时 |
|
||||
| play | 音视频播放时 |
|
||||
|
||||
查看 [事件](https://jin-yufeng.gitee.io/mp-html/#/basic/event) 了解更多
|
||||
|
||||
## api
|
||||
组件实例上提供了一些 `api` 方法可供调用
|
||||
|
||||
| 名称 | 作用 |
|
||||
|:---:|---|
|
||||
| in | 将锚点跳转的范围限定在一个 scroll-view 内 |
|
||||
| navigateTo | 锚点跳转 |
|
||||
| getText | 获取文本内容 |
|
||||
| getRect | 获取富文本内容的位置和大小 |
|
||||
| setContent | 设置富文本内容 |
|
||||
| imgList | 获取所有图片的数组 |
|
||||
| pauseMedia | 暂停播放音视频（[2.2.2+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v222)） |
|
||||
| setPlaybackRate | 设置音视频播放速率（[2.4.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v240)） |
|
||||
|
||||
查看 [api](https://jin-yufeng.gitee.io/mp-html/#/advanced/api) 了解更多
|
||||
|
||||
## 插件扩展
|
||||
除基本功能外，本组件还提供了丰富的扩展，可按照需要选用
|
||||
|
||||
| 名称 | 作用 |
|
||||
|:---:|---|
|
||||
| audio | 音乐播放器 |
|
||||
| editable | 富文本 **编辑**（[示例项目](https://mp-html.oss-cn-hangzhou.aliyuncs.com/editable.zip)） |
|
||||
| emoji | 解析 emoji |
|
||||
| highlight | 代码块高亮显示 |
|
||||
| markdown | 渲染 markdown |
|
||||
| search | 关键词搜索 |
|
||||
| style | 匹配 style 标签中的样式 |
|
||||
| txv-video | 使用腾讯视频 |
|
||||
| img-cache | 图片缓存 by [@PentaTea](https://github.com/PentaTea) |
|
||||
| latex | 渲染 latex 公式 by [@Zeng-J](https://github.com/Zeng-J) |
|
||||
|
||||
从插件市场导入的包中 **不含有** 扩展插件，使用插件需通过微信小程序 `富文本插件` 获取或参考以下方法进行打包：
|
||||
1. 获取完整组件包
|
||||
```bash
|
||||
npm install mp-html
|
||||
```
|
||||
2. 编辑 `tools/config.js` 中的 `plugins` 项，选择需要的插件
|
||||
3. 生成新的组件包
|
||||
在 `node_modules/mp-html` 目录下执行
|
||||
```bash
|
||||
npm install
|
||||
npm run build:uni-app
|
||||
```
|
||||
4. 拷贝 `dist/uni-app` 中的内容到项目根目录
|
||||
|
||||
查看 [插件](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin) 了解更多
|
||||
|
||||
## 关于 nvue
|
||||
`nvue` 使用原生渲染，不支持部分 `css` 样式，为实现和 `html` 相同的效果，组件内部通过 `web-view` 进行渲染，性能上差于原生，根据 `weex` 官方建议，`web` 标签仅应用在非常规的降级场景。因此，如果通过原生的方式（如 `richtext`）能够满足需要，则不建议使用本组件，如果有较多的富文本内容，则可以直接使用 `vue` 页面
|
||||
由于渲染方式与其他端不同，有以下限制：
|
||||
1. 不支持 `lazy-load` 属性
|
||||
2. 视频不支持全屏播放
|
||||
3. 如果在 `flex-direction: row` 的容器中使用，需要给组件设置宽度或设置 `flex: 1` 占满剩余宽度
|
||||
|
||||
纯 `nvue` 模式下，[此问题](https://ask.dcloud.net.cn/question/119678) 修复前，不支持通过 `uni_modules` 引入，需要本地引入（将 [dist/uni-app](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 中的内容拷贝到项目根目录下）
|
||||
|
||||
## 立即体验
|
||||
|
||||
|
||||
## 问题反馈
|
||||
遇到问题时，请先查阅 [常见问题](https://jin-yufeng.gitee.io/mp-html/#/question/faq) 和 [issue](https://github.com/jin-yufeng/mp-html/issues) 中是否已有相同的问题
|
||||
可通过 [issue](https://github.com/jin-yufeng/mp-html/issues/new/choose) 、插件问答或发送邮件到 [mp_html@126.com](mailto:mp_html@126.com) 提问，不建议在评论区提问（不方便回复）
|
||||
提问请严格按照 [issue 模板](https://github.com/jin-yufeng/mp-html/issues/new/choose) ，描述清楚使用环境、`html` 内容或可复现的 `demo` 项目以及复现方式，对于 **描述不清**、**无法复现** 或重复的问题将不予回复
|
||||
|
||||
欢迎加入 `QQ` 交流群：
|
||||
群1（已满）：`699734691`
|
||||
群2：`778239129`
|
||||
|
||||
查看 [问题反馈](https://jin-yufeng.gitee.io/mp-html/#/question/feedback) 了解更多
|
||||
138
uni_modules/mp-html/changelog.md
Normal file
138
uni_modules/mp-html/changelog.md
Normal file
@@ -0,0 +1,138 @@
|
||||
## v2.4.3（2024-01-21）
|
||||
1. `A` 增加 [card](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#card) 插件 [详细](https://github.com/jin-yufeng/mp-html/pull/533) by [@whoooami](https://github.com/whoooami)
|
||||
2. `F` 修复了 `svg` 中包含 `foreignobject` 可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/523)
|
||||
3. `F` 修复了合并单元格的表格部分情况下显示不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/561)
|
||||
4. `F` 修复了 `img` 标签设置 `object-fit` 无效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/567)
|
||||
5. `F` 修复了 `latex` 插件公式会换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/540)
|
||||
6. `F` 修复了 `editable` 和 `audio` 插件共用时点击 `audio` 无法编辑的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/529) by [@whoooami](https://github.com/whoooami)
|
||||
7. `F` 修复了微信小程序部分情况下图片会报错 `replace of undefined` 的问题
|
||||
8. `F` 修复了快手小程序图片不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/571)
|
||||
## v2.4.2（2023-05-14）
|
||||
1. `A` `editable` 插件支持修改文字颜色 [详细](https://github.com/jin-yufeng/mp-html/issues/254)
|
||||
2. `F` 修复了 `svg` 中有 `style` 不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/505)
|
||||
3. `F` 修复了使用旧版编译器可能报错 `Bad attr nodes` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/472)
|
||||
4. `F` 修复了 `app` 端可能出现无法读取 `lazyLoad` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/513)
|
||||
5. `F` 修复了 `editable` 插件在点击换图时未拼接 `domain` 的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/497) by [@TwoKe945](https://github.com/TwoKe945)
|
||||
6. `F` 修复了 `latex` 插件部分情况下不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/515)
|
||||
7. `F` 修复了 `editable` 插件点击音视频时其他标签框不消失的问题
|
||||
## v2.4.1（2022-12-25）
|
||||
1. `F` 修复了没有图片时 `ready` 事件可能不触发的问题
|
||||
2. `F` 修复了加载过程中可能出现 `Root label not found` 错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/470)
|
||||
3. `F` 修复了 `audio` 插件退出页面可能会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/457)
|
||||
4. `F` 修复了 `vue3` 运行到 `app` 在 `HBuilder X 3.6.10` 以上报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/480)
|
||||
5. `F` 修复了 `nvue` 端链接中包含 `%22` 时可能无法显示的问题
|
||||
6. `F` 修复了 `vue3` 使用 `highlight` 插件可能报错的问题
|
||||
## v2.4.0（2022-08-27）
|
||||
1. `A` 增加了 [setPlaybackRate](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#setPlaybackRate) 的 `api`，可以设置音视频的播放速率 [详细](https://github.com/jin-yufeng/mp-html/issues/452)
|
||||
2. `A` 示例小程序代码开源 [详细](https://github.com/jin-yufeng/mp-html-demo)
|
||||
3. `U` 优化 `ready` 事件触发时机，未设置懒加载的情况下基本可以准确触发 [详细](https://github.com/jin-yufeng/mp-html/issues/195)
|
||||
4. `U` `highlight` 插件在编辑状态下不进行高亮处理，便于编辑
|
||||
5. `F` 修复了 `flex` 布局下图片大小可能不正确的问题
|
||||
6. `F` 修复了 `selectable` 属性没有设置 `force` 也可能出现渲染异常的问题
|
||||
7. `F` 修复了表格中的图片大小可能不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/448)
|
||||
8. `F` 修复了含有合并单元格的表格可能无法设置竖直对齐的问题
|
||||
9. `F` 修复了 `editable` 插件在 `scroll-view` 中使用时工具条位置可能不正确的问题
|
||||
10. `F` 修复了 `vue3` 使用 [search](advanced/plugin#search) 插件可能导致错误换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/449)
|
||||
## v2.3.2（2022-08-13）
|
||||
1. `A` 增加 [latex](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#latex) 插件，可以渲染数学公式 [详细](https://github.com/jin-yufeng/mp-html/pull/447) by [@Zeng-J](https://github.com/Zeng-J)
|
||||
2. `U` 优化根节点下有很多标签的长内容渲染速度
|
||||
3. `U` `highlight` 插件适配 `lang-xxx` 格式
|
||||
4. `F` 修复了 `table` 标签设置 `border` 属性后可能无法修改边框样式的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/439) by [@zouxingjie](https://github.com/zouxingjie)
|
||||
5. `F` 修复了 `editable` 插件输入连续空格无效的问题
|
||||
6. `F` 修复了 `vue3` 图片设置 `inline` 会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/438)
|
||||
7. `F` 修复了 `vue3` 使用 `table` 可能报错的问题
|
||||
## v2.3.1（2022-05-20）
|
||||
1. `U` `app` 端支持使用本地图片
|
||||
2. `U` 优化了微信小程序 `selectable` 属性在 `ios` 端的处理 [详细](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable)
|
||||
3. `F` 修复了 `editable` 插件不在顶部时 `tooltip` 位置可能错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/430)
|
||||
4. `F` 修复了 `vue3` 运行到微信小程序可能报错丢失内容的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/414)
|
||||
5. `F` 修复了 `vue3` 部分标签可能被错误换行的问题
|
||||
6. `F` 修复了 `editable` 插件 `app` 端插入视频无法预览的问题
|
||||
## v2.3.0（2022-04-01）
|
||||
1. `A` 增加了 `play` 事件，音视频播放时触发，可用于与页面其他音视频进行互斥播放 [详细](basic/event#play)
|
||||
2. `U` `show-img-menu` 属性支持控制预览时是否长按弹出菜单
|
||||
3. `U` 优化 `wxs` 处理，提高渲染性能 [详细](https://developers.weixin.qq.com/community/develop/article/doc/0006cc2b204740f601bd43fa25a413)
|
||||
4. `U` `video` 标签支持 `object-fit` 属性
|
||||
5. `U` 增加支持一些常用实体编码 [详细](https://github.com/jin-yufeng/mp-html/issues/418)
|
||||
6. `F` 修复了图片仅设置高度可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/410)
|
||||
7. `F` 修复了 `video` 标签高度设置为 `auto` 不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/411)
|
||||
8. `F` 修复了使用 `grid` 布局时可能样式错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/413)
|
||||
9. `F` 修复了含有合并单元格的表格部分情况下显示异常的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/417)
|
||||
10. `F` 修复了 `editable` 插件连续插入内容时顺序不正确的问题
|
||||
11. `F` 修复了 `uni-app` 包 `vue3` 使用 `audio` 插件报错的问题
|
||||
12. `F` 修复了 `uni-app` 包 `highlight` 插件使用自定义的 `prism.min.js` 报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/416)
|
||||
## v2.2.2（2022-02-26）
|
||||
1. `A` 增加了 [pauseMedia](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#pauseMedia) 的 `api`，可用于暂停播放音视频 [详细](https://github.com/jin-yufeng/mp-html/issues/317)
|
||||
2. `U` 优化了长内容的加载速度
|
||||
3. `U` 适配 `vue3` [#389](https://github.com/jin-yufeng/mp-html/issues/389)、[#398](https://github.com/jin-yufeng/mp-html/pull/398) by [@zhouhuafei](https://github.com/zhouhuafei)、[#400](https://github.com/jin-yufeng/mp-html/issues/400)
|
||||
4. `F` 修复了小程序端图片高度设置为百分比时可能不显示的问题
|
||||
5. `F` 修复了 `highlight` 插件部分情况下可能显示不完整的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/403)
|
||||
## v2.2.1（2021-12-24）
|
||||
1. `A` `editable` 插件增加上下移动标签功能
|
||||
2. `U` `editable` 插件支持在文本中间光标处插入内容
|
||||
3. `F` 修复了 `nvue` 端设置 `margin` 后可能导致高度不正确的问题
|
||||
4. `F` 修复了 `highlight` 插件使用压缩版的 `prism.css` 可能导致背景失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/367)
|
||||
5. `F` 修复了编辑状态下使用 `emoji` 插件内容为空时可能报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/371)
|
||||
6. `F` 修复了使用 `editable` 插件后将 `selectable` 属性设置为 `force` 不生效的问题
|
||||
## v2.2.0（2021-10-12）
|
||||
1. `A` 增加 `customElements` 配置项，便于添加自定义功能性标签 [详细](https://github.com/jin-yufeng/mp-html/issues/350)
|
||||
2. `A` `editable` 插件增加切换音视频自动播放状态的功能 [详细](https://github.com/jin-yufeng/mp-html/pull/341) by [@leeseett](https://github.com/leeseett)
|
||||
3. `A` `editable` 插件删除媒体标签时触发 `remove` 事件，便于删除已上传的文件
|
||||
4. `U` `editable` 插件 `insertImg` 方法支持同时插入多张图片 [详细](https://github.com/jin-yufeng/mp-html/issues/342)
|
||||
5. `U` `editable` 插入图片和音视频时支持拼接 `domian` 主域名
|
||||
6. `F` 修复了内部链接参数中包含 `://` 时被认为是外部链接的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/356)
|
||||
7. `F` 修复了部分 `svg` 标签名或属性名大小写不正确时不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/351)
|
||||
8. `F` 修复了 `nvue` 页面运行到非 `app` 平台时可能样式错误的问题
|
||||
## v2.1.5（2021-08-13）
|
||||
1. `A` 增加支持标签的 `dir` 属性
|
||||
2. `F` 修复了 `ruby` 标签文字与拼音没有居中对齐的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/325)
|
||||
3. `F` 修复了音视频标签内有 `a` 标签时可能无法播放的问题
|
||||
4. `F` 修复了 `externStyle` 中的 `class` 名包含下划线或数字时可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326)
|
||||
5. `F` 修复了 `h5` 端引入 `externStyle` 可能不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326)
|
||||
## v2.1.4（2021-07-14）
|
||||
1. `F` 修复了 `rt` 标签无法设置样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/318)
|
||||
2. `F` 修复了表格中有单元格同时合并行和列时可能显示不正确的问题
|
||||
3. `F` 修复了 `app` 端无法关闭图片长按菜单的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/322)
|
||||
4. `F` 修复了 `editable` 插件只能添加图片链接不能修改的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/312) by [@leeseett](https://github.com/leeseett)
|
||||
## v2.1.3（2021-06-12）
|
||||
1. `A` `editable` 插件增加 `insertTable` 方法
|
||||
2. `U` `editable` 插件支持编辑表格中的空白单元格 [详细](https://github.com/jin-yufeng/mp-html/issues/310)
|
||||
3. `F` 修复了 `externStyle` 中使用伪类可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/298)
|
||||
4. `F` 修复了多个组件同时使用时 `tag-style` 属性时可能互相影响的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/305) by [@woodguoyu](https://github.com/woodguoyu)
|
||||
5. `F` 修复了包含 `linearGradient` 的 `svg` 可能无法显示的问题
|
||||
6. `F` 修复了编译到头条小程序时可能报错的问题
|
||||
7. `F` 修复了 `nvue` 端不触发 `click` 事件的问题
|
||||
8. `F` 修复了 `editable` 插件尾部插入时无法撤销的问题
|
||||
9. `F` 修复了 `editable` 插件的 `insertHtml` 方法只能在末尾插入的问题
|
||||
10. `F` 修复了 `editable` 插件插入音频不显示的问题
|
||||
## v2.1.2（2021-04-24）
|
||||
1. `A` 增加了 [img-cache](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#img-cache) 插件，可以在 `app` 端缓存图片 [详细](https://github.com/jin-yufeng/mp-html/issues/292) by [@PentaTea](https://github.com/PentaTea)
|
||||
2. `U` 支持通过 `container-style` 属性设置 `white-space` 来保留连续空格和换行符 [详细](https://jin-yufeng.gitee.io/mp-html/#/question/faq#space)
|
||||
3. `U` 代码风格符合 [standard](https://standardjs.com) 标准
|
||||
4. `U` `editable` 插件编辑状态下支持预览视频 [详细](https://github.com/jin-yufeng/mp-html/issues/286)
|
||||
5. `F` 修复了 `svg` 标签内嵌 `svg` 时无法显示的问题
|
||||
6. `F` 修复了编译到支付宝和头条小程序时部分区域不可复制的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/291)
|
||||
## v2.1.1（2021-04-09）
|
||||
1. 修复了对 `p` 标签设置 `tag-style` 可能不生效的问题
|
||||
2. 修复了 `svg` 标签中的文本无法显示的问题
|
||||
3. 修复了使用 `editable` 插件编辑表格时可能报错的问题
|
||||
4. 修复了使用 `highlight` 插件运行到头条小程序时可能没有样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/280)
|
||||
5. 修复了使用 `editable` 插件 `editable` 属性为 `false` 时会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/284)
|
||||
6. 修复了 `style` 插件连续子选择器失效的问题
|
||||
7. 修复了 `editable` 插件无法修改图片和字体大小的问题
|
||||
## v2.1.0.2（2021-03-21）
|
||||
修复了 `nvue` 端使用可能报错的问题
|
||||
## v2.1.0（2021-03-20）
|
||||
1. `A` 增加了 [container-style](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#container-style) 属性 [详细](https://gitee.com/jin-yufeng/mp-html/pulls/1)
|
||||
2. `A` 增加支持 `strike` 标签
|
||||
3. `A` `editable` 插件增加 `placeholder` 属性 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable)
|
||||
4. `A` `editable` 插件增加 `insertHtml` 方法 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable)
|
||||
5. `U` 外部样式支持标签名选择器 [详细](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart#setting)
|
||||
6. `F` 修复了 `nvue` 端部分情况下可能不显示的问题
|
||||
## v2.0.5（2021-03-12）
|
||||
1. `U` [linktap](https://jin-yufeng.gitee.io/mp-html/#/basic/event#linktap) 事件增加返回内部文本内容 `innerText` [详细](https://github.com/jin-yufeng/mp-html/issues/271)
|
||||
2. `U` [selectable](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable) 属性设置为 `force` 时能够在微信 `iOS` 端生效（文本块会变成 `inline-block`） [详细](https://github.com/jin-yufeng/mp-html/issues/267)
|
||||
3. `F` 修复了部分情况下竖向无法滚动的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/182)
|
||||
4. `F` 修复了多次修改富文本数据时部分内容可能不显示的问题
|
||||
5. `F` 修复了 [腾讯视频](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#txv-video) 插件可能无法播放的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/265)
|
||||
6. `F` 修复了 [highlight](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#highlight) 插件没有设置高亮语言时没有应用默认样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/276) by [@fuzui](https://github.com/fuzui)
|
||||
498
uni_modules/mp-html/components/mp-html/mp-html.vue
Normal file
498
uni_modules/mp-html/components/mp-html/mp-html.vue
Normal file
@@ -0,0 +1,498 @@
|
||||
<template>
|
||||
<view id="_root" :class="(selectable?'_select ':'')+'_root'" :style="containerStyle">
|
||||
<slot v-if="!nodes[0]" />
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu,selectable]" name="span" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<web-view ref="web" src="/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* mp-html v2.4.3
|
||||
* @description 富文本组件
|
||||
* @tutorial https://github.com/jin-yufeng/mp-html
|
||||
* @property {String} container-style 容器的样式
|
||||
* @property {String} content 用于渲染的 html 字符串
|
||||
* @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
|
||||
* @property {String} domain 主域名，用于拼接链接
|
||||
* @property {String} error-img 图片出错时的占位图链接
|
||||
* @property {Boolean} lazy-load 是否开启图片懒加载
|
||||
* @property {string} loading-img 图片加载过程中的占位图链接
|
||||
* @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
|
||||
* @property {Boolean} preview-img 是否允许图片被点击时自动预览
|
||||
* @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
|
||||
* @property {Boolean | String} selectable 是否开启长按复制
|
||||
* @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
|
||||
* @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
|
||||
* @property {Object} tag-style 标签的默认样式
|
||||
* @property {Boolean | Number} use-anchor 是否使用锚点链接
|
||||
* @event {Function} load dom 结构加载完毕时触发
|
||||
* @event {Function} ready 所有图片加载完毕时触发
|
||||
* @event {Function} imgtap 图片被点击时触发
|
||||
* @event {Function} linktap 链接被点击时触发
|
||||
* @event {Function} play 音视频播放时触发
|
||||
* @event {Function} error 媒体加载出错时触发
|
||||
*/
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
import node from './node/node'
|
||||
// #endif
|
||||
import Parser from './parser'
|
||||
const plugins=[]
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
const dom = weex.requireModule('dom')
|
||||
// #endif
|
||||
export default {
|
||||
name: 'mp-html',
|
||||
data () {
|
||||
return {
|
||||
nodes: [],
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
height: 3
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
props: {
|
||||
containerStyle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
copyLink: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
domain: String,
|
||||
errorImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
lazyLoad: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
loadingImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
pauseVideo: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
previewImg: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
scrollTable: [Boolean, String],
|
||||
selectable: [Boolean, String],
|
||||
setTitle: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
showImgMenu: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
tagStyle: Object,
|
||||
useAnchor: [Boolean, Number]
|
||||
},
|
||||
// #ifdef VUE3
|
||||
emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
|
||||
// #endif
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
components: {
|
||||
node
|
||||
},
|
||||
// #endif
|
||||
watch: {
|
||||
content (content) {
|
||||
this.setContent(content)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.plugins = []
|
||||
for (let i = plugins.length; i--;) {
|
||||
this.plugins.push(new plugins[i](this))
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.content && !this.nodes.length) {
|
||||
this.setContent(this.content)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this._hook('onDetached')
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description 将锚点跳转的范围限定在一个 scroll-view 内
|
||||
* @param {Object} page scroll-view 所在页面的示例
|
||||
* @param {String} selector scroll-view 的选择器
|
||||
* @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
|
||||
*/
|
||||
in (page, selector, scrollTop) {
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
if (page && selector && scrollTop) {
|
||||
this._in = {
|
||||
page,
|
||||
selector,
|
||||
scrollTop
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 锚点跳转
|
||||
* @param {String} id 要跳转的锚点 id
|
||||
* @param {Number} offset 跳转位置的偏移量
|
||||
* @returns {Promise}
|
||||
*/
|
||||
navigateTo (id, offset) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!this.useAnchor) {
|
||||
reject(Error('Anchor is disabled'))
|
||||
return
|
||||
}
|
||||
offset = offset || parseInt(this.useAnchor) || 0
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
if (!id) {
|
||||
dom.scrollToElement(this.$refs.web, {
|
||||
offset
|
||||
})
|
||||
resolve()
|
||||
} else {
|
||||
this._navigateTo = {
|
||||
resolve,
|
||||
reject,
|
||||
offset
|
||||
}
|
||||
this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
|
||||
}
|
||||
// #endif
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
let deep = ' '
|
||||
// #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
|
||||
deep = '>>>'
|
||||
// #endif
|
||||
const selector = uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this._in ? this._in.page : this)
|
||||
// #endif
|
||||
.select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
|
||||
if (this._in) {
|
||||
selector.select(this._in.selector).scrollOffset()
|
||||
.select(this._in.selector).boundingClientRect()
|
||||
} else {
|
||||
// 获取 scroll-view 的位置和滚动距离
|
||||
selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
|
||||
}
|
||||
selector.exec(res => {
|
||||
if (!res[0]) {
|
||||
reject(Error('Label not found'))
|
||||
return
|
||||
}
|
||||
const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
|
||||
if (this._in) {
|
||||
// scroll-view 跳转
|
||||
this._in.page[this._in.scrollTop] = scrollTop
|
||||
} else {
|
||||
// 页面跳转
|
||||
uni.pageScrollTo({
|
||||
scrollTop,
|
||||
duration: 300
|
||||
})
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取文本内容
|
||||
* @return {String}
|
||||
*/
|
||||
getText (nodes) {
|
||||
let text = '';
|
||||
(function traversal (nodes) {
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i]
|
||||
if (node.type === 'text') {
|
||||
text += node.text.replace(/&/g, '&')
|
||||
} else if (node.name === 'br') {
|
||||
text += '\n'
|
||||
} else {
|
||||
// 块级标签前后加换行
|
||||
const isBlock = node.name === 'p' || node.name === 'div' || node.name === 'tr' || node.name === 'li' || (node.name[0] === 'h' && node.name[1] > '0' && node.name[1] < '7')
|
||||
if (isBlock && text && text[text.length - 1] !== '\n') {
|
||||
text += '\n'
|
||||
}
|
||||
// 递归获取子节点的文本
|
||||
if (node.children) {
|
||||
traversal(node.children)
|
||||
}
|
||||
if (isBlock && text[text.length - 1] !== '\n') {
|
||||
text += '\n'
|
||||
} else if (node.name === 'td' || node.name === 'th') {
|
||||
text += '\t'
|
||||
}
|
||||
}
|
||||
}
|
||||
})(nodes || this.nodes)
|
||||
return text
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取内容大小和位置
|
||||
* @return {Promise}
|
||||
*/
|
||||
getRect () {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.createSelectorQuery()
|
||||
// #ifndef MP-ALIPAY
|
||||
.in(this)
|
||||
// #endif
|
||||
.select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 暂停播放媒体
|
||||
*/
|
||||
pauseMedia () {
|
||||
for (let i = (this._videos || []).length; i--;) {
|
||||
this._videos[i].pause()
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
let page = this.$parent
|
||||
while (!page.$scope) page = page.$parent
|
||||
page.$scope.$getAppWebview().evalJS(command)
|
||||
// #endif
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
this.$refs.web.evalJs(command)
|
||||
// #endif
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 设置媒体播放速率
|
||||
* @param {Number} rate 播放速率
|
||||
*/
|
||||
setPlaybackRate (rate) {
|
||||
this.playbackRate = rate
|
||||
for (let i = (this._videos || []).length; i--;) {
|
||||
this._videos[i].playbackRate(rate)
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].playbackRate=' + rate
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
let page = this.$parent
|
||||
while (!page.$scope) page = page.$parent
|
||||
page.$scope.$getAppWebview().evalJS(command)
|
||||
// #endif
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
this.$refs.web.evalJs(command)
|
||||
// #endif
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 设置内容
|
||||
* @param {String} content html 内容
|
||||
* @param {Boolean} append 是否在尾部追加
|
||||
*/
|
||||
setContent (content, append) {
|
||||
if (!append || !this.imgList) {
|
||||
this.imgList = []
|
||||
}
|
||||
const nodes = new Parser(this).parse(content)
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
if (this._ready) {
|
||||
this._set(nodes, append)
|
||||
}
|
||||
// #endif
|
||||
this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
|
||||
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
this._videos = []
|
||||
this.$nextTick(() => {
|
||||
this._hook('onLoad')
|
||||
this.$emit('load')
|
||||
})
|
||||
|
||||
if (this.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) {
|
||||
// 设置懒加载，每 350ms 获取高度，不变则认为加载完毕
|
||||
let height = 0
|
||||
const callback = rect => {
|
||||
if (!rect || !rect.height) rect = {}
|
||||
// 350ms 总高度无变化就触发 ready 事件
|
||||
if (rect.height === height) {
|
||||
this.$emit('ready', rect)
|
||||
} else {
|
||||
height = rect.height
|
||||
setTimeout(() => {
|
||||
this.getRect().then(callback).catch(callback)
|
||||
}, 350)
|
||||
}
|
||||
}
|
||||
this.getRect().then(callback).catch(callback)
|
||||
} else {
|
||||
// 未设置懒加载，等待所有图片加载完毕
|
||||
if (!this.imgList._unloadimgs) {
|
||||
this.getRect().then(rect => {
|
||||
this.$emit('ready', rect)
|
||||
}).catch(() => {
|
||||
this.$emit('ready', {})
|
||||
})
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 调用插件钩子函数
|
||||
*/
|
||||
_hook (name) {
|
||||
for (let i = plugins.length; i--;) {
|
||||
if (this.plugins[i][name]) {
|
||||
this.plugins[i][name]()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
/**
|
||||
* @description 设置内容
|
||||
*/
|
||||
_set (nodes, append) {
|
||||
this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes).replace(/%22/g, '') + ',' + JSON.stringify([this.containerStyle.replace(/(?:margin|padding)[^;]+/g, ''), this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 接收到 web-view 消息
|
||||
*/
|
||||
_onMessage (e) {
|
||||
const message = e.detail.data[0]
|
||||
switch (message.action) {
|
||||
// web-view 初始化完毕
|
||||
case 'onJSBridgeReady':
|
||||
this._ready = true
|
||||
if (this.nodes) {
|
||||
this._set(this.nodes)
|
||||
}
|
||||
break
|
||||
// 内容 dom 加载完毕
|
||||
case 'onLoad':
|
||||
this.height = message.height
|
||||
this._hook('onLoad')
|
||||
this.$emit('load')
|
||||
break
|
||||
// 所有图片加载完毕
|
||||
case 'onReady':
|
||||
this.getRect().then(res => {
|
||||
this.$emit('ready', res)
|
||||
}).catch(() => {
|
||||
this.$emit('ready', {})
|
||||
})
|
||||
break
|
||||
// 总高度发生变化
|
||||
case 'onHeightChange':
|
||||
this.height = message.height
|
||||
break
|
||||
// 图片点击
|
||||
case 'onImgTap':
|
||||
this.$emit('imgtap', message.attrs)
|
||||
if (this.previewImg) {
|
||||
uni.previewImage({
|
||||
current: parseInt(message.attrs.i),
|
||||
urls: this.imgList
|
||||
})
|
||||
}
|
||||
break
|
||||
// 链接点击
|
||||
case 'onLinkTap': {
|
||||
const href = message.attrs.href
|
||||
this.$emit('linktap', message.attrs)
|
||||
if (href) {
|
||||
// 锚点跳转
|
||||
if (href[0] === '#') {
|
||||
if (this.useAnchor) {
|
||||
dom.scrollToElement(this.$refs.web, {
|
||||
offset: message.offset
|
||||
})
|
||||
}
|
||||
} else if (href.includes('://')) {
|
||||
// 打开外链
|
||||
if (this.copyLink) {
|
||||
plus.runtime.openWeb(href)
|
||||
}
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: href,
|
||||
fail () {
|
||||
uni.switchTab({
|
||||
url: href
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'onPlay':
|
||||
this.$emit('play')
|
||||
break
|
||||
// 获取到锚点的偏移量
|
||||
case 'getOffset':
|
||||
if (typeof message.offset === 'number') {
|
||||
dom.scrollToElement(this.$refs.web, {
|
||||
offset: message.offset + this._navigateTo.offset
|
||||
})
|
||||
this._navigateTo.resolve()
|
||||
} else {
|
||||
this._navigateTo.reject(Error('Label not found'))
|
||||
}
|
||||
break
|
||||
// 点击
|
||||
case 'onClick':
|
||||
this.$emit('tap')
|
||||
this.$emit('click')
|
||||
break
|
||||
// 出错
|
||||
case 'onError':
|
||||
this.$emit('error', {
|
||||
source: message.source,
|
||||
attrs: message.attrs
|
||||
})
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
/* 根节点样式 */
|
||||
._root {
|
||||
padding: 1px 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 长按复制 */
|
||||
._select {
|
||||
user-select: text;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
579
uni_modules/mp-html/components/mp-html/node/node.vue
Normal file
579
uni_modules/mp-html/components/mp-html/node/node.vue
Normal file
@@ -0,0 +1,579 @@
|
||||
<template>
|
||||
<view :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="attrs.style">
|
||||
<block v-for="(n, i) in childs" v-bind:key="i">
|
||||
<!-- 图片 -->
|
||||
<!-- 占位图 -->
|
||||
<image v-if="n.name==='img'&&!n.t&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
|
||||
<!-- 显示图片 -->
|
||||
<!-- #ifdef H5 || (APP-PLUS && VUE2) -->
|
||||
<img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 || (APP-PLUS && VUE2) -->
|
||||
<!-- 表格中的图片，使用 rich-text 防止大小不正确 -->
|
||||
<rich-text v-if="n.name==='img'&&n.t" :style="'display:'+n.t" :nodes="[{attrs:{style:n.attrs.style||'',src:n.attrs.src},name:'img'}]" :data-i="i" @tap.stop="imgTap" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 || APP-PLUS || MP-KUAISHOU -->
|
||||
<image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:1px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="opts[3]&&!n.attrs.ignore" :image-menu-prevent="!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-KUAISHOU -->
|
||||
<image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src" :lazy-load="opts[0]" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS && VUE3 -->
|
||||
<image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||''))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
|
||||
<!-- #endif -->
|
||||
<!-- 文本 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<text v-else-if="n.text" :user-select="opts[4]=='force'&&isiOS" decode>{{n.text}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN || MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
|
||||
<text v-else-if="n.text" decode>{{n.text}}</text>
|
||||
<!-- #endif -->
|
||||
<text v-else-if="n.name==='br'">\n</text>
|
||||
<!-- 链接 -->
|
||||
<view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
|
||||
<node name="span" :childs="n.children" :opts="opts" style="display:inherit" />
|
||||
</view>
|
||||
<!-- 视频 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-else-if="n.html" :id="n.attrs.id" :class="'_video '+n.attrs.class" :style="n.attrs.style" v-html="n.html" @vplay.stop="play" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<video v-else-if="n.name==='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :object-fit="n.attrs['object-fit']" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<iframe v-else-if="n.name==='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" :src="n.attrs.src" />
|
||||
<embed v-else-if="n.name==='embed'" :style="n.attrs.style" :src="n.attrs.src" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-TOUTIAO || ((H5 || APP-PLUS) && VUE3) -->
|
||||
<!-- 音频 -->
|
||||
<audio v-else-if="n.name==='audio'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
|
||||
<!-- #endif -->
|
||||
<view v-else-if="(n.name==='table'&&n.c)||n.name==='li'" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.attrs.style">
|
||||
<node v-if="n.name==='li'" :childs="n.children" :opts="opts" />
|
||||
<view v-else v-for="(tbody, x) in n.children" v-bind:key="x" :class="'_'+tbody.name+' '+tbody.attrs.class" :style="tbody.attrs.style">
|
||||
<node v-if="tbody.name==='td'||tbody.name==='th'" :childs="tbody.children" :opts="opts" />
|
||||
<block v-else v-for="(tr, y) in tbody.children" v-bind:key="y">
|
||||
<view v-if="tr.name==='td'||tr.name==='th'" :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
|
||||
<node :childs="tr.children" :opts="opts" />
|
||||
</view>
|
||||
<view v-else :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
|
||||
<view v-for="(td, z) in tr.children" v-bind:key="z" :class="'_'+td.name+' '+td.attrs.class" :style="td.attrs.style">
|
||||
<node :childs="td.children" :opts="opts" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 富文本 -->
|
||||
<!-- #ifdef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
|
||||
<rich-text v-else-if="!n.c&&!handler.isInline(n.name, n.attrs.style)" :id="n.attrs.id" :style="n.f" :user-select="opts[4]" :nodes="[n]" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
|
||||
<rich-text v-else-if="!n.c" :id="n.attrs.id" :style="'display:inline;'+n.f" :preview="false" :selectable="opts[4]" :user-select="opts[4]" :nodes="[n]" />
|
||||
<!-- #endif -->
|
||||
<!-- 继续递归 -->
|
||||
<view v-else-if="n.c===2" :id="n.attrs.id" :class="'_block _'+n.name+' '+n.attrs.class" :style="n.f+';'+n.attrs.style">
|
||||
<node v-for="(n2, j) in n.children" v-bind:key="j" :style="n2.f" :name="n2.name" :attrs="n2.attrs" :childs="n2.children" :opts="opts" />
|
||||
</view>
|
||||
<node v-else :style="n.f" :name="n.name" :attrs="n.attrs" :childs="n.children" :opts="opts" />
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script module="handler" lang="wxs">
|
||||
// 行内标签列表
|
||||
var inlineTags = {
|
||||
abbr: true,
|
||||
b: true,
|
||||
big: true,
|
||||
code: true,
|
||||
del: true,
|
||||
em: true,
|
||||
i: true,
|
||||
ins: true,
|
||||
label: true,
|
||||
q: true,
|
||||
small: true,
|
||||
span: true,
|
||||
strong: true,
|
||||
sub: true,
|
||||
sup: true
|
||||
}
|
||||
/**
|
||||
* @description 判断是否为行内标签
|
||||
*/
|
||||
module.exports = {
|
||||
isInline: function (tagName, style) {
|
||||
return inlineTags[tagName] || (style || '').indexOf('display:inline') !== -1
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
|
||||
import node from './node'
|
||||
export default {
|
||||
name: 'node',
|
||||
options: {
|
||||
// #ifdef MP-WEIXIN
|
||||
virtualHost: true,
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
addGlobalClass: false
|
||||
// #endif
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ctrl: {},
|
||||
// #ifdef MP-WEIXIN
|
||||
isiOS: uni.getSystemInfoSync().system.includes('iOS')
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
attrs: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
childs: Array,
|
||||
opts: Array
|
||||
},
|
||||
components: {
|
||||
|
||||
// #ifndef (H5 || APP-PLUS) && VUE3
|
||||
node
|
||||
// #endif
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
for (this.root = this.$parent; this.root.$options.name !== 'mp-html'; this.root = this.root.$parent);
|
||||
})
|
||||
// #ifdef H5 || APP-PLUS
|
||||
if (this.opts[0]) {
|
||||
let i
|
||||
for (i = this.childs.length; i--;) {
|
||||
if (this.childs[i].name === 'img') break
|
||||
}
|
||||
if (i !== -1) {
|
||||
this.observer = uni.createIntersectionObserver(this).relativeToViewport({
|
||||
top: 500,
|
||||
bottom: 500
|
||||
})
|
||||
this.observer.observe('._img', res => {
|
||||
if (res.intersectionRatio) {
|
||||
this.$set(this.ctrl, 'load', 1)
|
||||
this.observer.disconnect()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
beforeDestroy () {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
if (this.observer) {
|
||||
this.observer.disconnect()
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
methods:{
|
||||
// #ifdef MP-WEIXIN
|
||||
toJSON () { return this },
|
||||
// #endif
|
||||
/**
|
||||
* @description 播放视频事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
play (e) {
|
||||
this.root.$emit('play')
|
||||
// #ifndef APP-PLUS
|
||||
if (this.root.pauseVideo) {
|
||||
let flag = false
|
||||
const id = e.target.id
|
||||
for (let i = this.root._videos.length; i--;) {
|
||||
if (this.root._videos[i].id === id) {
|
||||
flag = true
|
||||
} else {
|
||||
this.root._videos[i].pause() // 自动暂停其他视频
|
||||
}
|
||||
}
|
||||
// 将自己加入列表
|
||||
if (!flag) {
|
||||
const ctx = uni.createVideoContext(id
|
||||
// #ifndef MP-BAIDU
|
||||
, this
|
||||
// #endif
|
||||
)
|
||||
ctx.id = id
|
||||
if (this.root.playbackRate) {
|
||||
ctx.playbackRate(this.root.playbackRate)
|
||||
}
|
||||
this.root._videos.push(ctx)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 图片点击事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
imgTap (e) {
|
||||
const node = this.childs[e.currentTarget.dataset.i]
|
||||
if (node.a) {
|
||||
this.linkTap(node.a)
|
||||
return
|
||||
}
|
||||
if (node.attrs.ignore) return
|
||||
// #ifdef H5 || APP-PLUS
|
||||
node.attrs.src = node.attrs.src || node.attrs['data-src']
|
||||
// #endif
|
||||
this.root.$emit('imgtap', node.attrs)
|
||||
// 自动预览图片
|
||||
if (this.root.previewImg) {
|
||||
uni.previewImage({
|
||||
// #ifdef MP-WEIXIN
|
||||
showmenu: this.root.showImgMenu,
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
enablesavephoto: this.root.showImgMenu,
|
||||
enableShowPhotoDownload: this.root.showImgMenu,
|
||||
// #endif
|
||||
current: parseInt(node.attrs.i),
|
||||
urls: this.root.imgList
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 图片长按
|
||||
*/
|
||||
imgLongTap (e) {
|
||||
// #ifdef APP-PLUS
|
||||
const attrs = this.childs[e.currentTarget.dataset.i].attrs
|
||||
if (this.opts[3] && !attrs.ignore) {
|
||||
uni.showActionSheet({
|
||||
itemList: ['保存图片'],
|
||||
success: () => {
|
||||
const save = path => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: path,
|
||||
success () {
|
||||
uni.showToast({
|
||||
title: '保存成功'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
if (this.root.imgList[attrs.i].startsWith('http')) {
|
||||
uni.downloadFile({
|
||||
url: this.root.imgList[attrs.i],
|
||||
success: res => save(res.tempFilePath)
|
||||
})
|
||||
} else {
|
||||
save(this.root.imgList[attrs.i])
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 图片加载完成事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
imgLoad (e) {
|
||||
const i = e.currentTarget.dataset.i
|
||||
/* #ifndef H5 || (APP-PLUS && VUE2) */
|
||||
if (!this.childs[i].w) {
|
||||
// 设置原宽度
|
||||
this.$set(this.ctrl, i, e.detail.width)
|
||||
} else /* #endif */ if ((this.opts[1] && !this.ctrl[i]) || this.ctrl[i] === -1) {
|
||||
// 加载完毕，取消加载中占位图
|
||||
this.$set(this.ctrl, i, 1)
|
||||
}
|
||||
this.checkReady()
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 检查是否所有图片加载完毕
|
||||
*/
|
||||
checkReady () {
|
||||
if (this.root && !this.root.lazyLoad) {
|
||||
this.root._unloadimgs -= 1
|
||||
if (!this.root._unloadimgs) {
|
||||
setTimeout(() => {
|
||||
this.root.getRect().then(rect => {
|
||||
this.root.$emit('ready', rect)
|
||||
}).catch(() => {
|
||||
this.root.$emit('ready', {})
|
||||
})
|
||||
}, 350)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 链接点击事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
linkTap (e) {
|
||||
const node = e.currentTarget ? this.childs[e.currentTarget.dataset.i] : {}
|
||||
const attrs = node.attrs || e
|
||||
const href = attrs.href
|
||||
this.root.$emit('linktap', Object.assign({
|
||||
innerText: this.root.getText(node.children || []) // 链接内的文本内容
|
||||
}, attrs))
|
||||
if (href) {
|
||||
if (href[0] === '#') {
|
||||
// 跳转锚点
|
||||
this.root.navigateTo(href.substring(1)).catch(() => { })
|
||||
} else if (href.split('?')[0].includes('://')) {
|
||||
// 复制外部链接
|
||||
if (this.root.copyLink) {
|
||||
// #ifdef H5
|
||||
window.open(href)
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.setClipboardData({
|
||||
data: href,
|
||||
success: () =>
|
||||
uni.showToast({
|
||||
title: '链接已复制'
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.openWeb(href)
|
||||
// #endif
|
||||
}
|
||||
} else {
|
||||
// 跳转页面
|
||||
uni.navigateTo({
|
||||
url: href,
|
||||
fail () {
|
||||
uni.switchTab({
|
||||
url: href,
|
||||
fail () { }
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 错误事件
|
||||
* @param {Event} e
|
||||
*/
|
||||
mediaError (e) {
|
||||
const i = e.currentTarget.dataset.i
|
||||
const node = this.childs[i]
|
||||
// 加载其他源
|
||||
if (node.name === 'video' || node.name === 'audio') {
|
||||
let index = (this.ctrl[i] || 0) + 1
|
||||
if (index > node.src.length) {
|
||||
index = 0
|
||||
}
|
||||
if (index < node.src.length) {
|
||||
this.$set(this.ctrl, i, index)
|
||||
return
|
||||
}
|
||||
} else if (node.name === 'img') {
|
||||
// #ifdef H5 && VUE3
|
||||
if (this.opts[0] && !this.ctrl.load) return
|
||||
// #endif
|
||||
// 显示错误占位图
|
||||
if (this.opts[2]) {
|
||||
this.$set(this.ctrl, i, -1)
|
||||
}
|
||||
this.checkReady()
|
||||
}
|
||||
if (this.root) {
|
||||
this.root.$emit('error', {
|
||||
source: node.name,
|
||||
attrs: node.attrs,
|
||||
// #ifndef H5 && VUE3
|
||||
errMsg: e.detail.errMsg
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* a 标签默认效果 */
|
||||
._a {
|
||||
padding: 1.5px 0 1.5px 0;
|
||||
color: #366092;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* a 标签点击态效果 */
|
||||
._hover {
|
||||
text-decoration: underline;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 图片默认效果 */
|
||||
._img {
|
||||
max-width: 100%;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
/* 内部样式 */
|
||||
|
||||
._block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
._b,
|
||||
._strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
._code {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
._del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
._em,
|
||||
._i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
._h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
._h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
._h3 {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
|
||||
._h5 {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
|
||||
._h6 {
|
||||
font-size: 0.67em;
|
||||
}
|
||||
|
||||
._h1,
|
||||
._h2,
|
||||
._h3,
|
||||
._h4,
|
||||
._h5,
|
||||
._h6 {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
._image {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
._ins {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
._li {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
._ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
._ol,
|
||||
._ul {
|
||||
display: block;
|
||||
padding-left: 40px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
._q::before {
|
||||
content: '"';
|
||||
}
|
||||
|
||||
._q::after {
|
||||
content: '"';
|
||||
}
|
||||
|
||||
._sub {
|
||||
font-size: smaller;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
._sup {
|
||||
font-size: smaller;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
._thead,
|
||||
._tbody,
|
||||
._tfoot {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
._tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
._td,
|
||||
._th {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
._th {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
._ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
._ul ._ul {
|
||||
margin: 0;
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
._ul ._ul ._ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
._abbr,
|
||||
._b,
|
||||
._code,
|
||||
._del,
|
||||
._em,
|
||||
._i,
|
||||
._ins,
|
||||
._label,
|
||||
._q,
|
||||
._span,
|
||||
._strong,
|
||||
._sub,
|
||||
._sup {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
._video {
|
||||
width: 300px;
|
||||
height: 225px;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
1372
uni_modules/mp-html/components/mp-html/parser.js
Normal file
1372
uni_modules/mp-html/components/mp-html/parser.js
Normal file
File diff suppressed because it is too large
Load Diff
76
uni_modules/mp-html/package.json
Normal file
76
uni_modules/mp-html/package.json
Normal file
@@ -0,0 +1,76 @@
|
||||
{
|
||||
"id": "mp-html",
|
||||
"displayName": "mp-html 富文本组件【全端支持，支持编辑、latex等扩展】",
|
||||
"version": "v2.4.3",
|
||||
"description": "一个强大的富文本组件，高效轻量，功能丰富",
|
||||
"keywords": [
|
||||
"富文本",
|
||||
"编辑器",
|
||||
"html",
|
||||
"rich-text",
|
||||
"editor"
|
||||
],
|
||||
"repository": "https://github.com/jin-yufeng/mp-html",
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/mp-html",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"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": "u",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
"use strict";function t(t){for(var e=Object.create(null),n=t.attributes.length;n--;)e[t.attributes[n].name]=t.attributes[n].value;return e}function e(){a[1]&&(this.src=a[1],this.onerror=null),this.onclick=null,this.ontouchstart=null,uni.postMessage({data:{action:"onError",source:"img",attrs:t(this)}})}function n(){window.unloadimgs-=1,0===window.unloadimgs&&uni.postMessage({data:{action:"onReady"}})}function o(r,s,c){for(var d=0;d<r.length;d++)!function(d){var u=r[d],l=void 0;if(u.type&&"node"!==u.type)l=document.createTextNode(u.text.replace(/&/g,"&"));else{var g=u.name;"svg"===g&&(c="http://www.w3.org/2000/svg"),"html"!==g&&"body"!==g||(g="div"),l=c?document.createElementNS(c,g):document.createElement(g);for(var p in u.attrs)l.setAttribute(p,u.attrs[p]);if(u.children&&o(u.children,l,c),"img"===g){if(window.unloadimgs+=1,l.onload=n,l.onerror=n,!l.src&&l.getAttribute("data-src")&&(l.src=l.getAttribute("data-src")),u.attrs.ignore||(l.onclick=function(e){e.stopPropagation(),uni.postMessage({data:{action:"onImgTap",attrs:t(this)}})}),a[2]){var h=new Image;h.src=l.src,l.src=a[2],h.onload=function(){l.src=this.src},h.onerror=function(){l.onerror()}}l.onerror=e}else if("a"===g)l.addEventListener("click",function(e){e.stopPropagation(),e.preventDefault();var n,o=this.getAttribute("href");o&&"#"===o[0]&&(n=(document.getElementById(o.substr(1))||{}).offsetTop),uni.postMessage({data:{action:"onLinkTap",attrs:t(this),offset:n}})},!0);else if("video"===g||"audio"===g)i.push(l),u.attrs.autoplay||u.attrs.controls||l.setAttribute("controls","true"),l.onplay=function(){if(uni.postMessage({data:{action:"onPlay"}}),a[3])for(var t=0;t<i.length;t++)i[t]!==this&&i[t].pause()},l.onerror=function(){uni.postMessage({data:{action:"onError",source:g,attrs:t(this)}})};else if("table"===g&&a[4]&&!l.style.cssText.includes("inline")){var f=document.createElement("div");f.style.overflow="auto",f.appendChild(l),l=f}else"svg"===g&&(c=void 0)}s.appendChild(l)}(d)}document.addEventListener("UniAppJSBridgeReady",function(){document.body.onclick=function(){return uni.postMessage({data:{action:"onClick"}})},uni.postMessage({data:{action:"onJSBridgeReady"}})});var a,i=[];window.setContent=function(t,e,n){var r=document.getElementById("content");e[0]&&(document.body.style.cssText=e[0]),e[5]||(r.style.userSelect="none"),n||(r.innerHTML="",i=[]),a=e,window.unloadimgs=0;var s=document.createDocumentFragment();o(t,s),r.appendChild(s);var c=r.scrollHeight;uni.postMessage({data:{action:"onLoad",height:c}}),window.unloadimgs||uni.postMessage({data:{action:"onReady",height:c}}),clearInterval(window.timer),window.timer=setInterval(function(){r.scrollHeight!==c&&(c=r.scrollHeight,uni.postMessage({data:{action:"onHeightChange",height:c}}))},350)},window.onunload=function(){clearInterval(window.timer)};
|
||||
1
uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js
vendored
Normal file
1
uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function t(e,t){return n.call(e,t)}var i=[],a=function(e,n){var t={options:{timestamp:+new Date},name:e,arg:n};if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){if("postMessage"===e){var a={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(a):window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o={type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(o):window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:t,pageId:""},"*");if(0===i.length){var r=plus.webview.currentWebview();if(!r)throw new Error("plus.webview.currentWebview() is undefined");var d=r.parent(),s="";s=d?d.id:r.id,i.push(s)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}},"__uniapp__service");else{var w=JSON.stringify(t);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(w,",").concat(JSON.stringify(i),");"))}},o={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;a("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("redirectTo",{url:encodeURI(n)})},getEnv:function(e){window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a("postMessage",e.data||{})}},r=/uni-app/i.test(navigator.userAgent),d=/Html5Plus/i.test(navigator.userAgent),s=/complete|loaded|interactive/;var w=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var u=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var g=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var v=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);for(var l,_=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},f=[function(e){if(r||d)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&s.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),o},function(e){if(v)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(w){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(u)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){return document.addEventListener("DOMContentLoaded",e),o}],m=0;m<f.length&&!(l=f[m](_));m++);l||(l={});var E="undefined"!=typeof uni?uni:{};if(!E.navigateTo)for(var b in l)t(l,b)&&(E[b]=l[b]);return E.webView=l,E}));
|
||||
1
uni_modules/mp-html/static/app-plus/mp-html/local.html
Normal file
1
uni_modules/mp-html/static/app-plus/mp-html/local.html
Normal file
@@ -0,0 +1 @@
|
||||
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>body,html{width:100%;height:100%;overflow-x:scroll;overflow-y:hidden}body{margin:0}video{width:300px;height:225px}img{max-width:100%;-webkit-touch-callout:none}</style></head><body><div id="content" style="overflow:hidden"></div><script type="text/javascript" src="./js/uni.webview.min.js"></script><script type="text/javascript" src="./js/handler.js"></script></body>
|
||||
131
uni_modules/sp-editor/changelog.md
Normal file
131
uni_modules/sp-editor/changelog.md
Normal file
@@ -0,0 +1,131 @@
|
||||
## 1.5.0（2024-11-01）
|
||||
1. 更新弹窗中使用的示例
|
||||
## 1.4.9（2024-08-30）
|
||||
1. 修复在app端和小程序端插入超链接可能会回显出部分特殊标识的bug
|
||||
## 1.4.8（2024-08-16）
|
||||
1. 有群友反馈，通过wangEditor添加的含有图片的富文本的宽高是在style内联样式中的，但是uni-editor不能解析img标签的内联宽高，因此我封装一个工具方法convertImgStylesToAttributes，处理一下富文本字符串即可，详见示例一
|
||||
## 1.4.7（2024-08-12）
|
||||
1. 新增标题、字体、字体大小、字间距段前后距等工具子级悬浮工具栏
|
||||
2. 对于字体样式：可在组件的data中的fabTools.fontFamily中自行引入添加你本地的自定义字体（app中对于部分css自带的字体例如微软雅黑等不支持，因为app中不自带这些字体，你可能需要自行引入字体文件）
|
||||
## 1.4.6（2024-08-08）
|
||||
1. 修复字体工具栏无法隐藏的bug
|
||||
## 1.4.5（2024-07-21）
|
||||
1. 解决video图标冲突问题
|
||||
## 1.4.4（2024-07-20）
|
||||
1. 新增视频插入功能
|
||||
2. 更新示例一（关于视频插入参考请见示例一）
|
||||
## 1.4.3（2024-07-16）
|
||||
1. 更新示例工程
|
||||
## 1.4.2（2024-07-16）
|
||||
1. 更新示例工程
|
||||
## 1.4.1（2024-06-14）
|
||||
1. 更新示例工程
|
||||
## 1.4.0（2024-05-31）
|
||||
1. 更新示例工程
|
||||
## 1.3.9（2024-05-31）
|
||||
1. 修复调色板无法正常选色的问题
|
||||
## 1.3.8（2024-05-13）
|
||||
1. 更新示例三（微信小程序上使用setContents造成聚焦滚动的处理）
|
||||
## 1.3.7（2024-05-10）
|
||||
1. 修复添加超链接后，不触发input更新当前最新内容的bug
|
||||
## 1.3.6（2024-05-09）
|
||||
1. 文档迁移
|
||||
## 1.3.5（2024-05-09）
|
||||
1. 所有事件携带编辑器id参数，以便循环时能区分处理
|
||||
2. 更新示例工程
|
||||
## 1.3.4（2024-05-08）
|
||||
1. 更新示例工程
|
||||
2. 新增editorId参数
|
||||
## 1.3.3（2024-03-22）
|
||||
1. 修复微信小程序长按无法粘贴的问题
|
||||
## 1.3.2（2024-03-14）
|
||||
1. 更新了toolbar样式与配置，见文档
|
||||
2. 更新示例工程，媒体查询响应式写法
|
||||
3. 优化了只读模式效果，开启只读模式后，文章内容的超链接可正常点击并跳转
|
||||
## 1.3.1（2024-03-14）
|
||||
1. 优化了只读功能，开启只读后自动隐藏工具栏
|
||||
2. 更新示例工程
|
||||
## 1.3.0（2024-03-07）
|
||||
1. 新增addLink的emit事件
|
||||
## 1.2.9（2024-02-23）
|
||||
1. 更新文档
|
||||
## 1.2.8（2024-02-23）
|
||||
1. 新增了添加超链接的工具，toolbar中link字段，默认开启
|
||||
2. 优化了部分逻辑
|
||||
3. 更新文档、更新示例工程
|
||||
## 1.2.7（2024-02-23）
|
||||
1. 更新文档，更新示例工程
|
||||
2. 添加toolbar中图标字体大小可配置项
|
||||
## 1.2.6（2024-02-22）
|
||||
1. 添加导出工具按钮，可将当前已编辑的html导出至页面解析
|
||||
2. 超链接工具按钮正在尝试开发中(貌似目前官方不支持)
|
||||
## 1.2.5（2024-02-19）
|
||||
1. 更新示例工程(吸顶写法)
|
||||
2. 完善调色板功能
|
||||
## 1.2.4（2024-02-18）
|
||||
1. 修复工具栏颜色按钮底色动态切换问题
|
||||
## 1.2.3（2024-02-18）
|
||||
1. 更新示例工程
|
||||
## 1.2.2（2024-02-18）
|
||||
1. 删除log调试打印
|
||||
## 1.2.1（2024-02-18）
|
||||
1. 修复了颜色图标不会动态切换的问题
|
||||
## 1.2.0（2024-02-18）
|
||||
1. 修复选择颜色时会将所选文字删除的bug
|
||||
## 1.1.9（2024-02-04）
|
||||
1. 更新示例工程
|
||||
## 1.1.8（2024-02-04）
|
||||
1. 文档修改
|
||||
## 1.1.7（2024-02-04）
|
||||
1. 新增toolbar配置项，可自由配置工具栏工具列表
|
||||
2. 移除组件内原templates属性，默认初始化编辑器内容请看文档使用方式示例
|
||||
3. 更新文档
|
||||
## 1.1.6（2024-01-31）
|
||||
1. 更好的兼容vue2了，修复在vue2下高度可能超出的问题
|
||||
2. 示例工程兼容vue2
|
||||
## 1.1.5（2024-01-30）
|
||||
1. 修复工具栏字体按钮无效的问题
|
||||
## 1.1.4（2024-01-30）
|
||||
1. 解决默认初始化内容时前缀空格或缩进无效的问题
|
||||
2. 解决点击工具栏高亮状态后输入内容时便失去高亮的bug
|
||||
3. 更新示例工程
|
||||
## 1.1.3（2024-01-23）
|
||||
1. 重写高度动态计算逻辑，现在对不同屏幕尺寸的适应性更强了
|
||||
## 1.1.2（2024-01-17）
|
||||
1. 修复分割线会生成多条的问题
|
||||
## 1.1.1（2024-01-15）
|
||||
1. 更新文档
|
||||
## 1.1.0（2024-01-15）
|
||||
1. insertText方法在插入内容的时候会移动光标聚焦，导致焦点回滚到视口处
|
||||
2. 更新示例工程
|
||||
## 1.0.9（2024-01-04）
|
||||
1. 更新文档
|
||||
## 1.0.8（2024-01-04）
|
||||
1. 修复h5端官方cdn请求失败的问题，详见问答贴：https://ask.dcloud.net.cn/article/40900
|
||||
## 1.0.7（2024-01-03）
|
||||
1. 移除v-bind="$attrs"，该写法在微信小程序不支持
|
||||
## 1.0.6（2023-12-29）
|
||||
1. 更新文档
|
||||
## 1.0.5（2023-12-29）
|
||||
1. 更新了init方法，可以使用返回的editor实例尽情自定义
|
||||
2. 组件在<editor>上添加v-bind="$attrs"属性穿透，可以使用原editor参数，官方文档：https://uniapp.dcloud.net.cn/component/editor.html
|
||||
## 1.0.4（2023-12-29）
|
||||
1. 优化了切换文字和背景颜色是，可能会导致切换后不生效的问题
|
||||
2. 修复在部分设备上的微信小程序中可能会存在颜色版无法正常滑动的问题
|
||||
3. 更友好的交互体验：添加图标悬停字样描述、添加格式化文本弹窗确认
|
||||
4. 有插入视频的需求，暂时可能无法实现，官方给予的回复是：目前各端的eidtor组件都不能直接插入视频，编辑时可以采用视频封面占位，并在图片中保存视频信息，在预览时再还原为视频。
|
||||
## 1.0.3（2023-10-13）
|
||||
1. 更新readme文档
|
||||
2. 更新调整组件示例项目，添加插件代码中部分注释
|
||||
## 1.0.2（2023-10-13）
|
||||
1. 更新uni_modules规范，可一键导入组件
|
||||
2. 更新组件示例项目（包括使用uniCloud.uploadFile多选上传图片示例方法）
|
||||
## 1.0.1（2023-10-12）
|
||||
1. 修复小程序中自动聚焦滚动到富文本组件区域的bug
|
||||
2. 略微调整了富文本上方toolbar工具栏中按钮的大小尺寸
|
||||
## 1.0.0（2023-9-19）
|
||||
1. 新增字体与背景颜色板
|
||||
2. 可自定义预设内容模板
|
||||
3. 解决官方样例在小程序和app部分报错不兼容的问题
|
||||
4. 可配合云存储上传富文本中插入的图片 本质上是基于官方内置富文本editor组件改版封装，所以官方有的功能都有，官方能兼容的也都兼容
|
||||
|
||||
825
uni_modules/sp-editor/components/sp-editor/color-picker.vue
Normal file
825
uni_modules/sp-editor/components/sp-editor/color-picker.vue
Normal file
@@ -0,0 +1,825 @@
|
||||
<template>
|
||||
<view v-if="show" class="t-wrapper" @touchmove.stop.prevent="moveHandle">
|
||||
<view class="t-mask" :class="{ active: active }" @click.stop="close"></view>
|
||||
<view class="t-box" :class="{ active: active }">
|
||||
<view class="t-header">
|
||||
<view class="t-header-button" @click="close">取消</view>
|
||||
<view class="t-header-button" @click="confirm">确认</view>
|
||||
</view>
|
||||
<view class="t-color__box" :style="{ background: 'rgb(' + bgcolor.r + ',' + bgcolor.g + ',' + bgcolor.b + ')' }">
|
||||
<view
|
||||
class="t-background boxs"
|
||||
@touchstart="touchstart($event, 0)"
|
||||
@touchmove="touchmove($event, 0)"
|
||||
@touchend="touchend($event, 0)"
|
||||
>
|
||||
<view class="t-color-mask"></view>
|
||||
<view class="t-pointer" :style="{ top: site[0].top - 8 + 'px', left: site[0].left - 8 + 'px' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-control__box">
|
||||
<view class="t-control__color">
|
||||
<view
|
||||
class="t-control__color-content"
|
||||
:style="{ background: 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a + ')' }"
|
||||
></view>
|
||||
</view>
|
||||
<view class="t-control-box__item">
|
||||
<view
|
||||
class="t-controller boxs"
|
||||
@touchstart="touchstart($event, 1)"
|
||||
@touchmove="touchmove($event, 1)"
|
||||
@touchend="touchend($event, 1)"
|
||||
>
|
||||
<view class="t-hue">
|
||||
<view class="t-circle" :style="{ left: site[1].left - 12 + 'px' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="t-controller boxs"
|
||||
@touchstart="touchstart($event, 2)"
|
||||
@touchmove="touchmove($event, 2)"
|
||||
@touchend="touchend($event, 2)"
|
||||
>
|
||||
<view class="t-transparency">
|
||||
<view class="t-circle" :style="{ left: site[2].left - 12 + 'px' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-result__box">
|
||||
<view v-if="mode" class="t-result__item">
|
||||
<view class="t-result__box-input">{{ hex }}</view>
|
||||
<view class="t-result__box-text">HEX</view>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{ rgba.r }}</view>
|
||||
<view class="t-result__box-text">R</view>
|
||||
</view>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{ rgba.g }}</view>
|
||||
<view class="t-result__box-text">G</view>
|
||||
</view>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{ rgba.b }}</view>
|
||||
<view class="t-result__box-text">B</view>
|
||||
</view>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{ rgba.a }}</view>
|
||||
<view class="t-result__box-text">A</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="t-result__item t-select" @click="select">
|
||||
<view class="t-result__box-input">
|
||||
<view>切换</view>
|
||||
<view>模式</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-alternative">
|
||||
<view class="t-alternative__item" v-for="(item, index) in colorList" :key="index">
|
||||
<view
|
||||
class="t-alternative__item-content"
|
||||
:style="{ background: 'rgba(' + item.r + ',' + item.g + ',' + item.b + ',' + item.a + ')' }"
|
||||
@click="selectColor(item)"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
spareColor: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
active: false,
|
||||
// rgba 颜色
|
||||
rgba: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 1
|
||||
},
|
||||
// hsb 颜色
|
||||
hsb: {
|
||||
h: 0,
|
||||
s: 0,
|
||||
b: 0
|
||||
},
|
||||
site: [
|
||||
{
|
||||
top: 0,
|
||||
left: 0
|
||||
},
|
||||
{
|
||||
left: 0
|
||||
},
|
||||
{
|
||||
left: 0
|
||||
}
|
||||
],
|
||||
index: 0,
|
||||
bgcolor: {
|
||||
r: 255,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 1
|
||||
},
|
||||
hex: '#000000',
|
||||
mode: true,
|
||||
colorList: [
|
||||
{
|
||||
r: 244,
|
||||
g: 67,
|
||||
b: 54,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 233,
|
||||
g: 30,
|
||||
b: 99,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 156,
|
||||
g: 39,
|
||||
b: 176,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 103,
|
||||
g: 58,
|
||||
b: 183,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 63,
|
||||
g: 81,
|
||||
b: 181,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 33,
|
||||
g: 150,
|
||||
b: 243,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 3,
|
||||
g: 169,
|
||||
b: 244,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 0,
|
||||
g: 188,
|
||||
b: 212,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 0,
|
||||
g: 150,
|
||||
b: 136,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 76,
|
||||
g: 175,
|
||||
b: 80,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 139,
|
||||
g: 195,
|
||||
b: 74,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 205,
|
||||
g: 220,
|
||||
b: 57,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 255,
|
||||
g: 235,
|
||||
b: 59,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 255,
|
||||
g: 193,
|
||||
b: 7,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 255,
|
||||
g: 152,
|
||||
b: 0,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 255,
|
||||
g: 87,
|
||||
b: 34,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 121,
|
||||
g: 85,
|
||||
b: 72,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 158,
|
||||
g: 158,
|
||||
b: 158,
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 0.5
|
||||
},
|
||||
{
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
a: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.ready()
|
||||
},
|
||||
methods: {
|
||||
ready() {
|
||||
this.rgba = this.color
|
||||
if (this.spareColor.length !== 0) {
|
||||
this.colorList = this.spareColor
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
init() {
|
||||
// hsb 颜色
|
||||
this.hsb = this.rgbToHex(this.rgba)
|
||||
// this.setColor();
|
||||
this.setValue(this.rgba)
|
||||
},
|
||||
moveHandle() {},
|
||||
open() {
|
||||
this.show = true
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
setTimeout(() => {
|
||||
this.active = true
|
||||
setTimeout(() => {
|
||||
this.getSelectorQuery()
|
||||
}, 350)
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.active = false
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.show = false
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.close()
|
||||
this.$emit('confirm', {
|
||||
rgba: this.rgba,
|
||||
hex: this.hex
|
||||
})
|
||||
},
|
||||
// 选择模式
|
||||
select() {
|
||||
this.mode = !this.mode
|
||||
},
|
||||
// 常用颜色选择
|
||||
selectColor(item) {
|
||||
this.setColorBySelect(item)
|
||||
},
|
||||
touchstart(e, index) {
|
||||
const { pageX, pageY, clientX, clientY } = e.touches[0]
|
||||
// 部分机型可能没有pageX或clientX，因此此处需要做兼容
|
||||
this.moveX = clientX || pageX
|
||||
this.moveY = clientY || pageY
|
||||
this.setPosition(this.moveX, this.moveY, index)
|
||||
},
|
||||
touchmove(e, index) {
|
||||
const { pageX, pageY, clientX, clientY } = e.touches[0]
|
||||
this.moveX = clientX || pageX
|
||||
this.moveY = clientY || pageY
|
||||
this.setPosition(this.moveX, this.moveY, index)
|
||||
},
|
||||
touchend(e, index) {},
|
||||
/**
|
||||
* 设置位置
|
||||
*/
|
||||
setPosition(x, y, index) {
|
||||
this.index = index
|
||||
const { top, left, width, height } = this.position[index]
|
||||
// 设置最大最小值
|
||||
|
||||
this.site[index].left = Math.max(0, Math.min(parseInt(x - left), width))
|
||||
if (index === 0) {
|
||||
this.site[index].top = Math.max(0, Math.min(parseInt(y - top), height))
|
||||
// 设置颜色
|
||||
this.hsb.s = parseInt((100 * this.site[index].left) / width)
|
||||
this.hsb.b = parseInt(100 - (100 * this.site[index].top) / height)
|
||||
this.setColor()
|
||||
this.setValue(this.rgba)
|
||||
} else {
|
||||
this.setControl(index, this.site[index].left)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 设置 rgb 颜色
|
||||
*/
|
||||
setColor() {
|
||||
const rgb = this.HSBToRGB(this.hsb)
|
||||
this.rgba.r = rgb.r
|
||||
this.rgba.g = rgb.g
|
||||
this.rgba.b = rgb.b
|
||||
},
|
||||
/**
|
||||
* 设置二进制颜色
|
||||
* @param {Object} rgb
|
||||
*/
|
||||
setValue(rgb) {
|
||||
this.hex = '#' + this.rgbToHex(rgb)
|
||||
},
|
||||
setControl(index, x) {
|
||||
const { top, left, width, height } = this.position[index]
|
||||
|
||||
if (index === 1) {
|
||||
this.hsb.h = parseInt((360 * x) / width)
|
||||
this.bgcolor = this.HSBToRGB({
|
||||
h: this.hsb.h,
|
||||
s: 100,
|
||||
b: 100
|
||||
})
|
||||
this.setColor()
|
||||
} else {
|
||||
this.rgba.a = (x / width).toFixed(1)
|
||||
}
|
||||
this.setValue(this.rgba)
|
||||
},
|
||||
/**
|
||||
* rgb 转 二进制 hex
|
||||
* @param {Object} rgb
|
||||
*/
|
||||
rgbToHex(rgb) {
|
||||
let hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)]
|
||||
hex.map(function (str, i) {
|
||||
if (str.length == 1) {
|
||||
hex[i] = '0' + str
|
||||
}
|
||||
})
|
||||
return hex.join('')
|
||||
},
|
||||
setColorBySelect(getrgb) {
|
||||
const { r, g, b, a } = getrgb
|
||||
let rgb = {}
|
||||
rgb = {
|
||||
r: r ? parseInt(r) : 0,
|
||||
g: g ? parseInt(g) : 0,
|
||||
b: b ? parseInt(b) : 0,
|
||||
a: a ? a : 0
|
||||
}
|
||||
this.rgba = rgb
|
||||
this.hsb = this.rgbToHsb(rgb)
|
||||
this.changeViewByHsb()
|
||||
},
|
||||
changeViewByHsb() {
|
||||
const [a, b, c] = this.position
|
||||
this.site[0].left = parseInt((this.hsb.s * a.width) / 100)
|
||||
this.site[0].top = parseInt(((100 - this.hsb.b) * a.height) / 100)
|
||||
this.setColor(this.hsb.h)
|
||||
this.setValue(this.rgba)
|
||||
this.bgcolor = this.HSBToRGB({
|
||||
h: this.hsb.h,
|
||||
s: 100,
|
||||
b: 100
|
||||
})
|
||||
|
||||
this.site[1].left = (this.hsb.h / 360) * b.width
|
||||
this.site[2].left = this.rgba.a * c.width
|
||||
},
|
||||
/**
|
||||
* hsb 转 rgb
|
||||
* @param {Object} 颜色模式 H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度
|
||||
*/
|
||||
HSBToRGB(hsb) {
|
||||
let rgb = {}
|
||||
let h = Math.round(hsb.h)
|
||||
let s = Math.round((hsb.s * 255) / 100)
|
||||
let v = Math.round((hsb.b * 255) / 100)
|
||||
if (s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v
|
||||
} else {
|
||||
let t1 = v
|
||||
let t2 = ((255 - s) * v) / 255
|
||||
let t3 = ((t1 - t2) * (h % 60)) / 60
|
||||
if (h == 360) h = 0
|
||||
if (h < 60) {
|
||||
rgb.r = t1
|
||||
rgb.b = t2
|
||||
rgb.g = t2 + t3
|
||||
} else if (h < 120) {
|
||||
rgb.g = t1
|
||||
rgb.b = t2
|
||||
rgb.r = t1 - t3
|
||||
} else if (h < 180) {
|
||||
rgb.g = t1
|
||||
rgb.r = t2
|
||||
rgb.b = t2 + t3
|
||||
} else if (h < 240) {
|
||||
rgb.b = t1
|
||||
rgb.r = t2
|
||||
rgb.g = t1 - t3
|
||||
} else if (h < 300) {
|
||||
rgb.b = t1
|
||||
rgb.g = t2
|
||||
rgb.r = t2 + t3
|
||||
} else if (h < 360) {
|
||||
rgb.r = t1
|
||||
rgb.g = t2
|
||||
rgb.b = t1 - t3
|
||||
} else {
|
||||
rgb.r = 0
|
||||
rgb.g = 0
|
||||
rgb.b = 0
|
||||
}
|
||||
}
|
||||
return {
|
||||
r: Math.round(rgb.r),
|
||||
g: Math.round(rgb.g),
|
||||
b: Math.round(rgb.b)
|
||||
}
|
||||
},
|
||||
rgbToHsb(rgb) {
|
||||
let hsb = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
b: 0
|
||||
}
|
||||
let min = Math.min(rgb.r, rgb.g, rgb.b)
|
||||
let max = Math.max(rgb.r, rgb.g, rgb.b)
|
||||
let delta = max - min
|
||||
hsb.b = max
|
||||
hsb.s = max != 0 ? (255 * delta) / max : 0
|
||||
if (hsb.s != 0) {
|
||||
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta
|
||||
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta
|
||||
else hsb.h = 4 + (rgb.r - rgb.g) / delta
|
||||
} else hsb.h = -1
|
||||
hsb.h *= 60
|
||||
if (hsb.h < 0) hsb.h = 0
|
||||
hsb.s *= 100 / 255
|
||||
hsb.b *= 100 / 255
|
||||
return hsb
|
||||
},
|
||||
getSelectorQuery() {
|
||||
const views = uni.createSelectorQuery().in(this)
|
||||
views
|
||||
.selectAll('.boxs')
|
||||
.boundingClientRect((data) => {
|
||||
if (!data || data.length === 0) {
|
||||
setTimeout(() => this.getSelectorQuery(), 20)
|
||||
return
|
||||
}
|
||||
this.position = data
|
||||
// this.site[0].top = data[0].height;
|
||||
// this.site[0].left = 0;
|
||||
// this.site[1].left = data[1].width;
|
||||
// this.site[2].left = data[2].width;
|
||||
this.setColorBySelect(this.rgba)
|
||||
})
|
||||
.exec()
|
||||
},
|
||||
hex2Rgb(hexColor, alpha = 1) {
|
||||
const color = hexColor.slice(1)
|
||||
const r = parseInt(color.slice(0, 2), 16)
|
||||
const g = parseInt(color.slice(2, 4), 16)
|
||||
const b = parseInt(color.slice(4, 6), 16)
|
||||
return {
|
||||
r: r,
|
||||
g: g,
|
||||
b: b,
|
||||
a: alpha
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
spareColor(newVal) {
|
||||
this.colorList = newVal
|
||||
},
|
||||
color(newVal) {
|
||||
this.ready()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.t-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.t-box {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 30upx 0;
|
||||
padding-top: 0;
|
||||
background: #fff;
|
||||
transition: all 0.3s;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.t-box.active {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
.t-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
border-bottom: 1px #eee solid;
|
||||
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-header-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 150upx;
|
||||
height: 100upx;
|
||||
font-size: 30upx;
|
||||
color: #666;
|
||||
padding-left: 20upx;
|
||||
}
|
||||
|
||||
.t-header-button:last-child {
|
||||
justify-content: flex-end;
|
||||
padding-right: 20upx;
|
||||
}
|
||||
|
||||
.t-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: -1;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.t-mask.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.t-color__box {
|
||||
position: relative;
|
||||
height: 400upx;
|
||||
background: rgb(255, 0, 0);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
margin: 0 20upx;
|
||||
margin-top: 20upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.t-color-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 400upx;
|
||||
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.t-pointer {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: -8px;
|
||||
z-index: 2;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px #fff solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.t-show-color {
|
||||
width: 100upx;
|
||||
height: 50upx;
|
||||
}
|
||||
|
||||
.t-control__box {
|
||||
margin-top: 50upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-left: 20upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-control__color {
|
||||
flex-shrink: 0;
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
||||
background-size: 36upx 36upx;
|
||||
background-position: 0 0, 18upx 18upx;
|
||||
border: 1px #eee solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.t-control__color-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.t-control-box__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 30upx;
|
||||
}
|
||||
|
||||
.t-controller {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
||||
background-size: 32upx 32upx;
|
||||
background-position: 0 0, 16upx 16upx;
|
||||
}
|
||||
|
||||
.t-hue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.t-transparency {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0));
|
||||
}
|
||||
|
||||
.t-circle {
|
||||
position: absolute;
|
||||
/* right: -10px; */
|
||||
top: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.t-result__box {
|
||||
margin-top: 20upx;
|
||||
padding: 10upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-result__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10upx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-result__box-input {
|
||||
padding: 10upx 0;
|
||||
width: 100%;
|
||||
font-size: 28upx;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
color: #999;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-result__box-text {
|
||||
margin-top: 10upx;
|
||||
font-size: 28upx;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.t-select {
|
||||
flex-shrink: 0;
|
||||
width: 150upx;
|
||||
padding: 0 30upx;
|
||||
}
|
||||
|
||||
.t-select .t-result__box-input {
|
||||
border-radius: 10upx;
|
||||
border: none;
|
||||
color: #999;
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-select .t-result__box-input:active {
|
||||
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.t-alternative {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* justify-content: space-between; */
|
||||
width: 100%;
|
||||
padding-right: 10upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-alternative__item {
|
||||
margin-left: 12upx;
|
||||
margin-top: 10upx;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
border-radius: 10upx;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
||||
background-size: 36upx 36upx;
|
||||
background-position: 0 0, 18upx 18upx;
|
||||
border: 1px #eee solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.t-alternative__item-content {
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.t-alternative__item:active {
|
||||
transition: all 0.3s;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
140
uni_modules/sp-editor/components/sp-editor/fab-tool.vue
Normal file
140
uni_modules/sp-editor/components/sp-editor/fab-tool.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view class="fab-tool">
|
||||
<view id="toolfab">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="fab-tool-content" :style="placementStyle" id="placementfab">
|
||||
<slot name="content" v-if="visible"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'auto' // 'auto' | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
placementHeight: '0',
|
||||
placementType: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(newVal) {
|
||||
if (newVal) {
|
||||
const { screenWidth } = uni.getSystemInfoSync()
|
||||
|
||||
this.$nextTick(() => {
|
||||
let placementWidth = 0
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select('#placementfab')
|
||||
.boundingClientRect((res) => {
|
||||
this.placementHeight = -res.height + 'px'
|
||||
placementWidth = res.width
|
||||
})
|
||||
.exec()
|
||||
// 开启自动模式后
|
||||
if (this.placement == 'auto') {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select('#toolfab')
|
||||
.boundingClientRect((res) => {
|
||||
let leftRemain = res.left
|
||||
let rightRemain = screenWidth - leftRemain
|
||||
if (rightRemain > placementWidth) {
|
||||
this.placementType = 'bottom-start'
|
||||
} else if (leftRemain > placementWidth) {
|
||||
this.placementType = 'bottom-end'
|
||||
} else {
|
||||
this.placementType = 'bottom-center'
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.placementType = this.placement
|
||||
},
|
||||
computed: {
|
||||
placementStyle() {
|
||||
let position = {}
|
||||
switch (this.placementType) {
|
||||
case 'top-start':
|
||||
position = {
|
||||
top: this.placementHeight,
|
||||
left: 0
|
||||
}
|
||||
break
|
||||
case 'top-center':
|
||||
position = {
|
||||
top: this.placementHeight,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)'
|
||||
}
|
||||
break
|
||||
case 'top-end':
|
||||
position = {
|
||||
top: this.placementHeight,
|
||||
right: 0
|
||||
}
|
||||
break
|
||||
case 'bottom-start':
|
||||
position = {
|
||||
bottom: this.placementHeight,
|
||||
left: 0
|
||||
}
|
||||
break
|
||||
case 'bottom-center':
|
||||
position = {
|
||||
bottom: this.placementHeight,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)'
|
||||
}
|
||||
break
|
||||
case 'bottom-end':
|
||||
position = {
|
||||
bottom: this.placementHeight,
|
||||
right: 0
|
||||
}
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
return position
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fab-tool {
|
||||
position: relative;
|
||||
|
||||
.fab-tool-content {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
|
||||
background-color: #ffffff;
|
||||
box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
uni_modules/sp-editor/components/sp-editor/link-edit.vue
Normal file
152
uni_modules/sp-editor/components/sp-editor/link-edit.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<view class="link-edit-container" v-if="showPopup">
|
||||
<view class="link-edit">
|
||||
<view class="title">添加链接</view>
|
||||
<view class="edit">
|
||||
<view class="description">
|
||||
链接描述：
|
||||
<input v-model="descVal" type="text" class="input" placeholder="请输入链接描述" />
|
||||
</view>
|
||||
<view class="address">
|
||||
链接地址：
|
||||
<input v-model="addrVal" type="text" class="input" placeholder="请输入链接地址" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="control">
|
||||
<view class="cancel" @click="close">取消</view>
|
||||
<view class="confirm" @click="onConfirm">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mask"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopup: false,
|
||||
descVal: '',
|
||||
addrVal: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.showPopup = true
|
||||
this.$emit('open')
|
||||
},
|
||||
close() {
|
||||
this.showPopup = false
|
||||
this.descVal = ''
|
||||
this.addrVal = ''
|
||||
this.$emit('close')
|
||||
},
|
||||
onConfirm() {
|
||||
if (!this.descVal) {
|
||||
uni.showToast({
|
||||
title: '请输入链接描述',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.addrVal) {
|
||||
uni.showToast({
|
||||
title: '请输入链接地址',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$emit('confirm', {
|
||||
text: this.descVal,
|
||||
href: this.addrVal
|
||||
})
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.link-edit-container {
|
||||
.link-edit {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #ffffff;
|
||||
box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 999;
|
||||
font-size: 14px;
|
||||
|
||||
.title {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.edit {
|
||||
padding: 24rpx;
|
||||
border-top: 1px solid #eeeeee;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
box-sizing: border-box;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
padding: 4px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.uni-input-placeholder {
|
||||
color: #dddddd;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
.cancel {
|
||||
flex: 1;
|
||||
color: #dd524d;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.confirm {
|
||||
border-left: 1px solid #eeeeee;
|
||||
flex: 1;
|
||||
color: #007aff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
z-index: 998;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
681
uni_modules/sp-editor/components/sp-editor/sp-editor.vue
Normal file
681
uni_modules/sp-editor/components/sp-editor/sp-editor.vue
Normal file
@@ -0,0 +1,681 @@
|
||||
<template>
|
||||
<view class="sp-editor" :style="{ '--icon-size': iconSize, '--icon-columns': iconColumns, '--theme-color': themeColor }">
|
||||
<view class="sp-editor-toolbar" v-if="!readOnly" @tap="format">
|
||||
<!-- 标题栏 -->
|
||||
<fab-tool v-if="toolbarList.includes('header')" :visible="curFab == 'header'">
|
||||
<view :class="formats.header ? 'ql-active' : ''" class="iconfont icon-header" title="标题" data-name="header" @click.stop="fabTap('header')"></view>
|
||||
<template #content>
|
||||
<view class="fab-tools" @click.stop="fabTapSub($event, 'header')">
|
||||
<view v-for="item in fabTools.header" :key="item.value">
|
||||
<view v-if="toolbarList.includes(item.name)" class="fab-sub" :class="[formats.header === item.value ? 'ql-active' : '', item.icon ? 'iconfont' : '', item.icon]" :title="item.title" data-name="header" :data-value="item.value"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fab-tool>
|
||||
<view v-if="toolbarList.includes('bold')" :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" title="加粗" data-name="bold"></view>
|
||||
<view v-if="toolbarList.includes('italic')" :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" title="斜体" data-name="italic"></view>
|
||||
<view v-if="toolbarList.includes('underline')" :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" title="下划线" data-name="underline"></view>
|
||||
<view v-if="toolbarList.includes('strike')" :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" title="删除线" data-name="strike"></view>
|
||||
<!-- 对齐方式 -->
|
||||
<fab-tool v-if="toolbarList.includes('align')" :visible="curFab == 'align'">
|
||||
<view :class="formats.align ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" title="对齐方式" data-name="align" @click.stop="fabTap('align')"></view>
|
||||
<template #content>
|
||||
<view class="fab-tools" @click.stop="fabTapSub($event, 'align')">
|
||||
<view v-for="item in fabTools.align" :key="item.value">
|
||||
<view v-if="toolbarList.includes(item.name)" class="fab-sub" :class="[formats.align === item.value ? 'ql-active' : '', item.icon ? 'iconfont' : '', item.icon]" :title="item.title" data-name="align" :data-value="item.value"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fab-tool>
|
||||
<!-- 行间距 -->
|
||||
<fab-tool v-if="toolbarList.includes('lineHeight')" :visible="curFab == 'lineHeight'">
|
||||
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" title="行间距" data-name="lineHeight" @click.stop="fabTap('lineHeight')"></view>
|
||||
<template #content>
|
||||
<view class="fab-tools" @click.stop="fabTapSub($event, 'lineHeight')">
|
||||
<view v-for="item in fabTools.lineHeight" :key="item.value">
|
||||
<view class="fab-sub" :class="[formats.lineHeight === item.value ? 'ql-active' : '', item.icon ? 'iconfont' : '', item.icon]" :title="item.title" data-name="lineHeight" :data-value="item.value">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fab-tool>
|
||||
<!-- 字间距 -->
|
||||
<fab-tool v-if="toolbarList.includes('letterSpacing')" :visible="curFab == 'letterSpacing'">
|
||||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" title="字间距" data-name="letterSpacing" @click.stop="fabTap('letterSpacing')"></view>
|
||||
<template #content>
|
||||
<view class="fab-tools" @click.stop="fabTapSub($event, 'letterSpacing')">
|
||||
<view v-for="item in fabTools.space" :key="item.value">
|
||||
<view class="fab-sub" :class="[
|
||||
formats.letterSpacing === item.value ? 'ql-active' : '',
|
||||
item.icon ? 'iconfont' : '',
|
||||
item.icon
|
||||
]" :title="item.title" data-name="letterSpacing" :data-value="item.value">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fab-tool>
|
||||
<!-- 段前距 -->
|
||||
<fab-tool v-if="toolbarList.includes('marginTop')" :visible="curFab == 'marginTop'">
|
||||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" title="段前距" data-name="marginTop" @click.stop="fabTap('marginTop')"></view>
|
||||
<template #content>
|
||||
<view class="fab-tools" @click.stop="fabTapSub($event, 'marginTop')">
|
||||
<view v-for="item in fabTools.space" :key="item.value">
|
||||
<view class="fab-sub" :class="[formats.marginTop === item.value ? 'ql-active' : '', item.icon ? 'iconfont' : '', item.icon]" :title="item.title" data-name="marginTop" :data-value="item.value">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fab-tool>
|
||||
<!-- 段后距 -->
|
||||
<fab-tool v-if="toolbarList.includes('marginBottom')" :visible="curFab == 'marginBottom'">
|
||||
<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju" title="段后距" data-name="marginBottom" @click.stop="fabTap('marginBottom')"></view>
|
||||
<template #content>
|
||||
<view class="fab-tools" @click.stop="fabTapSub($event, 'marginBottom')">
|
||||
<view v-for="item in fabTools.space" :key="item.value">
|
||||
<view class="fab-sub" :class="[
|
||||
formats.marginBottom === item.value ? 'ql-active' : '',
|
||||
item.icon ? 'iconfont' : '',
|
||||
item.icon
|
||||
]" :title="item.title" data-name="marginBottom" :data-value="item.value">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fab-tool>
|
||||
<!-- 字体栏 -->
|
||||
<fab-tool v-if="toolbarList.includes('fontFamily')" :visible="curFab == 'fontFamily'">
|
||||
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" title="字体" data-name="fontFamily" @click.stop="fabTap('fontFamily')"></view>
|
||||
<template #content>
|
||||
<view class="fab-tools" @click.stop="fabTapSub($event, 'fontFamily')">
|
||||
<view v-for="item in fabTools.fontFamily" :key="item.value">
|
||||
<view class="fab-sub" :class="[formats.fontFamily === item.value ? 'ql-active' : '', item.icon ? 'iconfont' : '', item.icon]" :title="item.title" data-name="fontFamily" :data-value="item.value">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fab-tool>
|
||||
<!-- 字体大小栏 -->
|
||||
<fab-tool v-if="toolbarList.includes('fontSize')" :visible="curFab == 'fontSize'">
|
||||
<view :class="formats.fontSize ? 'ql-active' : ''" class="iconfont icon-fontsize" title="字号" data-name="fontSize" @click.stop="fabTap('fontSize')"></view>
|
||||
<template #content>
|
||||
<view class="fab-tools" @click.stop="fabTapSub($event, 'fontSize')">
|
||||
<view v-for="item in fabTools.fontSize" :key="item.value">
|
||||
<view class="fab-sub" :class="[formats.fontSize === item.value ? 'ql-active' : '', item.icon ? 'iconfont' : '', item.icon]" :title="item.title" data-name="fontSize" :data-value="item.value">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</fab-tool>
|
||||
<view v-if="toolbarList.includes('color')" :style="{ color: formats.color ? textColor : 'initial' }" class="iconfont icon-text_color" title="文字颜色" data-name="color" :data-value="textColor"></view>
|
||||
<view v-if="toolbarList.includes('backgroundColor')" :style="{ color: formats.backgroundColor ? backgroundColor : 'initial' }" class="iconfont icon-fontbgcolor" title="背景颜色" data-name="backgroundColor" :data-value="backgroundColor"></view>
|
||||
<view v-if="toolbarList.includes('date')" class="iconfont icon-date" title="日期" @tap="insertDate"></view>
|
||||
<view v-if="toolbarList.includes('listCheck')" class="iconfont icon--checklist" title="待办" data-name="list" data-value="check"></view>
|
||||
<view v-if="toolbarList.includes('listOrdered')" :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" title="有序列表" data-name="list" data-value="ordered"></view>
|
||||
<view v-if="toolbarList.includes('listBullet')" :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" title="无序列表" data-name="list" data-value="bullet"></view>
|
||||
<view v-if="toolbarList.includes('divider')" class="iconfont icon-fengexian" title="分割线" @click="insertDivider"></view>
|
||||
<view v-if="toolbarList.includes('indentDec')" class="iconfont icon-outdent" title="减少缩进" data-name="indent" data-value="-1"></view>
|
||||
<view v-if="toolbarList.includes('indentInc')" class="iconfont icon-indent" title="增加缩进" data-name="indent" data-value="+1"></view>
|
||||
<view v-if="toolbarList.includes('scriptSub')" :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" title="下标" data-name="script" data-value="sub"></view>
|
||||
<view v-if="toolbarList.includes('scriptSuper')" :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" title="上标" data-name="script" data-value="super"></view>
|
||||
<view v-if="toolbarList.includes('direction')" :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" title="文本方向" data-name="direction" data-value="rtl"></view>
|
||||
<view v-if="toolbarList.includes('image')" class="iconfont icon-charutupian" title="图片" @tap="insertImage"></view>
|
||||
<view v-if="toolbarList.includes('video')" class="iconfont icon-video" title="视频" @tap="insertVideo"></view>
|
||||
<view v-if="toolbarList.includes('link')" class="iconfont icon-charulianjie" title="超链接" @tap="insertLink"></view>
|
||||
<view v-if="toolbarList.includes('undo')" class="iconfont icon-undo" title="撤销" @tap="undo"></view>
|
||||
<view v-if="toolbarList.includes('redo')" class="iconfont icon-redo" title="重做" @tap="redo"></view>
|
||||
<view v-if="toolbarList.includes('removeFormat')" class="iconfont icon-clearedformat" title="清除格式" @tap="removeFormat"></view>
|
||||
<view v-if="toolbarList.includes('clear')" class="iconfont icon-shanchu" title="清空" @tap="clear"></view>
|
||||
<view v-if="toolbarConfig.showFullscreen" class="iconfont icon-quanping" title="全屏" @tap="fullscreen"></view>
|
||||
<view v-if="toolbarList.includes('export')" class="submit-footer" title="导出" @tap="exportHtml">
|
||||
<view class="footer-btn">保存</view>
|
||||
<view class="footer-space"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 自定义功能组件 -->
|
||||
<!-- 调色板 -->
|
||||
<color-picker v-if="toolbarList.includes('color') || toolbarList.includes('backgroundColor')" ref="colorPickerRef" :color="defaultColor" @confirm="confirmColor"></color-picker>
|
||||
<!-- 添加链接的操作弹窗 -->
|
||||
<link-edit v-if="toolbarList.includes('link') && !readOnly" ref="linkEditRef" @confirm="confirmLink"></link-edit>
|
||||
<view class="sp-editor-wrapper" @longpress="eLongpress">
|
||||
<editor :id="editorId" class="ql-editor editor-container" :class="{ 'ql-image-overlay-none': readOnly }" show-img-size show-img-toolbar show-img-resize :placeholder="placeholder" :read-only="readOnly" @statuschange="onStatusChange" @ready="onEditorReady" @input="onEditorInput"></editor>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorPicker from './color-picker.vue'
|
||||
import LinkEdit from './link-edit.vue'
|
||||
import FabTool from './fab-tool.vue'
|
||||
import { addLink, linkFlag } from '../../utils'
|
||||
import { mapState } from "vuex"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ColorPicker,
|
||||
LinkEdit,
|
||||
FabTool
|
||||
},
|
||||
props: {
|
||||
// 编辑器id可传入，以便循环组件使用，防止id重复
|
||||
editorId: {
|
||||
type: String,
|
||||
default: 'editor'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '写点什么吧 ~'
|
||||
},
|
||||
// 是否只读
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 最大字数限制，-1不限
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
// 工具栏配置
|
||||
toolbarConfig: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
keys: [], // 要显示的工具，优先级最大
|
||||
excludeKeys: [], // 除这些指定的工具外，其他都显示
|
||||
iconSize: '18px', // 工具栏字体大小
|
||||
iconColumns: 10, // 工具栏列数
|
||||
showFullscreen: false, // 是否存在全屏
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
toolbarConfig: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newToolbar) {
|
||||
/**
|
||||
* 若工具栏配置中keys存在，则以keys为准
|
||||
* 否则以excludeKeys向toolbarAllList中排查
|
||||
* 若keys与excludeKeys皆为空，则以toolbarAllList为准
|
||||
*/
|
||||
if (newToolbar.keys?.length > 0) {
|
||||
this.toolbarList = newToolbar.keys
|
||||
} else {
|
||||
this.toolbarList =
|
||||
newToolbar.excludeKeys?.length > 0 ?
|
||||
this.toolbarAllList.filter((item) => !newToolbar.excludeKeys.includes(item)) :
|
||||
this.toolbarAllList
|
||||
}
|
||||
this.iconSize = newToolbar.iconSize || '18px'
|
||||
this.iconColumns = newToolbar.iconColumns || 10
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formats: {},
|
||||
curFab: '', // 当前悬浮工具栏
|
||||
fabXY: {},
|
||||
textColor: '',
|
||||
backgroundColor: '',
|
||||
curColor: '',
|
||||
defaultColor: { r: 0, g: 0, b: 0, a: 1 }, // 调色板默认颜色
|
||||
iconSize: '20px', // 工具栏图标字体大小
|
||||
iconColumns: 10, // 工具栏列数
|
||||
toolbarList: [],
|
||||
toolbarAllList: [
|
||||
'header', // 标题
|
||||
'H1', // 一级标题
|
||||
'H2', // 二级标题
|
||||
'H3', // 三级标题
|
||||
'H4', // 四级标题
|
||||
'H5', // 五级标题
|
||||
'H6', // 六级标题
|
||||
'bold', // 加粗
|
||||
'italic', // 斜体
|
||||
'underline', // 下划线
|
||||
'strike', // 删除线
|
||||
'align', // 对齐方式
|
||||
'alignLeft', // 左对齐
|
||||
'alignCenter', // 居中对齐
|
||||
'alignRight', // 右对齐
|
||||
'alignJustify', // 两端对齐
|
||||
'lineHeight', // 行间距
|
||||
'letterSpacing', // 字间距
|
||||
'marginTop', // 段前距
|
||||
'marginBottom', // 段后距
|
||||
'fontFamily', // 字体
|
||||
'fontSize', // 字号
|
||||
'color', // 文字颜色
|
||||
'backgroundColor', // 背景颜色
|
||||
'date', // 日期
|
||||
'listCheck', // 待办
|
||||
'listOrdered', // 有序列表
|
||||
'listBullet', // 无序列表
|
||||
'indentInc', // 增加缩进
|
||||
'indentDec', // 减少缩进
|
||||
'divider', // 分割线
|
||||
'scriptSub', // 下标
|
||||
'scriptSuper', // 上标
|
||||
'direction', // 文本方向
|
||||
'image', // 图片
|
||||
'video', // 视频
|
||||
'link', // 超链接
|
||||
'undo', // 撤销
|
||||
'redo', // 重做
|
||||
'removeFormat', // 清除格式
|
||||
'clear', // 清空
|
||||
'export' // 导出
|
||||
],
|
||||
fabTools: {
|
||||
header: [
|
||||
{ title: '一级标题', name: 'H1', value: 1, icon: 'icon-format-header-1' },
|
||||
{ title: '二级标题', name: 'H2', value: 2, icon: 'icon-format-header-2' },
|
||||
{ title: '三级标题', name: 'H3', value: 3, icon: 'icon-format-header-3' },
|
||||
{ title: '四级标题', name: 'H4', value: 4, icon: 'icon-format-header-4' },
|
||||
{ title: '五级标题', name: 'H5', value: 5, icon: 'icon-format-header-5' },
|
||||
{ title: '六级标题', name: 'H6', value: 6, icon: 'icon-format-header-6' }
|
||||
],
|
||||
fontFamily: [
|
||||
{ title: '宋体', name: '宋', value: '宋体', icon: '' },
|
||||
{ title: '黑体', name: '黑', value: '黑体', icon: '' },
|
||||
{ title: '楷体', name: '楷', value: '楷体', icon: '' },
|
||||
{ title: '仿宋', name: '仿', value: '仿宋', icon: '' },
|
||||
{ title: '华文隶书', name: '隶', value: 'STLiti', icon: '' },
|
||||
{ title: '华文行楷', name: '行', value: 'STXingkai', icon: '' },
|
||||
{ title: '幼圆', name: '圆', value: 'YouYuan', icon: '' }
|
||||
],
|
||||
fontSize: [
|
||||
{ title: '12', name: '12', value: '12px', icon: '' },
|
||||
{ title: '14', name: '14', value: '14px', icon: '' },
|
||||
{ title: '16', name: '16', value: '16px', icon: '' },
|
||||
{ title: '18', name: '18', value: '18px', icon: '' },
|
||||
{ title: '20', name: '20', value: '20px', icon: '' },
|
||||
{ title: '22', name: '22', value: '22px', icon: '' },
|
||||
{ title: '24', name: '24', value: '24px', icon: '' }
|
||||
],
|
||||
align: [
|
||||
{ title: '左对齐', name: 'alignLeft', value: 'left', icon: 'icon-zuoduiqi' },
|
||||
{ title: '居中对齐', name: 'alignCenter', value: 'center', icon: 'icon-juzhongduiqi' },
|
||||
{ title: '右对齐', name: 'alignRight', value: 'right', icon: 'icon-youduiqi' },
|
||||
{ title: '两端对齐', name: 'alignJustify', value: 'justify', icon: 'icon-zuoyouduiqi' }
|
||||
],
|
||||
lineHeight: [
|
||||
{ title: '1倍', name: '1', value: '1', icon: '' },
|
||||
{ title: '1.5倍', name: '1.5', value: '1.5', icon: '' },
|
||||
{ title: '2倍', name: '2', value: '2', icon: '' },
|
||||
{ title: '2.5倍', name: '2.5', value: '2.5', icon: '' },
|
||||
{ title: '3倍', name: '3', value: '3', icon: '' }
|
||||
],
|
||||
// 字间距/段前距/段后距
|
||||
space: [
|
||||
{ title: '0.5倍', name: '0.5', value: '0.5em', icon: '' },
|
||||
{ title: '1倍', name: '1', value: '1em', icon: '' },
|
||||
{ title: '1.5倍', name: '1.5', value: '1.5em', icon: '' },
|
||||
{ title: '2倍', name: '2', value: '2em', icon: '' },
|
||||
{ title: '2.5倍', name: '2.5', value: '2.5em', icon: '' },
|
||||
{ title: '3倍', name: '3', value: '3em', icon: '' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onEditorReady() {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select('#' + this.editorId)
|
||||
.context((res) => {
|
||||
this.editorCtx = res.context
|
||||
this.$emit('init', this.editorCtx, this.editorId)
|
||||
})
|
||||
.exec()
|
||||
},
|
||||
undo() {
|
||||
this.editorCtx.undo()
|
||||
},
|
||||
redo() {
|
||||
this.editorCtx.redo()
|
||||
},
|
||||
format(e) {
|
||||
let { name, value } = e.target.dataset
|
||||
if (!name) return
|
||||
switch (name) {
|
||||
case 'color':
|
||||
case 'backgroundColor':
|
||||
this.curColor = name
|
||||
this.showPicker()
|
||||
break
|
||||
default:
|
||||
this.editorCtx.format(name, value)
|
||||
break
|
||||
}
|
||||
},
|
||||
// 悬浮工具点击
|
||||
fabTap(fabType) {
|
||||
if (this.curFab != fabType) {
|
||||
this.curFab = fabType
|
||||
} else {
|
||||
this.curFab = ''
|
||||
}
|
||||
},
|
||||
// 悬浮工具子集点击
|
||||
fabTapSub(e, fabType) {
|
||||
this.format(e)
|
||||
this.fabTap(fabType)
|
||||
},
|
||||
showPicker() {
|
||||
switch (this.curColor) {
|
||||
case 'color':
|
||||
this.defaultColor = this.textColor ?
|
||||
this.$refs.colorPickerRef.hex2Rgb(this.textColor) : { r: 0, g: 0, b: 0, a: 1 }
|
||||
break
|
||||
case 'backgroundColor':
|
||||
this.defaultColor = this.backgroundColor ?
|
||||
this.$refs.colorPickerRef.hex2Rgb(this.backgroundColor) : { r: 0, g: 0, b: 0, a: 0 }
|
||||
break
|
||||
}
|
||||
this.$refs.colorPickerRef.open()
|
||||
},
|
||||
confirmColor(e) {
|
||||
switch (this.curColor) {
|
||||
case 'color':
|
||||
this.textColor = e.hex
|
||||
this.editorCtx.format('color', this.textColor)
|
||||
break
|
||||
case 'backgroundColor':
|
||||
this.backgroundColor = e.hex
|
||||
this.editorCtx.format('backgroundColor', this.backgroundColor)
|
||||
break
|
||||
}
|
||||
},
|
||||
onStatusChange(e) {
|
||||
if (e.detail.color) {
|
||||
this.textColor = e.detail.color
|
||||
}
|
||||
if (e.detail.backgroundColor) {
|
||||
this.backgroundColor = e.detail.backgroundColor
|
||||
}
|
||||
this.formats = e.detail
|
||||
},
|
||||
insertDivider() {
|
||||
this.editorCtx.insertDivider()
|
||||
},
|
||||
clear() {
|
||||
uni.showModal({
|
||||
title: '清空编辑器',
|
||||
content: '确定清空编辑器吗？',
|
||||
success: ({ confirm }) => {
|
||||
if (confirm) {
|
||||
this.editorCtx.clear()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
removeFormat() {
|
||||
uni.showModal({
|
||||
title: '文本格式化',
|
||||
content: '确定要清除所选择部分文本块格式吗？',
|
||||
showCancel: true,
|
||||
success: ({ confirm }) => {
|
||||
if (confirm) {
|
||||
this.editorCtx.removeFormat()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
insertDate() {
|
||||
const date = new Date()
|
||||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
||||
this.editorCtx.insertText({ text: formatDate })
|
||||
},
|
||||
insertLink() {
|
||||
this.$refs.linkEditRef.open()
|
||||
},
|
||||
/**
|
||||
* 确认添加链接
|
||||
* @param {Object} e { text: '链接描述', href: '链接地址' }
|
||||
*/
|
||||
confirmLink(e) {
|
||||
this.$refs.linkEditRef.close()
|
||||
addLink(this.editorCtx, e, () => {
|
||||
// 修复添加超链接后，不触发input更新当前最新内容的bug，这里做一下手动更新
|
||||
this.editorCtx.getContents({
|
||||
success: (res) => {
|
||||
this.$emit('input', { html: res.html, text: res.text }, this.editorId)
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('addLink', e, this.editorId)
|
||||
},
|
||||
insertImage() {
|
||||
// #ifdef APP-PLUS || H5
|
||||
uni.chooseImage({
|
||||
// count: 1, // 默认9
|
||||
success: (res) => {
|
||||
const { tempFiles } = res
|
||||
// 将文件和编辑器示例抛出，由开发者自行上传和插入图片
|
||||
this.$emit('upinImage', tempFiles, this.editorCtx, this.editorId)
|
||||
},
|
||||
fail() {
|
||||
uni.showToast({
|
||||
title: '未授权访问相册权限，请授权后使用',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
|
||||
uni.chooseMedia({
|
||||
// count: 1, // 默认9
|
||||
mediaType: ['image'],
|
||||
success: (res) => {
|
||||
// 同上chooseImage处理
|
||||
const { tempFiles } = res
|
||||
this.$emit('upinImage', tempFiles, this.editorCtx, this.editorId)
|
||||
},
|
||||
fail() {
|
||||
uni.showToast({
|
||||
title: '未授权访问相册权限，请授权后使用',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
insertVideo() {
|
||||
uni.chooseVideo({
|
||||
sourceType: ['camera', 'album'],
|
||||
success: (res) => {
|
||||
const { tempFilePath } = res
|
||||
// 将文件和编辑器示例抛出，由开发者自行上传和插入图片
|
||||
this.$emit('upinVideo', tempFilePath, this.editorCtx, this.editorId)
|
||||
},
|
||||
fail() {
|
||||
uni.showToast({
|
||||
title: '未授权访问媒体权限，请授权后使用',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onEditorInput(e) {
|
||||
// 注意不要使用getContents获取html和text，会导致重复触发onStatusChange从而失去toolbar工具的高亮状态
|
||||
// 复制粘贴的时候detail会为空，此时应当直接return
|
||||
if (Object.keys(e.detail).length <= 0) return
|
||||
const { html, text } = e.detail
|
||||
// 识别到标识立即return
|
||||
if (text.indexOf(linkFlag) !== -1) return
|
||||
|
||||
const maxlength = parseInt(this.maxlength)
|
||||
const textStr = text.replace(/[ \t\r\n]/g, '')
|
||||
if (textStr.length > maxlength && maxlength != -1) {
|
||||
uni.showModal({
|
||||
content: `超过${maxlength}字数啦~`,
|
||||
confirmText: '确定',
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
this.$emit('overMax', { html, text }, this.editorId)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$emit('input', { html, text }, this.editorId)
|
||||
}
|
||||
},
|
||||
eLongpress() {
|
||||
/**
|
||||
* 微信小程序官方editor的长按事件有bug，需要重写覆盖，不需做任何逻辑，可见下面小程序社区问题链接
|
||||
* @tutorial https://developers.weixin.qq.com/community/develop/doc/000c04b3e1c1006f660065e4f61000
|
||||
*/
|
||||
},
|
||||
// 全屏
|
||||
fullscreen() {
|
||||
this.$emit('fullscreen', this.editorId)
|
||||
},
|
||||
// 导出
|
||||
exportHtml() {
|
||||
this.editorCtx.getContents({
|
||||
success: (res) => {
|
||||
this.$emit('exportHtml', res.html, this.editorId)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取数据
|
||||
getHtml() {
|
||||
return new Promise(resolve => {
|
||||
this.editorCtx.getContents({
|
||||
success: (res) => {
|
||||
resolve(res.html)
|
||||
},
|
||||
fail: () => {
|
||||
reject("")
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/uni_modules/sp-editor/icons/editor-icon.css';
|
||||
@import '@/uni_modules/sp-editor/icons/custom-icon.css';
|
||||
|
||||
.sp-editor {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.sp-editor-toolbar {
|
||||
box-sizing: border-box;
|
||||
padding: calc(var(--icon-size) / 4) 0;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--icon-columns), 1fr);
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: calc(var(--icon-size) * 1.8);
|
||||
cursor: pointer;
|
||||
font-size: var(--icon-size);
|
||||
}
|
||||
|
||||
.sp-editor-wrapper {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-bottom: 112rpx;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ql-image-overlay-none {
|
||||
::v-deep .ql-image-overlay {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ql-editor.ql-blank::before {
|
||||
font-style: normal;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
::v-deep .ql-container {
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.ql-active {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.fab-tools {
|
||||
display: flex;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.fab-sub {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 96;
|
||||
background: #ffffff;
|
||||
padding: 12rpx 16rpx;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
}
|
||||
|
||||
.submit-footer .footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.submit-footer .footer-space {
|
||||
width: 100%;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
24
uni_modules/sp-editor/icons/custom-icon.css
Normal file
24
uni_modules/sp-editor/icons/custom-icon.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('data:font/ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTahWRN8AAAeEAAAAHEdERUYAKQALAAAHZAAAAB5PUy8yPElI7QAAAVgAAABgY21hcOY96ckAAAHMAAABSmdhc3D//wADAAAHXAAAAAhnbHlmPxK+mgAAAyQAAAF4aGVhZCjWXYcAAADcAAAANmhoZWEHngOFAAABFAAAACRobXR4DIgAQAAAAbgAAAASbG9jYQCkALwAAAMYAAAADG1heHABGQB9AAABOAAAACBuYW1lXoIBAgAABJwAAAKCcG9zdENa1TcAAAcgAAAAOQABAAAAAQAA20yLC18PPPUACwQAAAAAAOLbjMwAAAAA4tuMzABA/78DwAMzAAAACAACAAAAAAAAAAEAAAOA/4AAXAQAAAAAAAPAAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAFAHEACgAAAAAAAgAAAAoACgAAAP8AAAAAAAAABAQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZADA5hTmHgOA/4AAAAPcAIAAAAABAAAAAAAAAAAAAAAgAAEEAAAAAAAAAAQAAAAEAABAAIgAAAAAAAMAAAADAAAAHAABAAAAAABEAAMAAQAAABwABAAoAAAABgAEAAEAAuYU5h7//wAA5hTmHv//Ge8Z5gABAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApAC8AAoAQABAA8ACwAARABQAGAAoADQAQABMAFgAZABwAAABHgEUBg8BBiIuAT0BND4BMh8BFTcBESERBSEiJjURNDYzITIWFREUBgE0NjIWFREUBiImNRMyFhQGKwEiJjQ2MxcyFhQGKwEiJjQ2MwE0NjIWFREUBiImNRMiJjQ2OwEyFhQGIwciJjQ2OwEyFhQGIwJwCAgICKAHEQ8JCQ8RBxBCAV79AAMA/QAbJSUbAwAbJSX9JRMaExMaEyANExMNgA0TEw2ADRMTDYANExMNAqATGhMTGhMgDRMTDYANExMNgA0TEw2ADRMTDQGcBQ8QDwVgBAgPCcAJDwgEVU4n/wACAP4AQCUbAgAbJSUb/gAbJQJgDRMTDf3gDRMTDQGAExoTExoTwBMaExMaEwFgDRMTDf3gDRMTDQFAExoTExoTwBMaExMaEwABAIj/vwNpAzMACwAAEzMRIREzESMRIREjiJABwZCQ/j+QAzP+jwFx/IwBiP54AAAAABIA3gABAAAAAAAAABMAKAABAAAAAAABAAgATgABAAAAAAACAAcAZwABAAAAAAADAAgAgQABAAAAAAAEAAgAnAABAAAAAAAFAAsAvQABAAAAAAAGAAgA2wABAAAAAAAKACsBPAABAAAAAAALABMBkAADAAEECQAAACYAAAADAAEECQABABAAPAADAAEECQACAA4AVwADAAEECQADABAAbwADAAEECQAEABAAigADAAEECQAFABYApQADAAEECQAGABAAyQADAAEECQAKAFYA5AADAAEECQALACYBaABDAHIAZQBhAHQAZQBkACAAYgB5ACAAaQBjAG8AbgBmAG8AbgB0AABDcmVhdGVkIGJ5IGljb25mb250AABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABpAGMAbwBuAGYAbwBuAHQAAGljb25mb250AABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAABHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuAABoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAABodHRwOi8vZm9udGVsbG8uY29tAAAAAAIAAAAAAAAACgAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABQAAAAEAAgECAQMFdmlkZW8GaGVhZGVyAAAAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAAAAAAEAAAAA4p8rRgAAAADi24zMAAAAAOLbjMw=') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-header:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.icon-video:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
238
uni_modules/sp-editor/icons/editor-icon.css
Normal file
238
uni_modules/sp-editor/icons/editor-icon.css
Normal file
File diff suppressed because one or more lines are too long
83
uni_modules/sp-editor/package.json
Normal file
83
uni_modules/sp-editor/package.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "sp-editor",
|
||||
"displayName": "官方富文本编辑器editor组件改良扩展优化版",
|
||||
"version": "1.5.0",
|
||||
"description": "基于官方的富文本编辑器editor组件，进行改良扩展优化版，添加了调色板，添加超链接等功能，可自定义扩展工具，快来试试吧~",
|
||||
"keywords": [
|
||||
"富文本",
|
||||
"editor",
|
||||
"编辑器"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"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",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
uni_modules/sp-editor/readme.md
Normal file
19
uni_modules/sp-editor/readme.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# sp-editor
|
||||
|
||||
### 视频插入功能
|
||||
|
||||
`于2024-7-20日v1.4.4版本更新视频插入功能（属实是鸽🕊了太久了）`
|
||||
|
||||
- 实现方案：先以图片占位，在导出时，将携带视频链接的图片转换成视频标签。
|
||||
- 更多请参考示例一
|
||||
- 如果该插件有帮助到您，还望能点赞好评一下，谢谢！🌟
|
||||
|
||||
### 文档迁移
|
||||
|
||||
> 防止文档失效，提供下列五个地址，内容一致
|
||||
|
||||
- [地址一](https://sonvee.github.io/sv-app-docs/docs-github/src/plugins/sp-editor/sp-editor.html)
|
||||
- [地址二](https://sv-app-docs.pages.dev/src/plugins/sp-editor/sp-editor.html)
|
||||
- [地址三](https://sv-app-docs.4everland.app/src/plugins/sp-editor/sp-editor.html)
|
||||
- [地址四](https://sv-app-docs.vercel.app/src/plugins/sp-editor/sp-editor.html) (需要梯子)
|
||||
- [地址五](https://static-mp-74bfcbac-6ba6-4f39-8513-8831390ff75a.next.bspapp.com/docs-uni/src/plugins/sp-editor/sp-editor.html) (有IP限制)
|
||||
132
uni_modules/sp-editor/utils/index.js
Normal file
132
uni_modules/sp-editor/utils/index.js
Normal file
@@ -0,0 +1,132 @@
|
||||
// 标识必须独一无二 - 标识是为了使用insertText插入标识文本后，查找到标识所在delta位置的索引
|
||||
export const linkFlag = '#-*=*-*=*-*=*@-link超链接标识link-@*=*-*=*-*=*-#'
|
||||
|
||||
export function addLink(editorCtx, attr, callback) {
|
||||
// 先插入一段文本内容
|
||||
editorCtx.insertText({
|
||||
text: linkFlag
|
||||
})
|
||||
// 获取全文delta内容
|
||||
editorCtx.getContents({
|
||||
success(res) {
|
||||
let options = res.delta.ops
|
||||
const findex = options.findIndex(item => {
|
||||
return item.insert && typeof item.insert !== 'object' && item.insert?.indexOf(linkFlag) !== -1
|
||||
})
|
||||
// 根据标识查找到插入的位置
|
||||
if (findex > -1) {
|
||||
const findOption = options[findex]
|
||||
const findAttributes = findOption.attributes
|
||||
// 将该findOption分成三部分：前内容 要插入的link 后内容
|
||||
const [prefix, suffix] = findOption.insert.split(linkFlag);
|
||||
const handleOps = []
|
||||
// 前内容
|
||||
if (prefix) {
|
||||
const prefixOps = findAttributes ? {
|
||||
insert: prefix,
|
||||
attributes: findAttributes
|
||||
} : {
|
||||
insert: prefix
|
||||
}
|
||||
handleOps.push(prefixOps)
|
||||
}
|
||||
// 插入的link
|
||||
const linkOps = {
|
||||
insert: attr.text,
|
||||
attributes: {
|
||||
link: attr.href,
|
||||
textDecoration: attr.textDecoration || 'none', // 下划线
|
||||
color: attr.color || '#007aff'
|
||||
}
|
||||
}
|
||||
handleOps.push(linkOps)
|
||||
// 后内容
|
||||
if (suffix) {
|
||||
const suffixOps = findAttributes ? {
|
||||
insert: suffix,
|
||||
attributes: findAttributes
|
||||
} : {
|
||||
insert: suffix
|
||||
}
|
||||
handleOps.push(suffixOps)
|
||||
}
|
||||
// 删除原options[findex]并在findex位置插入上述三个ops
|
||||
options.splice(findex, 1);
|
||||
options.splice(findex, 0, ...handleOps);
|
||||
// 最后重新初始化内容，注意该方法会导致光标重置到最开始位置
|
||||
editorCtx.setContents({
|
||||
delta: {
|
||||
ops: options
|
||||
}
|
||||
})
|
||||
// 所以最后建议使富文本光标失焦，让用户手动聚焦光标
|
||||
editorCtx.blur()
|
||||
|
||||
// 后续回调操作
|
||||
if (callback) callback()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 将含有特殊图片形式视频的富文本转换成正常视频的富文本
|
||||
* @param {String} html 要进行处理的富文本字符串
|
||||
* @returns {String} 返回处理结果
|
||||
*/
|
||||
export function handleHtmlWithVideo(html) {
|
||||
// 正则表达式用于匹配img标签中带有alt属性且alt属性值为视频链接的模式
|
||||
const regex = /<img\s+src="[^"]*"\s+alt="([^"]*)"[^>]*>/g
|
||||
// 使用replace方法和一个函数回调来替换匹配到的内容
|
||||
return html.replace(regex, (match, videoUrl) => {
|
||||
// 替换为video标签，并添加controls属性以便用户可以控制播放
|
||||
return `<video width="80%" controls><source src="${videoUrl}" type="video/mp4"></video>`
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 将img标签中内联style属性中的宽高样式提取出标签width与height属性
|
||||
* @param {Object} html 要处理的富文本字符串
|
||||
* @returns {Object} 返回处理结果
|
||||
*/
|
||||
export function convertImgStylesToAttributes(html) {
|
||||
return html.replace(/<img\s+([^>]+)\s*>/g, function(match, attributes) {
|
||||
// 分割属性
|
||||
const attrs = attributes.split(/\s+/);
|
||||
|
||||
// 找到style属性的位置
|
||||
const styleIndex = attrs.findIndex(attr => attr.startsWith('style='));
|
||||
if (styleIndex === -1) return match; // 如果没有找到style属性，则返回原样
|
||||
|
||||
// 提取style属性值
|
||||
const styleAttr = attrs.splice(styleIndex, 1)[0];
|
||||
const style = styleAttr.match(/"([^"]*)"/)[1];
|
||||
|
||||
// 解析 style 属性
|
||||
const styleObj = {};
|
||||
style.split(';').forEach(function(part) {
|
||||
if (part) {
|
||||
const [name, value] = part.split(':');
|
||||
styleObj[name.trim()] = value.trim();
|
||||
}
|
||||
});
|
||||
|
||||
// 创建新的 img 标签
|
||||
let newTag = '<img';
|
||||
if (styleObj.width) {
|
||||
newTag += ` width="${styleObj.width}"`;
|
||||
}
|
||||
if (styleObj.height) {
|
||||
newTag += ` height="${styleObj.height}"`;
|
||||
}
|
||||
|
||||
// 添加原有的属性，包括修改过的style属性
|
||||
newTag += ` ${styleAttr} ${attrs.join(' ')}`;
|
||||
|
||||
// 关闭 img 标签
|
||||
newTag += '>';
|
||||
|
||||
return newTag;
|
||||
});
|
||||
}
|
||||
160
uni_modules/uni-datetime-picker/changelog.md
Normal file
160
uni_modules/uni-datetime-picker/changelog.md
Normal file
@@ -0,0 +1,160 @@
|
||||
## 2.2.34（2024-04-24）
|
||||
- 新增 日期点击事件，在点击日期时会触发该事件。
|
||||
## 2.2.33（2024-04-15）
|
||||
- 修复 抖音小程序事件传递失效bug
|
||||
## 2.2.32（2024-02-20）
|
||||
- 修复 日历的close事件触发异常的bug [详情](https://github.com/dcloudio/uni-ui/issues/844)
|
||||
## 2.2.31（2024-02-20）
|
||||
- 修复 h5平台 右边日历的月份默认+1的bug [详情](https://github.com/dcloudio/uni-ui/issues/841)
|
||||
## 2.2.30（2024-01-31）
|
||||
- 修复 隐藏“秒”时，在IOS15及以下版本时出现 结束时间在开始时间之前 的bug [详情](https://github.com/dcloudio/uni-ui/issues/788)
|
||||
## 2.2.29（2024-01-20）
|
||||
- 新增 show事件，弹窗弹出时触发该事件 [详情](https://github.com/dcloudio/uni-app/issues/4694)
|
||||
## 2.2.28（2024-01-18）
|
||||
- 去除 noChange事件，当进行日期范围选择时，若只选了一天，则开始结束日期都为同一天 [详情](https://github.com/dcloudio/uni-ui/issues/815)
|
||||
## 2.2.27（2024-01-10）
|
||||
- 优化 增加noChange事件，当进行日期范围选择时，若有空值，则触发该事件 [详情](https://github.com/dcloudio/uni-ui/issues/815)
|
||||
## 2.2.26（2024-01-08）
|
||||
- 修复 字节小程序时间选择范围器失效问题 [详情](https://github.com/dcloudio/uni-ui/issues/834)
|
||||
## 2.2.25（2023-10-18）
|
||||
- 修复 PC端初次修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
|
||||
## 2.2.24（2023-06-02）
|
||||
- 修复 部分情况修改时间，开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146)
|
||||
- 优化 当前月可以选择上月、下月的日期的Bug
|
||||
## 2.2.23（2023-05-02）
|
||||
- 修复 部分情况修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
|
||||
- 修复 部分平台及设备第一次点击无法显示弹框的Bug
|
||||
- 修复 ios 日期格式未补零显示及使用异常的Bug [详情](https://ask.dcloud.net.cn/question/162979)
|
||||
## 2.2.22（2023-03-30）
|
||||
- 修复 日历 picker 修改年月后，自动选中当月1日的Bug [详情](https://ask.dcloud.net.cn/question/165937)
|
||||
- 修复 小程序端 低版本 ios NaN的Bug [详情](https://ask.dcloud.net.cn/question/162979)
|
||||
## 2.2.21（2023-02-20）
|
||||
- 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362)
|
||||
## 2.2.20（2023-02-17）
|
||||
- 优化 值为空依然选中当天问题
|
||||
- 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间
|
||||
- 优化 非范围选择未选择日期时间，点击确认按钮选中当前日期时间
|
||||
- 优化 字节小程序日期时间范围选择，底部日期换行的Bug
|
||||
## 2.2.19（2023-02-09）
|
||||
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
|
||||
## 2.2.18（2023-02-08）
|
||||
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
|
||||
- 优化 PC端输入日期格式错误时返回当前日期时间
|
||||
- 优化 PC端输入日期时间超出 start、end 限制的Bug
|
||||
- 优化 移动端日期时间范围用法时间展示不完整问题
|
||||
## 2.2.17（2023-02-04）
|
||||
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
|
||||
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
|
||||
## 2.2.16（2023-02-02）
|
||||
- 修复 字节小程序报错的Bug
|
||||
## 2.2.15（2023-02-02）
|
||||
- 修复 某些情况切换月份错误的Bug
|
||||
## 2.2.14（2023-01-30）
|
||||
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
|
||||
## 2.2.13（2023-01-10）
|
||||
- 修复 多次加载组件造成内存占用的Bug
|
||||
## 2.2.12（2022-12-01）
|
||||
- 修复 vue3 下 i18n 国际化初始值不正确的Bug
|
||||
## 2.2.11（2022-09-19）
|
||||
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
|
||||
## 2.2.10（2022-09-19）
|
||||
- 修复 反向选择日期范围，日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
|
||||
## 2.2.9（2022-09-16）
|
||||
- 可以使用 uni-scss 控制主题色
|
||||
## 2.2.8（2022-09-08）
|
||||
- 修复 close事件无效的Bug
|
||||
## 2.2.7（2022-09-05）
|
||||
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
|
||||
## 2.2.6（2022-06-30）
|
||||
- 优化 组件样式，调整了组件图标大小、高度、颜色等，与uni-ui风格保持一致
|
||||
## 2.2.5（2022-06-24）
|
||||
- 修复 日历顶部年月及底部确认未国际化的Bug
|
||||
## 2.2.4（2022-03-31）
|
||||
- 修复 Vue3 下动态赋值,单选类型未响应的Bug
|
||||
## 2.2.3（2022-03-28）
|
||||
- 修复 Vue3 下动态赋值未响应的Bug
|
||||
## 2.2.2（2021-12-10）
|
||||
- 修复 clear-icon 属性在小程序平台不生效的Bug
|
||||
## 2.2.1（2021-12-10）
|
||||
- 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的Bug
|
||||
## 2.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
||||
## 2.1.5（2021-11-09）
|
||||
- 新增 提供组件设计资源，组件样式调整
|
||||
## 2.1.4（2021-09-10）
|
||||
- 修复 hide-second 在移动端的Bug
|
||||
- 修复 单选赋默认值时，赋值日期未高亮的Bug
|
||||
- 修复 赋默认值时，移动端未正确显示时间的Bug
|
||||
## 2.1.3（2021-09-09）
|
||||
- 新增 hide-second 属性，支持只使用时分，隐藏秒
|
||||
## 2.1.2（2021-09-03）
|
||||
- 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
|
||||
- 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
|
||||
- 优化 调整字号大小，美化日历界面
|
||||
- 修复 因国际化导致的 placeholder 失效的Bug
|
||||
## 2.1.1（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
- 优化 范围选择器在 pc 端过宽的问题
|
||||
## 2.1.0（2021-08-09）
|
||||
- 新增 适配 vue3
|
||||
## 2.0.19（2021-08-09）
|
||||
- 新增 支持作为 uni-forms 子组件相关功能
|
||||
- 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的Bug
|
||||
## 2.0.18（2021-08-05）
|
||||
- 修复 type 属性动态赋值无效的Bug
|
||||
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
|
||||
- 修复 组件未赋值时范围选左、右日历相同的Bug
|
||||
## 2.0.17（2021-08-04）
|
||||
- 修复 范围选未正确显示当前值的Bug
|
||||
- 修复 h5 平台（移动端）报错 'cale' of undefined 的Bug
|
||||
## 2.0.16（2021-07-21）
|
||||
- 新增 return-type 属性支持返回 date 日期对象
|
||||
## 2.0.15（2021-07-14）
|
||||
- 修复 单选日期类型，初始赋值后不在当前日历的Bug
|
||||
- 新增 clearIcon 属性，显示框的清空按钮可配置显示隐藏（仅 pc 有效）
|
||||
- 优化 移动端移除显示框的清空按钮，无实际用途
|
||||
## 2.0.14（2021-07-14）
|
||||
- 修复 组件赋值为空，界面未更新的Bug
|
||||
- 修复 start 和 end 不能动态赋值的Bug
|
||||
- 修复 范围选类型，用户选择后再次选择右侧日历（结束日期）显示不正确的Bug
|
||||
## 2.0.13（2021-07-08）
|
||||
- 修复 范围选择不能动态赋值的Bug
|
||||
## 2.0.12（2021-07-08）
|
||||
- 修复 范围选择的初始时间在一个月内时，造成无法选择的bug
|
||||
## 2.0.11（2021-07-08）
|
||||
- 优化 弹出层在超出视窗边缘定位不准确的问题
|
||||
## 2.0.10（2021-07-08）
|
||||
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的Bug
|
||||
- 优化 弹出层在超出视窗边缘被遮盖的问题
|
||||
## 2.0.9（2021-07-07）
|
||||
- 新增 maskClick 事件
|
||||
- 修复 特殊情况日历 rpx 布局错误的Bug，rpx -> px
|
||||
- 修复 范围选择时清空返回值不合理的bug，['', ''] -> []
|
||||
## 2.0.8（2021-07-07）
|
||||
- 新增 日期时间显示框支持插槽
|
||||
## 2.0.7（2021-07-01）
|
||||
- 优化 添加 uni-icons 依赖
|
||||
## 2.0.6（2021-05-22）
|
||||
- 修复 图标在小程序上不显示的Bug
|
||||
- 优化 重命名引用组件，避免潜在组件命名冲突
|
||||
## 2.0.5（2021-05-20）
|
||||
- 优化 代码目录扁平化
|
||||
## 2.0.4（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 2.0.3（2021-05-10）
|
||||
- 修复 ios 下不识别 '-' 日期格式的Bug
|
||||
- 优化 pc 下弹出层添加边框和阴影
|
||||
## 2.0.2（2021-05-08）
|
||||
- 修复 在 admin 中获取弹出层定位错误的bug
|
||||
## 2.0.1（2021-05-08）
|
||||
- 修复 type 属性向下兼容，默认值从 date 变更为 datetime
|
||||
## 2.0.0（2021-04-30）
|
||||
- 支持日历形式的日期+时间的范围选择
|
||||
> 注意：此版本不向后兼容，不再支持单独时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）
|
||||
## 1.0.6（2021-03-18）
|
||||
- 新增 hide-second 属性，时间支持仅选择时、分
|
||||
- 修复 选择跟显示的日期不一样的Bug
|
||||
- 修复 chang事件触发2次的Bug
|
||||
- 修复 分、秒 end 范围错误的Bug
|
||||
- 优化 更好的 nvue 适配
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="uni-calendar-item__weeks-box" :style="{'--theme-color': themeColor}" :class="{
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
|
||||
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
|
||||
<view class="uni-calendar-item__weeks-box-item" :class="{
|
||||
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
|
||||
'uni-calendar-item--checked-range-text': checkHover,
|
||||
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
}">
|
||||
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
|
||||
</view>
|
||||
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
weeks: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
checkHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
themeColor: {
|
||||
type: [String],
|
||||
default: '#007aff'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
choiceDate(weeks) {
|
||||
this.$emit('change', weeks)
|
||||
},
|
||||
handleMousemove(weeks) {
|
||||
this.$emit('handleMouse', weeks)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.uni-calendar-item__weeks-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 1px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box-text {
|
||||
font-size: 14px;
|
||||
// font-family: Lato-Bold, Lato;
|
||||
font-weight: bold;
|
||||
color: #5A5B6E;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box-item {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
.uni-calendar-item__weeks-box-circle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #dd524d;
|
||||
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
|
||||
color: #D1D1D1;
|
||||
}
|
||||
|
||||
.uni-calendar-item--today {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 17%;
|
||||
background-color: #dd524d;
|
||||
width:6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.uni-calendar-item--extra {
|
||||
color: #dd524d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
|
||||
background-color: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--checked .uni-calendar-item--checked-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple {
|
||||
background-color: #F6F7FC;
|
||||
// color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
|
||||
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
|
||||
background-color: var(--theme-color);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid #F6F7FC;
|
||||
}
|
||||
|
||||
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
|
||||
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--before-checked-x {
|
||||
border-top-left-radius: 50px;
|
||||
border-bottom-left-radius: 50px;
|
||||
box-sizing: border-box;
|
||||
background-color: #F6F7FC;
|
||||
}
|
||||
|
||||
.uni-calendar-item--after-checked-x {
|
||||
border-top-right-radius: 50px;
|
||||
border-bottom-right-radius: 50px;
|
||||
background-color: #F6F7FC;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,941 @@
|
||||
<template>
|
||||
<view class="uni-calendar" :style="{'--theme-color': themeColor}" @mouseleave="leaveCale">
|
||||
|
||||
<view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="maskClick"></view>
|
||||
|
||||
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
|
||||
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
|
||||
|
||||
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')">
|
||||
<view class="uni-calendar__header-btn uni-calendar--left"></view>
|
||||
</view>
|
||||
|
||||
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
||||
<text class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
|
||||
</picker>
|
||||
|
||||
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')">
|
||||
<view class="uni-calendar__header-btn uni-calendar--right"></view>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert" class="dialog-close" @click="maskClick">
|
||||
<view class="dialog-close-plus" data-id="close"></view>
|
||||
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-calendar__box">
|
||||
|
||||
<view v-if="showMonth" class="uni-calendar__box-bg">
|
||||
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||
</view>
|
||||
|
||||
<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{MONText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||
<calendar-item class="uni-calendar-item--hook" :theme-color="themeColor" :weeks="weeks" :calendar="calendar" :selected="selected" :checkHover="range" @change="choiceDate" @handleMouse="handleMouse">
|
||||
</calendar-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top" style="padding: 0 80px;">
|
||||
<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
|
||||
<time-picker type="time" :theme-color="themeColor" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time" :disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
|
||||
</time-picker>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
|
||||
<view class="uni-date-changed--time-start">
|
||||
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
|
||||
</view>
|
||||
<time-picker type="time" :theme-color="themeColor" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false" :hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
|
||||
</time-picker>
|
||||
</view>
|
||||
<view style="line-height: 50px;">
|
||||
<uni-icons type="arrowthinright" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="uni-date-changed--time-end">
|
||||
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
|
||||
<time-picker type="time" :theme-color="themeColor" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false" :hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
|
||||
</time-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
|
||||
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Calendar,
|
||||
getDate,
|
||||
getTime
|
||||
} from './util.js';
|
||||
import calendarItem from './calendar-item.vue'
|
||||
import timePicker from './time-picker.vue'
|
||||
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import i18nMessages from './i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(i18nMessages)
|
||||
|
||||
/**
|
||||
* Calendar 日历
|
||||
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
|
||||
* @property {String} date 自定义当前时间，默认为今天
|
||||
* @property {String} startDate 日期选择范围-开始日期
|
||||
* @property {String} endDate 日期选择范围-结束日期
|
||||
* @property {Boolean} range 范围选择
|
||||
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
||||
* @value true 弹窗模式
|
||||
* @value false 插入模式
|
||||
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||
* @property {Boolean} showMonth 是否选择月份为背景
|
||||
* @property {[String} defaultValue 选择器打开时默认显示的时间
|
||||
* @event {Function} change 日期改变，`insert :ture` 时生效
|
||||
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||
* @event {Function} monthSwitch 切换月份时触发
|
||||
* @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||
*/
|
||||
export default {
|
||||
components: {
|
||||
calendarItem,
|
||||
timePicker
|
||||
},
|
||||
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
props: {
|
||||
date: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
defTime: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
selectableTimes: {
|
||||
type: [Object],
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
startDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
endDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
startPlaceholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
endPlaceholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hasTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
insert: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
clearDate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
checkHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hideSecond: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
},
|
||||
pleStatus: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
before: '',
|
||||
after: '',
|
||||
data: [],
|
||||
fulldate: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultValue: {
|
||||
type: [String, Object, Array],
|
||||
default: ''
|
||||
},
|
||||
themeColor: {
|
||||
type: [String],
|
||||
default: '#007aff'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
weeks: [],
|
||||
calendar: {},
|
||||
nowDate: {},
|
||||
aniMaskShow: false,
|
||||
firstEnter: true,
|
||||
time: '',
|
||||
timeRange: {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
tempSingleDate: '',
|
||||
tempRange: {
|
||||
before: '',
|
||||
after: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
date: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (!this.range) {
|
||||
this.tempSingleDate = newVal
|
||||
setTimeout(() => {
|
||||
this.init(newVal)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
defTime: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (!this.range) {
|
||||
this.time = newVal
|
||||
} else {
|
||||
this.timeRange.startTime = newVal.start
|
||||
this.timeRange.endTime = newVal.end
|
||||
}
|
||||
}
|
||||
},
|
||||
startDate(val) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if (!this.cale) {
|
||||
return
|
||||
}
|
||||
this.cale.setStartDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
endDate(val) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if (!this.cale) {
|
||||
return
|
||||
}
|
||||
this.cale.setEndDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
selected(newVal) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if (!this.cale) {
|
||||
return
|
||||
}
|
||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
pleStatus: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
const {
|
||||
before,
|
||||
after,
|
||||
fulldate,
|
||||
which
|
||||
} = newVal
|
||||
this.tempRange.before = before
|
||||
this.tempRange.after = after
|
||||
setTimeout(() => {
|
||||
if (fulldate) {
|
||||
this.cale.setHoverMultiple(fulldate)
|
||||
if (before && after) {
|
||||
this.cale.lastHover = true
|
||||
if (this.rangeWithinMonth(after, before)) return
|
||||
this.setDate(before)
|
||||
} else {
|
||||
this.cale.setMultiple(fulldate)
|
||||
this.setDate(this.nowDate.fullDate)
|
||||
this.calendar.fullDate = ''
|
||||
this.cale.lastHover = false
|
||||
}
|
||||
} else {
|
||||
// 字节小程序 watch 早于 created
|
||||
if (!this.cale) {
|
||||
return
|
||||
}
|
||||
|
||||
this.cale.setDefaultMultiple(before, after)
|
||||
if (which === 'left' && before) {
|
||||
this.setDate(before)
|
||||
this.weeks = this.cale.weeks
|
||||
} else if (after) {
|
||||
this.setDate(after)
|
||||
this.weeks = this.cale.weeks
|
||||
}
|
||||
this.cale.lastHover = true
|
||||
}
|
||||
}, 16)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
timepickerStartTime() {
|
||||
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
|
||||
return activeDate === this.startDate ? this.selectableTimes.start : ''
|
||||
},
|
||||
timepickerEndTime() {
|
||||
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
|
||||
return activeDate === this.endDate ? this.selectableTimes.end : ''
|
||||
},
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
selectDateText() {
|
||||
return t("uni-datetime-picker.selectDate")
|
||||
},
|
||||
startDateText() {
|
||||
return this.startPlaceholder || t("uni-datetime-picker.startDate")
|
||||
},
|
||||
endDateText() {
|
||||
return this.endPlaceholder || t("uni-datetime-picker.endDate")
|
||||
},
|
||||
okText() {
|
||||
return t("uni-datetime-picker.ok")
|
||||
},
|
||||
yearText() {
|
||||
return t("uni-datetime-picker.year")
|
||||
},
|
||||
monthText() {
|
||||
return t("uni-datetime-picker.month")
|
||||
},
|
||||
MONText() {
|
||||
return t("uni-calender.MON")
|
||||
},
|
||||
TUEText() {
|
||||
return t("uni-calender.TUE")
|
||||
},
|
||||
WEDText() {
|
||||
return t("uni-calender.WED")
|
||||
},
|
||||
THUText() {
|
||||
return t("uni-calender.THU")
|
||||
},
|
||||
FRIText() {
|
||||
return t("uni-calender.FRI")
|
||||
},
|
||||
SATText() {
|
||||
return t("uni-calender.SAT")
|
||||
},
|
||||
SUNText() {
|
||||
return t("uni-calender.SUN")
|
||||
},
|
||||
confirmText() {
|
||||
return t("uni-calender.confirm")
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 获取日历方法实例
|
||||
this.cale = new Calendar({
|
||||
selected: this.selected,
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
range: this.range,
|
||||
})
|
||||
// 选中某一天
|
||||
this.init(this.date)
|
||||
},
|
||||
methods: {
|
||||
leaveCale() {
|
||||
this.firstEnter = true
|
||||
},
|
||||
handleMouse(weeks) {
|
||||
if (weeks.disable) return
|
||||
if (this.cale.lastHover) return
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.cale.multipleStatus
|
||||
if (!before) return
|
||||
this.calendar = weeks
|
||||
// 设置范围选
|
||||
this.cale.setHoverMultiple(this.calendar.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
// hover时，进入一个日历，更新另一个
|
||||
if (this.firstEnter) {
|
||||
this.$emit('firstEnterCale', this.cale.multipleStatus)
|
||||
this.firstEnter = false
|
||||
}
|
||||
},
|
||||
rangeWithinMonth(A, B) {
|
||||
const [yearA, monthA] = A.split('-')
|
||||
const [yearB, monthB] = B.split('-')
|
||||
return yearA === yearB && monthA === monthB
|
||||
},
|
||||
// 蒙版点击事件
|
||||
maskClick() {
|
||||
this.close()
|
||||
this.$emit('maskClose')
|
||||
},
|
||||
|
||||
clearCalender() {
|
||||
if (this.range) {
|
||||
this.timeRange.startTime = ''
|
||||
this.timeRange.endTime = ''
|
||||
this.tempRange.before = ''
|
||||
this.tempRange.after = ''
|
||||
this.cale.multipleStatus.before = ''
|
||||
this.cale.multipleStatus.after = ''
|
||||
this.cale.multipleStatus.data = []
|
||||
this.cale.lastHover = false
|
||||
} else {
|
||||
this.time = ''
|
||||
this.tempSingleDate = ''
|
||||
}
|
||||
this.calendar.fullDate = ''
|
||||
this.setDate(new Date())
|
||||
},
|
||||
|
||||
bindDateChange(e) {
|
||||
const value = e.detail.value + '-1'
|
||||
this.setDate(value)
|
||||
},
|
||||
/**
|
||||
* 初始化日期显示
|
||||
* @param {Object} date
|
||||
*/
|
||||
init(date) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if (!this.cale) {
|
||||
return
|
||||
}
|
||||
this.cale.setDate(date || new Date())
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
this.calendar = {
|
||||
...this.nowDate
|
||||
}
|
||||
if (!date) {
|
||||
// 优化date为空默认不选中今天
|
||||
this.calendar.fullDate = ''
|
||||
if (this.defaultValue && !this.range) {
|
||||
// 暂时只支持移动端非范围选择
|
||||
const defaultDate = new Date(this.defaultValue)
|
||||
const fullDate = getDate(defaultDate)
|
||||
const year = defaultDate.getFullYear()
|
||||
const month = defaultDate.getMonth() + 1
|
||||
const date = defaultDate.getDate()
|
||||
const day = defaultDate.getDay()
|
||||
this.calendar = {
|
||||
fullDate,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
day
|
||||
},
|
||||
this.tempSingleDate = fullDate
|
||||
this.time = getTime(defaultDate, this.hideSecond)
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 打开日历弹窗
|
||||
*/
|
||||
open() {
|
||||
// 弹窗模式并且清理数据
|
||||
if (this.clearDate && !this.insert) {
|
||||
this.cale.cleanMultipleStatus()
|
||||
this.init(this.date)
|
||||
}
|
||||
this.show = true
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.aniMaskShow = true
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 关闭日历弹窗
|
||||
*/
|
||||
close() {
|
||||
this.aniMaskShow = false
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.show = false
|
||||
this.$emit('close')
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
confirm() {
|
||||
this.setEmit('confirm')
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 变化触发
|
||||
*/
|
||||
change(isSingleChange) {
|
||||
if (!this.insert && !isSingleChange) return
|
||||
this.setEmit('change')
|
||||
},
|
||||
/**
|
||||
* 选择月份触发
|
||||
*/
|
||||
monthSwitch() {
|
||||
let {
|
||||
year,
|
||||
month
|
||||
} = this.nowDate
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month: Number(month)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 派发事件
|
||||
* @param {Object} name
|
||||
*/
|
||||
setEmit(name) {
|
||||
if (!this.range) {
|
||||
if (!this.calendar.fullDate) {
|
||||
this.calendar = this.cale.getInfo(new Date())
|
||||
this.tempSingleDate = this.calendar.fullDate
|
||||
}
|
||||
if (this.hasTime && !this.time) {
|
||||
this.time = getTime(new Date(), this.hideSecond)
|
||||
}
|
||||
}
|
||||
let {
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fullDate,
|
||||
extraInfo
|
||||
} = this.calendar
|
||||
this.$emit(name, {
|
||||
range: this.cale.multipleStatus,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
time: this.time,
|
||||
timeRange: this.timeRange,
|
||||
fulldate: fullDate,
|
||||
extraInfo: extraInfo || {}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 选择天触发
|
||||
* @param {Object} weeks
|
||||
*/
|
||||
choiceDate(weeks) {
|
||||
if (weeks.disable) return
|
||||
this.calendar = weeks
|
||||
this.calendar.userChecked = true
|
||||
// 设置多选
|
||||
this.cale.setMultiple(this.calendar.fullDate, true)
|
||||
this.weeks = this.cale.weeks
|
||||
this.tempSingleDate = this.calendar.fullDate
|
||||
const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
|
||||
const afterDate = new Date(this.cale.multipleStatus.after).getTime()
|
||||
if (beforeDate > afterDate && afterDate) {
|
||||
this.tempRange.before = this.cale.multipleStatus.after
|
||||
this.tempRange.after = this.cale.multipleStatus.before
|
||||
} else {
|
||||
this.tempRange.before = this.cale.multipleStatus.before
|
||||
this.tempRange.after = this.cale.multipleStatus.after
|
||||
}
|
||||
this.change(true)
|
||||
},
|
||||
changeMonth(type) {
|
||||
let newDate
|
||||
if (type === 'pre') {
|
||||
newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
|
||||
} else if (type === 'next') {
|
||||
newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
|
||||
}
|
||||
|
||||
this.setDate(newDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
this.cale.setDate(date)
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-calendar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-calendar__mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar--mask-show {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.uni-calendar--fixed {
|
||||
position: fixed;
|
||||
bottom: calc(var(--window-bottom));
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateY(460px);
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar--ani-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar__content-mobile {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.uni-calendar__header {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__header-mobile {
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.uni-calendar--fixed-top {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-top-color: rgba(0, 0, 0, 0.4);
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar--fixed-width {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__backtoday {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25rpx;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
color: #fff;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.uni-calendar__header-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.uni-calendar__button-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: 14px;
|
||||
color: var(--theme-color);
|
||||
/* #ifndef APP-NVUE */
|
||||
letter-spacing: 3px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar__header-btn-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__header-btn {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-left-color: #808080;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-top-color: #555555;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar--left {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.uni-calendar--right {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
|
||||
.uni-calendar__weeks {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-day {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
border-bottom-color: #F5F5F5;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-day-text {
|
||||
font-size: 12px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.uni-calendar__box {
|
||||
position: relative;
|
||||
// padding: 0 10px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.uni-calendar__box-bg {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.uni-calendar__box-bg-text {
|
||||
font-size: 200px;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
opacity: 0.1;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: 1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-date-changed {
|
||||
padding: 0 10px;
|
||||
// line-height: 50px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border-top-color: #DCDCDC;
|
||||
;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-date-btn--ok {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.uni-date-changed--time-start {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-date-changed--time-end {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-date-changed--time-date {
|
||||
color: #999;
|
||||
line-height: 50px;
|
||||
/* #ifdef MP-TOUTIAO */
|
||||
font-size: 16px;
|
||||
/* #endif */
|
||||
margin-right: 5px;
|
||||
// opacity: 0.6;
|
||||
}
|
||||
|
||||
.time-picker-style {
|
||||
// width: 62px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dialog-close-plus {
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: #737987;
|
||||
border-radius: 2px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.dialog-close-rotate {
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.uni-datetime-picker--btn {
|
||||
border-radius: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: var(--theme-color);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-datetime-picker--btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"uni-datetime-picker.selectDate": "select date",
|
||||
"uni-datetime-picker.selectTime": "select time",
|
||||
"uni-datetime-picker.selectDateTime": "select date and time",
|
||||
"uni-datetime-picker.startDate": "start date",
|
||||
"uni-datetime-picker.endDate": "end date",
|
||||
"uni-datetime-picker.startTime": "start time",
|
||||
"uni-datetime-picker.endTime": "end time",
|
||||
"uni-datetime-picker.ok": "ok",
|
||||
"uni-datetime-picker.clear": "clear",
|
||||
"uni-datetime-picker.cancel": "cancel",
|
||||
"uni-datetime-picker.year": "-",
|
||||
"uni-datetime-picker.month": "",
|
||||
"uni-calender.MON": "MON",
|
||||
"uni-calender.TUE": "TUE",
|
||||
"uni-calender.WED": "WED",
|
||||
"uni-calender.THU": "THU",
|
||||
"uni-calender.FRI": "FRI",
|
||||
"uni-calender.SAT": "SAT",
|
||||
"uni-calender.SUN": "SUN",
|
||||
"uni-calender.confirm": "confirm"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"uni-datetime-picker.selectDate": "选择日期",
|
||||
"uni-datetime-picker.selectTime": "选择时间",
|
||||
"uni-datetime-picker.selectDateTime": "选择日期时间",
|
||||
"uni-datetime-picker.startDate": "开始日期",
|
||||
"uni-datetime-picker.endDate": "结束日期",
|
||||
"uni-datetime-picker.startTime": "开始时间",
|
||||
"uni-datetime-picker.endTime": "结束时间",
|
||||
"uni-datetime-picker.ok": "确定",
|
||||
"uni-datetime-picker.clear": "清除",
|
||||
"uni-datetime-picker.cancel": "取消",
|
||||
"uni-datetime-picker.year": "年",
|
||||
"uni-datetime-picker.month": "月",
|
||||
"uni-calender.SUN": "日",
|
||||
"uni-calender.MON": "一",
|
||||
"uni-calender.TUE": "二",
|
||||
"uni-calender.WED": "三",
|
||||
"uni-calender.THU": "四",
|
||||
"uni-calender.FRI": "五",
|
||||
"uni-calender.SAT": "六",
|
||||
"uni-calender.confirm": "确认"
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"uni-datetime-picker.selectDate": "選擇日期",
|
||||
"uni-datetime-picker.selectTime": "選擇時間",
|
||||
"uni-datetime-picker.selectDateTime": "選擇日期時間",
|
||||
"uni-datetime-picker.startDate": "開始日期",
|
||||
"uni-datetime-picker.endDate": "結束日期",
|
||||
"uni-datetime-picker.startTime": "開始时间",
|
||||
"uni-datetime-picker.endTime": "結束时间",
|
||||
"uni-datetime-picker.ok": "確定",
|
||||
"uni-datetime-picker.clear": "清除",
|
||||
"uni-datetime-picker.cancel": "取消",
|
||||
"uni-datetime-picker.year": "年",
|
||||
"uni-datetime-picker.month": "月",
|
||||
"uni-calender.SUN": "日",
|
||||
"uni-calender.MON": "一",
|
||||
"uni-calender.TUE": "二",
|
||||
"uni-calender.WED": "三",
|
||||
"uni-calender.THU": "四",
|
||||
"uni-calender.FRI": "五",
|
||||
"uni-calender.SAT": "六",
|
||||
"uni-calender.confirm": "確認"
|
||||
}
|
||||
@@ -0,0 +1,942 @@
|
||||
<template>
|
||||
<view class="uni-datetime-picker" :style="{'--theme-color': themeColor}">
|
||||
<view @click="initTimePicker">
|
||||
<slot>
|
||||
<view class="uni-datetime-picker-timebox-pointer"
|
||||
:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
|
||||
<text class="uni-datetime-picker-text">{{time}}</text>
|
||||
<view v-if="!time" class="uni-datetime-picker-time">
|
||||
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
|
||||
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
|
||||
:style="fixNvueBug">
|
||||
<view class="uni-title">
|
||||
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
|
||||
</view>
|
||||
<view v-if="dateShow" class="uni-datetime-picker__container-box">
|
||||
<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
|
||||
@change="bindDateChange">
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<!-- 兼容 nvue 不支持伪类 -->
|
||||
<text class="uni-datetime-picker-sign sign-left">-</text>
|
||||
<text class="uni-datetime-picker-sign sign-right">-</text>
|
||||
</view>
|
||||
<view v-if="timeShow" class="uni-datetime-picker__container-box">
|
||||
<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
|
||||
:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!hideSecond">
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<!-- 兼容 nvue 不支持伪类 -->
|
||||
<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
|
||||
<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
|
||||
</view>
|
||||
<view class="uni-datetime-picker-btn">
|
||||
<view @click="clearTime">
|
||||
<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
|
||||
</view>
|
||||
<view class="uni-datetime-picker-btn-group">
|
||||
<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
|
||||
<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
|
||||
</view>
|
||||
<view @click="setTime">
|
||||
<text class="uni-datetime-picker-btn-text">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import i18nMessages from './i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(i18nMessages)
|
||||
import {
|
||||
fixIosDateFormat
|
||||
} from './util'
|
||||
|
||||
/**
|
||||
* DatetimePicker 时间选择器
|
||||
* @description 可以同时选择日期和时间的选择器
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
||||
* @property {String} type = [datetime | date | time] 显示模式
|
||||
* @property {Boolean} multiple = [true|false] 是否多选
|
||||
* @property {String|Number} value 默认值
|
||||
* @property {String|Number} start 起始日期或时间
|
||||
* @property {String|Number} end 起始日期或时间
|
||||
* @property {String} return-type = [timestamp | string]
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniDatetimePicker',
|
||||
data() {
|
||||
return {
|
||||
indicatorStyle: `height: 50px;`,
|
||||
visible: false,
|
||||
fixNvueBug: {},
|
||||
dateShow: true,
|
||||
timeShow: true,
|
||||
title: '日期和时间',
|
||||
// 输入框当前时间
|
||||
time: '',
|
||||
// 当前的年月日时分秒
|
||||
year: 1920,
|
||||
month: 0,
|
||||
day: 0,
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
// 起始时间
|
||||
startYear: 1920,
|
||||
startMonth: 1,
|
||||
startDay: 1,
|
||||
startHour: 0,
|
||||
startMinute: 0,
|
||||
startSecond: 0,
|
||||
// 结束时间
|
||||
endYear: 2120,
|
||||
endMonth: 12,
|
||||
endDay: 31,
|
||||
endHour: 23,
|
||||
endMinute: 59,
|
||||
endSecond: 59,
|
||||
}
|
||||
},
|
||||
options: {
|
||||
// #ifdef MP-TOUTIAO
|
||||
virtualHost: false,
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true
|
||||
// #endif
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'datetime'
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
start: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
end: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
returnType: {
|
||||
type: String,
|
||||
default: 'string'
|
||||
},
|
||||
disabled: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
border: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
hideSecond: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
themeColor: {
|
||||
type: [String],
|
||||
default: '#007aff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// #ifndef VUE3
|
||||
value: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.parseValue(fixIosDateFormat(newVal))
|
||||
this.initTime(false)
|
||||
} else {
|
||||
this.time = ''
|
||||
this.parseValue(Date.now())
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.parseValue(fixIosDateFormat(newVal))
|
||||
this.initTime(false)
|
||||
} else {
|
||||
this.time = ''
|
||||
this.parseValue(Date.now())
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #endif
|
||||
type: {
|
||||
handler(newValue) {
|
||||
if (newValue === 'date') {
|
||||
this.dateShow = true
|
||||
this.timeShow = false
|
||||
this.title = '日期'
|
||||
} else if (newValue === 'time') {
|
||||
this.dateShow = false
|
||||
this.timeShow = true
|
||||
this.title = '时间'
|
||||
} else {
|
||||
this.dateShow = true
|
||||
this.timeShow = true
|
||||
this.title = '日期和时间'
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
start: {
|
||||
handler(newVal) {
|
||||
this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
end: {
|
||||
handler(newVal) {
|
||||
this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
|
||||
// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
|
||||
months(newVal) {
|
||||
this.checkValue('month', this.month, newVal)
|
||||
},
|
||||
days(newVal) {
|
||||
this.checkValue('day', this.day, newVal)
|
||||
},
|
||||
hours(newVal) {
|
||||
this.checkValue('hour', this.hour, newVal)
|
||||
},
|
||||
minutes(newVal) {
|
||||
this.checkValue('minute', this.minute, newVal)
|
||||
},
|
||||
seconds(newVal) {
|
||||
this.checkValue('second', this.second, newVal)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当前年、月、日、时、分、秒选择范围
|
||||
years() {
|
||||
return this.getCurrentRange('year')
|
||||
},
|
||||
|
||||
months() {
|
||||
return this.getCurrentRange('month')
|
||||
},
|
||||
|
||||
days() {
|
||||
return this.getCurrentRange('day')
|
||||
},
|
||||
|
||||
hours() {
|
||||
return this.getCurrentRange('hour')
|
||||
},
|
||||
|
||||
minutes() {
|
||||
return this.getCurrentRange('minute')
|
||||
},
|
||||
|
||||
seconds() {
|
||||
return this.getCurrentRange('second')
|
||||
},
|
||||
|
||||
// picker 当前值数组
|
||||
ymd() {
|
||||
return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
|
||||
},
|
||||
hms() {
|
||||
return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
|
||||
},
|
||||
|
||||
// 当前 date 是 start
|
||||
currentDateIsStart() {
|
||||
return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
|
||||
},
|
||||
|
||||
// 当前 date 是 end
|
||||
currentDateIsEnd() {
|
||||
return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
|
||||
},
|
||||
|
||||
// 当前年、月、日、时、分、秒的最小值和最大值
|
||||
minYear() {
|
||||
return this.startYear
|
||||
},
|
||||
maxYear() {
|
||||
return this.endYear
|
||||
},
|
||||
minMonth() {
|
||||
if (this.year === this.startYear) {
|
||||
return this.startMonth
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
maxMonth() {
|
||||
if (this.year === this.endYear) {
|
||||
return this.endMonth
|
||||
} else {
|
||||
return 12
|
||||
}
|
||||
},
|
||||
minDay() {
|
||||
if (this.year === this.startYear && this.month === this.startMonth) {
|
||||
return this.startDay
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
maxDay() {
|
||||
if (this.year === this.endYear && this.month === this.endMonth) {
|
||||
return this.endDay
|
||||
} else {
|
||||
return this.daysInMonth(this.year, this.month)
|
||||
}
|
||||
},
|
||||
minHour() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsStart) {
|
||||
return this.startHour
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
return this.startHour
|
||||
}
|
||||
},
|
||||
maxHour() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsEnd) {
|
||||
return this.endHour
|
||||
} else {
|
||||
return 23
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
return this.endHour
|
||||
}
|
||||
},
|
||||
minMinute() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsStart && this.hour === this.startHour) {
|
||||
return this.startMinute
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.startHour) {
|
||||
return this.startMinute
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
maxMinute() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsEnd && this.hour === this.endHour) {
|
||||
return this.endMinute
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.endHour) {
|
||||
return this.endMinute
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
},
|
||||
minSecond() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
|
||||
return this.startSecond
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.startHour && this.minute === this.startMinute) {
|
||||
return this.startSecond
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
maxSecond() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
|
||||
return this.endSecond
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.endHour && this.minute === this.endMinute) {
|
||||
return this.endSecond
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
selectTimeText() {
|
||||
return t("uni-datetime-picker.selectTime")
|
||||
},
|
||||
okText() {
|
||||
return t("uni-datetime-picker.ok")
|
||||
},
|
||||
clearText() {
|
||||
return t("uni-datetime-picker.clear")
|
||||
},
|
||||
cancelText() {
|
||||
return t("uni-datetime-picker.cancel")
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// #ifdef APP-NVUE
|
||||
const res = uni.getSystemInfoSync();
|
||||
this.fixNvueBug = {
|
||||
top: res.windowHeight / 2,
|
||||
left: res.windowWidth / 2
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* @param {Object} item
|
||||
* 小于 10 在前面加个 0
|
||||
*/
|
||||
|
||||
lessThanTen(item) {
|
||||
return item < 10 ? '0' + item : item
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析时分秒字符串，例如：00:00:00
|
||||
* @param {String} timeString
|
||||
*/
|
||||
parseTimeType(timeString) {
|
||||
if (timeString) {
|
||||
let timeArr = timeString.split(':')
|
||||
this.hour = Number(timeArr[0])
|
||||
this.minute = Number(timeArr[1])
|
||||
this.second = Number(timeArr[2])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
|
||||
* @param {String | Number} datetime
|
||||
*/
|
||||
initPickerValue(datetime) {
|
||||
let defaultValue = null
|
||||
if (datetime) {
|
||||
defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
|
||||
} else {
|
||||
defaultValue = Date.now()
|
||||
defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
|
||||
}
|
||||
this.parseValue(defaultValue)
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始值规则：
|
||||
* - 用户设置初始值 value
|
||||
* - 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
|
||||
* - 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
|
||||
* - 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
|
||||
* - 无起始终止时间，则初始值为 value
|
||||
* - 无初始值 value，则初始值为当前本地时间 Date.now()
|
||||
* @param {Object} value
|
||||
* @param {Object} dateBase
|
||||
*/
|
||||
compareValueWithStartAndEnd(value, start, end) {
|
||||
let winner = null
|
||||
value = this.superTimeStamp(value)
|
||||
start = this.superTimeStamp(start)
|
||||
end = this.superTimeStamp(end)
|
||||
|
||||
if (start && end) {
|
||||
if (value < start) {
|
||||
winner = new Date(start)
|
||||
} else if (value > end) {
|
||||
winner = new Date(end)
|
||||
} else {
|
||||
winner = new Date(value)
|
||||
}
|
||||
} else if (start && !end) {
|
||||
winner = start <= value ? new Date(value) : new Date(start)
|
||||
} else if (!start && end) {
|
||||
winner = value <= end ? new Date(value) : new Date(end)
|
||||
} else {
|
||||
winner = new Date(value)
|
||||
}
|
||||
|
||||
return winner
|
||||
},
|
||||
|
||||
/**
|
||||
* 转换为可比较的时间戳，接受日期、时分秒、时间戳
|
||||
* @param {Object} value
|
||||
*/
|
||||
superTimeStamp(value) {
|
||||
let dateBase = ''
|
||||
if (this.type === 'time' && value && typeof value === 'string') {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth() + 1
|
||||
const day = now.getDate()
|
||||
dateBase = year + '/' + month + '/' + day + ' '
|
||||
}
|
||||
if (Number(value)) {
|
||||
value = parseInt(value)
|
||||
dateBase = 0
|
||||
}
|
||||
return this.createTimeStamp(dateBase + value)
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析默认值 value，字符串、时间戳
|
||||
* @param {Object} defaultTime
|
||||
*/
|
||||
parseValue(value) {
|
||||
if (!value) {
|
||||
return
|
||||
}
|
||||
if (this.type === 'time' && typeof value === "string") {
|
||||
this.parseTimeType(value)
|
||||
} else {
|
||||
let defaultDate = null
|
||||
defaultDate = new Date(value)
|
||||
if (this.type !== 'time') {
|
||||
this.year = defaultDate.getFullYear()
|
||||
this.month = defaultDate.getMonth() + 1
|
||||
this.day = defaultDate.getDate()
|
||||
}
|
||||
if (this.type !== 'date') {
|
||||
this.hour = defaultDate.getHours()
|
||||
this.minute = defaultDate.getMinutes()
|
||||
this.second = defaultDate.getSeconds()
|
||||
}
|
||||
}
|
||||
if (this.hideSecond) {
|
||||
this.second = 0
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析可选择时间范围 start、end，年月日字符串、时间戳
|
||||
* @param {Object} defaultTime
|
||||
*/
|
||||
parseDatetimeRange(point, pointType) {
|
||||
// 时间为空，则重置为初始值
|
||||
if (!point) {
|
||||
if (pointType === 'start') {
|
||||
this.startYear = 1920
|
||||
this.startMonth = 1
|
||||
this.startDay = 1
|
||||
this.startHour = 0
|
||||
this.startMinute = 0
|
||||
this.startSecond = 0
|
||||
}
|
||||
if (pointType === 'end') {
|
||||
this.endYear = 2120
|
||||
this.endMonth = 12
|
||||
this.endDay = 31
|
||||
this.endHour = 23
|
||||
this.endMinute = 59
|
||||
this.endSecond = 59
|
||||
}
|
||||
return
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
const pointArr = point.split(':')
|
||||
this[pointType + 'Hour'] = Number(pointArr[0])
|
||||
this[pointType + 'Minute'] = Number(pointArr[1])
|
||||
this[pointType + 'Second'] = Number(pointArr[2])
|
||||
} else {
|
||||
if (!point) {
|
||||
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
|
||||
return
|
||||
}
|
||||
if (Number(point)) {
|
||||
point = parseInt(point)
|
||||
}
|
||||
// datetime 的 end 没有时分秒, 则不限制
|
||||
const hasTime = /[0-9]:[0-9]/
|
||||
if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
|
||||
point)) {
|
||||
point = point + ' 23:59:59'
|
||||
}
|
||||
const pointDate = new Date(point)
|
||||
this[pointType + 'Year'] = pointDate.getFullYear()
|
||||
this[pointType + 'Month'] = pointDate.getMonth() + 1
|
||||
this[pointType + 'Day'] = pointDate.getDate()
|
||||
if (this.type === 'datetime') {
|
||||
this[pointType + 'Hour'] = pointDate.getHours()
|
||||
this[pointType + 'Minute'] = pointDate.getMinutes()
|
||||
this[pointType + 'Second'] = pointDate.getSeconds()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 获取 年、月、日、时、分、秒 当前可选范围
|
||||
getCurrentRange(value) {
|
||||
const range = []
|
||||
for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
|
||||
range.push(i)
|
||||
}
|
||||
return range
|
||||
},
|
||||
|
||||
// 字符串首字母大写
|
||||
capitalize(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
},
|
||||
|
||||
// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
|
||||
checkValue(name, value, values) {
|
||||
if (values.indexOf(value) === -1) {
|
||||
this[name] = values[0]
|
||||
}
|
||||
},
|
||||
|
||||
// 每个月的实际天数
|
||||
daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
|
||||
return new Date(year, month, 0).getDate();
|
||||
},
|
||||
|
||||
/**
|
||||
* 生成时间戳
|
||||
* @param {Object} time
|
||||
*/
|
||||
createTimeStamp(time) {
|
||||
if (!time) return
|
||||
if (typeof time === "number") {
|
||||
return time
|
||||
} else {
|
||||
time = time.replace(/-/g, '/')
|
||||
if (this.type === 'date') {
|
||||
time = time + ' ' + '00:00:00'
|
||||
}
|
||||
return Date.parse(time)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生成日期或时间的字符串
|
||||
*/
|
||||
createDomSting() {
|
||||
const yymmdd = this.year +
|
||||
'-' +
|
||||
this.lessThanTen(this.month) +
|
||||
'-' +
|
||||
this.lessThanTen(this.day)
|
||||
|
||||
let hhmmss = this.lessThanTen(this.hour) +
|
||||
':' +
|
||||
this.lessThanTen(this.minute)
|
||||
|
||||
if (!this.hideSecond) {
|
||||
hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
|
||||
}
|
||||
|
||||
if (this.type === 'date') {
|
||||
return yymmdd
|
||||
} else if (this.type === 'time') {
|
||||
return hhmmss
|
||||
} else {
|
||||
return yymmdd + ' ' + hhmmss
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化返回值，并抛出 change 事件
|
||||
*/
|
||||
initTime(emit = true) {
|
||||
this.time = this.createDomSting()
|
||||
if (!emit) return
|
||||
if (this.returnType === 'timestamp' && this.type !== 'time') {
|
||||
this.$emit('change', this.createTimeStamp(this.time))
|
||||
this.$emit('input', this.createTimeStamp(this.time))
|
||||
this.$emit('update:modelValue', this.createTimeStamp(this.time))
|
||||
} else {
|
||||
this.$emit('change', this.time)
|
||||
this.$emit('input', this.time)
|
||||
this.$emit('update:modelValue', this.time)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户选择日期或时间更新 data
|
||||
* @param {Object} e
|
||||
*/
|
||||
bindDateChange(e) {
|
||||
const val = e.detail.value
|
||||
this.year = this.years[val[0]]
|
||||
this.month = this.months[val[1]]
|
||||
this.day = this.days[val[2]]
|
||||
},
|
||||
bindTimeChange(e) {
|
||||
const val = e.detail.value
|
||||
this.hour = this.hours[val[0]]
|
||||
this.minute = this.minutes[val[1]]
|
||||
this.second = this.seconds[val[2]]
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化弹出层
|
||||
*/
|
||||
initTimePicker() {
|
||||
if (this.disabled) return
|
||||
const value = fixIosDateFormat(this.time)
|
||||
this.initPickerValue(value)
|
||||
this.visible = !this.visible
|
||||
},
|
||||
|
||||
/**
|
||||
* 触发或关闭弹框
|
||||
*/
|
||||
tiggerTimePicker(e) {
|
||||
this.visible = !this.visible
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击“清空”按钮，清空当前值
|
||||
*/
|
||||
clearTime() {
|
||||
this.time = ''
|
||||
this.$emit('change', this.time)
|
||||
this.$emit('input', this.time)
|
||||
this.$emit('update:modelValue', this.time)
|
||||
this.tiggerTimePicker()
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击“确定”按钮
|
||||
*/
|
||||
setTime() {
|
||||
this.initTime()
|
||||
this.tiggerTimePicker()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-datetime-picker {
|
||||
/* #ifndef APP-NVUE */
|
||||
/* width: 100%; */
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-view {
|
||||
height: 130px;
|
||||
width: 270px;
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-btn {
|
||||
margin-top: 60px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-btn-text {
|
||||
font-size: 14px;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.uni-datetime-picker-btn-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-cancel {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-mask {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition-duration: 0.3s;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-popup {
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
width: 270px;
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 500px;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 330px;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition-duration: 0.3s;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.fix-nvue-height {
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 330px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-time {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-column {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-timebox {
|
||||
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 5px;
|
||||
padding: 7px 10px;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-timebox-pointer {
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
.uni-datetime-picker-disabled {
|
||||
opacity: 0.4;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-text {
|
||||
font-size: 14px;
|
||||
line-height: 50px
|
||||
}
|
||||
|
||||
.uni-datetime-picker-sign {
|
||||
position: absolute;
|
||||
top: 53px;
|
||||
/* 减掉 10px 的元素高度，兼容nvue */
|
||||
color: #999;
|
||||
/* #ifdef APP-NVUE */
|
||||
font-size: 16px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.sign-left {
|
||||
left: 86px;
|
||||
}
|
||||
|
||||
.sign-right {
|
||||
right: 86px;
|
||||
}
|
||||
|
||||
.sign-center {
|
||||
left: 135px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker__container-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.time-hide-second {
|
||||
width: 180px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,421 @@
|
||||
class Calendar {
|
||||
constructor({
|
||||
selected,
|
||||
startDate,
|
||||
endDate,
|
||||
range,
|
||||
} = {}) {
|
||||
// 当前日期
|
||||
this.date = this.getDateObj(new Date()) // 当前初入日期
|
||||
// 打点信息
|
||||
this.selected = selected || [];
|
||||
// 起始时间
|
||||
this.startDate = startDate
|
||||
// 终止时间
|
||||
this.endDate = endDate
|
||||
// 是否范围选择
|
||||
this.range = range
|
||||
// 多选状态
|
||||
this.cleanMultipleStatus()
|
||||
// 每周日期
|
||||
this.weeks = {}
|
||||
this.lastHover = false
|
||||
}
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
const selectDate = this.getDateObj(date)
|
||||
this.getWeeks(selectDate.fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanMultipleStatus() {
|
||||
this.multipleStatus = {
|
||||
before: '',
|
||||
after: '',
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
setStartDate(startDate) {
|
||||
this.startDate = startDate
|
||||
}
|
||||
|
||||
setEndDate(endDate) {
|
||||
this.endDate = endDate
|
||||
}
|
||||
|
||||
getPreMonthObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth - 1)
|
||||
const newMonth = date.getMonth()
|
||||
if (oldMonth !== 0 && newMonth - oldMonth === 0) {
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
getNextMonthObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth + 1)
|
||||
const newMonth = date.getMonth()
|
||||
if (newMonth - oldMonth > 1) {
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定格式Date对象
|
||||
*/
|
||||
getDateObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
return {
|
||||
fullDate: getDate(date),
|
||||
year: date.getFullYear(),
|
||||
month: addZero(date.getMonth() + 1),
|
||||
date: addZero(date.getDate()),
|
||||
day: date.getDay()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取上一个月日期集合
|
||||
*/
|
||||
getPreMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
for (let i = amount - 1; i >= 0; i--) {
|
||||
const month = dateObj.month - 1
|
||||
result.push({
|
||||
date: new Date(dateObj.year, month, -i).getDate(),
|
||||
month,
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取本月日期集合
|
||||
*/
|
||||
getCurrentMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const fullDate = this.date.fullDate
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
|
||||
const isToday = fullDate === currentDate
|
||||
// 获取打点信息
|
||||
const info = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(currentDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
// 日期禁用
|
||||
let disableBefore = true
|
||||
let disableAfter = true
|
||||
if (this.startDate) {
|
||||
disableBefore = dateCompare(this.startDate, currentDate)
|
||||
}
|
||||
|
||||
if (this.endDate) {
|
||||
disableAfter = dateCompare(currentDate, this.endDate)
|
||||
}
|
||||
|
||||
let multiples = this.multipleStatus.data
|
||||
let multiplesStatus = -1
|
||||
if (this.range && multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, currentDate)
|
||||
})
|
||||
}
|
||||
const checked = multiplesStatus !== -1
|
||||
|
||||
result.push({
|
||||
fullDate: currentDate,
|
||||
year: dateObj.year,
|
||||
date: i,
|
||||
multiple: this.range ? checked : false,
|
||||
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
month: dateObj.month,
|
||||
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(
|
||||
currentDate, this.endDate)),
|
||||
isToday,
|
||||
userChecked: false,
|
||||
extraInfo: info
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取下一个月日期集合
|
||||
*/
|
||||
_getNextMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const month = dateObj.month + 1
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
result.push({
|
||||
date: i,
|
||||
month,
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期详情
|
||||
* @param {Object} date
|
||||
*/
|
||||
getInfo(date) {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
|
||||
return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较时间是否相等
|
||||
*/
|
||||
dateEqual(before, after) {
|
||||
before = new Date(fixIosDateFormat(before))
|
||||
after = new Date(fixIosDateFormat(after))
|
||||
return before.valueOf() === after.valueOf()
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较真实起始日期
|
||||
*/
|
||||
|
||||
isLogicBefore(currentDate, before, after) {
|
||||
let logicBefore = before
|
||||
if (before && after) {
|
||||
logicBefore = dateCompare(before, after) ? before : after
|
||||
}
|
||||
return this.dateEqual(logicBefore, currentDate)
|
||||
}
|
||||
|
||||
isLogicAfter(currentDate, before, after) {
|
||||
let logicAfter = after
|
||||
if (before && after) {
|
||||
logicAfter = dateCompare(before, after) ? after : before
|
||||
}
|
||||
return this.dateEqual(logicAfter, currentDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取日期范围内所有日期
|
||||
* @param {Object} begin
|
||||
* @param {Object} end
|
||||
*/
|
||||
geDateAll(begin, end) {
|
||||
var arr = []
|
||||
var ab = begin.split('-')
|
||||
var ae = end.split('-')
|
||||
var db = new Date()
|
||||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||
var de = new Date()
|
||||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||
for (var k = unixDb; k <= unixDe;) {
|
||||
k = k + 24 * 60 * 60 * 1000
|
||||
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取多选状态
|
||||
*/
|
||||
setMultiple(fullDate) {
|
||||
if (!this.range) return
|
||||
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.multipleStatus
|
||||
if (before && after) {
|
||||
if (!this.lastHover) {
|
||||
this.lastHover = true
|
||||
return
|
||||
}
|
||||
this.multipleStatus.before = fullDate
|
||||
this.multipleStatus.after = ''
|
||||
this.multipleStatus.data = []
|
||||
this.multipleStatus.fulldate = ''
|
||||
this.lastHover = false
|
||||
} else {
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
this.multipleStatus.after = undefined;
|
||||
this.lastHover = false
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
|
||||
.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
|
||||
.before);
|
||||
}
|
||||
this.lastHover = true
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标 hover 更新多选状态
|
||||
*/
|
||||
setHoverMultiple(fullDate) {
|
||||
//抖音小程序点击会触发hover事件，需要避免一下
|
||||
// #ifndef MP-TOUTIAO
|
||||
if (!this.range || this.lastHover) return
|
||||
const {
|
||||
before
|
||||
} = this.multipleStatus
|
||||
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
// #endif
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新默认值多选状态
|
||||
*/
|
||||
setDefaultMultiple(before, after) {
|
||||
this.multipleStatus.before = before
|
||||
this.multipleStatus.after = after
|
||||
if (before && after) {
|
||||
if (dateCompare(before, after)) {
|
||||
this.multipleStatus.data = this.geDateAll(before, after);
|
||||
this.getWeeks(after)
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(after, before);
|
||||
this.getWeeks(before)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取每周数据
|
||||
* @param {Object} dateData
|
||||
*/
|
||||
getWeeks(dateData) {
|
||||
const {
|
||||
year,
|
||||
month,
|
||||
} = this.getDateObj(dateData)
|
||||
|
||||
const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
|
||||
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const currentMonthDayAmount = new Date(year, month, 0).getDate()
|
||||
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
|
||||
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
|
||||
|
||||
const weeks = new Array(6)
|
||||
for (let i = 0; i < calendarDays.length; i++) {
|
||||
const index = Math.floor(i / 7)
|
||||
if (!weeks[index]) {
|
||||
weeks[index] = new Array(7)
|
||||
}
|
||||
weeks[index][i % 7] = calendarDays[i]
|
||||
}
|
||||
|
||||
this.calendar = calendarDays
|
||||
this.weeks = weeks
|
||||
}
|
||||
}
|
||||
|
||||
function getDateTime(date, hideSecond) {
|
||||
return `${getDate(date)} ${getTime(date, hideSecond)}`
|
||||
}
|
||||
|
||||
function getDate(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
return `${year}-${addZero(month)}-${addZero(day)}`
|
||||
}
|
||||
|
||||
function getTime(date, hideSecond) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
|
||||
}
|
||||
|
||||
function addZero(num) {
|
||||
if (num < 10) {
|
||||
num = `0${num}`
|
||||
}
|
||||
return num
|
||||
}
|
||||
|
||||
function getDefaultSecond(hideSecond) {
|
||||
return hideSecond ? '00:00' : '00:00:00'
|
||||
}
|
||||
|
||||
function dateCompare(startDate, endDate) {
|
||||
startDate = new Date(fixIosDateFormat(startDate))
|
||||
endDate = new Date(fixIosDateFormat(endDate))
|
||||
return startDate <= endDate
|
||||
}
|
||||
|
||||
function checkDate(date) {
|
||||
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
|
||||
return date.match(dateReg)
|
||||
}
|
||||
//ios低版本15及以下，无法匹配 没有 ’秒‘ 时的情况，所以需要在末尾 秒 加上 问号
|
||||
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/;
|
||||
|
||||
function fixIosDateFormat(value) {
|
||||
if (typeof value === 'string' && dateTimeReg.test(value)) {
|
||||
value = value.replace(/-/g, '/')
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
export {
|
||||
Calendar,
|
||||
getDateTime,
|
||||
getDate,
|
||||
getTime,
|
||||
addZero,
|
||||
getDefaultSecond,
|
||||
dateCompare,
|
||||
checkDate,
|
||||
fixIosDateFormat
|
||||
}
|
||||
88
uni_modules/uni-datetime-picker/package.json
Normal file
88
uni_modules/uni-datetime-picker/package.json
Normal file
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"id": "uni-datetime-picker",
|
||||
"displayName": "uni-datetime-picker 日期选择器",
|
||||
"version": "2.2.34",
|
||||
"description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
|
||||
"keywords": [
|
||||
"uni-datetime-picker",
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"日期时间选择器",
|
||||
"日期时间"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
21
uni_modules/uni-datetime-picker/readme.md
Normal file
21
uni_modules/uni-datetime-picker/readme.md
Normal file
@@ -0,0 +1,21 @@
|
||||
|
||||
|
||||
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
|
||||
|
||||
## DatetimePicker 时间选择器
|
||||
|
||||
> **组件名：uni-datetime-picker**
|
||||
> 代码块： `uDatetimePicker`
|
||||
|
||||
|
||||
该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
|
||||
|
||||
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
|
||||
|
||||
**_点击 picker 默认值规则：_**
|
||||
|
||||
- 若设置初始值 value, 会显示在 picker 显示框中
|
||||
- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
40
uni_modules/uni-icons/changelog.md
Normal file
40
uni_modules/uni-icons/changelog.md
Normal file
@@ -0,0 +1,40 @@
|
||||
## 2.0.9（2024-01-12）
|
||||
fix: 修复图标大小默认值错误的问题
|
||||
## 2.0.8（2023-12-14）
|
||||
- 修复 项目未使用 ts 情况下，打包报错的bug
|
||||
## 2.0.7（2023-12-14）
|
||||
- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug
|
||||
## 2.0.6（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.5（2023-12-11）
|
||||
- 优化 兼容老版本icon类型，如 top ，bottom 等
|
||||
## 2.0.4（2023-12-06）
|
||||
- 优化 uni-app x 下示例项目图标排序
|
||||
## 2.0.3（2023-12-06）
|
||||
- 修复 nvue下引入组件报错的bug
|
||||
## 2.0.2（2023-12-05）
|
||||
-优化 size 属性支持单位
|
||||
## 2.0.1（2023-12-05）
|
||||
- 新增 uni-app x 支持定义图标
|
||||
## 1.3.5（2022-01-24）
|
||||
- 优化 size 属性可以传入不带单位的字符串数值
|
||||
## 1.3.4（2022-01-24）
|
||||
- 优化 size 支持其他单位
|
||||
## 1.3.3（2022-01-17）
|
||||
- 修复 nvue 有些图标不显示的bug，兼容老版本图标
|
||||
## 1.3.2（2021-12-01）
|
||||
- 优化 示例可复制图标名称
|
||||
## 1.3.1（2021-11-23）
|
||||
- 优化 兼容旧组件 type 值
|
||||
## 1.3.0（2021-11-19）
|
||||
- 新增 更多图标
|
||||
- 优化 自定义图标使用方式
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
## 1.1.7（2021-11-08）
|
||||
## 1.2.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.5（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.1.4（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<text class="uni-icons" :style="styleObj">
|
||||
<slot>{{unicode}}</slot>
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fontData, IconsDataItem } from './uniicons_file'
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icon 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number} size 图标大小
|
||||
* @property {String} type 图标图案，参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: "uni-icons",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
default: 16
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
unicode() : string {
|
||||
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
|
||||
if (codes !== null) {
|
||||
return codes.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize() : string {
|
||||
const size = this.size
|
||||
if (typeof size == 'string') {
|
||||
const reg = /^[0-9]*$/g
|
||||
return reg.test(size as string) ? '' + size + 'px' : '' + size;
|
||||
// return '' + this.size
|
||||
}
|
||||
return this.getFontSize(size as number)
|
||||
},
|
||||
styleObj() : UTSJSONObject {
|
||||
if (this.fontFamily !== '') {
|
||||
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
|
||||
}
|
||||
return { color: this.color, fontSize: this.iconSize }
|
||||
}
|
||||
},
|
||||
created() { },
|
||||
methods: {
|
||||
/**
|
||||
* 字体大小
|
||||
*/
|
||||
getFontSize(size : number) : string {
|
||||
return size + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: UniIconsFontFamily;
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-family: UniIconsFontFamily;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
110
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
110
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
|
||||
<slot></slot>
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fontData } from './uniicons_file_vue.js';
|
||||
|
||||
const getVal = (val) => {
|
||||
const reg = /^[0-9]*$/g
|
||||
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
|
||||
}
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
var domModule = weex.requireModule('dom');
|
||||
import iconUrl from './uniicons.ttf'
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uniicons",
|
||||
'src': "url('" + iconUrl + "')"
|
||||
});
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icons 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number} size 图标大小
|
||||
* @property {String} type 图标图案，参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniIcons',
|
||||
emits: ['click'],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: fontData
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
unicode() {
|
||||
let code = this.icons.find(v => v.font_class === this.type)
|
||||
if (code) {
|
||||
return code.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize() {
|
||||
return getVal(this.size)
|
||||
},
|
||||
styleObj() {
|
||||
if (this.fontFamily !== '') {
|
||||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
|
||||
}
|
||||
return `color: ${this.color}; font-size: ${this.iconSize};`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
@import './uniicons.css';
|
||||
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.uni-icons {
|
||||
font-family: uniicons;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
664
uni_modules/uni-icons/components/uni-icons/uniicons.css
Normal file
664
uni_modules/uni-icons/components/uni-icons/uniicons.css
Normal file
@@ -0,0 +1,664 @@
|
||||
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e6d0";
|
||||
}
|
||||
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.uniui-color:before {
|
||||
content: "\e6cf";
|
||||
}
|
||||
|
||||
.uniui-wallet:before {
|
||||
content: "\e6b1";
|
||||
}
|
||||
|
||||
.uniui-settings-filled:before {
|
||||
content: "\e6ce";
|
||||
}
|
||||
|
||||
.uniui-auth-filled:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.uniui-shop-filled:before {
|
||||
content: "\e6cd";
|
||||
}
|
||||
|
||||
.uniui-staff-filled:before {
|
||||
content: "\e6cb";
|
||||
}
|
||||
|
||||
.uniui-vip-filled:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
|
||||
.uniui-plus-filled:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
.uniui-folder-add-filled:before {
|
||||
content: "\e6c8";
|
||||
}
|
||||
|
||||
.uniui-color-filled:before {
|
||||
content: "\e6c9";
|
||||
}
|
||||
|
||||
.uniui-tune-filled:before {
|
||||
content: "\e6ca";
|
||||
}
|
||||
|
||||
.uniui-calendar-filled:before {
|
||||
content: "\e6c0";
|
||||
}
|
||||
|
||||
.uniui-notification-filled:before {
|
||||
content: "\e6c1";
|
||||
}
|
||||
|
||||
.uniui-wallet-filled:before {
|
||||
content: "\e6c2";
|
||||
}
|
||||
|
||||
.uniui-medal-filled:before {
|
||||
content: "\e6c3";
|
||||
}
|
||||
|
||||
.uniui-fire-filled:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
.uniui-refreshempty:before {
|
||||
content: "\e6bf";
|
||||
}
|
||||
|
||||
.uniui-location-filled:before {
|
||||
content: "\e6af";
|
||||
}
|
||||
|
||||
.uniui-person-filled:before {
|
||||
content: "\e69d";
|
||||
}
|
||||
|
||||
.uniui-personadd-filled:before {
|
||||
content: "\e698";
|
||||
}
|
||||
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6d2";
|
||||
}
|
||||
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6d3";
|
||||
}
|
||||
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6d4";
|
||||
}
|
||||
|
||||
.uniui-back:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
|
||||
.uniui-forward:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
|
||||
.uniui-arrow-right:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrow-left:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrow-up:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrow-down:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
|
||||
.uniui-down:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-bottom:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6d5";
|
||||
}
|
||||
|
||||
.uniui-right:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-up:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-top:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-left:before {
|
||||
content: "\e6b7";
|
||||
}
|
||||
|
||||
.uniui-arrowup:before {
|
||||
content: "\e6d6";
|
||||
}
|
||||
|
||||
.uniui-eye:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.uniui-eye-filled:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
|
||||
.uniui-eye-slash:before {
|
||||
content: "\e6b3";
|
||||
}
|
||||
|
||||
.uniui-eye-slash-filled:before {
|
||||
content: "\e6b4";
|
||||
}
|
||||
|
||||
.uniui-info-filled:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.uniui-reload:before {
|
||||
content: "\e6b2";
|
||||
}
|
||||
|
||||
.uniui-micoff-filled:before {
|
||||
content: "\e6b0";
|
||||
}
|
||||
|
||||
.uniui-map-pin-ellipse:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.uniui-map-pin:before {
|
||||
content: "\e6ad";
|
||||
}
|
||||
|
||||
.uniui-location:before {
|
||||
content: "\e6ae";
|
||||
}
|
||||
|
||||
.uniui-starhalf:before {
|
||||
content: "\e683";
|
||||
}
|
||||
|
||||
.uniui-star:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.uniui-star-filled:before {
|
||||
content: "\e68f";
|
||||
}
|
||||
|
||||
.uniui-calendar:before {
|
||||
content: "\e6a0";
|
||||
}
|
||||
|
||||
.uniui-fire:before {
|
||||
content: "\e6a1";
|
||||
}
|
||||
|
||||
.uniui-medal:before {
|
||||
content: "\e6a2";
|
||||
}
|
||||
|
||||
.uniui-font:before {
|
||||
content: "\e6a3";
|
||||
}
|
||||
|
||||
.uniui-gift:before {
|
||||
content: "\e6a4";
|
||||
}
|
||||
|
||||
.uniui-link:before {
|
||||
content: "\e6a5";
|
||||
}
|
||||
|
||||
.uniui-notification:before {
|
||||
content: "\e6a6";
|
||||
}
|
||||
|
||||
.uniui-staff:before {
|
||||
content: "\e6a7";
|
||||
}
|
||||
|
||||
.uniui-vip:before {
|
||||
content: "\e6a8";
|
||||
}
|
||||
|
||||
.uniui-folder-add:before {
|
||||
content: "\e6a9";
|
||||
}
|
||||
|
||||
.uniui-tune:before {
|
||||
content: "\e6aa";
|
||||
}
|
||||
|
||||
.uniui-auth:before {
|
||||
content: "\e6ab";
|
||||
}
|
||||
|
||||
.uniui-person:before {
|
||||
content: "\e699";
|
||||
}
|
||||
|
||||
.uniui-email-filled:before {
|
||||
content: "\e69a";
|
||||
}
|
||||
|
||||
.uniui-phone-filled:before {
|
||||
content: "\e69b";
|
||||
}
|
||||
|
||||
.uniui-phone:before {
|
||||
content: "\e69c";
|
||||
}
|
||||
|
||||
.uniui-email:before {
|
||||
content: "\e69e";
|
||||
}
|
||||
|
||||
.uniui-personadd:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
|
||||
.uniui-chatboxes-filled:before {
|
||||
content: "\e692";
|
||||
}
|
||||
|
||||
.uniui-contact:before {
|
||||
content: "\e693";
|
||||
}
|
||||
|
||||
.uniui-chatbubble-filled:before {
|
||||
content: "\e694";
|
||||
}
|
||||
|
||||
.uniui-contact-filled:before {
|
||||
content: "\e695";
|
||||
}
|
||||
|
||||
.uniui-chatboxes:before {
|
||||
content: "\e696";
|
||||
}
|
||||
|
||||
.uniui-chatbubble:before {
|
||||
content: "\e697";
|
||||
}
|
||||
|
||||
.uniui-upload-filled:before {
|
||||
content: "\e68e";
|
||||
}
|
||||
|
||||
.uniui-upload:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.uniui-weixin:before {
|
||||
content: "\e691";
|
||||
}
|
||||
|
||||
.uniui-compose:before {
|
||||
content: "\e67f";
|
||||
}
|
||||
|
||||
.uniui-qq:before {
|
||||
content: "\e680";
|
||||
}
|
||||
|
||||
.uniui-download-filled:before {
|
||||
content: "\e681";
|
||||
}
|
||||
|
||||
.uniui-pyq:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.uniui-sound:before {
|
||||
content: "\e684";
|
||||
}
|
||||
|
||||
.uniui-trash-filled:before {
|
||||
content: "\e685";
|
||||
}
|
||||
|
||||
.uniui-sound-filled:before {
|
||||
content: "\e686";
|
||||
}
|
||||
|
||||
.uniui-trash:before {
|
||||
content: "\e687";
|
||||
}
|
||||
|
||||
.uniui-videocam-filled:before {
|
||||
content: "\e689";
|
||||
}
|
||||
|
||||
.uniui-spinner-cycle:before {
|
||||
content: "\e68a";
|
||||
}
|
||||
|
||||
.uniui-weibo:before {
|
||||
content: "\e68b";
|
||||
}
|
||||
|
||||
.uniui-videocam:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
|
||||
.uniui-download:before {
|
||||
content: "\e68d";
|
||||
}
|
||||
|
||||
.uniui-help:before {
|
||||
content: "\e679";
|
||||
}
|
||||
|
||||
.uniui-navigate-filled:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
|
||||
.uniui-plusempty:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.uniui-smallcircle:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.uniui-minus-filled:before {
|
||||
content: "\e67d";
|
||||
}
|
||||
|
||||
.uniui-micoff:before {
|
||||
content: "\e67e";
|
||||
}
|
||||
|
||||
.uniui-closeempty:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
.uniui-clear:before {
|
||||
content: "\e66d";
|
||||
}
|
||||
|
||||
.uniui-navigate:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
|
||||
.uniui-minus:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
.uniui-image:before {
|
||||
content: "\e670";
|
||||
}
|
||||
|
||||
.uniui-mic:before {
|
||||
content: "\e671";
|
||||
}
|
||||
|
||||
.uniui-paperplane:before {
|
||||
content: "\e672";
|
||||
}
|
||||
|
||||
.uniui-close:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.uniui-help-filled:before {
|
||||
content: "\e674";
|
||||
}
|
||||
|
||||
.uniui-paperplane-filled:before {
|
||||
content: "\e675";
|
||||
}
|
||||
|
||||
.uniui-plus:before {
|
||||
content: "\e676";
|
||||
}
|
||||
|
||||
.uniui-mic-filled:before {
|
||||
content: "\e677";
|
||||
}
|
||||
|
||||
.uniui-image-filled:before {
|
||||
content: "\e678";
|
||||
}
|
||||
|
||||
.uniui-locked-filled:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.uniui-info:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.uniui-locked:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.uniui-camera-filled:before {
|
||||
content: "\e658";
|
||||
}
|
||||
|
||||
.uniui-chat-filled:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.uniui-camera:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.uniui-circle:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
|
||||
.uniui-checkmarkempty:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.uniui-chat:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.uniui-circle-filled:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
|
||||
.uniui-flag:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.uniui-flag-filled:before {
|
||||
content: "\e660";
|
||||
}
|
||||
|
||||
.uniui-gear-filled:before {
|
||||
content: "\e661";
|
||||
}
|
||||
|
||||
.uniui-home:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.uniui-home-filled:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.uniui-gear:before {
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.uniui-smallcircle-filled:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.uniui-map-filled:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.uniui-map:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.uniui-refresh-filled:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.uniui-refresh:before {
|
||||
content: "\e657";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.uniui-cloud-download-filled:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.uniui-cloud-download:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload-filled:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.uniui-redo:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.uniui-images-filled:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.uniui-undo-filled:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.uniui-more:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.uniui-more-filled:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.uniui-undo:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.uniui-images:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.uniui-paperclip:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.uniui-settings:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.uniui-search:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.uniui-redo-filled:before {
|
||||
content: "\e655";
|
||||
}
|
||||
|
||||
.uniui-list:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.uniui-mail-open-filled:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.uniui-hand-down-filled:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.uniui-hand-down:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.uniui-hand-up-filled:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.uniui-hand-up:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.uniui-heart-filled:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.uniui-mail-open:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.uniui-heart:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.uniui-loop:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.uniui-pulldown:before {
|
||||
content: "\e632";
|
||||
}
|
||||
|
||||
.uniui-scan:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.uniui-bars:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.uniui-checkbox:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.uniui-checkbox-filled:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.uniui-shop:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.uniui-headphones:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.uniui-cart:before {
|
||||
content: "\e631";
|
||||
}
|
||||
BIN
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
Normal file
BIN
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
Normal file
Binary file not shown.
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
@@ -0,0 +1,664 @@
|
||||
|
||||
export type IconsData = {
|
||||
id : string
|
||||
name : string
|
||||
font_family : string
|
||||
css_prefix_text : string
|
||||
description : string
|
||||
glyphs : Array<IconsDataItem>
|
||||
}
|
||||
|
||||
export type IconsDataItem = {
|
||||
font_class : string
|
||||
unicode : string
|
||||
}
|
||||
|
||||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
] as IconsDataItem[]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
@@ -0,0 +1,649 @@
|
||||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
88
uni_modules/uni-icons/package.json
Normal file
88
uni_modules/uni-icons/package.json
Normal file
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"id": "uni-icons",
|
||||
"displayName": "uni-icons 图标",
|
||||
"version": "2.0.9",
|
||||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"icon",
|
||||
"图标"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.2.14"
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-uvue": "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",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
uni_modules/uni-icons/readme.md
Normal file
8
uni_modules/uni-icons/readme.md
Normal file
@@ -0,0 +1,8 @@
|
||||
## Icons 图标
|
||||
> **组件名：uni-icons**
|
||||
> 代码块： `uIcons`
|
||||
|
||||
用于展示 icons 图标 。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
78
uni_modules/uni-popup/changelog.md
Normal file
78
uni_modules/uni-popup/changelog.md
Normal file
@@ -0,0 +1,78 @@
|
||||
## 1.8.8（2024-02-20）
|
||||
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
|
||||
## 1.8.7（2024-02-02）
|
||||
- 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦
|
||||
## 1.8.6（2024-01-30）
|
||||
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
|
||||
## 1.8.5（2024-01-26）
|
||||
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
|
||||
## 1.8.4（2023-11-15）
|
||||
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
|
||||
## 1.8.3（2023-04-17）
|
||||
- 修复 uni-popup 重复打开时的 bug
|
||||
## 1.8.2（2023-02-02）
|
||||
- uni-popup-dialog 组件新增 inputType 属性
|
||||
## 1.8.1（2022-12-01）
|
||||
- 修复 nvue 下 v-show 报错
|
||||
## 1.8.0（2022-11-29）
|
||||
- 优化 主题样式
|
||||
## 1.7.9（2022-04-02）
|
||||
- 修复 弹出层内部无法滚动的bug
|
||||
## 1.7.8（2022-03-28）
|
||||
- 修复 小程序中高度错误的bug
|
||||
## 1.7.7（2022-03-17）
|
||||
- 修复 快速调用open出现问题的Bug
|
||||
## 1.7.6（2022-02-14）
|
||||
- 修复 safeArea 属性不能设置为false的bug
|
||||
## 1.7.5（2022-01-19）
|
||||
- 修复 isMaskClick 失效的bug
|
||||
## 1.7.4（2022-01-19）
|
||||
- 新增 cancelText \ confirmText 属性 ，可自定义文本
|
||||
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
|
||||
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
|
||||
## 1.7.3（2022-01-13）
|
||||
- 修复 设置 safeArea 属性不生效的bug
|
||||
## 1.7.2（2021-11-26）
|
||||
- 优化 组件示例
|
||||
## 1.7.1（2021-11-26）
|
||||
- 修复 vuedoc 文字错误
|
||||
## 1.7.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||
## 1.6.2（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.6.1（2021-07-30）
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.6.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.5.0（2021-06-23）
|
||||
- 新增 mask-click 遮罩层点击事件
|
||||
## 1.4.5（2021-06-22）
|
||||
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.4（2021-06-18）
|
||||
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.3（2021-06-08）
|
||||
- 修复 错误的 watch 字段
|
||||
- 修复 safeArea 属性不生效的问题
|
||||
- 修复 点击内容，再点击遮罩无法关闭的Bug
|
||||
## 1.4.2（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.4.1（2021-04-29）
|
||||
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
|
||||
## 1.4.0 （2021-04-29）
|
||||
- 新增 type 属性的 left\right 值，支持左右弹出
|
||||
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
|
||||
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
|
||||
- 新增 safeArea 属性，是否适配底部安全区
|
||||
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
|
||||
- 修复 App 端弹出等待的Bug
|
||||
- 优化 提升低配设备性能，优化动画卡顿问题
|
||||
- 优化 更简单的组件自定义方式
|
||||
## 1.2.9（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
## 1.2.8（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
## 1.2.7（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 支持 PC 端
|
||||
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
|
||||
@@ -0,0 +1,45 @@
|
||||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('keyup', listener)
|
||||
})
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<view class="uni-popup-dialog">
|
||||
<view class="uni-dialog-title">
|
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||
<slot>
|
||||
<text class="uni-dialog-content-text">{{content}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-else class="uni-dialog-content">
|
||||
<slot>
|
||||
<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
|
||||
:placeholder="placeholderText" :focus="focus">
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-dialog-button-group">
|
||||
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
|
||||
<text class="uni-dialog-button-text">{{closeText}}</text>
|
||||
</view>
|
||||
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
||||
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(messages)
|
||||
/**
|
||||
* PopUp 弹出层-对话框样式
|
||||
* @description 弹出层-对话框样式
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} value input 模式下的默认值
|
||||
* @property {String} placeholder input 模式下输入提示
|
||||
* @property {Boolean} focus input模式下是否自动聚焦，默认为true
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} mode = [base|input] 模式、
|
||||
* @value base 基础对话框
|
||||
* @value input 可输入对话框
|
||||
* @showClose {Boolean} 是否显示关闭按钮
|
||||
* @property {String} content 对话框内容
|
||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||
* @property {Number} maxlength 输入
|
||||
* @event {Function} confirm 点击确认按钮触发
|
||||
* @event {Function} close 点击取消按钮触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uniPopupDialog",
|
||||
mixins: [popup],
|
||||
emits: ['confirm', 'close'],
|
||||
props: {
|
||||
inputType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
focus:{
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: 'error',
|
||||
val: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
okText() {
|
||||
return this.confirmText || t("uni-popup.ok")
|
||||
},
|
||||
closeText() {
|
||||
return this.cancelText || t("uni-popup.cancel")
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-popup.placeholder")
|
||||
},
|
||||
titleText() {
|
||||
return this.title || t("uni-popup.title")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val
|
||||
},
|
||||
mode(val) {
|
||||
if (val === 'input') {
|
||||
this.dialogType = 'info'
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
if (this.maxlength != -1 && this.mode === 'input') {
|
||||
this.val = val.slice(0, this.maxlength);
|
||||
} else {
|
||||
this.val = val
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 对话框遮罩不可点击
|
||||
this.popup.disableMask()
|
||||
// this.popup.closeMask()
|
||||
if (this.mode === 'input') {
|
||||
this.dialogType = 'info'
|
||||
this.val = this.value
|
||||
} else {
|
||||
this.dialogType = this.type
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
onOk() {
|
||||
if (this.mode === 'input') {
|
||||
this.$emit('confirm', this.val)
|
||||
} else {
|
||||
this.$emit('confirm')
|
||||
}
|
||||
this.$emit("input",this.val);
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
close() {
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
border-radius: 11px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-dialog-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-dialog-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.uni-dialog-button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-button-color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border: 1px #eee solid;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
color: #4cd964;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
color: #dd524d;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view class="uni-popup-message">
|
||||
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
|
||||
<slot>
|
||||
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
/**
|
||||
* PopUp 弹出层-消息提示
|
||||
* @description 弹出层-消息提示
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} message 消息提示文字
|
||||
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopupMessage',
|
||||
mixins:[popup],
|
||||
props: {
|
||||
/**
|
||||
* 主题 success/warning/info/error 默认 success
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
/**
|
||||
* 消息文字
|
||||
*/
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 显示时间，设置为 0 则不会自动关闭
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
maskShow:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
this.popup.maskShow = this.maskShow
|
||||
this.popup.messageChild = this
|
||||
},
|
||||
methods: {
|
||||
timerClose(){
|
||||
if(this.duration === 0) return
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(()=>{
|
||||
this.popup.close()
|
||||
},this.duration)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-message {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-popup-message__box {
|
||||
background-color: #e1f3d8;
|
||||
padding: 10px 15px;
|
||||
border-color: #eee;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.fixforpc-width {
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
flex: none;
|
||||
min-width: 380px;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 50%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
max-width: 500px;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.uni-popup-message-text {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
background-color: #e1f3d8;
|
||||
}
|
||||
|
||||
.uni-popup__success-text {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
background-color: #faecd8;
|
||||
}
|
||||
|
||||
.uni-popup__warn-text {
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
background-color: #fde2e2;
|
||||
}
|
||||
|
||||
.uni-popup__error-text {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
background-color: #F2F6FC;
|
||||
}
|
||||
|
||||
.uni-popup__info-text {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
|
||||
<view class="uni-share-content">
|
||||
<view class="uni-share-content-box">
|
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="uni-share-text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-share-button-box">
|
||||
<button class="uni-share-button" @click="close">{{cancelText}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
mixins:[popup],
|
||||
emits:['select'],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bottomData: [{
|
||||
text: '微信',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: '支付宝',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
|
||||
name: 'ali'
|
||||
},
|
||||
{
|
||||
text: 'QQ',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
|
||||
name: 'qq'
|
||||
},
|
||||
{
|
||||
text: '新浪',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
|
||||
name: 'sina'
|
||||
},
|
||||
// {
|
||||
// text: '百度',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
|
||||
// name: 'copy'
|
||||
// },
|
||||
// {
|
||||
// text: '其他',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
|
||||
// name: 'more'
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
cancelText() {
|
||||
return t("uni-popup.cancel")
|
||||
},
|
||||
shareTitleText() {
|
||||
return this.title || t("uni-popup.shareTitle")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
select(item, index) {
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
})
|
||||
this.close()
|
||||
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-share {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 11px;
|
||||
border-top-right-radius: 11px;
|
||||
}
|
||||
.uni-share-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
.uni-share-title-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.uni-share-content-item {
|
||||
width: 90px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-share-content-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-share-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-share-button {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uni-share-button::after {
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
7
uni_modules/uni-popup/components/uni-popup/i18n/en.json
Normal file
7
uni_modules/uni-popup/components/uni-popup/i18n/en.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
}
|
||||
8
uni_modules/uni-popup/components/uni-popup/i18n/index.js
Normal file
8
uni_modules/uni-popup/components/uni-popup/i18n/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "确定",
|
||||
"uni-popup.placeholder": "请输入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "確定",
|
||||
"uni-popup.placeholder": "請輸入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
45
uni_modules/uni-popup/components/uni-popup/keypress.js
Normal file
45
uni_modules/uni-popup/components/uni-popup/keypress.js
Normal file
@@ -0,0 +1,45 @@
|
||||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
26
uni_modules/uni-popup/components/uni-popup/popup.js
Normal file
26
uni_modules/uni-popup/components/uni-popup/popup.js
Normal file
@@ -0,0 +1,26 @@
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.popup = this.getParent()
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getParent(name = 'uniPopup') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
}
|
||||
}
|
||||
90
uni_modules/uni-popup/components/uni-popup/uni-popup.uvue
Normal file
90
uni_modules/uni-popup/components/uni-popup/uni-popup.uvue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
|
||||
<view @click.stop>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
type CloseCallBack = ()=> void;
|
||||
let closeCallBack:CloseCallBack = () :void => {};
|
||||
export default {
|
||||
emits:["close","clickMask"],
|
||||
data() {
|
||||
return {
|
||||
isShow:false,
|
||||
isOpen:false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 设置show = true 时，如果没有 open 需要设置为 open
|
||||
isShow:{
|
||||
handler(isShow) {
|
||||
// console.log("isShow",isShow)
|
||||
if(isShow && this.isOpen == false){
|
||||
this.isOpen = true
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
},
|
||||
// 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow
|
||||
isOpen:{
|
||||
handler(isOpen) {
|
||||
// console.log("isOpen",isOpen)
|
||||
if(isOpen && this.isShow == false){
|
||||
this.isShow = true
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
open(){
|
||||
// ...funs : CloseCallBack[]
|
||||
// if(funs.length > 0){
|
||||
// closeCallBack = funs[0]
|
||||
// }
|
||||
this.isOpen = true;
|
||||
},
|
||||
clickMask(){
|
||||
if(this.maskClick == true){
|
||||
this.$emit('clickMask')
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
close(): void{
|
||||
this.isOpen = false;
|
||||
this.$emit('close')
|
||||
closeCallBack()
|
||||
},
|
||||
hiden(){
|
||||
this.isShow = false
|
||||
},
|
||||
show(){
|
||||
this.isShow = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.popup-root {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
479
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
Normal file
479
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
Normal file
@@ -0,0 +1,479 @@
|
||||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
|
||||
<view @touchstart="touchstart">
|
||||
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
|
||||
:duration="duration" :show="showTrans" @click="onTap" />
|
||||
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
|
||||
:show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<keypress v-if="maskShow" @esc="onTap" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import keypress from './keypress.js'
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件，为了解决遮罩弹层的问题
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value left 左侧弹出
|
||||
* @value right 右侧弹出
|
||||
* @value message 消息提示
|
||||
* @value dialog 对话框
|
||||
* @value share 底部分享示例
|
||||
* @property {Boolean} animation = [true|false] 是否开启动画
|
||||
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
|
||||
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
|
||||
* @property {String} backgroundColor 主窗口背景色
|
||||
* @property {String} maskBackgroundColor 蒙版颜色
|
||||
* @property {Boolean} safeArea 是否适配底部安全区
|
||||
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
||||
* @event {Function} maskClick 点击遮罩触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopup',
|
||||
components: {
|
||||
// #ifdef H5
|
||||
keypress
|
||||
// #endif
|
||||
},
|
||||
emits: ['change', 'maskClick'],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type]) return
|
||||
this[this.config[type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal]) return
|
||||
this[this.config[this.type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: 'top',
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
right: 'right',
|
||||
message: 'top',
|
||||
dialog: 'center',
|
||||
share: 'bottom'
|
||||
},
|
||||
maskClass: {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: 'top'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
|
||||
return 'transparent'
|
||||
}
|
||||
return this.backgroundColor
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = uni.getSystemInfoSync()
|
||||
this.popupWidth = windowWidth
|
||||
this.popupHeight = windowHeight + (windowTop || 0)
|
||||
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
|
||||
if (safeArea && this.safeArea) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.safeAreaInsets = safeAreaInsets.bottom
|
||||
// #endif
|
||||
} else {
|
||||
this.safeAreaInsets = 0
|
||||
}
|
||||
}
|
||||
fixSize()
|
||||
// #ifdef H5
|
||||
// window.addEventListener('resize', fixSize)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// window.removeEventListener('resize', fixSize)
|
||||
// })
|
||||
// #endif
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
created() {
|
||||
// this.mkclick = this.isMaskClick || this.maskClick
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300
|
||||
} else {
|
||||
this.duration = 0
|
||||
}
|
||||
// TODO 处理 message 组件生命周期异常的问题
|
||||
this.messageChild = null
|
||||
// TODO 解决头条冒泡的问题
|
||||
this.clearPropagation = false
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor
|
||||
},
|
||||
methods: {
|
||||
setH5Visible() {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = 'visible'
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 公用方法，不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false
|
||||
},
|
||||
/**
|
||||
* 公用方法，遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
// #ifndef APP-NVUE
|
||||
e.stopPropagation()
|
||||
// #endif
|
||||
this.clearPropagation = true
|
||||
},
|
||||
|
||||
open(direction) {
|
||||
// fix by mehaotian 处理快速打开关闭的情况
|
||||
if (this.showPopup) {
|
||||
return
|
||||
}
|
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
console.error('缺少类型：', direction)
|
||||
return
|
||||
}
|
||||
this[this.config[direction]]()
|
||||
this.$emit('change', {
|
||||
show: true,
|
||||
type: direction
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.type
|
||||
})
|
||||
clearTimeout(this.timer)
|
||||
// // 自定义关闭事件
|
||||
// this.customOpen && this.customClose()
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
},
|
||||
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false
|
||||
},
|
||||
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
// fix by mehaotian 兼容 nvue
|
||||
this.clearPropagation = false
|
||||
return
|
||||
}
|
||||
this.$emit('maskClick')
|
||||
if (!this.mkclick) return
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
this.$nextTick(() => {
|
||||
if (this.messageChild && this.type === 'message') {
|
||||
this.messageChild.timerClose()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupstyle = 'bottom'
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + 'px',
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = 'center'
|
||||
//微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理
|
||||
// #ifdef MP-WEIXIN
|
||||
this.ani = ['fade']
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
// #endif
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
/* #endif */
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = 'left'
|
||||
this.ani = ['slide-left']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = 'right'
|
||||
this.ani = ['slide-right']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
|
||||
/* #endif */
|
||||
&.top,
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
|
||||
/* iphonex 等安全区设置，底部安全区适配 */
|
||||
/* #ifndef APP-NVUE */
|
||||
// padding-bottom: constant(safe-area-inset-bottom);
|
||||
// padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
padding-top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: 0;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixforpc-z-index {
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
87
uni_modules/uni-popup/package.json
Normal file
87
uni_modules/uni-popup/package.json
Normal file
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uni-popup",
|
||||
"displayName": "uni-popup 弹出层",
|
||||
"version": "1.8.8",
|
||||
"description": " Popup 组件，提供常用的弹层",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"弹出层",
|
||||
"弹窗",
|
||||
"popup",
|
||||
"弹框"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-transition"
|
||||
],
|
||||
"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"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
uni_modules/uni-popup/readme.md
Normal file
17
uni_modules/uni-popup/readme.md
Normal file
@@ -0,0 +1,17 @@
|
||||
|
||||
|
||||
## Popup 弹出层
|
||||
> **组件名：uni-popup**
|
||||
> 代码块： `uPopup`
|
||||
> 关联组件：`uni-transition`
|
||||
|
||||
|
||||
弹出层组件，在应用中弹出一个消息提示窗口、提示框等
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
8
uni_modules/uni-scss/changelog.md
Normal file
8
uni_modules/uni-scss/changelog.md
Normal file
@@ -0,0 +1,8 @@
|
||||
## 1.0.3（2022-01-21）
|
||||
- 优化 组件示例
|
||||
## 1.0.2（2021-11-22）
|
||||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
|
||||
## 1.0.1（2021-11-22）
|
||||
- 修复 vue3中scss语法兼容问题
|
||||
## 1.0.0（2021-11-18）
|
||||
- init
|
||||
1
uni_modules/uni-scss/index.scss
Normal file
1
uni_modules/uni-scss/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './styles/index.scss';
|
||||
82
uni_modules/uni-scss/package.json
Normal file
82
uni_modules/uni-scss/package.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"id": "uni-scss",
|
||||
"displayName": "uni-scss 辅助样式",
|
||||
"version": "1.0.3",
|
||||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
|
||||
"keywords": [
|
||||
"uni-scss",
|
||||
"uni-ui",
|
||||
"辅助样式"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"JS SDK",
|
||||
"通用 SDK"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
uni_modules/uni-scss/readme.md
Normal file
4
uni_modules/uni-scss/readme.md
Normal file
@@ -0,0 +1,4 @@
|
||||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
7
uni_modules/uni-scss/styles/index.scss
Normal file
7
uni_modules/uni-scss/styles/index.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import './setting/_variables.scss';
|
||||
@import './setting/_border.scss';
|
||||
@import './setting/_color.scss';
|
||||
@import './setting/_space.scss';
|
||||
@import './setting/_radius.scss';
|
||||
@import './setting/_text.scss';
|
||||
@import './setting/_styles.scss';
|
||||
3
uni_modules/uni-scss/styles/setting/_border.scss
Normal file
3
uni_modules/uni-scss/styles/setting/_border.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.uni-border {
|
||||
border: 1px $uni-border-1 solid;
|
||||
}
|
||||
66
uni_modules/uni-scss/styles/setting/_color.scss
Normal file
66
uni_modules/uni-scss/styles/setting/_color.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
|
||||
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
|
||||
// @mixin get-styles($k,$c) {
|
||||
// @if $k == size or $k == weight{
|
||||
// font-#{$k}:#{$c}
|
||||
// }@else{
|
||||
// #{$k}:#{$c}
|
||||
// }
|
||||
// }
|
||||
$uni-ui-color:(
|
||||
// 主色
|
||||
primary: $uni-primary,
|
||||
primary-disable: $uni-primary-disable,
|
||||
primary-light: $uni-primary-light,
|
||||
// 辅助色
|
||||
success: $uni-success,
|
||||
success-disable: $uni-success-disable,
|
||||
success-light: $uni-success-light,
|
||||
warning: $uni-warning,
|
||||
warning-disable: $uni-warning-disable,
|
||||
warning-light: $uni-warning-light,
|
||||
error: $uni-error,
|
||||
error-disable: $uni-error-disable,
|
||||
error-light: $uni-error-light,
|
||||
info: $uni-info,
|
||||
info-disable: $uni-info-disable,
|
||||
info-light: $uni-info-light,
|
||||
// 中性色
|
||||
main-color: $uni-main-color,
|
||||
base-color: $uni-base-color,
|
||||
secondary-color: $uni-secondary-color,
|
||||
extra-color: $uni-extra-color,
|
||||
// 背景色
|
||||
bg-color: $uni-bg-color,
|
||||
// 边框颜色
|
||||
border-1: $uni-border-1,
|
||||
border-2: $uni-border-2,
|
||||
border-3: $uni-border-3,
|
||||
border-4: $uni-border-4,
|
||||
// 黑色
|
||||
black:$uni-black,
|
||||
// 白色
|
||||
white:$uni-white,
|
||||
// 透明
|
||||
transparent:$uni-transparent
|
||||
) !default;
|
||||
@each $key, $child in $uni-ui-color {
|
||||
.uni-#{"" + $key} {
|
||||
color: $child;
|
||||
}
|
||||
.uni-#{"" + $key}-bg {
|
||||
background-color: $child;
|
||||
}
|
||||
}
|
||||
.uni-shadow-sm {
|
||||
box-shadow: $uni-shadow-sm;
|
||||
}
|
||||
.uni-shadow-base {
|
||||
box-shadow: $uni-shadow-base;
|
||||
}
|
||||
.uni-shadow-lg {
|
||||
box-shadow: $uni-shadow-lg;
|
||||
}
|
||||
.uni-mask {
|
||||
background-color:$uni-mask;
|
||||
}
|
||||
55
uni_modules/uni-scss/styles/setting/_radius.scss
Normal file
55
uni_modules/uni-scss/styles/setting/_radius.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
@mixin radius($r,$d:null ,$important: false){
|
||||
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||
// Key exists within the $uni-radius variable
|
||||
@if (map-has-key($uni-radius, $r) and $d){
|
||||
@if $d == t {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == r {
|
||||
border-top-right-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == b {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == l {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}@else if $d == tl {
|
||||
border-top-left-radius:$radius-value;
|
||||
}@else if $d == tr {
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == br {
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == bl {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}
|
||||
}@else{
|
||||
border-radius:$radius-value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $key} {
|
||||
@include radius($key)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius {
|
||||
@include radius($key)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius-#{$direction} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
uni_modules/uni-scss/styles/setting/_space.scss
Normal file
56
uni_modules/uni-scss/styles/setting/_space.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
|
||||
@mixin fn($space,$direction,$size,$n) {
|
||||
@if $n {
|
||||
#{$space}-#{$direction}: #{$size*$uni-space-root}px
|
||||
} @else {
|
||||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
|
||||
}
|
||||
}
|
||||
@mixin get-styles($direction,$i,$space,$n){
|
||||
@if $direction == t {
|
||||
@include fn($space, top,$i,$n);
|
||||
}
|
||||
@if $direction == r {
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == b {
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == l {
|
||||
@include fn($space, left,$i,$n);
|
||||
}
|
||||
@if $direction == x {
|
||||
@include fn($space, left,$i,$n);
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == y {
|
||||
@include fn($space, top,$i,$n);
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == a {
|
||||
@if $n {
|
||||
#{$space}:#{$i*$uni-space-root}px;
|
||||
} @else {
|
||||
#{$space}:#{-$i*$uni-space-root}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $orientation in m,p {
|
||||
$space: margin;
|
||||
@if $orientation == m {
|
||||
$space: margin;
|
||||
} @else {
|
||||
$space: padding;
|
||||
}
|
||||
@for $i from 0 through 16 {
|
||||
@each $direction in t, r, b, l, x, y, a {
|
||||
.uni-#{$orientation}#{$direction}-#{$i} {
|
||||
@include get-styles($direction,$i,$space,true);
|
||||
}
|
||||
.uni-#{$orientation}#{$direction}-n#{$i} {
|
||||
@include get-styles($direction,$i,$space,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
167
uni_modules/uni-scss/styles/setting/_styles.scss
Normal file
167
uni_modules/uni-scss/styles/setting/_styles.scss
Normal file
@@ -0,0 +1,167 @@
|
||||
/* #ifndef APP-NVUE */
|
||||
|
||||
$-color-white:#fff;
|
||||
$-color-black:#000;
|
||||
@mixin base-style($color) {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: mix($-color-black, $color, 8%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-black, $color, 10%);
|
||||
border-color: mix($-color-black, $color, 20%);
|
||||
color: $-color-white;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@mixin is-color($color) {
|
||||
@include base-style($color);
|
||||
&[loading] {
|
||||
@include base-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&[loading],
|
||||
&:not([hover-class]):active {
|
||||
color: $-color-white;
|
||||
border-color: mix(darken($color,10%), $-color-white);
|
||||
background-color: mix($color, $-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@mixin base-plain-style($color) {
|
||||
color:$color;
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 70%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-white, $color, 80%);
|
||||
color: $color;
|
||||
outline: none;
|
||||
border-color: mix($-color-white, $color, 50%);
|
||||
}
|
||||
}
|
||||
@mixin is-plain($color){
|
||||
&[plain] {
|
||||
@include base-plain-style($color);
|
||||
&[loading] {
|
||||
@include base-plain-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&:active {
|
||||
color: mix($-color-white, $color, 40%);
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-btn {
|
||||
margin: 5px;
|
||||
color: #393939;
|
||||
border:1px solid #ccc;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
background-color: #F9F9F9;
|
||||
// TODO 暂时处理边框隐藏一边的问题
|
||||
overflow: visible;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:not([type]),&[type=default] {
|
||||
color: #999;
|
||||
&[loading] {
|
||||
background: none;
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&[disabled]{
|
||||
color: mix($-color-white, #999, 60%);
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
color: mix($-color-white, #999, 60%);
|
||||
background-color: mix($-color-white,$-color-black , 98%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
|
||||
&[plain] {
|
||||
color: #999;
|
||||
background: none;
|
||||
border-color: $uni-border-1;
|
||||
&:not([hover-class]):active {
|
||||
background: none;
|
||||
color: mix($-color-white, $-color-black, 80%);
|
||||
border-color: mix($-color-white, $-color-black, 90%);
|
||||
outline: none;
|
||||
}
|
||||
&[disabled]{
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
background: none;
|
||||
color: mix($-color-white, #999, 60%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not([hover-class]):active {
|
||||
color: mix($-color-white, $-color-black, 50%);
|
||||
}
|
||||
|
||||
&[size=mini] {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.uni-btn-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
&.uni-btn-mini {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.uni-btn-radius {
|
||||
border-radius: 999px;
|
||||
}
|
||||
&[type=primary] {
|
||||
@include is-color($uni-primary);
|
||||
@include is-plain($uni-primary)
|
||||
}
|
||||
&[type=success] {
|
||||
@include is-color($uni-success);
|
||||
@include is-plain($uni-success)
|
||||
}
|
||||
&[type=error] {
|
||||
@include is-color($uni-error);
|
||||
@include is-plain($uni-error)
|
||||
}
|
||||
&[type=warning] {
|
||||
@include is-color($uni-warning);
|
||||
@include is-plain($uni-warning)
|
||||
}
|
||||
&[type=info] {
|
||||
@include is-color($uni-info);
|
||||
@include is-plain($uni-info)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
24
uni_modules/uni-scss/styles/setting/_text.scss
Normal file
24
uni_modules/uni-scss/styles/setting/_text.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@mixin get-styles($k,$c) {
|
||||
@if $k == size or $k == weight{
|
||||
font-#{$k}:#{$c}
|
||||
}@else{
|
||||
#{$k}:#{$c}
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-headings {
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
.container .uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user