zoukankan      html  css  js  c++  java
  • vue中如何去掉空格

    一、问题

    vue中当用户提交表单时,有的数据需要去掉前后空格然后再向后端发送。

    二、解决方法

    首先可以使用v-model.trim这个v-model修饰符去解决它,但是当用户输入u200B时,这个方法就不奏效了,这时我们可以去一下v-model.trim这个修饰符的源码

    
    function genDefaultModel (
      el: ASTElement,
      value: string,
      modifiers: ?ASTModifiers
    ): ?boolean {
      const type = el.attrsMap.type
      const { lazy, number, trim } = modifiers || {}
      const needCompositionGuard = !lazy && type !== 'range'
      const event = lazy
        ? 'change'
        : type === 'range'
          ? RANGE_TOKEN
          : 'input'
    
      let valueExpression = '$event.target.value'
       // 去掉空格
      if (trim) {
        valueExpression = `$event.target.value.trim()`
      }
      if (number) {
        valueExpression = `_n(${valueExpression})`
      }
    
      let code = genAssignmentCode(value, valueExpression)
      if (needCompositionGuard) {
        code = `if($event.target.composing)return;${code}`
      }
    
      addProp(el, 'value', `(${value})`)
      addHandler(el, event, code, null, true)
      if (trim || number || type === 'number') {
        addHandler(el, 'blur', '$forceUpdate()')
      }
    }
    

    上面的源码处理方式我们也可以理解为下面这种方式:

    
    <input :value="name" @input="if($event.target.composing)return;name=$event.target.value.trim()" type="text"/>
    

    所以我们可以把上面的方法强化或者改进一下:

    
    <template>
      <div @input="removeSpaces">
        <el-input v-model.trim="value"></el-input>
      </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    value : ''
                }
            },
            methods: {
                removeSpaces(event) {
                    if(event.target.composing){
                        return
                }
                this.value = event.target.value.trim()
                this.value = this.value.replace("\u200B","")
              }
            }
        }
    </script>
    

    同理,使用这种方法我们可以定制一些其他功能的输入框组件

    参考文章:参考文章

    原文地址:https://segmentfault.com/a/1190000016953061

  • 相关阅读:
    Castle Windsor 学习-----Installer的几种安装方式
    asp.net mvc源码分析-Route的GetRouteData
    查看iis对应w3wp.exe显示的进程ID号(转载)
    jvisualvm安装Visual GC插件
    Modelsimse10.4如何编译altera库文件以支持IP仿真
    sublime text3 配置使用
    Modelsim调用用do脚本自动化仿真
    Quartus16.0如何使用TCL脚本
    Java中使用Timer和TimerTask实现多线程
    框架导论
  • 原文地址:https://www.cnblogs.com/datiangou/p/10125865.html
Copyright © 2011-2022 走看看