【fix ESLint】src/components/jero/JCodeEditor

jero-web/src/components/jero/JCodeEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-bind="fullScreenParentProps">
-    <a-icon v-if="fullScreen" class="full-screen-icon" :type="iconType" @click="()=>fullCoder=!fullCoder"/>
+    <a-icon v-if="fullScreen" class="full-screen-icon" :type="iconType" @click="()=>fullCoder=!fullCoder" />
 
     <div class="code-editor-cust full-screen-child">
       <textarea ref="textarea"></textarea>
@@ -284,11 +284,7 @@ export default {
       // 支持双向绑定
       this.coder.on('change', (coder) => {
         this.code = coder.getValue()
-        if (this.code) {
+        this.hasCode = !!this.code
-          this.hasCode = true
-        } else {
-          this.hasCode = false
-        }
         if (this.$emit) {
           this.$emit('input', this.code)
         }
@@ -297,11 +293,7 @@ export default {
         this.hasCode = true
       })
       this.coder.on('blur', () => {
-        if (this.code) {
+        this.hasCode = !!this.code
-          this.hasCode = true
-        } else {
-          this.hasCode = false
-        }
       })
 
       /* this.coder.on('cursorActivity',()=>{
@@ -364,119 +356,127 @@ export default {
 </script>
 
 <style lang="less">
-  .code-editor-cust{
+.code-editor-cust {
-    flex-grow:1;
+  flex-grow: 1;
-    display:flex;
+  display: flex;
-    position:relative;
+  position: relative;
-    height:100%;
+  height: 100%;
-    .CodeMirror{
-      flex-grow:1;
-      z-index:1;
-      .CodeMirror-code{
-        line-height:19px;
-      }
 
+  .CodeMirror {
+    flex-grow: 1;
+    z-index: 1;
+
+    .CodeMirror-code {
+      line-height: 19px;
     }
-    .code-mode-select{
+
-      position:absolute;
+  }
-      z-index:2;
+
-      right:10px;
+  .code-mode-select {
-      top:10px;
+    position: absolute;
-      max-width:130px;
+    z-index: 2;
-    }
+    right: 10px;
-    .CodeMirror{
+    top: 10px;
-      height: auto;
+    max-width: 130px;
-      min-height:100%;
+  }
-    }
+
-    .null-tip{
+  .CodeMirror {
-      position: absolute;
+    height: auto;
-      top: 4px;
+    min-height: 100%;
-      left: 36px;
+  }
-      z-index: 10;
+
-      color: #ffffffc9;
+  .null-tip {
-      line-height: initial;
+    position: absolute;
-    }
+    top: 4px;
-    .null-tip-hidden{
+    left: 36px;
-      display: none;
+    z-index: 10;
-    }
+    color: #ffffffc9;
-    /**选中样式偶然出现高度不够的情况*/
+    line-height: initial;
-    .CodeMirror-selected{
+  }
-      min-height: 19px !important;
+
+  .null-tip-hidden {
+    display: none;
+  }
+
+  /**选中样式偶然出现高度不够的情况*/
+
+  .CodeMirror-selected {
+    min-height: 19px !important;
+  }
+}
+
+/* 全屏样式 */
+.full-screen-parent {
+  position: relative;
+
+  .full-screen-icon {
+    opacity: 0;
+    color: black;
+    width: 20px;
+    height: 20px;
+    line-height: 24px;
+    background-color: white;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 9;
+    cursor: pointer;
+    transition: opacity 0.3s;
+  }
+
+  &:hover {
+    .full-screen-icon {
+      opacity: 1;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.88);
+      }
     }
   }
 
-  /* 全屏样式 */
+  &.full-screen {
-  .full-screen-parent {
+    position: fixed;
-    position: relative;
+    top: 10px;
+    left: 10px;
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+    padding: 10px;
+    background-color: #f5f5f5;
 
     .full-screen-icon {
-      opacity: 0;
+      top: 12px;
-      color: black;
+      right: 12px;
-      width: 20px;
-      height: 20px;
-      line-height: 24px;
-      background-color: white;
-      position: absolute;
-      top: 2px;
-      right: 2px;
-      z-index: 9;
-      cursor: pointer;
-      transition: opacity 0.3s;
-    }
-
-    &:hover {
-      .full-screen-icon {
-        opacity: 1;
-
-        &:hover {
-          background-color: rgba(255, 255, 255, 0.88);
-        }
-      }
-    }
-
-    &.full-screen {
-      position: fixed;
-      top: 10px;
-      left: 10px;
-      width: calc(100% - 20px);
-      height: calc(100% - 20px);
-      padding: 10px;
-      background-color: #f5f5f5;
-
-      .full-screen-icon {
-        top: 12px;
-        right: 12px;
-      }
-
-      .full-screen-child {
-        height: 100%;
-        max-height: 100%;
-        min-height: 100%;
-      }
     }
 
     .full-screen-child {
       height: 100%;
+      max-height: 100%;
+      min-height: 100%;
     }
-
-    &.auto-height {
-      .full-screen-child {
-        min-height: 120px;
-        max-height: 320px;
-        height: unset;
-        overflow: hidden;
-      }
-
-      &.full-screen .full-screen-child {
-        height: 100%;
-        max-height: 100%;
-        min-height: 100%;
-      }
-    }
-
   }
 
-.CodeMirror-cursor{
+  .full-screen-child {
-  height:18.4px !important;
+    height: 100%;
+  }
+
+  &.auto-height {
+    .full-screen-child {
+      min-height: 120px;
+      max-height: 320px;
+      height: unset;
+      overflow: hidden;
+    }
+
+    &.full-screen .full-screen-child {
+      height: 100%;
+      max-height: 100%;
+      min-height: 100%;
+    }
+  }
+
+}
+
+.CodeMirror-cursor {
+  height: 18.4px !important;
 }
 </style>