vue3过滤输入框首尾空格

最新推荐文章于 2024-05-01 11:45:00 发布

你的眼睛會笑

最新推荐文章于 2024-05-01 11:45:00 发布

阅读量1.1k

点赞数 2

分类专栏： vue3 文章标签： vue typescript

本文链接：https://blog.csdn.net/weixin_45563734/article/details/132106081

版权

vue3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue3过滤输入框首尾空格

在 directive文件夹下新建 trim.ts 文件

// trim.ts 文件
import { App } from "vue"

function getInput(el: { tagName: string; querySelector: (arg0: string) => any }) {
  let inputEle
  if (el.tagName !== 'INPUT') {
    inputEle = el.querySelector('input')|| el.querySelector('textarea')
  } else {
    inputEle = el
  }
  return inputEle
}
function dispatchEvent(el: { dispatchEvent: (arg0: Event) => void }, type: string) {
  const evt = document.createEvent('HTMLEvents')
  evt.initEvent(type, true, true)
  el.dispatchEvent(evt)
}

// 过滤前后空格的指令 v-trim
export const trim = (app: App<any>) => {
  app.directive('trim', {
    mounted(el: { inputEle: any; _blurHandler: (event: any) => void; _keyHandler: (event: any) => void }) {
      const inputEle = getInput(el)
      const handler = function(event: { target: { value: string } }) {
        const newVal = event.target.value.trim()
        if (event.target.value !== newVal) {
          event.target.value = newVal
          dispatchEvent(inputEle, 'input')
        }
      }
      // 回车后过滤空格(因为输入框可以回车调接口查询，所以这时候单纯的失去焦点过滤不起作用，要对回车键单独做一下处理)
      const keydown = function(event: { keyCode: number; target: { value: string } }) {
        if (event.keyCode === 13) {
          const newVal = event.target.value.trim()
          if (event.target.value !== newVal) {
            event.target.value = newVal
            dispatchEvent(inputEle, 'input')
          }
        }
      }
      el.inputEle = inputEle
      el._blurHandler = handler
      el._keyHandler = keydown
      inputEle.addEventListener('blur', handler)
      inputEle.addEventListener('keydown', keydown)
    },
    unmounted(el: { _blurHandler?: any; _keyHandler?: any; inputEle?: any }) {
      const { inputEle } = el
      inputEle.removeEventListener('blur', el._blurHandler)
      inputEle.removeEventListener('keydown', el._keyHandler)
    }
  })
}

在 directive文件夹下新建 index.ts 文件

// index.ts文件

import type { App } from 'vue';
import {trim} from '/@/directive/trim'
/**
 * 导出指令方法：v-xxx
 * @methods trim去除空格指令，用法：v-trim
 */
export function directive(app: App) {
    // 去除空格
	trim(app);
}

在 main.ts中引入

import { directive } from '/@/directive/index';
const app = createApp(App);
directive(app);
app.mount('#app')

使用

 <el-form-item :label="$t('message.application.table.description')" prop="applicationDescribe">
     <el-input v-trim maxlength="200" show-word-limit v-model="form.applicationDescribe" :rows="2"
         type="textarea" :placeholder="$t('message.application.table.Pleasedescription')" />
 </el-form-item>