ElementUi的输入框Input内部设置固定前缀字符串，不能删除

左手的ㄟ右手 2023-10-08 21:36 9阅读 0赞

我要实现的效果是：在输入框内部实现固定的前缀字符串

![f101374bafd6408cab6c8b879b3d0d1c.png][]

其实官方文章里面有给定插槽，但是那种插槽并不能满足我的需求，先看官方的：

![4bab287691ad4a6db2465297bad68465.png][]通过官方给的例子，我们可以看到prepend和append插槽使用：

![18a1b924a23145e1bbf6d126fd2816f3.png][]

prefix和suffix的效果：![2a2c3e3493af4f16b68a529b4eebd331.png][]

可以看到和我们要的效果完全不符，所以我就要实现自定义的效果了

### 我们的效果实现思路 ###

通过监听input事件，用正则表达式匹配我们的输入内容，当内容不满足我们的正则内容是，立即马上修改输入框内容，变相实现我们要的固定字符串前缀。

具体操作，编写一个监听函数：

// 求交结果集名称固定前缀
        psiResultNamePre(e) {
          // 用正则匹配是否只有PPCPSI_
          var testRes = /PPCPSI_/.test(e)
          console.log('testRes--------', testRes)
          if (!testRes) {
            this.form.psiResultName = 'PPCPSI_'
          }
        },

给表单绑定输入监听：

![4b0fc5d52401476b8da96f1e93132f25.png][]

当输入内容变化的时候，会立即触发这个函数执行，然后在这个函数里面，如果没有匹配上我们固定的字符串前缀，就会立即马上修改我们的输入框内容：通过控制台，可以看到我们的固定前缀是没办法删除的

![1a83d134186e4ed3913a2be230cce10b.png][]

[f101374bafd6408cab6c8b879b3d0d1c.png]: https://img-blog.csdnimg.cn/f101374bafd6408cab6c8b879b3d0d1c.png
[4bab287691ad4a6db2465297bad68465.png]: https://img-blog.csdnimg.cn/4bab287691ad4a6db2465297bad68465.png
[18a1b924a23145e1bbf6d126fd2816f3.png]: https://img-blog.csdnimg.cn/18a1b924a23145e1bbf6d126fd2816f3.png
[2a2c3e3493af4f16b68a529b4eebd331.png]: https://img-blog.csdnimg.cn/2a2c3e3493af4f16b68a529b4eebd331.png
[4b0fc5d52401476b8da96f1e93132f25.png]: https://img-blog.csdnimg.cn/4b0fc5d52401476b8da96f1e93132f25.png
[1a83d134186e4ed3913a2be230cce10b.png]: https://img-blog.csdnimg.cn/1a83d134186e4ed3913a2be230cce10b.png