Ant?Design-vue?解決input前后空格問題(推薦)
更新時間：2022年10月26日 09:57:32 作者：周家大小姐.
最近做項目遇到這樣一個問題輸入框不允許有前后空格但字符中間可以有空格，怎么解決這個問題呢，接下來小編把ant?Design-vue?解決input前后空格問題的實現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧
需求:輸入框不允許有前后空格但字符中間可以有空格
我這里是封裝成全局自定義指令,如果同學(xué)要用的話根據(jù)自己需求放入對應(yīng)文件即可
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：字節(jié)次序標(biāo)記字符（Byte Order Mark），也就是BOM,它是es5新增的空白符
* \xA0：禁止自動換行空白符，相當(dāng)于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來去除內(nèi)容中的前后空格
<el-input type="textarea" placeholder="請輸入報表名稱" v-model.trim="formData.name" maxlength="50">
到此這篇關(guān)于Ant Design-vue 解決input前后空格問題的文章就介紹到這了,更多相關(guān)ant Design-vue空格input內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue響應(yīng)式更新機制及不使用框架實現(xiàn)簡單的數(shù)據(jù)雙向綁定問題
vue是一款具有響應(yīng)式更新機制的框架，既可以實現(xiàn)單向數(shù)據(jù)流也可以實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue響應(yīng)式更新機制及不使用框架實現(xiàn)簡單的數(shù)據(jù)雙向綁定問題,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Antd的table組件表格的序號自增操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue中使用tinymce，以及插件powerpaste的使用,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue項目熱更新的坑及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
cordova+vue+webapp使用html5獲取地理位置的方法
這篇文章主要介紹了2019-07-07
這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了詳解如何寫出一個利于擴展的vue路由配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了Vue組件之作用域插槽，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
今天小編就為大家分享一篇vue-dplayer 視頻播放器實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11