首頁 探索 說明
登入
CocoRoboLabs
/
pbl-student-table
3
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

update

lsc 1 年之前
父節點
77c413eeca
當前提交
dcf124d59f
共有 22 個文件被更改，包括 1058 次插入 和 2 次删除
統一視圖 顯示文件統計
  1. 1 1
      dist/index.html
  2. 0 0
      dist/static/css/app.f5d7c1bfc21fcb64e645d13d5578beda.css
  3. 0 0
      dist/static/css/app.f5d7c1bfc21fcb64e645d13d5578beda.css.map
  4. 0 0
      dist/static/js/app.3b2b6dcd27144af8db02.js
  5. 0 0
      dist/static/js/app.3b2b6dcd27144af8db02.js.map
  6. 0 0
      dist/static/js/app.991cece091d4b824a9b2.js
  7. 0 0
      dist/static/js/manifest.3ad1d5771e9b13dbdad2.js.map
  8. 0 0
      dist/static/js/vendor.e97d134e001cf57d792e.js
  9. 0 0
      dist/static/js/vendor.e97d134e001cf57d792e.js.map
  10. 0 0
      src/components/tools/hevue-img-preview/LICENSE
  11. 133 0
      src/components/tools/hevue-img-preview/README.md
  12. 131 0
      src/components/tools/hevue-img-preview/css/default.css
  13. 34 0
      src/components/tools/hevue-img-preview/css/theme-dark.css
  14. 41 0
      src/components/tools/hevue-img-preview/css/theme-light.css
  15. 536 0
      src/components/tools/hevue-img-preview/hevue-img-preview.vue
  16. 71 0
      src/components/tools/hevue-img-preview/iconfont/iconfont.css
  17. 二進制
      src/components/tools/hevue-img-preview/iconfont/iconfont.ttf
  18. 二進制
      src/components/tools/hevue-img-preview/iconfont/iconfont.woff
  19. 二進制
      src/components/tools/hevue-img-preview/iconfont/iconfont.woff2
  20. 48 0
      src/components/tools/hevue-img-preview/index.js
  21. 62 0
      src/components/tools/hevue-img-preview/package.json
  22. 1 1
      src/main.js

+ 1 - 1
dist/index.html
查看文件 

@@ -18,7 +18,7 @@
 
       border-radius: 10px;
 
       border-radius: 10px;
 
       -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 
       -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 
       background-color: rgba(0, 0, 0, 0.1);
 
       background-color: rgba(0, 0, 0, 0.1);
 
-    }</style><link href=./static/css/app.d4185bac57a86495060e3a1a24d9b890.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.e81042531bab735dba9a.js></script><script type=text/javascript src=./static/js/app.991cece091d4b824a9b2.js></script></body></html><script>function stopSafari() {
 
+    }</style><link href=./static/css/app.f5d7c1bfc21fcb64e645d13d5578beda.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.e97d134e001cf57d792e.js></script><script type=text/javascript src=./static/js/app.3b2b6dcd27144af8db02.js></script></body></html><script>function stopSafari() {
 
     //阻止safari浏览器双击放大功能
 
     //阻止safari浏览器双击放大功能
 
     let lastTouchEnd = 0  //更新手指弹起的时间
 
     let lastTouchEnd = 0  //更新手指弹起的时间
 
     document.documentElement.addEventListener("touchstart", function (event) {
 
     document.documentElement.addEventListener("touchstart", function (event) {

文件差異過大導致無法顯示
+ 0 - 0
dist/static/css/app.f5d7c1bfc21fcb64e645d13d5578beda.css


文件差異過大導致無法顯示
+ 0 - 0
dist/static/css/app.f5d7c1bfc21fcb64e645d13d5578beda.css.map


文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/app.3b2b6dcd27144af8db02.js


文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/app.3b2b6dcd27144af8db02.js.map


文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/app.991cece091d4b824a9b2.js


文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/manifest.3ad1d5771e9b13dbdad2.js.map


文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/vendor.e97d134e001cf57d792e.js


文件差異過大導致無法顯示
+ 0 - 0
dist/static/js/vendor.e97d134e001cf57d792e.js.map


+ 0 - 0
src/components/tools/hevue-img-preview/LICENSE
查看文件


+ 133 - 0
src/components/tools/hevue-img-preview/README.md
查看文件 

@@ -0,0 +1,133 @@
 
+## hevue-img-preview 简介
 
+
 
+
 
+[![](https://img.shields.io/npm/dm/hevue-img-preview.svg)](https://www.npmjs.com/package/hevue-img-preview)
 
+[![](https://img.shields.io/github/v/release/heyongsheng/hevue-img-preview)](https://www.npmjs.com/package/hevue-img-preview)
 
+[![](https://img.shields.io/badge/License-MIT-green)](https://www.npmjs.com/package/hevue-img-preview)
 
+
 
+> 本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。如果能帮上你，希望可以移步 [GitHub](https://github.com/heyongsheng/hevue-img-preview) ，或者[码云](https://gitee.com/ihope_top/hevue-img-preview) 给个小星星，如果有任何使用意见或建议，也欢迎回复或者提交 issue
 
+
 
+## 官方文档
 
+
 
+> 官方使用文档请访问 [https://heyongsheng.github.io/#/](https://heyongsheng.github.io/#/)
 
+
 
+## 安装
 
+
 
+使用npm进行安装
 
+``` bash
 
+npm install hevue-img-preview
 
+```
 
+
 
+在main.js进行全局引入
 
+```javascript
 
+import hevueImgPreview from 'hevue-img-preview'
 
+Vue.use(hevueImgPreview)
 
+```
 
+
 
+在组件中进行使用
 
+```html
 
+<img :src="url" @click="previewImg(url)">
 
+```
 
+```javascript
 
+methods: {
 
+	previewImg (url) {
 
+		this.$hevueImgPreview(url)
 
+	}
 
+}
 
+```
 
+
 
+## 使用
 
+
 
+> this.\$hevueImgPreview() 方法可以接收一个字符串类型的 url，或者对象类型的配置，具体使用方法如下
 
+
 
+- 接收一个地址字符串`this.$hevueImgPreview(url)`
 
+
 
+```Javascript
 
+this.$hevueImgPreview('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg') // 线上地址
 
+this.$hevueImgPreview('./img/logo.jpeg') // 本地地址
 
+```
 
+
 
+- 接收一个对象`this.$hevueImgPreview(options)`
 
+
 
+```Javascript
 
+# 单图预览
 
+this.$hevueImgPreview({
 
+    url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
 
+})
 
+
 
+# 多图预览
 
+this.$hevueImgPreview({
 
+    multiple: true, // 开启多图预览模式
 
+    nowImgIndex: 1, // 多图预览，默认展示第二张图片
 
+    imgList: ['1.png', '2.png', '3.png'], // 需要预览的多图数组
 
+})
 
+```
 
+
 
+### 配置项
 
+
 
+| 字段              | 类型    | 默认值               | 备注                           |
 
+| ----------------- | ------- | -------------------- | ------------------------------ |
 
+| url               | String  | 无                   | 预览的图片地址，多图预览时省略 |
 
+| multiple          | Boolean | false                | 是否多图预览                   |
 
+| nowImgIndex       | Number  | 0                    | 多图预览时默认显示的图片下标   |
 
+| imgList           | Array   | 无                   | 多图预览时传入的图片数组       |
 
+| keyboard          | Boolean | false                | 是否开启键盘控制               |
 
+| clickMaskCLose    | Boolean | false                | 是否可以点击遮罩层关闭         |
 
+| controlBar        | Boolean | true                 | 是否显示控制条及页码         |
 
+| closeBtn          | Boolean | true                 | 是否显示关闭按钮         |
 
+| arrowBtn          | Boolean | true                | 是否显示左右翻页按钮         |
 
+
 
+#### 全局配置
 
+
 
+对于某些配置，例如开启键盘事件，点击遮罩层关闭，我们可能要全局保持统一，但却需要在每一次调用时重复配置，为了解决这个问题，我们提供了全局配置项，您可以在引入插件的时候，将全局配置项作为第二个参数传入即可，以免再每次调用的时候重复配置。
 
+
 
+```javascript
 
+// main.js
 
+import hevueImgPreview from 'hevueImgPreview'
 
+Vue.use(hevueImgPreview, {
 
+  keyboard: true,
 
+  clickMaskCLose: true
 
+  ...
 
+})
 
+```
 
+
 
+
 
+如开启键盘控制事件后，相对应功能控制按键如下
 
+
 
+| 按键 | 功能
 
+| ----------------- | ----------------------------------------
 
+| w | 放大
 
+| s | 缩小
 
+| a | 上一张
 
+| d | 下一张
 
+| q | 逆时针旋转
 
+| e | 顺时针旋转
 
+| r | 图片复位
 
+| esc | 关闭图片预览
 
+
 
+*如不考虑兼容性问题，上述的背景颜色均可接收渐变色*
 
+
 
+## 更新日志
 
+
 
+### 5.0.2
 
+
 
+组件支持实例化，调用组件将返回组件实例，支持直接通过实例关闭弹窗
 
+```javascript
 
+const hevueImgPreviewEl = this.$hevueImgPreview(...)
 
+hevueImgPreviewEl.close()
 
+```
 
+
 
+## 作者注
 
+
 
+> 本人前端小白一枚，工作经验较少，所写东西尽量保证没 bug，但性能界面什么的可能没办法做到最优，如果您有什么使用中的建议或意见，欢迎反馈给我，可以加联系方式，也可以直接回复，或者到`GitHub`提个`issue`[建议此方法]，如果对您有所帮助，万分期待您能给个赞并且到`GitHub`给个小星星
 
+
 
+> GitHub 链接：[https://github.com/heyongsheng/hevue-img-preview](https://github.com/heyongsheng/hevue-img-preview)
 
+
 
+> 码云链接：[https://gitee.com/ihope_top/hevue-img-preview](https://gitee.com/ihope_top/hevue-img-preview)
 
+
 
+作者 QQ：1378431028
 
+
 
+QQ 群：595472617
 
+
 
+作者微信：heyongsheng1996
 
+![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57478efc7ace4a8c9e27081a26f2c8cf~tplv-k3u1fbpfcp-zoom-1.image)

+ 131 - 0
src/components/tools/hevue-img-preview/css/default.css
查看文件 

@@ -0,0 +1,131 @@
 
+.hevue-imgpreview-wrap {
 
+  position: fixed;
 
+  top: 0;
 
+  bottom: 0;
 
+  right: 0;
 
+  left: 0;
 
+  user-select: none;
 
+  -moz-user-select: none;
 
+  -webkit-user-select: none;
 
+  -ms-user-select: none;
 
+  z-index: 9999;
 
+  color: rgba(255,255,255,.6);
 
+}
 
+.hevue-imgpreview-wrap .he-img-wrap {
 
+  width: 100%;
 
+  height: 100%;
 
+  text-align: center;
 
+  vertical-align: middle;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  align-items: center;
 
+  background: rgba(0, 0, 0, .3);
 
+}
 
+.hevue-imgpreview-wrap .he-img-view {
 
+  /* transition: transform 0.3s; */
 
+}
 
+.hevue-imgpreview-wrap .arrow {
 
+  width: 42px;
 
+  height: 42px;
 
+  text-align: center;
 
+  line-height: 42px;
 
+  position: absolute;
 
+  top: 50%;
 
+  border-radius: 50%;
 
+  transform: translateY(-50%);
 
+  -ms-transform: translateY(-50%);
 
+  font-size: 24px;
 
+  cursor: pointer;
 
+  transition: all 0.2s;
 
+  background: rgba(0,0,0,.3);
 
+}
 
+.hevue-imgpreview-wrap .arrow:hover {
 
+  opacity: 0.8;
 
+  transform: translateY(-50%) scale(1.2);
 
+}
 
+.hevue-imgpreview-wrap .arrow-left {
 
+  left: 50px;
 
+}
 
+.hevue-imgpreview-wrap .arrow-right {
 
+  right: 50px;
 
+}
 
+/* 关闭按钮 */
 
+.hevue-imgpreview-wrap .he-close-icon {
 
+  position: absolute;
 
+  right: 50px;
 
+  top: 50px;
 
+  width: 36px;
 
+  height: 36px;
 
+  font-size: 22px;
 
+  line-height: 36px;
 
+  text-align: center;
 
+  border-radius: 50%;
 
+  cursor: pointer;
 
+  transition: all 0.2s;
 
+  background: rgba(0,0,0,.3);
 
+}
 
+.hevue-imgpreview-wrap .he-close-icon:hover {
 
+  transform: rotate(90deg);
 
+}
 
+.hevue-imgpreview-wrap .he-control-bar-wrap {
 
+  display: flex;
 
+  position: absolute;
 
+  width: 100%;
 
+  bottom: 10%;
 
+  left: 0;
 
+}
 
+.hevue-imgpreview-wrap .he-control-bar {
 
+  height: 44px;
 
+  bottom: 10%;
 
+  padding: 0 22px;
 
+  display: flex;
 
+  border-radius: 22px;
 
+  margin: 0 auto;
 
+  background: rgba(0,0,0,.3);
 
+}
 
+.hevue-imgpreview-wrap .he-control-num {
 
+  position: absolute;
 
+  bottom: 5%;
 
+  left: 50%;
 
+  transform: translateX(-50%);
 
+  -ms-transform: translateX(-50%);
 
+  padding: 0 22px;
 
+  font-size: 16px;
 
+  border-radius: 15px;
 
+  background: rgba(0,0,0,.3);
 
+}
 
+.hevue-imgpreview-wrap .he-control-btn {
 
+  line-height: 44px;
 
+  font-size: 24px;
 
+  cursor: pointer;
 
+  padding: 0 9px;
 
+  /* display: inline-block; */
 
+  transition: all 0.2s;
 
+}
 
+.hevue-imgpreview-wrap .he-control-btn:hover {
 
+  transform: scale(1.2);
 
+}
 
+
 
+.hevue-imgpreview-wrap .fade-enter-active,
 
+.hevue-imgpreview-wrap .fade-leave-active {
 
+  transition: opacity 0.3s;
 
+}
 
+.hevue-imgpreview-wrap .fade-enter, .hevue-imgpreview-wrap .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 
+  opacity: 0;
 
+}
 
+.hevue-imgpreview-wrap .hevue-img-status-icon {
 
+  font-size: 56px;
 
+}
 
+
 
+.hevue-imgpreview-wrap .rotate-animation {
 
+  animation: rotate 1.5s linear infinite;
 
+}
 
+@keyframes rotate {
 
+  from {
 
+    transform: rotate(0deg);
 
+  }
 
+  to {
 
+    transform: rotate(360deg);
 
+  }
 
+}

+ 34 - 0
src/components/tools/hevue-img-preview/css/theme-dark.css
查看文件 

@@ -0,0 +1,34 @@
 
+
 
+.hevue-imgpreview-wrap {
 
+  color: rgba(255,255,255,.6);
 
+}
 
+
 
+/* 遮罩层 */
 
+.hevue-imgpreview-wrap .he-img-wrap {
 
+  background: rgba(0, 0, 0, .8);
 
+  backdrop-filter: blur(8px);
 
+}
 
+
 
+/* 控制条 */
 
+.hevue-imgpreview-wrap .he-control-bar {
 
+  background: rgba(0,0,0,.3);
 
+  backdrop-filter: blur(5px);
 
+}
 
+
 
+/* 左右箭头 */
 
+.hevue-imgpreview-wrap .arrow {
 
+  background: rgba(0,0,0,.3);
 
+  backdrop-filter: blur(5px);
 
+}
 
+
 
+/* 关闭按钮 */
 
+.he-close-icon {
 
+  background: rgba(0,0,0,.3);
 
+  backdrop-filter: blur(5px);
 
+}
 
+
 
+/* 页码指示器 */
 
+.he-control-num {
 
+  background: rgba(0,0,0,.3);
 
+  backdrop-filter: blur(5px);
 
+}

+ 41 - 0
src/components/tools/hevue-img-preview/css/theme-light.css
查看文件 

@@ -0,0 +1,41 @@
 
+.hevue-imgpreview-wrap {
 
+  color: rgba(52, 52, 52, 0.6);
 
+}
 
+
 
+/* 遮罩层 */
 
+.hevue-imgpreview-wrap .he-img-wrap {
 
+  background: rgba(70, 70, 70, 0.3);
 
+  backdrop-filter: blur(8px);
 
+}
 
+
 
+/* 控制条 */
 
+.hevue-imgpreview-wrap .he-control-bar {
 
+  background: rgba(255, 255, 255, .8);
 
+  backdrop-filter: blur(5px);
 
+  /* box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%); */
 
+  /* border: 1px solid rgba(160, 160, 160, .15); */
 
+}
 
+
 
+/* 左右箭头 */
 
+.hevue-imgpreview-wrap .arrow {
 
+  background: rgba(255, 255, 255, .8);
 
+  backdrop-filter: blur(5px);
 
+  /* box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%); */
 
+  /* border: 1px solid rgba(160, 160, 160, .15); */
 
+}
 
+
 
+/* 关闭按钮 */
 
+.hevue-imgpreview-wrap .he-close-icon {
 
+  background: rgba(255, 255, 255, .8);
 
+  backdrop-filter: blur(5px);
 
+  /* box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%); */
 
+  /* border: 1px solid rgba(160, 160, 160, .15); */
 
+}
 
+
 
+/* 页码指示器 */
 
+.hevue-imgpreview-wrap .he-control-num {
 
+  background: rgba(255, 255, 255, .8);
 
+  backdrop-filter: blur(5px);
 
+  /* box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%); */
 
+  /* border: 1px solid rgba(160, 160, 160, .15); */
 
+}

+ 536 - 0
src/components/tools/hevue-img-preview/hevue-img-preview.vue
查看文件 

@@ -0,0 +1,536 @@
 
+<!--
 
+ * @Author: 贺永胜
 
+ * @Date: 2021-04-19 16:39:30
 
+ * @email: 1378431028@qq.com
 
+ * @LastEditors: 贺永胜
 
+ * @LastEditTime: 2021-10-28 11:15:41
 
+ * @Description: file content
 
+-->
 
+
 
+<!--
 
+ *                                                     __----~~~~~~~~~~~------___
 
+ *                                    .  .   ~~//====......          __--~ ~~
 
+ *                    -.            \_|//     |||\\  ~~~~~~::::... /~
 
+ *                 ___-==_       _-~o~  \/    |||  \\            _/~~-
 
+ *         __---~~~.==~||\=_    -_--~/_-~|-   |\\   \\        _/~
 
+ *     _-~~     .=~    |  \\-_    '-~7  /-   /  ||    \      /
 
+ *   .~       .~       |   \\ -_    /  /-   /   ||      \   /
 
+ *  /  ____  /         |     \\ ~-_/  /|- _/   .||       \ /
 
+ *  |~~    ~~|--~~~~--_ \     ~==-/   | \~--===~~        .\
 
+ *           '         ~-|      /|    |-~\~~       __--~~
 
+ *                       |-~~-_/ |    |   ~\_   _-~            /\
 
+ *                            /  \     \__   \/~                \__
 
+ *                        _--~ _/ | .-~~____--~-/                  ~~==.
 
+ *                       ((->/~   '.|||' -_|    ~~-/ ,              . _||
 
+ *                                  -_     ~\      ~~---l__i__i__i--~~_/
 
+ *                                  _-~-__   ~)  \--______________--~~
 
+ *                                //.-~~~-~_--~- |-------~~~~~~~~
 
+ *                                       //.-~~~--\
 
+ *                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+ * 
+ *                               神兽保佑            永无BUG
 
+ -->
 
+
 
+<template>
 
+  <transition name="fade">
 
+    <div
 
+      class="hevue-imgpreview-wrap"
 
+      id="hevue-imgpreview-wrap"
 
+      v-if="show"
 
+      ref="heImg"
 
+      @mouseup="removeMove('pc')"
 
+      @touchend="removeMove('mobile')"
 
+      @click.stop="clickMask"
 
+    >
 
+      <div class="he-img-wrap">
 
+        <div
 
+          class="heimgfont hevue-img-status-icon rotate-animation"
 
+          v-show="imgState === 1"
 
+        >
 
+          &#xe6b1;
 
+        </div>
 
+        <!-- <div class="heimgfont loading">&#xe6b1;</div> -->
 
+        <img
 
+          :src="imgurl"
 
+          ref="heImView"
 
+          @click.stop=""
 
+          v-show="imgState === 2"
 
+          class="he-img-view"
 
+          :style="
 
+            'transform: scale(' +
 
+              imgScale +
 
+              ') rotate(' +
 
+              imgRotate +
 
+              'deg);margin-top:' +
 
+              imgTop +
 
+              'px;margin-left:' +
 
+              imgLeft +
 
+              'px;' +
 
+              maxWH
 
+          "
 
+          @mousedown="addMove"
 
+          @touchstart="addMoveMobile"
 
+        />
 
+        <!-- 图片加载失败 -->
 
+        <div
 
+          class="heimgfont hevue-img-status-icon"
 
+          v-show="imgState === 3"
 
+        >
 
+          &#xec0d;
 
+        </div>
 
+        <!-- 关闭按钮 -->
 
+        <div
 
+          class="heimgfont he-close-icon"
 
+          @click.stop="close"
 
+          v-if="closeBtn"
 
+        >
 
+          &#xe608;
 
+        </div>
 
+        <!-- 左箭头 -->
 
+        <div
 
+          class="arrow arrow-left heimgfont"
 
+          @click.stop="toogleImg(false)"
 
+          v-if="arrowBtn && multiple"
 
+        >
 
+          &#xe620;
 
+        </div>
 
+        <!-- 右箭头 -->
 
+        <div
 
+          class="arrow arrow-right heimgfont"
 
+          @click.stop="toogleImg(true)"
 
+          v-if="arrowBtn && multiple"
 
+        >
 
+          &#xe60d;
 
+        </div>
 
+        <!-- 控制条 -->
 
+        <div class="he-control-bar-wrap" v-if="controlBar">
 
+          <div
 
+            class="he-control-bar"
 
+            @click.stop
 
+          >
 
+            <!-- 缩小 -->
 
+            <el-tooltip content="缩小" popper-class="showtip" placement="top" effect="dark">
 
+              <div class="he-control-btn heimgfont" @click.stop="scaleFunc(-0.15)">
 
+                &#xe65e;
 
+              </div>
 
+            </el-tooltip>
 
+            <!-- 放大 -->
 
+            <el-tooltip content="放大" popper-class="showtip" placement="top" effect="dark">
 
+              <div class="he-control-btn heimgfont" @click.stop="scaleFunc(0.15)">
 
+                &#xe65d;
 
+              </div>
 
+            </el-tooltip>
 
+            <!-- 复位 -->
 
+            <el-tooltip content="复位" popper-class="showtip" placement="top" effect="dark">
 
+              <div
 
+                class="he-control-btn heimgfont"
 
+                v-show="isFull"
 
+                @click.stop="imgToggle"
 
+              >
 
+                &#xe698;
 
+              </div>
 
+            </el-tooltip>
 
+            <!-- 复位 -->
 
+            <el-tooltip content="复位" popper-class="showtip" placement="top" effect="dark">
 
+              <div
 
+                class="he-control-btn heimgfont"
 
+                v-show="!isFull"
 
+                @click.stop="imgToggle"
 
+              >
 
+                &#xe86b;
 
+              </div>
 
+            </el-tooltip>
 
+            <!-- 左转 -->
 
+            <el-tooltip content="左转90度" popper-class="showtip" placement="top" effect="dark">
 
+              <div class="he-control-btn heimgfont" @click.stop="rotateFunc(-90)">
 
+                &#xe670;
 
+              </div>
 
+            </el-tooltip>
 
+            <!-- 右转 -->
 
+            <el-tooltip content="右转90度" popper-class="showtip" placement="top" effect="dark">
 
+              <div class="he-control-btn heimgfont" @click.stop="rotateFunc(90)">
 
+                &#xe66f;
 
+              </div>
 
+            </el-tooltip>
 
+            <!-- 下载 -->
 
+            <!-- <div class="he-control-btn heimgfont" @click.stop="downloadIamge">
 
+              &#xe694;
 
+            </div> -->
 
+          </div>
 
+        </div>
 
+        <!-- 页码指示器 -->
 
+        <div
 
+          class="he-control-num"
 
+          v-if="controlBar && multiple"
 
+        >
 
+          {{ imgIndex + 1 }} / {{ imgList.length }}
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </transition>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'hevue-img-preview',
 
+  data() {
 
+    return {
 
+      // imgWidth: 0,
 
+      // imgHeight: 0,
 
+      imgScale: 1,
 
+      imgTop: 0,
 
+      imgLeft: 0,
 
+      imgRotate: 0,
 
+      isFull: false,
 
+      maxWH: 'max-width:100%;max-height:100%;',
 
+      clientX: 0,
 
+      clientY: 0,
 
+      imgIndex: 0,
 
+      canRun: true,
 
+      imgurl: '',
 
+      imgState: 1,
 
+      start: [{}, {}],
 
+      mobileScale: 0, // 手指离开时图片的缩放比例
 
+      // 以下内容为用户传入配置
 
+      show: false, // 插件显示，默认为false
 
+      url: '', // 预览图片的地址
 
+      nowImgIndex: 0,
 
+      multiple: false,
 
+      imgList: [],
 
+      // 以下为可全局配置
 
+      controlBar: true,
 
+      closeBtn: true,
 
+      arrowBtn: true,
 
+      keyboard: false,
 
+      clickMaskCLose: false, // 是否点击遮罩关闭，默认false
 
+    }
 
+  },
 
+  mounted() {
 
+    this.initImg()
 
+  },
 
+  watch: {
 
+    url() {
 
+      this.initImg()
 
+    },
 
+    show: {
 
+      handler(newV) {
 
+        if (newV) {
 
+          this.$nextTick(() => {
 
+            let _dom = document.getElementById('hevue-imgpreview-wrap')
 
+            _dom.onmousewheel = this.scrollFunc
 
+            // 火狐浏览器没有onmousewheel事件，用DOMMouseScroll代替(滚轮事件)
 
+            document.body.addEventListener('DOMMouseScroll', this.scrollFunc)
 
+            // 禁止火狐浏览器下拖拽图片的默认事件
 
+            document.ondragstart = function() {
 
+              return false
 
+            }
 
+            // 判断是否多图
 
+            if (this.multiple) {
 
+              if (Array.isArray(this.imgList) && this.imgList.length > 0) {
 
+                this.imgIndex = Number(this.nowImgIndex) || 0
 
+                // this.url = this.imgList[this.imgIndex]
 
+                this.changeUrl(this.imgList[this.imgIndex], this.imgIndex)
 
+              } else {
 
+                // console.error("imgList 为空或格式不正确");
 
+              }
 
+            } else {
 
+              this.changeUrl(this.url)
 
+            }
 
+            // 判断是否开启键盘事件
 
+            if (this.keyboard) {
 
+              document.addEventListener('keydown', this.keyHandleDebounce)
 
+            }
 
+          })
 
+        }
 
+      },
 
+      immediate: true,
 
+    },
 
+  },
 
+  methods: {
 
+    close() {
 
+      // this.initImg();
 
+      // this.maxWH = "max-width:100%;max-height:100%;";
 
+      // this.isFull = false;
 
+      // 移除火狐浏览器下的鼠标滚动事件
 
+      document.body.removeEventListener('DOMMouseScroll', this.scrollFunc)
 
+      //恢复火狐及Safari浏览器下的图片拖拽
 
+      document.ondragstart = null
 
+      // 移除键盘事件
 
+      if (this.keyboard) {
 
+        document.removeEventListener('keydown', this.keyHandleDebounce)
 
+      }
 
+      this.show = false
 
+    },
 
+    initImg() {
 
+      this.mobileScale = 1
 
+      this.imgScale = 1
 
+      this.imgRotate = 0
 
+      this.imgTop = 0
 
+      this.imgLeft = 0
 
+    },
 
+    /**
 
+     * 切换图片
 
+     * true 下一张
 
+     * false 上一张
 
+     */
 
+    toogleImg(bool) {
 
+      if (bool) {
 
+        this.imgIndex++
 
+        if (this.imgIndex > this.imgList.length - 1) {
 
+          this.imgIndex = 0
 
+        }
 
+      } else {
 
+        this.imgIndex--
 
+        if (this.imgIndex < 0) {
 
+          this.imgIndex = this.imgList.length - 1
 
+        }
 
+      }
 
+      // this.url = this.imgList[this.imgIndex]
 
+      this.changeUrl(this.imgList[this.imgIndex], this.imgIndex)
 
+    },
 
+    // 改变图片地址
 
+    /**
 
+     * @description:
 
+     * @param {String} url 要显示的图片的url
 
+     * @param {Number} index 当前显示当图片下标，防止用户点击切换图片过快
 
+     * @return {*}
 
+     */
 
+    changeUrl(url, index) {
 
+      this.imgState = 1
 
+      let img = new Image()
 
+      img.src = url
 
+      img.onload = () => {
 
+        // 如果加载出来图片当下标不是当前显示图片当下标，则不予显示（用户点击过快当时候，会出现用户点到第三张了，此时第一张图片才加载完当情况）
 
+        if (index != undefined && index == this.imgIndex) {
 
+          this.imgState = 2
 
+          this.imgurl = url
 
+        } else if (index == undefined) {
 
+          this.imgState = 2
 
+          this.imgurl = url
 
+        }
 
+      }
 
+      img.onerror = () => {
 
+        if (index != undefined && index == this.imgIndex) {
 
+          this.imgState = 3
 
+        } else if (index == undefined) {
 
+          this.imgState = 3
 
+        }
 
+      }
 
+    },
 
+    // 旋转图片
 
+    rotateFunc(deg) {
 
+      this.imgRotate += deg
 
+    },
 
+    // 图片缩放
 
+    scaleFunc(num, bool) {
 
+      if (this.imgScale <= 0.2 && num < 0) return
 
+      if (bool) {
 
+        this.imgScale = num
 
+      } else {
 
+        this.imgScale += num
 
+      }
 
+    },
 
+    // 图片原尺寸切换
 
+    imgToggle() {
 
+      this.initImg()
 
+      if (this.isFull) {
 
+        this.maxWH = 'max-width:100%;max-height:100%;'
 
+      } else {
 
+        this.maxWH = ''
 
+      }
 
+      this.isFull = !this.isFull
 
+    },
 
+    // 鼠标滚轮缩放
 
+    scrollFunc(e) {
 
+      e = e || window.event
 
+      // e.returnValue = false // ie
 
+      // 火狐下没有wheelDelta，用detail代替，由于detail值的正负和wheelDelta相反，所以取反
 
+      e.delta = e.wheelDelta || -e.detail
 
+
 
+      e.preventDefault()
 
+      if (e.delta > 0) {
 
+        //当滑轮向上滚动时
 
+        this.scaleFunc(0.05)
 
+      }
 
+      if (e.delta < 0) {
 
+        //当滑轮向下滚动时
 
+        this.scaleFunc(-0.05)
 
+      }
 
+    },
 
+    // 鼠标按下
 
+    addMove(e) {
 
+      e = e || window.event
 
+      this.clientX = e.clientX
 
+      this.clientY = e.clientY
 
+      this.$refs.heImg.onmousemove = this.moveFunc
 
+    },
 
+    // 手指按下事件
 
+    addMoveMobile(e) {
 
+      e.preventDefault()
 
+      e = e || window.event
 
+      if (e.touches.length > 1) {
 
+        this.start = e.touches
 
+      } else {
 
+        this.clientX = e.touches[0].pageX
 
+        this.clientY = e.touches[0].pageY
 
+      }
 
+      // 添加手指拖动事件
 
+      this.$refs.heImg.ontouchmove = this.moveFuncMobile
 
+    },
 
+    // 鼠标拖动
 
+    moveFunc(e) {
 
+      e = e || window.event
 
+      e.preventDefault()
 
+      let movementX = e.clientX - this.clientX
 
+      let movementY = e.clientY - this.clientY
 
+      // event.clientY;
 
+      this.imgLeft += movementX * 2
 
+      this.imgTop += movementY * 2
 
+      this.clientX = e.clientX
 
+      this.clientY = e.clientY
 
+    },
 
+    // 手指拖动
 
+    moveFuncMobile(e) {
 
+      e = e || window.event
 
+      // console.log(e);
 
+      if (e.touches.length > 1) {
 
+        var now = e.touches
 
+        var scale =
 
+          this.getDistance(now[0], now[1]) /
 
+          this.getDistance(this.start[0], this.start[1])
 
+        // 判断是否手指缩放过，如果缩放过，要在上次缩放的比例基础上进行缩放
 
+        if (this.mobileScale) {
 
+          if (scale > 1) {
 
+            // 放大
 
+            this.scaleFunc(scale + this.mobileScale - 1, true)
 
+          } else {
 
+            // 缩小
 
+            this.scaleFunc(scale * this.mobileScale, true)
 
+          }
 
+        } else {
 
+          this.scaleFunc(scale, true)
 
+        }
 
+      } else {
 
+        let touch = e.touches[0]
 
+        e.preventDefault()
 
+        let movementX = touch.pageX - this.clientX
 
+        let movementY = touch.pageY - this.clientY
 
+        // event.clientY;
 
+        this.imgLeft += movementX * 2
 
+        this.imgTop += movementY * 2
 
+        this.clientX = touch.pageX
 
+        this.clientY = touch.pageY
 
+      }
 
+    },
 
+    // 移除拖动事件
 
+    removeMove(type) {
 
+      if (type === 'pc') {
 
+        this.$refs.heImg.onmousemove = null
 
+      } else {
 
+        this.mobileScale = this.imgScale
 
+        this.$refs.heImg.ontouchmove = null
 
+      }
 
+    },
 
+    keyHandleDebounce(e) {
 
+      if (this.canRun) {
 
+        // 如果this.canRun为true证明当前可以执行函数
 
+        this.keyHandle(e)
 
+        this.canRun = false // 执行函数后一段时间内不可再次执行
 
+        setTimeout(() => {
 
+          this.canRun = true // 等到了我们设定的时间之后，把this.canRun改为true，可以再次执行函数
 
+        }, 300)
 
+      }
 
+    },
 
+    // 键盘事件
 
+    keyHandle(e) {
 
+      e = window.event || e
 
+      var key = e.keyCode || e.which || e.charCode
 
+      switch (key) {
 
+        case 27: // esc
 
+          this.close()
 
+          break
 
+        case 65: // a键-上一张
 
+          if (this.multiple) {
 
+            this.toogleImg(false)
 
+          }
 
+          break
 
+        case 68: // d键-下一张
 
+          if (this.multiple) {
 
+            this.toogleImg(true)
 
+          }
 
+          break
 
+        case 87: // w键-放大
 
+          this.scaleFunc(0.15)
 
+          break
 
+        case 83: // s键-缩小
 
+          this.scaleFunc(-0.15)
 
+          break
 
+        case 81: // q键-逆时针旋转
 
+          this.rotateFunc(-90)
 
+          break
 
+        case 69: // e键-顺时针旋转
 
+          this.rotateFunc(90)
 
+          break
 
+        case 82: // r键-复位键
 
+          this.initImg()
 
+          break
 
+
 
+        default:
 
+          break
 
+      }
 
+    },
 
+    // 点击遮罩层
 
+    clickMask() {
 
+      // console.log("hello");
 
+      if (this.clickMaskCLose) {
 
+        this.close()
 
+      }
 
+    },
 
+    //缩放 勾股定理方法-求两点之间的距离
 
+    getDistance(p1, p2) {
 
+      var x = p2.pageX - p1.pageX,
 
+        y = p2.pageY - p1.pageY
 
+      return Math.sqrt(x * x + y * y)
 
+    },
 
+    /**
 
+     * @description:
 
+     * @param {String} imgsrc
 
+     * @param {*} name
 
+     * @return {*}
 
+     */
 
+    downloadIamge() {
 
+      //下载图片地址和图片名
 
+      let image = new Image()
 
+      // 解决跨域 Canvas 污染问题
 
+      image.setAttribute('crossOrigin', 'anonymous')
 
+      image.onload = function() {
 
+        let canvas = document.createElement('canvas')
 
+        canvas.width = image.width
 
+        canvas.height = image.height
 
+        let context = canvas.getContext('2d')
 
+        context.drawImage(image, 0, 0, image.width, image.height)
 
+        let url = canvas.toDataURL('image/png') //得到图片的base64编码数据
 
+        let a = document.createElement('a') // 生成一个a元素
 
+        let event = new MouseEvent('click') // 创建一个单击事件
 
+        a.download = 'photo' + +new Date() // 设置图片名称
 
+        a.href = url // 将生成的URL设置为a.href属性
 
+        a.dispatchEvent(event) // 触发a的单击事件
 
+      }
 
+      image.onerror = function(err) {
 
+        console.log('图片信息不正确或图片服务器禁止访问')
 
+        console.log(err)
 
+      }
 
+      if (this.multiple) {
 
+        image.src = this.imgList[this.imgIndex]
 
+      } else {
 
+        image.src = this.url
 
+      }
 
+    },
 
+  },
 
+}
 
+</script>
 
+
 
+<style scoped>
 
+@import './iconfont/iconfont.css';
 
+@import './css/default.css';
 
+</style>

+ 71 - 0
src/components/tools/hevue-img-preview/iconfont/iconfont.css
查看文件 

@@ -0,0 +1,71 @@
 
+@font-face {
 
+  font-family: "heimgfont"; /* Project id 1776686 */
 
+  src: url('iconfont.woff2?t=1635390861127') format('woff2'),
 
+       url('iconfont.woff?t=1635390861127') format('woff'),
 
+       url('iconfont.ttf?t=1635390861127') format('truetype');
 
+}
 
+
 
+.heimgfont {
 
+  font-family: "heimgfont" !important;
 
+  font-size: 16px;
 
+  font-style: normal;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+.heimg-iconguanbi1:before {
 
+  content: "\e608";
 
+}
 
+
 
+.heimg-iconiconfontzhizuobiaozhun023146:before {
 
+  content: "\e694";
 
+}
 
+
 
+.heimg-iconhelp:before {
 
+  content: "\e626";
 
+}
 
+
 
+.heimg-iconjiazaizhong:before {
 
+  content: "\e6b1";
 
+}
 
+
 
+.heimg-icontupianjiazaishibai:before {
 
+  content: "\ec0d";
 
+}
 
+
 
+.heimg-iconicon_arrow_right:before {
 
+  content: "\e60d";
 
+}
 
+
 
+.heimg-iconjiantouzuo:before {
 
+  content: "\e620";
 
+}
 
+
 
+.heimg-iconxuanzhuan:before {
 
+  content: "\e66f";
 
+}
 
+
 
+.heimg-iconxuanzhuan1:before {
 
+  content: "\e670";
 
+}
 
+
 
+.heimg-iconyuanshibili:before {
 
+  content: "\e86b";
 
+}
 
+
 
+.heimg-iconfangda:before {
 
+  content: "\e65d";
 
+}
 
+
 
+.heimg-iconsuoxiao:before {
 
+  content: "\e65e";
 
+}
 
+
 
+.heimg-iconquanping:before {
 
+  content: "\e698";
 
+}
 
+
 
+.heimg-iconguanbi:before {
 
+  content: "\e764";
 
+}
 
+

二進制
src/components/tools/hevue-img-preview/iconfont/iconfont.ttf
查看文件


二進制
src/components/tools/hevue-img-preview/iconfont/iconfont.woff
查看文件


二進制
src/components/tools/hevue-img-preview/iconfont/iconfont.woff2
查看文件


+ 48 - 0
src/components/tools/hevue-img-preview/index.js
查看文件 

@@ -0,0 +1,48 @@
 
+/*
 
+ * @Author: heyongsheng
 
+ * @Date: 2020-04-22 15:40:42
 
+ * @Last Modified by: heyongsheng
 
+ * @Last Modified time: 2020-07-08 22:49:13
 
+ */
 
+import Vue from "vue";
 
+import VueToast from "./hevue-img-preview.vue";
 
+
 
+const ToastConstructor = Vue.extend(VueToast);
 
+
 
+let instance
 
+let hevueImgPreviewConfig
 
+
 
+const ImgPreview = (options = {}) => {
 
+  if (typeof options === 'string') {
 
+    options = {
 
+      url: options
 
+    };
 
+  }
 
+  options.show = true
 
+  // 优先采取局部配置，其次采取全局配置
 
+  Object.keys(hevueImgPreviewConfig).map(name => {
 
+    if ( options[name] == undefined) {
 
+      options[name] = hevueImgPreviewConfig[name]
 
+    }
 
+  })
 
+
 
+  instance = new ToastConstructor({
 
+    data: options
 
+  })
 
+  instance.$mount()
 
+  let dom = instance.$el
 
+  document.body.appendChild(dom)
 
+  return instance
 
+};
 
+
 
+const install = (Vue, opts = {}) => {
 
+  hevueImgPreviewConfig = opts
 
+  Vue.prototype.$hevueImgPreview = ImgPreview;
 
+};
 
+
 
+if (typeof window !== "undefined" && window.Vue) {
 
+  // window.Vue.use(install);
 
+  install(window.Vue)
 
+}
 
+
 
+export default install;

+ 62 - 0
src/components/tools/hevue-img-preview/package.json
查看文件 

@@ -0,0 +1,62 @@
 
+{
 
+  "_args": [
 
+    [
 
+      "hevue-img-preview@5.0.3",
 
+      "G:\\pbl-teacher-table"
 
+    ]
 
+  ],
 
+  "_from": "hevue-img-preview@5.0.3",
 
+  "_id": "hevue-img-preview@5.0.3",
 
+  "_inBundle": false,
 
+  "_integrity": "sha512-JzTudYDM/ECxRd0we+DxZ6/7VoM9GKBCSp2CCMFzI+ha1MuKIq35P96b4V/Funvr5cTzsdiwHf8n35GSwwnJUA==",
 
+  "_location": "/hevue-img-preview",
 
+  "_phantomChildren": {},
 
+  "_requested": {
 
+    "type": "version",
 
+    "registry": true,
 
+    "raw": "hevue-img-preview@5.0.3",
 
+    "name": "hevue-img-preview",
 
+    "escapedName": "hevue-img-preview",
 
+    "rawSpec": "5.0.3",
 
+    "saveSpec": null,
 
+    "fetchSpec": "5.0.3"
 
+  },
 
+  "_requiredBy": [
 
+    "/"
 
+  ],
 
+  "_resolved": "https://registry.npmmirror.com/hevue-img-preview/-/hevue-img-preview-5.0.3.tgz",
 
+  "_spec": "5.0.3",
 
+  "_where": "G:\\pbl-teacher-table",
 
+  "author": {
 
+    "name": "贺永胜",
 
+    "email": "1378431028@qq.com"
 
+  },
 
+  "browserslist": [
 
+    "> 1%",
 
+    "last 2 versions",
 
+    "not ie <= 10"
 
+  ],
 
+  "bugs": {
 
+    "url": "https://github.com/heyongsheng/hevue-img-preview/issues"
 
+  },
 
+  "description": "> 本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色均可可自定义，实现个性化设计，如果能帮上你，希望可以移步 [GitHub](https://github.com/heyongsheng/hevue-img-preview) ，或者[码云](https://gitee.com/ihope_top/hevue-img-preview) 给个小星星，如果有任何使用意见或建议，也欢迎回复或者提交 issue",
 
+  "homepage": "https://github.com/heyongsheng/hevue-img-preview#readme",
 
+  "keywords": [
 
+    "hevue-img-preview",
 
+    "vue-img-preview",
 
+    "vue-img",
 
+    "vue-img-view",
 
+    "img-view",
 
+    "view-preview",
 
+    "hevue"
 
+  ],
 
+  "license": "MIT",
 
+  "main": "./index.js",
 
+  "name": "hevue-img-preview",
 
+  "private": false,
 
+  "repository": {
 
+    "type": "git",
 
+    "url": "git+https://github.com/heyongsheng/hevue-img-preview.git"
 
+  },
 
+  "version": "5.0.3"
 
+}

+ 1 - 1
src/main.js
查看文件 

@@ -15,7 +15,7 @@ const echarts = require('echarts');
 
 import 'video.js/dist/video-js.css' //videoJs的样式
 
 import 'video.js/dist/video-js.css' //videoJs的样式
 
 import 'vue-video-player/src/custom-theme.css' //vue-video-player的样式
 
 import 'vue-video-player/src/custom-theme.css' //vue-video-player的样式
 
 import VueCookies from 'vue-cookies'
 
 import VueCookies from 'vue-cookies'
 
-import hevueImgPreview from 'hevue-img-preview'
 
+import hevueImgPreview from './components/tools/hevue-img-preview'
 
 
 
 Vue.use(VideoPlayer).use(VueCookies).use(hevueImgPreview, {
 
 Vue.use(VideoPlayer).use(VueCookies).use(hevueImgPreview, {
 
     clickMaskCLose: true
 
     clickMaskCLose: true

部分文件因文件數量過多而無法顯示