input输入框简单组件，易更改

原因：前两天做一个需求，PC端的web页面。

           input输入框选中要有高亮外边框。

           有的需要可清空，有的需要计算字数。

           输入框很多，避免代码冗余，也避免应付不同需求简单变更，同时节省时间

           ps：ui组件的样式修改还是很烦的，不像自己的代码

文件为vue文件，设计不好X和字数限制的位置，弄成有你没我的关系了哈哈哈

<template>
  <div id="so_input">
      <div class="so_div" :class="isFocus?'so_div_focus':''">
          <input class="so_die_input" v-model="value" type="text" :placeholder="placeholder"
          @focus="inputFocus" @blur="inputBlur"/>
          <img v-if="isClean" class="so_input_clean" src="../assets/image/clean.png" @click="clearInput" alt="">
          <span v-else class="so_input_font_count">{{fountCount}}</span>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: '请输入信息'
    },
    // 设置是否包含清空（可以再增加是否包含字数限制）
    isClean: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isFocus: false,
      value: '',
      fountMaxCount: 1115// 字数最大值
    }
  },
  computed: {
    // 实时字数剩余=字数最大值-输入框长度
    fountCount () {
      return this.fountMaxCount - this.value.length
    }
  },
  watch: {
    // 超过最大值设置为原值
    value (val, oldVal) {
      if (this.isClean) {
        return
      }
      let valLength = val.length
      if (valLength > this.fountMaxCount) {
        this.value = oldVal
      }
    }
  },
  methods: {
    inputFocus () {
      this.isFocus = true
    },
    inputBlur () {
      this.isFocus = false
    },
    clearInput () {
      this.value = ''
    }
  }
}
</script>

<style lang="stylus" scoped>
#so_input{
    .so_div{
        display: flex;
        border-radius: 6px;
        border: 1px solid #eaeaea;
        background #fff
        align-items center
        .so_die_input{
            padding 0 10px 0 10px
            width: 100%;
            border none
            border-radius: 6px;
            font-size 16px
            background #fff
            line-height 24px
            height 24px
        }
        .so_die_input:focus{
          outline none
        }
        .so_input_clean{
            position relative
            right 5px
            width 15px
            height 15px
            cursor pointer
            transition:all 0.2s ease;
        }
        .so_input_clean:hover{
            transform scale(1.2,1.2)
        }
        .so_input_clean:active{
            transform scale(1.4,1.4)
        }
        .so_input_font_count{
          position relative
          top 3px
          right 5px
          display inline-block
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 17px;
        }
    }
    .so_div_focus{
        border 1px solid #2196f3
    }
}
</style>

成品：