这篇文章主要讲了一个带提示的输入框组件实例的使用。

使用方法

  • 引入组件

    1
    import SearchInput from "@/components/SearchInput/index"

  • 不带提示的输入框（默认）

    1
    2
    3
    4
    5
    6
    <search-input
        v-model="value"
        @on-search="handleSearch"
        @keyup.native.enter="handleSearch"
        @input.native="checkLen"
    ></search-input>

  • 带提示输入框

    1
    2
    3
    4
    5
    6
    7
    8
    <search-input 
        isTips
        :tips="['1、提示第一条', '2、提示第二条']"
        v-model="iptValue"
        @on-search="handleSearch"
        @keyup.native.enter="handleSearch"
        @input.native="checkLen"
    ></search-input>

备注

checkLen是控制输入长度的方法，该方法在utils/utils.js中，默认最多输入100个字符，
如需控制其他长度，比如限制20个字符： @input.native=”checkLen($event, 20)”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * @Description: input输入内容长度 @input.native
 * @param {*} el 元素
 * @param {*} max 最大字符长度
 * @return {*}
 */
export const checkLen = (el, max = 100) => {
  let val = el.target.value
  let len = 0
  for (let i = 0; i < val.length; i++) {
    if (/[\u4e00-\u9fa5]/.test(val[i])) {
      len += 2
    } else {
      len++
    }
    if (len > max) {
      el.target.value = val.substr(0, i)
      break
    }
  }
}

完整组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<template>
  <div ref="iptRef" class="j-ipt-box" :style="{width: width}">
    <el-input
      v-model.trim="curValue"
      :placeholder="curPlaceholder"
      @change="handleChange"
      @focus="isFocus=true"
      @blur="isFocus=false" 
    >
      <i slot="suffix" v-show="curValue" class="el-input__icon el-icon-error" @click="handleClear"></i>
      <el-tooltip slot="suffix" effect="light" v-show="isTips && !curValue">
        <div slot="content">
          <h5 style="marginBottom:8px">已启用通配符</h5>
          <p style="marginBottom:3px" v-for="tip in curTips" :key="tip" >{{tip}}</p>
        </div>
        <i class="el-input__icon el-icon-warning"></i>
      </el-tooltip>
    </el-input>
    <b :class="['search', isFocus?'is-focus':'']" :style="{top: bTop}">
      <i class="el-input__icon el-icon-search" @click="handleSearch"></i>
    </b>
  </div>
</template>
<script>
export default {
  name: 'ElSearchInput',
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    width: {
      type: String,
      default: '280px'
    },
    tips: {
      type: Array,
      default: () => {
        return ['1、%替代一个或多个字符']
      }
    },
    isTips: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(val) {
      this.curValue = val
    },
    placeholder(val) {
      this.curPlaceholder = val
    },
    tips(val) {
      this.curTips = val
    },
  },
  data() {
    return {
      isFocus: false,
      curPlaceholder: this.placeholder,
      curValue: this.value,
      curTips: this.tips,
      bTop: '0px'
    };
  },
  methods: {
    handleChange(val) {
      this.$emit('input', val)
    },

    handleClear() {
      this.curValue = ''
      this.handleChange('')
    },

    handleSearch() {
      this.$emit('on-search',this.curValue)
    },

    // 获取初始化输入框外层高度，动态定位右侧搜索部分
    initTop() {
      this.$nextTick(() => {
        let height = this.$refs.iptRef.offsetHeight
        this.bTop = (height - 30) / 2 + 'px'
      })
    }
  },
  created() {
    this.initTop()
  }
};
</script>
<style lang="scss" scoped>
  .j-ipt-box {
    position: relative;
    padding-right: 30px;
    /deep/.el-input__inner {
      border-radius: 6px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      padding-left: 8px;
      height: 30px;
      line-height: 30px;
    }
    
    .el-input--medium .el-input__icon {
        line-height: 32px;
        cursor: pointer;
    }

    .search {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #D6D6D6;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
      border-left: none;
      position: absolute;
      top: 0;
      right: 0;
      .el-icon-search {
        line-height: 30px;
        color: #4260db;
        font-size: 13px;
        cursor: pointer;
      }
    }

    .is-focus {
      border-color: #4260db;
    }

    /deep/.el-input__inner:focus {
      border-color: #4260db;
    }
  }
</style>