field组件

packages/components/ListItem/Item.vue

 <template>
   <div
-    :class="[showActivated,focus,focusBorder]"
+    :class="[showActivated,cusClass]"
     :style="{'min-height':minHeight}"
     class="hls-item">
     <div
@@ -11,22 +11,15 @@
       @touchcancel="end"
       @mousedown="start"
       @mouseup="end"
-<<<<<<< HEAD
-      @mouseleave="end"
-      @focusin="focusin"
-      @focusout="focusout">
-      <div v-if="showName" :style="{'min-height':minHeight,'flex':proportion[0] }" class="add-name">
-=======
       @mouseleave="end">
       <div v-if="showName && hasName" :style="{'min-height':minHeight,'flex':proportion[0] }" class="add-name">
->>>>>>> develop
         <slot name="left-icon"/>
         <slot name="name"/>
       </div>
       <div v-if="showContent && hasContent" :style="{'min-height':minHeight,'flex':proportion[1] }" class="add-content">
         <slot name="content"/>
         <slot name="right-icon"/>
-        <img v-if="showArrow" :src="rightIcon" class="right-icon">
+        <img v-if="showArrow" :src="rightIcon" class="right-icon" style="height: 0.2rem">
       </div>
       <slot/>
     </div>
@@ -60,6 +53,10 @@ export default {
       type: String,
       default: '',
     },
+    cusClass: {
+      type: String,
+      default: '',
+    },
     hasBorder: {
       type: Boolean,
       default: true,
@@ -68,16 +65,10 @@ export default {
       type: Number,
       default: 0,
     },
-    showFocusBorder: {
-      type: Boolean,
-      default: false,
-    },
   },
   data () {
     return {
       showActivated: '',
-      focus: '',
-      focusBorder: '',
       hasTouchEvent: 'ontouchstart' in document,
       Icon: require('./right-gray@2x.png'),
     }
@@ -106,18 +97,6 @@ export default {
       // 移动浏览器中长按元素会触发显示菜单，导致touchend事件不会触发，需要阻止该行为
       e.preventDefault()
     },
-    focusin () {
-      let vm = this
-      let showFocus = vm.showFocusBorder ? vm.showFocusBorder : vm.$parent.showFocusBorder
-      vm.focus = 'focus'
-      if (showFocus) {
-        vm.focusBorder = 'focus-border'
-      }
-    },
-    focusout () {
-      this.focus = ''
-      this.focusBorder = ''
-    },
     start (e) {
       if (e.target.readOnly) return
       if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'BUTTON' || e.target.nodeName === 'LABEL') return
@@ -136,6 +115,7 @@ export default {
 </script>
 
 <style lang="less">
+  @import "../../common/styles/variables";
   .hls-item {
     //height: 100px;
     width: 100%;
@@ -146,14 +126,6 @@ export default {
     &.activated {
       opacity: 0.8;
     }
-    &.focus-border{
-      .contents {
-        &:after {
-          border-bottom: 2px solid rgba(0, 65, 196, 1); /*no*/
-          color: rgba(0, 65, 196, 1);
-        }
-      }
-    }
 
     .contents {
       height: 100%;
@@ -235,7 +207,6 @@ export default {
         //右侧图标
         .right-icon {
           margin-left: 5px;
-          height: 0.2rem;
         }
 
         //toggle