@zykjcommon/questions 0.0.40 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zykjcommon/questions",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "main": "src/components/questions/entry.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/js/fun.js

@@ -888,7 +888,8 @@ function getDeviceEnv(){
         }
       }
     }
-    return IsIPad
+    let touch = !!(('ontouchstart' in window) || (window.DocumentTouch && document instanceof window.DocumentTouch))
+    return IsIPad && touch
   }
   let env = ''
   let md= new MobileDetect(window.navigator.userAgent) //初始化mobile-detect

package/src/assets/scss/questions/zykjcommon-questions.scss

@@ -1,4 +1,4 @@
-$greenItemFontSize:0.14em;
+$greenItemFontSize:0.13em;
 .zykjcommon-question{
   box-sizing: border-box;
   .editor-content{
@@ -354,7 +354,9 @@ $greenItemFontSize:0.14em;
     height: 100%;
     position: relative;
     /*background: url("../../img/classify-bg-seaworld.png") no-repeat center;*/
-    /*background-size: 100% 100%;*/
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
     overflow: auto;
     .box{
       padding: 0 0.8em;
@@ -369,7 +371,7 @@ $greenItemFontSize:0.14em;
       display: flex;
       flex-direction: column;
       /*background: url("../../img/classify-boxitem-bg.png") no-repeat center;*/
-      /*background-size: 100% 100%;*/
+      background-size: 100% 100%;
     }
     .main-block{
       margin:0.38em auto 0.1rem;
@@ -402,8 +404,10 @@ $greenItemFontSize:0.14em;
       }
     }
     .append-item{
-      /*background: url("../../img/classify-green-item.png") no-repeat center;
-      background-size: 100% 100%;*/
+      /*background: url("../../img/classify-green-item.png") no-repeat center;*/
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
       width: 1.3em;
       height: 1.3em;
       margin-right: 0.1em;
@@ -446,7 +450,9 @@ $greenItemFontSize:0.14em;
       margin-left: -4.5em;
       width: 9em;
       /*background: url("../../img/classify-list-bg.png") no-repeat center;*/
-      /*background-size: 100% 100%;*/
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
       .list{
         height: 1.5em;
         display: flex;
@@ -488,8 +494,10 @@ $greenItemFontSize:0.14em;
       }
     }
     .list-item{
-      /*background: url("../../img/classify-green-item.png") no-repeat center;
-      background-size: 100% 100%;*/
+      /*background: url("../../img/classify-green-item.png") no-repeat center;*/
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
       width: 1.3em;
       height: 1.3em;
       margin-right: 0.1em;
@@ -526,8 +534,10 @@ $greenItemFontSize:0.14em;
   }
   .question-classify-moveDiv{
     position: fixed;
-    /*background: url("../../img/classify-green-item.png") no-repeat center;
-    background-size: 100% 100%;*/
+    /*background: url("../../img/classify-green-item.png") no-repeat center;*/
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
     width: 1.3em;
     height: 1.3em;
     margin-right: 0.1em;

package/src/components/questions/Question_Classify.vue

@@ -176,17 +176,18 @@ export default {
       let exam_options_data = nv.exam_options_data
       if(this.classify_question_info){
         if(this.classify_question_info.background_file){
-          this.bigBgCss = `background: url(${this.classify_question_info.background_file.file_url}) no-repeat center;background-size: 100% 100%`
+          this.bigBgCss = `background-image: url(${this.classify_question_info.background_file.file_url});`
         }
         if(this.classify_question_info.bottom_img_file){
-          this.bottomBgCss = `background: url(${this.classify_question_info.bottom_img_file.file_url}) no-repeat center;background-size: 100% 100%`
+          this.bottomBgCss = `background-image: url(${this.classify_question_info.bottom_img_file.file_url});`
         }
         let optionList = []
+        this.optionList = []
         exam_options_data.forEach((item)=>{
           optionList.push({
             content_type:item.data.content_type,
             content:item.data.option_content,
-            bgUrlCss:`background: url(${item.data.file_url}) no-repeat center;background-size: 100% 100%;color:${item.data.font_color}`,
+            bgUrlCss:`background-image: url(${item.data.file_url});color:${item.data.font_color}`,
             idx:item.index
           })
         })
@@ -200,7 +201,7 @@ export default {
           bigBoxItemList.push({
             imgUrl:big_type_option_list[index].file_url,
             bgUrl:item.file_url,
-            bgUrlCss:`background: url(${item.file_url}) no-repeat center;background-size: 100% 100%`
+            bgUrlCss:`background-image: url(${item.file_url});`
           })
         })
         this.bigBoxItemList = bigBoxItemList
@@ -215,6 +216,8 @@ export default {
       document.removeEventListener('gesturestart', this.gesturestartListener)
       $(this.$el).find('.question-classify .append-item').off(this.mousedown)
       $(this.$el).find('.question-classify .list-item').off(this.mousedown)
+      $(this.$el).find(`.question-classify .next`).off('click')
+      $(this.$el).find(`.question-classify .prev`).off('click')
       $(document).off(this.mouseup)
       let html = document.getElementsByTagName("html")[0];
       html.style.fontSize = "";
@@ -278,12 +281,12 @@ export default {
         self.p1.moveX = self.listItem.offset().left;
         self.p1.moveY = self.listItem.offset().top - 30;
         let idx = self.listItem.attr('idx')
-        let itemBgCss = `${self.listItem.get(0).style.background}`
+        let itemBgCss = `${self.listItem.get(0).style.backgroundImage}`
         let itemColorCss = `${self.listItem.get(0).style.color}`
         let textDisplayCss = self.listItem.find('.list-item-text').get(0).style.display
         console.log(itemBgCss,1234);
         self.moveDiv = $(`<div class="question-classify-moveDiv" idx="${idx}"><div class="list-item-text" style="${textDisplayCss?'display:'+textDisplayCss:''}">${self.listItem.find('.list-item-text').text()}</div></div>`)
-        self.moveDiv.css({left:`${self.p1.moveX}px`,top:`${self.p1.moveY}px`,background:itemBgCss,color:itemColorCss})
+        self.moveDiv.css({left:`${self.p1.moveX}px`,top:`${self.p1.moveY}px`,backgroundImage:itemBgCss,color:itemColorCss})
         $(self.$el).append(self.moveDiv)
         $(document).on(self.mousemove,function(e2){
           // e2.preventDefault()
@@ -299,6 +302,7 @@ export default {
 
         })
       }
+      appendItem.off(this.mousedown)
       appendItem.on(this.mousedown,function(e){
         if(env === 'mobile'){
           self.lazyDragTimer = setTimeout(()=>{
@@ -313,11 +317,11 @@ export default {
       let self = this
       self.listItem.remove()
       let idx = self.moveDiv.attr('idx')
-      let itemBgCss = `${self.moveDiv.get(0).style.background}`
+      let itemBgCss = `${self.moveDiv.get(0).style.backgroundImage}`
       let itemColorCss = `${self.moveDiv.get(0).style.color}`
       let textDisplayCss = self.moveDiv.find('.list-item-text').get(0).style.display
       let appendItem = $(`<div class="${options.appendItemClassName}" idx="${idx}"><div class="list-item-text" style="${textDisplayCss?'display:'+textDisplayCss:''}">${self.moveDiv.find('.list-item-text').text()}</div></div>`)
-      appendItem.css({opacity:0,background:itemBgCss,color:itemColorCss})
+      appendItem.css({opacity:0,backgroundImage:itemBgCss,color:itemColorCss})
       options.targetList.append(appendItem)
       options.targetList[options.scrollDirection](self.scrollDistance)
       let appendLeft = appendItem.offset().left
@@ -343,6 +347,7 @@ export default {
     },
     bindNextPrevEvent(type){
       let self = this
+      $(this.$el).find(`.question-classify .${type}`).off('click')
       $(this.$el).find(`.question-classify .${type}`).on('click',function(e){
         e.stopPropagation()
         e.preventDefault()
@@ -360,6 +365,7 @@ export default {
         this.setAnswerDo()
       }
       self.bindDragDomEvent($(this.$el).find('.question-classify .list-item'),'go')
+      $(document).off(self.mouseup)
       $(document).on(self.mouseup,function(e){
         env === 'mobile' && self.stopLazyDrag()
         if(self.animationing){
@@ -430,12 +436,14 @@ export default {
         return false
       }
       if(env === 'mobile'){
-        $('.list').scroll(function(e){
+        $('.list').off('scroll')
+        $('.list').on('scroll',function(){
           if(!self.dragingStart){
             self.stopLazyDrag()
           }
         }).addClass('noScrollBar')
-        $('.main-append').scroll(function(e){
+        $('.main-append').off('scroll')
+        $('.main-append').on('scroll',function(e){
           if(!self.dragingStart){
             self.stopLazyDrag()
           }
@@ -473,6 +481,8 @@ export default {
       $(this.$el).find('.question-classify .list-item').each((index,item)=>{
         listItemIds.push(Number($(item).attr('idx')))
       })
+      // 如果两个上一题下一题切换组件，两个又是同一类型的组件，需要清空一下dom,以防两题篡了
+      $(this.$el).find('.main-append').empty()
       this.answerMap.classify_mapping_list.forEach((item,index)=>{
         item.small_type_index_list.forEach((subItem)=>{
           let idx = listItemIds.findIndex((i)=>{
@@ -482,13 +492,13 @@ export default {
             //找到一个删掉一个，要不会有问题
             listItemIds.splice(idx,1)
             let listItemDom = $(this.$el).find('.question-classify .list-item').eq(idx)
-            let itemBgCss = `${listItemDom.get(0).style.background}`
+            let itemBgCss = `${listItemDom.get(0).style.backgroundImage}`
             let itemColorCss = `${listItemDom.get(0).style.color}`
             let textDisplayCss = listItemDom.find('.list-item-text').get(0).style.display
             let attrIdx = listItemDom.attr('idx')
             let appendItem = $(`<div class="append-item" idx="${attrIdx}"><div class="list-item-text" style="${textDisplayCss?'display:'+textDisplayCss:''}">${listItemDom.find('.list-item-text').text()}</div></div>`)
             appendItem.css({
-              background:itemBgCss,
+              backgroundImage:itemBgCss,
               color:itemColorCss
             })
             self.bindDragDomEvent(appendItem,'back')