首页 发现 帮助
登录
CocoRoboLabs
/
pbl-teacher-table
3
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

update

lsc 2 年之前
父节点
87078591ca
当前提交
0471f16029
共有 34 个文件被更改，包括 1455 次插入 和 79 次删除
分列视图 显示文件统计
  1. 1 1
      dist/index.html
  2. 0 0
      dist/static/css/app.4ab38bbdfd51bd56201ee052253a163f.css
  3. 0 0
      dist/static/css/app.4ab38bbdfd51bd56201ee052253a163f.css.map
  4. 0 0
      dist/static/css/app.71cf1222be971262e41081176d692d62.css
  5. 0 0
      dist/static/css/app.71cf1222be971262e41081176d692d62.css.map
  6. 0 0
      dist/static/js/app.61187fe81d2c0bb3f127.js
  7. 0 0
      dist/static/js/app.a386a145922469100613.js
  8. 0 0
      dist/static/js/app.a386a145922469100613.js.map
  9. 0 0
      dist/static/js/manifest.3512a67a6213c2df4180.js.map
  10. 0 0
      dist/static/js/vendor.1b8e037bd3fbbd358d74.js
  11. 0 0
      dist/static/js/vendor.1b8e037bd3fbbd358d74.js.map
  12. 4 0
      src/App.vue
  13. 21 0
      src/assets/css/button.css
  14. 172 26
      src/components/pages/addCourse.vue
  15. 26 3
      src/components/pages/course.vue
  16. 84 20
      src/components/pages/easy/addCourse.vue
  17. 1 1
      src/components/pages/scourse.vue
  18. 1 1
      src/components/pages/student/checkCourse.vue
  19. 1 1
      src/components/pages/student/course.vue
  20. 1 1
      src/components/pages/studio/course.vue
  21. 86 24
      src/components/pages/task/addCourse.vue
  22. 0 0
      src/components/tools/hevue-img-preview/LICENSE
  23. 133 0
      src/components/tools/hevue-img-preview/README.md
  24. 131 0
      src/components/tools/hevue-img-preview/css/default.css
  25. 34 0
      src/components/tools/hevue-img-preview/css/theme-dark.css
  26. 41 0
      src/components/tools/hevue-img-preview/css/theme-light.css
  27. 536 0
      src/components/tools/hevue-img-preview/hevue-img-preview.vue
  28. 71 0
      src/components/tools/hevue-img-preview/iconfont/iconfont.css
  29. 二进制
      src/components/tools/hevue-img-preview/iconfont/iconfont.ttf
  30. 二进制
      src/components/tools/hevue-img-preview/iconfont/iconfont.woff
  31. 二进制
      src/components/tools/hevue-img-preview/iconfont/iconfont.woff2
  32. 48 0
      src/components/tools/hevue-img-preview/index.js
  33. 62 0
      src/components/tools/hevue-img-preview/package.json
  34. 1 1
      src/main.js

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

@@ -25,7 +25,7 @@
 
       height: 100%;
 
       width: 100%;
 
       background: #e6eaf0;
 
-    }</style><link href=./static/css/app.71cf1222be971262e41081176d692d62.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3512a67a6213c2df4180.js></script><script type=text/javascript src=./static/js/vendor.f1661c5ebfd33221b88f.js></script><script type=text/javascript src=./static/js/app.61187fe81d2c0bb3f127.js></script></body></html><script>function stopSafari() {
 
+    }</style><link href=./static/css/app.4ab38bbdfd51bd56201ee052253a163f.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3512a67a6213c2df4180.js></script><script type=text/javascript src=./static/js/vendor.1b8e037bd3fbbd358d74.js></script><script type=text/javascript src=./static/js/app.a386a145922469100613.js></script></body></html><script>function stopSafari() {
 
     //阻止safari浏览器双击放大功能
 
     let lastTouchEnd = 0  //更新手指弹起的时间
 
     document.documentElement.addEventListener("touchstart", function (event) {

文件差异内容过多而无法显示
+ 0 - 0
dist/static/css/app.4ab38bbdfd51bd56201ee052253a163f.css


文件差异内容过多而无法显示
+ 0 - 0
dist/static/css/app.4ab38bbdfd51bd56201ee052253a163f.css.map


文件差异内容过多而无法显示
+ 0 - 0
dist/static/css/app.71cf1222be971262e41081176d692d62.css


文件差异内容过多而无法显示
+ 0 - 0
dist/static/css/app.71cf1222be971262e41081176d692d62.css.map


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/app.61187fe81d2c0bb3f127.js


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/app.a386a145922469100613.js


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/app.a386a145922469100613.js.map


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/manifest.3512a67a6213c2df4180.js.map


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/vendor.1b8e037bd3fbbd358d74.js


文件差异内容过多而无法显示
+ 0 - 0
dist/static/js/vendor.1b8e037bd3fbbd358d74.js.map


+ 4 - 0
src/App.vue
查看文件 

@@ -410,4 +410,8 @@ html::-webkit-scrollbar-thumb {
 
 .getOverView{
 
   overflow-x: auto;
 
 }
 
+
 
+.showtip{
 
+  z-index: 999999999 !important;
 
+}
 
 </style>

+ 21 - 0
src/assets/css/button.css
查看文件 

@@ -164,3 +164,24 @@
 
 .pub_btn_delete_img::before {
 
   background-image: url(../icon/new/delete_u.png);
 
 }
 
+
 
+.r_pub_button_retrun {
 
+  color: #3681fc;
 
+  font-size: 14px;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+
 
+.r_pub_button_retrun::before {
 
+  content: "";
 
+  width: 14px;
 
+  height: 14px;
 
+  min-width: 14px;
 
+  min-height: 14px;
 
+  background-size: 100% 100%;
 
+  display: block;
 
+  margin-right: 7px;
 
+  background-image: url(../icon/new/icon_return.png);
 
+}

+ 172 - 26
src/components/pages/addCourse.vue
查看文件 

@@ -21,6 +21,7 @@
 
               </el-breadcrumb-item>
 
             </el-breadcrumb>
 
           </div>
 
+          <div class="r_pub_button_retrun" @click="retrunCourse">返回</div>
 
         </div>
 
         <!-- <div style="display: flex; margin-top: 20px; position: relative"> -->
 
         <div ref="stepBox" class="stepBox">
 
@@ -574,17 +575,17 @@
 
                                     itemTaskIndex
 
                                   ].task
 
                                     " />
 
+                              </div>
 
+                              <div class="remove" v-if="item.taskJson.length > 1 &&
 
+                                (!unitJson[unitIndex].easy ||
 
+                                  unitJson[unitIndex].easy == 6)
 
+                                " @click="deleteTask(itemTaskIndex)"></div>
 
                                 <div v-if="easyArray.indexOf(unitJson[unitIndex].easy) == -1 && itemTask.isFold2"
 
                                   class="show_taskD show" @click="fold2(itemTaskIndex)"><img
 
                                     src="../../assets/icon/new/icon-slide.png" />收起任务描述</div>
 
                                 <div v-else-if="easyArray.indexOf(unitJson[unitIndex].easy) == -1" class="show_taskD"
 
                                   @click="fold2(itemTaskIndex)"><img src="../../assets/icon/new/icon-slide.png" />展开任务描述
 
                                 </div>
 
-                              </div>
 
-                              <div class="remove" v-if="item.taskJson.length > 1 &&
 
-                                (!unitJson[unitIndex].easy ||
 
-                                  unitJson[unitIndex].easy == 6)
 
-                                " @click="deleteTask(itemTaskIndex)" style="margin-right: 10px;"></div>
 
                             </div>
 
                             <div v-if="easyArray.indexOf(unitJson[unitIndex].easy) == -1 && itemTask.isFold2" style="
 
                           display: flex;
 
@@ -626,8 +627,8 @@
 
                         align-items: center;
 
                       " :style="{margin:!itemTask.isFoldchapter ? '20px 0':'20px 0 10px'}">
 
                             <div class="lineTitle">学习内容</div>
 
-                            <div v-if="!itemTask.isFoldchapter" class="show_taskD show" @click="foldC(itemTaskIndex)" style="margin: 0px 15px 0 0;"><img src="../../assets/icon/new/icon-slide.png" />收起学习内容</div>
 
-                            <div v-else class="show_taskD" @click="foldC(itemTaskIndex)" style="margin: 0px 15px 0 0;"><img src="../../assets/icon/new/icon-slide.png" />展开学习内容</div>
 
+                            <div v-if="!itemTask.isFoldchapter" class="show_taskD show" @click="foldC(itemTaskIndex)"><img src="../../assets/icon/new/icon-slide.png" />收起学习内容</div>
 
+                            <div v-else class="show_taskD" @click="foldC(itemTaskIndex)"><img src="../../assets/icon/new/icon-slide.png" />展开学习内容</div>
 
                             <!-- <div class="line"></div> -->
 
                           </div>
 
                           <div v-if="!itemTask.isFoldchapter">
 
@@ -2499,11 +2500,11 @@
 
             align-items: center;
 
             justify-content: center;
 
           ">
 
-          <div style="margin-right: 20px; font-size: 20px">标题:</div>
 
+          <!-- <div style="margin-right: 20px; font-size: 20px">标题:</div> -->
 
           <el-input v-model="askJson.askTitle" placeholder="请输入标题" style="width: 400px"></el-input>
 
         </div>
 
         <div class="a_addBox">
 
-          <div style="font-size: 16px; color: #c7c7c7">请输入题目内容</div>
 
+          <!-- <div style="font-size: 16px; color: #c7c7c7">请输入题目内容</div> -->
 
           <div class="a_add_box" v-for="(item1, index1) in askJson.askCount" :key="index1">
 
             <div class="a_add_checkType">
 
               <span :class="{
 
@@ -2521,9 +2522,9 @@
 
                   " placeholder="请输入题目"></textarea>
 
               </div>
 
               <div class="a_add_head_div">
 
-                <el-button type="primary" size="small" @click="addAskList()">添加</el-button>
 
                 <el-button type="primary" size="small" @click="deleteAskList(index1)" v-if="askJson.askCount != 1">删除
 
                 </el-button>
 
+                <el-button type="primary" size="small" @click="addAskList()">添加</el-button>
 
               </div>
 
             </div>
 
             <div class="a_add_body">
 
@@ -2567,7 +2568,7 @@
 
         </div> -->
 
         <div class="a_addBox">
 
           <div style="font-size: 16px; color: #c7c7c7;display: flex;align-items: center;">
 
-            请输入题目内容
 
+            <!-- 请输入题目内容 -->
 
             <button class="c_pub_button_add pub_btn_paste_img" @click="pasteOption" style="margin-left: 10px"
 
               v-if="isPasteChoice">智能粘贴</button>
 
           </div>
 
@@ -2588,15 +2589,15 @@
 
                   <textarea class="a_add_head_input textarea_css" v-autoHeight="40"
 
                     v-model="testJson.testJson[index1].teststitle" placeholder="请输入题目"></textarea>
 
                 </div>
 
-                <div class="xzUpImg" @click.stop="addImg($event)">
 
+                <div class="xzUpImg" @click.stop="addImg($event)" style="margin-right: 10px;">
 
                   <img src="../../assets/icon/xzUpImg.png" alt="" />
 
                   <input type="file" accept="image/*" style="display: none" @change="beforeUploadTiMu($event, index1)" />
 
                 </div>
 
               </div>
 
               <div class="a_add_head_div">
 
-                <el-button type="primary" size="small" @click="addTestList()">添加</el-button>
 
                 <el-button type="primary" size="small" @click="deleteTestList(index1)" v-if="testJson.testCount != 1">删除
 
                 </el-button>
 
+                <el-button type="primary" size="small" @click="addTestList()">添加</el-button>
 
               </div>
 
             </div>
 
             <div class="timuImgBox" v-if="testJson.testJson[index1].timuList &&
 
@@ -2692,7 +2693,7 @@
 
                   </div>
 
                 </el-checkbox-group>
 
               </div>
 
-              <div class="a_add_body_div" style="margin-bottom: 3px">
 
+              <div class="a_add_body_div">
 
                 <el-button type="primary" size="small" @click="addTcheckList(testJson.testJson[index1])">添加</el-button>
 
                 <el-button type="primary" size="small" @click="deleteTcheckList(testJson.testJson[index1])"
 
                   v-if="testJson.testJson[index1].testItem != 1">删除
 
@@ -3749,8 +3750,49 @@ export default {
 
           });
 
       }
 
     },
 
-    steps(newValue) {
 
+    steps(newValue,old) {
 
       if (newValue == 4) {
 
+        let cPan = 1;
 
+        for (var i = 0; i < this.unitJson.length; i++) {
 
+          for (
 
+            var j = 0;
 
+            j < this.unitJson[i].chapterInfo[0].taskJson.length;
 
+            j++
 
+          ) {
 
+            this.unitJson[i].chapterInfo[0].taskJson[j].proVisible = false;
 
+            this.unitJson[i].chapterInfo[0].taskJson[j].proVisible2 = false;
 
+            if (
 
+              this.unitJson[i].chapterInfo[0].taskJson[j].toolChoose.length > 1
 
+            ) {
 
+              for (
 
+                var z = 0;
 
+                z < this.unitJson[i].chapterInfo[0].taskJson[j].toolChoose.length;
 
+                z++
 
+              ) {
 
+                if (
 
+                  !this.unitJson[i].chapterInfo[0].taskJson[j].toolChoose[z].tool
 
+                    .length
 
+                ) {
 
+                  this.$message.error("请把工具添加完整");
 
+                  cPan = 2;
 
+                  break;
 
+                }
 
+              }
 
+            }
 
+            if (this.unitJson[i].chapterInfo[0].taskJson[j].eList) {
 
+              this.unitJson[i].chapterInfo[0].taskJson[j].eList = this.unitJson[
 
+                i
 
+              ].chapterInfo[0].taskJson[j].eList.filter((ele) => {
 
+                return ele.value != "";
 
+              });
 
+            }
 
+          }
 
+        }
 
+        this.inputShow = true;
 
+        if (cPan == 2) {
 
+          this.steps = old;
 
+          return;
 
+        }
 
         this.goTo(
 
           "/course?userid=" +
 
           this.userid +
 
@@ -3871,6 +3913,49 @@ export default {
 
       }
 
       return _guid;
 
     },
 
+    retrunCourse(){
 
+      this
 
+        .$confirm("是否保存?", "提示", {
 
+          confirmButtonText: "保存",
 
+          cancelButtonText: "不保存",
 
+          type: "warning",
 
+        })
 
+        .then(() => {
 
+          if (this.cid == "" || this.cid == undefined) {
 
+            if (this.courseName == "") {
 
+              this.$message.error("请补充填写课程名称");
 
+              return;
 
+            } else {
 
+              this.addWork();
 
+            }
 
+            this.steps = 4
 
+          } else {
 
+            if (this.courseName == "") {
 
+              this.$message.error("请补充填写课程名称");
 
+              return;
 
+            } else {
 
+              if (this.userid != this.courseUserid && this.role != "1") {
 
+                this.updateWork2();
 
+              } else {
 
+                this.updateWork();
 
+              }
 
+              this.steps = 4
 
+            }
 
+          }
 
+        })
 
+        .catch(() => {
 
+          this.goTo(
 
+            "/course?userid=" +
 
+            this.userid +
 
+            "&oid=" +
 
+            this.oid +
 
+            "&org=" +
 
+            this.org +
 
+            "&role=" +
 
+            this.role
 
+          );
 
+        });
 
+    },
 
     lastSteps() {
 
       if (this.steps == 4) {
 
         this.goTo(
 
@@ -6525,12 +6610,47 @@ export default {
 
       this.testJson.testCount++;
 
     },
 
     deleteAskList(index) {
 
-      this.askJson.askJson.splice(index, 1);
 
-      this.askJson.askCount--;
 
+      if(!this.askJson.askJson[index].askstitle && this.askJson.askJson[index].askItem == 1 && !this.askJson.askJson[index].checkList[0]){
 
+        this.askJson.askJson.splice(index, 1);
 
+        this.askJson.askCount--;
 
+      }else{
 
+        let _this = this;
 
+        _this
 
+          .$confirm("此操作不可撤销，是否继续？", "提示", {
 
+            confirmButtonText: "确定",
 
+            cancelButtonText: "取消",
 
+            type: "warning",
 
+          })
 
+          .then(() => {
 
+            _this.askJson.askJson.splice(index, 1);
 
+            _this.askJson.askCount--;
 
+          })
 
+          .catch(() => {
 
+            return;
 
+          });
 
+      }
 
     },
 
     deleteTestList(index) {
 
-      this.testJson.testJson.splice(index, 1);
 
-      this.testJson.testCount--;
 
+      if(!this.testJson.testJson[index].teststitle && this.testJson.testJson[index].testItem == 1 && !this.testJson.testJson[index].checkList[0]){
 
+        this.testJson.testJson.splice(index, 1);
 
+        this.testJson.testCount--;
 
+      }else{
 
+        let _this = this;
 
+        _this
 
+          .$confirm("此操作不可撤销，是否继续？", "提示", {
 
+            confirmButtonText: "确定",
 
+            cancelButtonText: "取消",
 
+            type: "warning",
 
+          })
 
+          .then(() => {
 
+            _this.testJson.testJson.splice(index, 1);
 
+            _this.testJson.testCount--;
 
+          })
 
+          .catch(() => {
 
+            return;
 
+          });
 
+      }
 
+
 
     },
 
     addcheckList(json) {
 
       json.checkList.length++;
 
@@ -6556,7 +6676,8 @@ export default {
 
     },
 
     checkAskType(type, json) {
 
       json.type = type;
 
-      json.checkList = [];
 
+      // json.checkList = [];
 
+      this.$forceUpdate();
 
     },
 
     addSelectList(json) {
 
       json.select.push("");
 
@@ -6608,10 +6729,17 @@ export default {
 
                 this.$message.error("选项不能为空！");
 
                 return;
 
               }
 
+              for (var z2 = z+1; z2 < aj[i].checkList.length; z2++) {  
+                let checkC2 = aj[i].checkList[z2] ? aj[i].checkList[z2] : "";
 
+                if (checkC == checkC2) {  
+                  this.$message.error(`第${i+1}题的选项${z+1}和选项${z2+1}重复了，请修改！`);
 
+                  return;
 
+                }  
+              } 
             }
 
             b++;
 
             if (index < 2) {
 
-              this.$message.error("填写了的题目，选项至少要有两项！");
 
+              this.$message.error("每道题目至少需要设置2个选项。");
 
               return;
 
             }
 
           }
 
@@ -6676,10 +6804,17 @@ export default {
 
                 this.$message.error("选项不能为空！");
 
                 return;
 
               }
 
+              for (var z2 = z+1; z2 < aj[i].checkList.length; z2++) {  
+                let checkC2 = aj[i].checkList[z2] ? aj[i].checkList[z2] : "";
 
+                if (checkC == checkC2) {  
+                  this.$message.error(`第${i+1}题的选项${z+1}和选项${z2+1}重复了，请修改！`);
 
+                  return;
 
+                }  
+              } 
             }
 
             b++;
 
             if (index < 2) {
 
-              this.$message.error("填写了的题目，选项至少要有两项！");
 
+              this.$message.error("每道题目至少需要设置2个选项。");
 
               return;
 
             }
 
             if (
 
@@ -9892,7 +10027,7 @@ ol {
 
 .a_add_checkType {
 
   margin-top: 10px;
 
   display: flex;
 
-  font-size: 16px;
 
+  font-size: 14px;
 
   align-items: center;
 
 }
 
 
@@ -9912,7 +10047,7 @@ ol {
 
 }
 
 
 .a_add_head .a_add_head_input {
 
-  width: 550px;
 
+  width: 540px;
 
 }
 
 
 .a_add_head .a_add_head_div {
 
@@ -9987,6 +10122,12 @@ ol {
 
   align-items: center;
 
   justify-content: center;
 
   /* flex-direction: column; */
 
+  margin-bottom: 8px;
 
+}
 
+
 
+.a_add_body_div >>> .el-button--primary{
 
+  background: #466b99;
 
+    border: none;
 
 }
 
 
 .all_choose {
 
@@ -10441,7 +10582,7 @@ ol {
 
 .courseTop {
 
   display: flex;
 
   flex-direction: row;
 
-  justify-content: flex-start;
 
+  justify-content: space-between;
 
   align-items: center;
 
   width: calc(100% - 40px);
 
   margin: 0 auto;
 
@@ -11548,7 +11689,12 @@ ol {
 
   transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
 
   outline: none;
 
   overflow: hidden;
 
-  height: 40px;
 
+  height: 46px;
 
+  font-family: 'Microsoft YaHei';
 
+}
 
+
 
+.textarea_css::-webkit-input-placeholder {
 
+    color: #C0C4CC
 
 }
 
 
 .textarea_css:focus {

+ 26 - 3
src/components/pages/course.vue
查看文件 

@@ -154,8 +154,14 @@
 
               <div class="kc_time">{{ item.time }}</div>
 
             </div> -->
 
             <div class="bottom_box">
 
-              <div>{{ item.title }}</div>
 
-              <div class="kc_t" v-if="item.isCourseType == 2 || groupA == 1">
 
+              <div>
 
+                <el-tooltip :content="item.title" popper-class="text_tooltip" placement="top" effect="dark">
 
+                  <span>{{ item.title }}</span>
 
+                </el-tooltip>
 
+                <span>{{ item.state == 1 ? '阶段模式' : item.state == 2 ? '任务模式' : '极简模式' }}</span>
 
+              </div>
 
+              <!-- v-if="item.isCourseType == 2 || groupA == 1" -->
 
+              <div class="kc_t">
 
                 负责老师：{{ item.uname }}
 
               </div>
 
               <div class="kc_time">
 
@@ -1390,12 +1396,29 @@ export default {
 
 
 .bottom_box>div:nth-child(1) {
 
   width: 100%;
 
+  /* overflow: hidden;
 
+  text-overflow: ellipsis;
 
+  white-space: nowrap;
 
+  font-weight: bold; */
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+}
 
+
 
+.bottom_box>div:nth-child(1) >span:nth-child(1){
 
+  max-width: 100%;
 
   overflow: hidden;
 
   text-overflow: ellipsis;
 
   white-space: nowrap;
 
   font-weight: bold;
 
 }
 
 
+.bottom_box>div:nth-child(1) >span:nth-child(2){
 
+  min-width:fit-content;
 
+  font-size:14px;
 
+  color:#8c8c8c;
 
+}
 
+
 
 .tup {
 
   width: 100%;
 
   height: 180px;
 
@@ -1573,7 +1596,7 @@ export default {
 
 
 .xtCourse {
 
   position: absolute;
 
-  background: #41a5f0;
 
+  background: #466b99;
 
   width: 70px;
 
   height: 30px;
 
   border-radius: 5px;

+ 84 - 20
src/components/pages/easy/addCourse.vue
查看文件 

@@ -23,6 +23,7 @@
 
                 </el-breadcrumb-item>
 
               </el-breadcrumb>
 
             </div>
 
+            <div class="r_pub_button_retrun" @click="lastSteps()">返回</div>
 
           </div>
 
           <div class="rightBox" style="padding: 30px 10px 0;" :style="{height:(!isBtnDisplay) ? 'calc(100% - 50px)' : 'calc(100% - 120px)'}" v-if="this.steps == 1" @mousewheel="scrollChange">
 
             <div class="updateMask" :style="{
 
@@ -3439,11 +3440,11 @@
 
             align-items: center;
 
             justify-content: center;
 
           ">
 
-          <div style="margin-right: 20px; font-size: 20px">标题:</div>
 
+          <!-- <div style="margin-right: 20px; font-size: 20px">标题:</div> -->
 
           <el-input v-model="askJson.askTitle" placeholder="请输入标题" style="width: 400px"></el-input>
 
         </div>
 
         <div class="a_addBox">
 
-          <div style="font-size: 16px; color: #c7c7c7">请输入题目内容</div>
 
+          <!-- <div style="font-size: 16px; color: #c7c7c7">请输入题目内容</div> -->
 
           <div class="a_add_box" v-for="(item1, index1) in askJson.askCount" :key="index1">
 
             <div class="a_add_checkType">
 
               <span :class="{
 
@@ -3461,9 +3462,9 @@
 
                         " placeholder="请输入题目" ></textarea>
 
               </div>
 
               <div class="a_add_head_div">
 
-                <el-button type="primary" size="small" @click="addAskList()">添加</el-button>
 
                 <el-button type="primary" size="small" @click="deleteAskList(index1)" v-if="askJson.askCount != 1">删除
 
                 </el-button>
 
+                <el-button type="primary" size="small" @click="addAskList()">添加</el-button>
 
               </div>
 
             </div>
 
             <div class="a_add_body">
 
@@ -3506,7 +3507,7 @@
 
         </div> -->
 
         <div class="a_addBox">
 
           <div style="font-size: 16px; color: #c7c7c7;display: flex;align-items: center;">
 
-            请输入题目内容
 
+            <!-- 请输入题目内容 -->
 
             <button class="c_pub_button_add pub_btn_paste_img" @click="pasteOption" style="margin-left: 10px" v-if="isPasteChoice">智能粘贴</button>
 
           </div>
 
           <div class="a_add_box" v-for="(item1, index1) in testJson.testCount" :key="index1">
 
@@ -3525,15 +3526,15 @@
 
                   </el-input> -->
 
                   <textarea class="a_add_head_input textarea_css"  v-autoHeight="40" v-model="testJson.testJson[index1].teststitle" placeholder="请输入题目"></textarea>
 
                 </div>
 
-                <div class="xzUpImg" @click.stop="addImg($event)">
 
+                <div class="xzUpImg" @click.stop="addImg($event)" style="margin-right: 10px;">
 
                   <img src="../../../assets/icon/xzUpImg.png" alt="" />
 
                   <input type="file" accept="image/*" style="display: none" @change="beforeUploadTiMu($event, index1)" />
 
                 </div>
 
               </div>
 
               <div class="a_add_head_div">
 
-                <el-button type="primary" size="small" @click="addTestList()">添加</el-button>
 
                 <el-button type="primary" size="small" @click="deleteTestList(index1)" v-if="testJson.testCount != 1">删除
 
                 </el-button>
 
+                <el-button type="primary" size="small" @click="addTestList()">添加</el-button>
 
               </div>
 
             </div>
 
             <div class="timuImgBox" v-if="testJson.testJson[index1].timuList &&
 
@@ -3628,7 +3629,7 @@
 
                   </div>
 
                 </el-checkbox-group>
 
               </div>
 
-              <div class="a_add_body_div" style="margin-bottom: 3px">
 
+              <div class="a_add_body_div">
 
                 <el-button type="primary" size="small" @click="addTcheckList(testJson.testJson[index1])">添加</el-button>
 
                 <el-button type="primary" size="small" @click="deleteTcheckList(testJson.testJson[index1])"
 
                   v-if="testJson.testJson[index1].testItem != 1">删除
 
@@ -7341,12 +7342,47 @@ export default {
 
       this.testJson.testCount++;
 
     },
 
     deleteAskList(index) {
 
-      this.askJson.askJson.splice(index, 1);
 
-      this.askJson.askCount--;
 
+      if(!this.askJson.askJson[index].askstitle && this.askJson.askJson[index].askItem == 1 && !this.askJson.askJson[index].checkList[0]){
 
+        this.askJson.askJson.splice(index, 1);
 
+        this.askJson.askCount--;
 
+      }else{
 
+        let _this = this;
 
+        _this
 
+          .$confirm("此操作不可撤销，是否继续？", "提示", {
 
+            confirmButtonText: "确定",
 
+            cancelButtonText: "取消",
 
+            type: "warning",
 
+          })
 
+          .then(() => {
 
+            _this.askJson.askJson.splice(index, 1);
 
+            _this.askJson.askCount--;
 
+          })
 
+          .catch(() => {
 
+            return;
 
+          });
 
+      }
 
     },
 
     deleteTestList(index) {
 
-      this.testJson.testJson.splice(index, 1);
 
-      this.testJson.testCount--;
 
+      if(!this.testJson.testJson[index].teststitle && this.testJson.testJson[index].testItem == 1 && !this.testJson.testJson[index].checkList[0]){
 
+        this.testJson.testJson.splice(index, 1);
 
+        this.testJson.testCount--;
 
+      }else{
 
+        let _this = this;
 
+        _this
 
+          .$confirm("此操作不可撤销，是否继续？", "提示", {
 
+            confirmButtonText: "确定",
 
+            cancelButtonText: "取消",
 
+            type: "warning",
 
+          })
 
+          .then(() => {
 
+            _this.testJson.testJson.splice(index, 1);
 
+            _this.testJson.testCount--;
 
+          })
 
+          .catch(() => {
 
+            return;
 
+          });
 
+      }
 
+
 
     },
 
     addcheckList(json) {
 
       json.checkList.length++;
 
@@ -7372,7 +7408,8 @@ export default {
 
     },
 
     checkAskType(type, json) {
 
       json.type = type;
 
-      json.checkList = [];
 
+      // json.checkList = [];
 
+      this.$forceUpdate();
 
     },
 
     addSelectList(json) {
 
       json.select.push("");
 
@@ -7417,19 +7454,27 @@ export default {
 
               : "";
 
             var index = 0;
 
             for (var z = 0; z < aj[i].checkList.length; z++) {
 
-              var checkC = aj[i].checkList[z] ? aj[i].checkList[z] : "";
 
+              let checkC = aj[i].checkList[z] ? aj[i].checkList[z] : "";
 
               if (checkC != "") {
 
                 index++;
 
               } else {
 
                 this.$message.error("选项不能为空！");
 
                 return;
 
               }
 
+
 
+              for (var z2 = z+1; z2 < aj[i].checkList.length; z2++) {  
+                let checkC2 = aj[i].checkList[z2] ? aj[i].checkList[z2] : "";
 
+                if (checkC == checkC2) {  
+                  this.$message.error(`第${i+1}题的选项${z+1}和选项${z2+1}重复了，请修改！`);
 
+                  return;
 
+                }  
+              } 
             }
 
             b++;
 
             if (index < 2) {
 
-              this.$message.error("填写了的题目，选项至少要有两项！");
 
+              this.$message.error("每道题目至少需要设置2个选项。");
 
               return;
 
-            }
 
+            } 
           }
 
         }
 
       }
 
@@ -7492,10 +7537,18 @@ export default {
 
                 this.$message.error("选项不能为空！");
 
                 return;
 
               }
 
+
 
+              for (var z2 = z+1; z2 < aj[i].checkList.length; z2++) {  
+                let checkC2 = aj[i].checkList[z2] ? aj[i].checkList[z2] : "";
 
+                if (checkC == checkC2) {  
+                  this.$message.error(`第${i+1}题的选项${z+1}和选项${z2+1}重复了，请修改！`);
 
+                  return;
 
+                }  
+              } 
             }
 
             b++;
 
             if (index < 2) {
 
-              this.$message.error("填写了的题目，选项至少要有两项！");
 
+              this.$message.error("每道题目至少需要设置2个选项。");
 
               return;
 
             }
 
             if (
 
@@ -10599,7 +10652,7 @@ ol {
 
 .a_add_checkType {
 
   margin-top: 10px;
 
   display: flex;
 
-  font-size: 16px;
 
+  font-size: 14px;
 
   align-items: center;
 
 }
 
 
@@ -10619,7 +10672,7 @@ ol {
 
 }
 
 
 .a_add_head .a_add_head_input {
 
-  width: 550px;
 
+  width: 540px;
 
 }
 
 
 .a_add_head .a_add_head_div {
 
@@ -10694,6 +10747,12 @@ ol {
 
   align-items: center;
 
   justify-content: center;
 
   /* flex-direction: column; */
 
+  margin-bottom:8px;
 
+}
 
+
 
+.a_add_body_div >>> .el-button--primary{
 
+  background: #466b99;
 
+    border: none;
 
 }
 
 
 .all_choose {
 
@@ -11128,7 +11187,7 @@ ol {
 
 .courseTop {
 
   display: flex;
 
   flex-direction: row;
 
-  justify-content: flex-start;
 
+  justify-content: space-between;
 
   align-items: center;
 
   width: calc(100%);
 
   padding: 10px 0;
 
@@ -12210,7 +12269,12 @@ ol {
 
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
 
   outline: none;
 
   overflow:hidden;
 
-  height: 40px;
 
+  height: 46px;
 
+  font-family: 'Microsoft YaHei';
 
+}
 
+
 
+.textarea_css::-webkit-input-placeholder {
 
+    color: #C0C4CC
 
 }
 
 
 .textarea_css:focus {

+ 1 - 1
src/components/pages/scourse.vue
查看文件 

@@ -1114,7 +1114,7 @@ export default {
 
 
 .xtCourse {
 
   position: absolute;
 
-  background: #41a5f0;
 
+  background: #466b99;
 
   width: 70px;
 
   height: 30px;
 
   border-radius: 30px;

+ 1 - 1
src/components/pages/student/checkCourse.vue
查看文件 

@@ -966,7 +966,7 @@ export default {
 
 
 .xtCourse {
 
   position: absolute;
 
-  background: #41a5f0;
 
+  background: #466b99;
 
   width: 70px;
 
   height: 30px;
 
   border-radius: 30px;

+ 1 - 1
src/components/pages/student/course.vue
查看文件 

@@ -1115,7 +1115,7 @@ export default {
 
 
 .xtCourse {
 
   position: absolute;
 
-  background: #41a5f0;
 
+  background: #466b99;
 
   width: 70px;
 
   height: 30px;
 
   border-radius: 30px;

+ 1 - 1
src/components/pages/studio/course.vue
查看文件 

@@ -1095,7 +1095,7 @@ export default {
 
 
 .xtCourse {
 
   position: absolute;
 
-  background: #41a5f0;
 
+  background: #466b99;
 
   width: 70px;
 
   height: 30px;
 
   border-radius: 30px;

+ 86 - 24
src/components/pages/task/addCourse.vue
查看文件 

@@ -28,6 +28,7 @@
 
                 </el-breadcrumb-item>
 
               </el-breadcrumb>
 
             </div>
 
+            <div class="r_pub_button_retrun" @click="lastSteps()">返回</div>
 
           </div>
 
           <div
 
             class="rightBox"
 
@@ -251,14 +252,14 @@
 
                                   ].task
 
                                 "
 
                               />
 
-                              <div v-if="itemTask.isFold2" class="show_taskD show" @click="fold2(itemTaskIndex)"><img src="../../../assets/icon/new/icon-slide.png" />收起任务描述</div>
 
-                                <div v-else class="show_taskD" @click="fold2(itemTaskIndex)"><img src="../../../assets/icon/new/icon-slide.png" />展开任务描述</div>
 
                             </div>
 
                             <div
 
                               class="remove"
 
                               v-if="item.taskJson.length > 1"
 
                               @click="deleteTask(itemTaskIndex)"
 
                             ></div>
 
+                            <div v-if="itemTask.isFold2" class="show_taskD show" @click="fold2(itemTaskIndex)"><img src="../../../assets/icon/new/icon-slide.png" />收起任务描述</div>
 
+                            <div v-else class="show_taskD" @click="fold2(itemTaskIndex)"><img src="../../../assets/icon/new/icon-slide.png" />展开任务描述</div>
 
                           </div>
 
                         </div>
 
                       </div>
 
@@ -5507,7 +5508,7 @@
 
             justify-content: center;
 
           "
 
         >
 
-          <div style="margin-right: 20px; font-size: 20px">标题:</div>
 
+          <!-- <div style="margin-right: 20px; font-size: 20px">标题:</div> -->
 
           <el-input
 
             v-model="askJson.askTitle"
 
             placeholder="请输入标题"
 
@@ -5515,7 +5516,7 @@
 
           ></el-input>
 
         </div>
 
         <div class="a_addBox">
 
-          <div style="font-size: 16px; color: #c7c7c7">请输入题目内容</div>
 
+          <!-- <div style="font-size: 16px; color: #c7c7c7">请输入题目内容</div> -->
 
           <div
 
             class="a_add_box"
 
             v-for="(item1, index1) in askJson.askCount"
 
@@ -5544,9 +5545,6 @@
 
                         " placeholder="请输入题目" ></textarea>
 
               </div>
 
               <div class="a_add_head_div">
 
-                <el-button type="primary" size="small" @click="addAskList()"
 
-                  >添加</el-button
 
-                >
 
                 <el-button
 
                   type="primary"
 
                   size="small"
 
@@ -5554,6 +5552,9 @@
 
                   v-if="askJson.askCount != 1"
 
                   >删除
 
                 </el-button>
 
+                <el-button type="primary" size="small" @click="addAskList()" 
+                  >添加</el-button
 
+                >
 
               </div>
 
             </div>
 
             <div class="a_add_body">
 
@@ -5612,7 +5613,7 @@
 
         </div> -->
 
         <div class="a_addBox">
 
           <div style="font-size: 16px; color: #c7c7c7;display: flex;align-items: center;">
 
-            请输入题目内容
 
+            <!-- 请输入题目内容 -->
 
             <button class="c_pub_button_add pub_btn_paste_img" @click="pasteOption" style="margin-left: 10px" v-if="isPasteChoice">智能粘贴</button>
 
           </div>
 
           <div
 
@@ -5641,7 +5642,7 @@
 
                   </el-input> -->
 
                   <textarea class="a_add_head_input textarea_css"  v-autoHeight="40" v-model="testJson.testJson[index1].teststitle" placeholder="请输入题目"></textarea>
 
                 </div>
 
-                <div class="xzUpImg" @click.stop="addImg($event)">
 
+                <div class="xzUpImg" @click.stop="addImg($event)" style="margin-right: 10px;">
 
                   <img src="../../../assets/icon/xzUpImg.png" alt="" />
 
                   <input
 
                     type="file"
 
@@ -5652,9 +5653,6 @@
 
                 </div>
 
               </div>
 
               <div class="a_add_head_div">
 
-                <el-button type="primary" size="small" @click="addTestList()"
 
-                  >添加</el-button
 
-                >
 
                 <el-button
 
                   type="primary"
 
                   size="small"
 
@@ -5662,6 +5660,9 @@
 
                   v-if="testJson.testCount != 1"
 
                   >删除
 
                 </el-button>
 
+                <el-button type="primary" size="small" @click="addTestList()"
 
+                  >添加</el-button
 
+                >
 
               </div>
 
             </div>
 
             <div
 
@@ -5808,7 +5809,7 @@
 
                   </div>
 
                 </el-checkbox-group>
 
               </div>
 
-              <div class="a_add_body_div" style="margin-bottom: 3px">
 
+              <div class="a_add_body_div">
 
                 <el-button
 
                   type="primary"
 
                   size="small"
 
@@ -9881,12 +9882,47 @@ export default {
 
       this.testJson.testCount++;
 
     },
 
     deleteAskList(index) {
 
-      this.askJson.askJson.splice(index, 1);
 
-      this.askJson.askCount--;
 
+      if(!this.askJson.askJson[index].askstitle && this.askJson.askJson[index].askItem == 1 && !this.askJson.askJson[index].checkList[0]){
 
+        this.askJson.askJson.splice(index, 1);
 
+        this.askJson.askCount--;
 
+      }else{
 
+        let _this = this;
 
+        _this
 
+          .$confirm("此操作不可撤销，是否继续？", "提示", {
 
+            confirmButtonText: "确定",
 
+            cancelButtonText: "取消",
 
+            type: "warning",
 
+          })
 
+          .then(() => {
 
+            _this.askJson.askJson.splice(index, 1);
 
+            _this.askJson.askCount--;
 
+          })
 
+          .catch(() => {
 
+            return;
 
+          });
 
+      }
 
     },
 
     deleteTestList(index) {
 
-      this.testJson.testJson.splice(index, 1);
 
-      this.testJson.testCount--;
 
+      if(!this.testJson.testJson[index].teststitle && this.testJson.testJson[index].testItem == 1 && !this.testJson.testJson[index].checkList[0]){
 
+        this.testJson.testJson.splice(index, 1);
 
+        this.testJson.testCount--;
 
+      }else{
 
+        let _this = this;
 
+        _this
 
+          .$confirm("此操作不可撤销，是否继续？", "提示", {
 
+            confirmButtonText: "确定",
 
+            cancelButtonText: "取消",
 
+            type: "warning",
 
+          })
 
+          .then(() => {
 
+            _this.testJson.testJson.splice(index, 1);
 
+            _this.testJson.testCount--;
 
+          })
 
+          .catch(() => {
 
+            return;
 
+          });
 
+      }
 
+
 
     },
 
     addcheckList(json) {
 
       json.checkList.length++;
 
@@ -9912,7 +9948,8 @@ export default {
 
     },
 
     checkAskType(type, json) {
 
       json.type = type;
 
-      json.checkList = [];
 
+      // json.checkList = [];
 
+      this.$forceUpdate();
 
     },
 
     addSelectList(json) {
 
       json.select.push("");
 
@@ -9964,10 +10001,17 @@ export default {
 
                 this.$message.error("选项不能为空！");
 
                 return;
 
               }
 
+              for (var z2 = z+1; z2 < aj[i].checkList.length; z2++) {  
+                let checkC2 = aj[i].checkList[z2] ? aj[i].checkList[z2] : "";
 
+                if (checkC == checkC2) {  
+                  this.$message.error(`第${i+1}题的选项${z+1}和选项${z2+1}重复了，请修改！`);
 
+                  return;
 
+                }  
+              } 
             }
 
             b++;
 
             if (index < 2) {
 
-              this.$message.error("填写了的题目，选项至少要有两项！");
 
+              this.$message.error("每道题目至少需要设置2个选项。");
 
               return;
 
             }
 
           }
 
@@ -10032,10 +10076,17 @@ export default {
 
                 this.$message.error("选项不能为空！");
 
                 return;
 
               }
 
+              for (var z2 = z+1; z2 < aj[i].checkList.length; z2++) {  
+                let checkC2 = aj[i].checkList[z2] ? aj[i].checkList[z2] : "";
 
+                if (checkC == checkC2) {  
+                  this.$message.error(`第${i+1}题的选项${z+1}和选项${z2+1}重复了，请修改！`);
 
+                  return;
 
+                }  
+              } 
             }
 
             b++;
 
             if (index < 2) {
 
-              this.$message.error("填写了的题目，选项至少要有两项！");
 
+              this.$message.error("每道题目至少需要设置2个选项。");
 
               return;
 
             }
 
             if (
 
@@ -13112,7 +13163,7 @@ ol {
 
 .a_add_checkType {
 
   margin-top: 10px;
 
   display: flex;
 
-  font-size: 16px;
 
+  font-size: 14px;
 
   align-items: center;
 
 }
 
 
@@ -13132,7 +13183,7 @@ ol {
 
 }
 
 
 .a_add_head .a_add_head_input {
 
-  width: 550px;
 
+  width: 540px;
 
 }
 
 
 .a_add_head .a_add_head_div {
 
@@ -13207,6 +13258,12 @@ ol {
 
   align-items: center;
 
   justify-content: center;
 
   /* flex-direction: column; */
 
+  margin-bottom:8px;
 
+}
 
+
 
+.a_add_body_div >>> .el-button--primary{
 
+  background: #466b99;
 
+    border: none;
 
 }
 
 
 .all_choose {
 
@@ -13642,7 +13699,7 @@ ol {
 
 .courseTop {
 
   display: flex;
 
   flex-direction: row;
 
-  justify-content: flex-start;
 
+  justify-content: space-between;
 
   align-items: center;
 
   width: calc(100%);
 
   margin: 0 auto;
 
@@ -14728,7 +14785,12 @@ ol {
 
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
 
   outline: none;
 
   overflow:hidden;
 
-  height: 40px;
 
+  height: 46px;
 
+  font-family: 'Microsoft YaHei';
 
+}
 
+
 
+.textarea_css::-webkit-input-placeholder {
 
+    color: #C0C4CC
 
 }
 
 
 .textarea_css:focus {

+ 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
查看文件 

@@ -17,7 +17,7 @@ import VueCookies from 'vue-cookies'
 
 import Viewer from 'v-viewer'
 
 import 'viewerjs/dist/viewer.css'
 
 import Clipboard from "clipboard";
 
-import hevueImgPreview from 'hevue-img-preview'
 
+import hevueImgPreview from './components/tools/hevue-img-preview'
 
 import './assets/css/button.css'
 
 
 const echarts = require('echarts');

部分文件因为文件数量过多而无法显示