脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → ant Design-vue空格input

Ant Design-vue 解决input前后空格问题(推荐)

 更新时间：2022年10月26日 09:57:32   作者：周家大小姐.  
最近做项目遇到这样一个问题输入框不允许有前后空格但字符中间可以有空格，怎么解决这个问题呢，接下来小编把ant Design-vue 解决input前后空格问题的实现代码分享给大家，感兴趣的朋友一起看看吧

需求:输入框不允许有前后空格但字符中间可以有空格

 我这里是封装成全局自定义指令,如果同学要用的话根据自己需求放入对应文件即可

index.js

/*
 * @Author: 周云芳 164591357@qq.com
 * @Date: 2022-10-25 16:11:21
 * @LastEditors: 周云芳 164591357@qq.com
 * @LastEditTime: 2022-10-25 16:43:46
 * @FilePath: \zhhq-front-web\src\directive\input-trim\index.js
 * @Description: 解决input前后空格问题
 */
/**
 * @description:解决input前后空格问题
 * \s：空格
 * \uFEFF：字节次序标记字符（Byte Order Mark），也就是BOM,它是es5新增的空白符
 * \xA0：禁止自动换行空白符，相当于html中的 
 * @return {*}
 */
export default {
  inserted: (el, binding) => {
    setTimeout(() => {
      el.oninput = () => {
        el.value = el.value.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
      }
      el.onblur = () => {
        el.value = el.value.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
      }
    }, 100)
  }
}

Vue Element 去除input前后空格

在el-input中可以使用v-model.trim来去除内容中的前后空格

<el-input type="textarea" placeholder="请输入报表名称" v-model.trim="formData.name" maxlength="50">

到此这篇关于Ant Design-vue 解决input前后空格问题的文章就介绍到这了,更多相关ant Design-vue空格input内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue的路由及路由钩子函数的实现

    Vue的路由及路由钩子函数的实现

    这篇文章主要介绍了Vue的路由及路由钩子函数的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue实现父子组件之间的通信以及兄弟组件的通信功能示例

    vue实现父子组件之间的通信以及兄弟组件的通信功能示例

    这篇文章主要介绍了vue实现父子组件之间的通信以及兄弟组件的通信功能,结合实例形式分析了vue.js组件间通信相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • vue watch监听数据变化的案例详解

    vue watch监听数据变化的案例详解

    监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化，本文将通过代码示例为大家详细的介绍一下vue watch如何监听数据变化,需要的朋友可以参考下
    2023-07-07
  • vue+iview动态渲染表格详解

    vue+iview动态渲染表格详解

    这篇文章主要为大家详细介绍了vue+iview动态渲染表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-03-03
  • vue中使用echarts以及简单关系图的点击事件方式

    vue中使用echarts以及简单关系图的点击事件方式

    这篇文章主要介绍了vue中使用echarts以及简单关系图的点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 详解Vue2.X的路由管理记录之 钩子函数（切割流水线）

    详解Vue2.X的路由管理记录之 钩子函数（切割流水线）

    本篇文章主要介绍了Vue2.X的路由管理记录之 钩子函数（切割流水线），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Vue实现天气预报小应用

    Vue实现天气预报小应用

    这篇文章主要为大家详细介绍了Vue实现天气预报小应用，查询一些城市的天气情况，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue组件间的双向绑定示例解析

    Vue组件间的双向绑定示例解析

    这篇文章主要介绍了Vue组件间的双向绑定，我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用v-bind的方式，即子组件可以使用父组件的值，但是不能改变这个值
    2023-03-03
  • Vue3 响应式高阶用法之customRef()的使用

    Vue3 响应式高阶用法之customRef()的使用

    customRef()是Vue3的高级工具,允许开发者创建具有复杂依赖跟踪和自定义更新逻辑的ref对象,本文详细介绍了customRef()的使用场景、基本用法、功能详解以及最佳实践,包括防抖、异步更新等用例,旨在帮助开发者更好地理解和使用这一强大功能
    2024-09-09
  • vue前端HbuliderEslint实时校验自动修复设置

    vue前端HbuliderEslint实时校验自动修复设置

    这篇文章主要为大家介绍了vue前端中Hbulider中Eslint实时校验自动修复设置操作过程，有需要的朋友可以借鉴参考下希望能够有所帮助
    2021-10-10

最新评论