修改limeClipper插件中的stylus为普通css

bddca522 · DCloud_JSON · e0a62a01 · bddca522 · bddca522 · bddca522
6 changed file
--- a/README.md
+++ b/README.md
@@ -24,4 +24,14 @@ base app将节省开发者大量的时间，让开发者集中精力在自己的

 有了base app，再加上schema2code生成前端页面，一个简单应用就可以快速完成。

-base app + uniCloud admin，应用开发从未如此简单快捷！
\ No newline at end of file
+base app + uniCloud admin，应用开发从未如此简单快捷！
+
+baseapp中的主要功能，插件列表
+1. uni-id用户体系 [uni-id](https://uniapp.dcloud.io/uniCloud/uni-id)
+2. 分享功能插件 [uni-share](https://ext.dcloud.net.cn/plugin?id=4860)
+3. 升级中心	[uni-upgrade-center](https://ext.dcloud.net.cn/plugin?id=4542)
+4. 云端一体搜索模板 [uni-search-template](https://ext.dcloud.net.cn/plugin?id=3851)
+
+第三方插件（感谢插件作者，排名不分前后）：
+1. [limeClipper](https://ext.dcloud.net.cn/plugin?id=3594) @作者： 陌上华年
+2. [Sansnn-uQRCode](https://ext.dcloud.net.cn/plugin?id=1287) @作者： 3snn
\ No newline at end of file
--- a/components/Sansnn-uQRCode/README.md
+++ b/components/Sansnn-uQRCode/README.md
+> 插件来源：[https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)
+##### 以下是作者写的插件介绍：
+
+# uQRCode
+
+### 云函数版二维码生成插件explain-qrcode现已发布，URL化后一句代码即可生成，有网就有二维码，100%生成成功，不会因为平台差异，设备差异导致生成失败，无需在前端做适配和兼容，极力推荐。插件地址：[explain-qrcode云函数二维码生成](https://ext.dcloud.net.cn/plugin?id=3359)
+
+uQRCode 生成方式简单，可扩展性高，如有复杂需求可通过自定义组件或修改源码完成需求。已测试H5、微信小程序、iPhoneXsMax真机。
+
+本示例项目中的自定义组件旨在抛砖引玉，有其他需求的朋友可自行扩展，自定义组件参考 ``/components/uni-qrcode/uni-qrcode.vue`` ，自定义组件使用案例参考 ``/pages/component/qrcode/qrcode.vue`` 。
+
+联系方式：QQ540000228。
+
+最近一次用于更新代码的 HBuilder X 版本为 2.8.11。
+
+### 二维码
+**什么是QR码**
+
+QR码属于矩阵式二维码中的一个种类，由DENSO(日本电装)公司开发，由JIS和ISO将其标准化。
+
+**QR码的特点**
+
+一是高速读取(QR就是取自“Quick Response”的首字母)，通过摄像头从拍摄到解码到显示内容也就三秒左右，对摄像的角度也没有什么要求；
+
+二是高容量、高密度，理论上内容经过压缩处理后可以存7089个数字，4296个字母和数字混合字符，2953个8位字节数据，1817个汉字；
+
+三是支持纠错处理，按照QR码的标准文档说明，QR码的纠错分为4个级别，分别是：
+- level L : 最大 7% 的错误能够被纠正；
+- level M : 最大 15% 的错误能够被纠正；
+- level Q : 最大 25% 的错误能够被纠正；
+- level H : 最大 30% 的错误能够被纠正；
+
+四是结构化，看似无规则的图形，其实对区域有严格的定义。
+
+更多二维码介绍及原理：[https://blog.csdn.net/jason_ldh/article/details/11801355](https://blog.csdn.net/jason_ldh/article/details/11801355)
+
+### 使用方式
+
+在 ``script`` 中引用组件
+
+```javascript
+import uQRCode from '@/common/uqrcode.js'
+```
+
+在 ``template`` 中创建 ``<canvas></canvas>``
+
+```html
+<canvas canvas-id="qrcode" style="width: 354px;height: 354px;" ></canvas>
+```
+
+在 ``script`` 中调用 ``make()`` 方法
+
+```javascript
+export default {
+  methods: {
+    async make() {
+      // 回调方式
+      uQRCode.make({
+        canvasId: 'qrcode',
+        componentInstance: this,
+        text: 'uQRCode',
+        size: 354,
+        margin: 10,
+        backgroundColor: '#ffffff',
+        foregroundColor: '#000000',
+        fileType: 'jpg',
+        errorCorrectLevel: uQRCode.errorCorrectLevel.H,
+        success: res => {
+          console.log(res)
+        }
+      })
+
+      // Promise
+      uQRCode.make({
+        canvasId: 'qrcode',
+        componentInstance: this,
+        text: 'uQRCode',
+        size: 354,
+        margin: 10,
+        backgroundColor: '#ffffff',
+        foregroundColor: '#000000',
+        fileType: 'jpg',
+        errorCorrectLevel: uQRCode.errorCorrectLevel.H
+      }).then(res => {
+          console.log(res)
+      })
+
+      // 同步等待
+      var res = await uQRCode.make({
+        canvasId: 'qrcode',
+        componentInstance: this,
+        text: 'uQRCode',
+        size: 354,
+        margin: 10,
+        backgroundColor: '#ffffff',
+        foregroundColor: '#000000',
+        fileType: 'jpg',
+        errorCorrectLevel: uQRCode.errorCorrectLevel.H
+      })
+      console.log(res)
+    }
+  }
+}
+```
+
+### 属性说明
+
+|属性名|说明|
+|---|:---|
+|errorCorrectLevel|纠错等级，包含 `errorCorrectLevel.L`、`errorCorrectLevel.M`、`errorCorrectLevel.Q`、`errorCorrectLevel.H` 四个级别，`L`: 最大 7% 的错误能够被纠正；`M`: 最大 15% 的错误能够被纠正；`Q`: 最大 25% 的错误能够被纠正；`H`: 最大 30% 的错误能够被纠正。|
+|defaults|二维码生成参数的默认值。|
+
+### 方法说明
+
+|方法名|说明|
+|---|:---|
+|[make](#makeoptions)|生成二维码。|
+
+### make(options)
+
+生成二维码
+
+**options参数说明：**
+
+|参数|类型|必填|说明|
+|---|---|---|:---|
+|canvasId|String|是|画布标识，传入 `<canvas></canvas>` 的 `canvas-id`|
+|componentInstance|Object|否|自定义组件实例 `this` ，表示在这个自定义组件下查找拥有 `canvas-id` 的 `<canvas></canvas>` ，如果省略，则不在任何自定义组件内查找|
+|text|String|是|二维码内容|
+|size|Number|否|画布尺寸大小，请与 `<canvas></canvas>` 所设 `width` ， `height` 保持一致（默认：`354`）|
+|margin|Number|否|边距，二维码实际尺寸会根据所设边距值进行缩放调整（默认：`0`）|
+|backgroundColor|String|否|背景色，若设置为透明背景， `fileType` 需设置为 `'png'` ， 然后设置背景色为 `'rgba(255,255,255,0)'` 即可（默认：`'#ffffff'`）|
+|foregroundColor|String|否|前景色（默认：`'#000000'`）|
+|fileType|String|否|输出图片的类型，只支持 `'jpg'` 和 `'png'`（默认：`'png'`）|
+|errorCorrectLevel|Number|否|纠错等级，参考属性说明 `errorCorrectLevel`（默认：`errorCorrectLevel.H`）|
+
+### 使用建议
+canvas在二维码生成中请当做一个生成工具来看待，它的作用仅是绘制出二维码。应把生成回调得到的资源保存并使用，显示用image图片组件，原因是方便操作，例如调整大小，或是H5端长按保存或识别，所以canvas应将它放在看不见的地方。不能用`display:none;overflow:hidden;`隐藏，否则生成空白。这里推荐canvas的隐藏样式代码
+```html
+<style>
+	.canvas-hide {
+		/* 1 */
+		position: fixed;
+		right: 100vw;
+		bottom: 100vh;
+		/* 2 */
+		z-index: -9999;
+		/* 3 */
+		opacity: 0;
+	}
+</style>
+```
+
+### 常见问题
+**二维码生成不完整**
+
+canvas宽高必须和size一致，并且size的单位是px，如果canvas的单位是rpx，那么不同设备屏幕分辨率不一样，rpx转换成px后的画布尺寸不足以放下全部内容，实际绘制图案超出，就会出现不完整的情况。
+
+**如何扫码跳转指定网页**
+
+text参数直接放入完整的网页地址即可，例如：`https://ext.dcloud.net.cn/plugin?id=1287`。微信客户端不能是ip地址。
+
+**小程序、APP报错**
+
+canvas不支持放在 `slot` 插槽，请尽量放在模板根节点，也就是第一个 `<view></view>` 标签里面
+
+**H5长按识别**
+
+canvas无法长按识别，长按识别需要是图片才行，所以只需将回调过来的资源用image组件显示即可。
+
+### Tips
+- 示例项目中的图片采集于互联网，仅作为案例展示，不作为广告/商业，如有侵权，请告知删除。下载使用的用户，请勿把示例项目中的图片应用到你的项目。
\ No newline at end of file
--- a/pages/list/detail.vue
+++ b/pages/list/detail.vue
@@ -79,7 +79,7 @@
 				'userInfo': 'user/info',
 				'hasLogin': 'user/hasLogin'
 			}),
-			baseappConfig(){
+			baseappConfig() {
 				return getApp().globalData.config
 			}
 		},
@@ -143,8 +143,6 @@
 					.catch(err => {
 						console.log(err);
 					})
-
-
 			},
 			loadData(data) {
 				//如果上一页未传递标题过来（如搜索直达详情），则从新闻详情中读取标题
@@ -337,4 +335,4 @@
 		font-size: 15px;
 		overflow: hidden;
 	}
-</style>
+</style>
--- a/pages/ucenter/userinfo/limeClipper/README.md
+++ b/pages/ucenter/userinfo/limeClipper/README.md
-插件来源：[https://ext.dcloud.net.cn/plugin?id=3594](https://ext.dcloud.net.cn/plugin?id=3594)
-以下是插件作者的插件介绍：
+> 插件来源：[https://ext.dcloud.net.cn/plugin?id=3594](https://ext.dcloud.net.cn/plugin?id=3594)
+##### 以下是作者写的插件介绍：

 # Clipper 图片裁剪
 > uniapp 图片裁剪，可用于图片头像等裁剪处理

--- a/pages/ucenter/userinfo/limeClipper/index.css
+++ b/pages/ucenter/userinfo/limeClipper/index.css
+.flex-auto {
+  flex: auto;
+}
+.bg-transparent {
+  background-color: rgba(0,0,0,0.9);
+  transition-duration: 0.35s;
+}
+.l-clipper {
+  width: 100vw;
+  height: calc(100vh - var(--window-top));
+  background-color: rgba(0,0,0,0.9);
+  position: fixed;
+  top: var(--window-top);
+  left: 0;
+  z-index: 1;
+}
+.l-clipper-mask {
+  position: relative;
+  z-index: 2;
+  pointer-events: none;
+}
+.l-clipper__content {
+  pointer-events: none;
+  position: absolute;
+  border: 1rpx solid rgba(255,255,255,0.3);
+  box-sizing: border-box;
+  box-shadow: rgba(0,0,0,0.5) 0 0 0 80vh;
+  background: transparent;
+}
+.l-clipper__content::before,
+.l-clipper__content::after {
+  content: '';
+  position: absolute;
+  border: 1rpx dashed rgba(255,255,255,0.3);
+}
+.l-clipper__content::before {
+  width: 100%;
+  top: 33.33%;
+  height: 33.33%;
+  border-left: none;
+  border-right: none;
+}
+.l-clipper__content::after {
+  width: 33.33%;
+  left: 33.33%;
+  height: 100%;
+  border-top: none;
+  border-bottom: none;
+}
+.l-clipper__edge {
+  position: absolute;
+  width: 34rpx;
+  height: 34rpx;
+  border: 6rpx solid #fff;
+  pointer-events: auto;
+}
+.l-clipper__edge::before {
+  content: '';
+  position: absolute;
+  width: 40rpx;
+  height: 40rpx;
+  background-color: transparent;
+}
+.l-clipper__edge:nth-child(1) {
+  left: -6rpx;
+  top: -6rpx;
+  border-bottom-width: 0 !important;
+  border-right-width: 0 !important;
+}
+.l-clipper__edge:nth-child(1):before {
+  top: -50%;
+  left: -50%;
+}
+.l-clipper__edge:nth-child(2) {
+  right: -6rpx;
+  top: -6rpx;
+  border-bottom-width: 0 !important;
+  border-left-width: 0 !important;
+}
+.l-clipper__edge:nth-child(2):before {
+  top: -50%;
+  left: 50%;
+}
+.l-clipper__edge:nth-child(3) {
+  left: -6rpx;
+  bottom: -6rpx;
+  border-top-width: 0 !important;
+  border-right-width: 0 !important;
+}
+.l-clipper__edge:nth-child(3):before {
+  bottom: -50%;
+  left: -50%;
+}
+.l-clipper__edge:nth-child(4) {
+  right: -6rpx;
+  bottom: -6rpx;
+  border-top-width: 0 !important;
+  border-left-width: 0 !important;
+}
+.l-clipper__edge:nth-child(4):before {
+  bottom: -50%;
+  left: 50%;
+}
+.l-clipper-image {
+  width: 100%;
+  border-style: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  transform-origin: center;
+}
+.l-clipper-canvas {
+  position: fixed;
+  z-index: 10;
+  left: -200vw;
+  top: -200vw;
+  pointer-events: none;
+}
+.l-clipper-tools {
+  position: fixed;
+  left: 0;
+  bottom: 10px;
+  width: 100%;
+  z-index: 99;
+  color: #fff;
+}
+.l-clipper-tools__btns {
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 20rpx 40rpx;
+  box-sizing: border-box;
+}
+.l-clipper-tools__btns .cancel {
+  width: 112rpx;
+  height: 60rpx;
+  text-align: center;
+  line-height: 60rpx;
+}
+.l-clipper-tools__btns .confirm {
+  width: 112rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  background-color: #07c160;
+  border-radius: 6rpx;
+  text-align: center;
+}
+.l-clipper-tools__btns image {
+  display: block;
+  width: 60rpx;
+  height: 60rpx;
+}
+.l-clipper-tools__btns {
+  flex-direction: row;
+}
--- a/pages/ucenter/userinfo/limeClipper/limeClipper.vue
+++ b/pages/ucenter/userinfo/limeClipper/limeClipper.vue
@@ -689,6 +689,6 @@ export default {
 };
 </script>

-<style lang="stylus" scoped>
-@import './index'
+<style scoped>
+@import './index.css'
 </style>