資訊專欄INFORMATION COLUMN
摘要：在開發(fā)項目的過程中，遇到一個常見的需求，輸入框只能輸入數(shù)字，最開始的時候是這樣寫的后發(fā)現(xiàn)不兼容火狐瀏覽器，于是修改成經(jīng)測試，沒有問題了，由于使用的地方較多，便萌生了封裝一個指令的想法，代碼如下驗證數(shù)字函數(shù)最后在注冊全局指令然后就闊以使用了
在開發(fā)項目的過程中，遇到一個常見的需求，輸入框只能輸入數(shù)字，最開始的時候是這樣寫的
后發(fā)現(xiàn)不兼容火狐瀏覽器，于是修改成
經(jīng)測試，沒有問題了，由于使用的地方較多，便萌生了封裝一個指令的想法，代碼如下
onkeypress.js
import {checkNumber} from "../../utils/util"
export default {
bind: function (el,binding) {
el.onkeypress = function(e){
return checkNumber(e)
}
}
}
驗證數(shù)字函數(shù) util.js
export function checkNumber(e) {
let ev = e || event;
return (/[d]/.test(String.fromCharCode(ev.keyCode || ev.which))) || ev.which === 8
}
index.js
import VueOnkeypress from "./onkeypress.js"
const install = function(Vue) {
Vue.directive("VueOnkeypress", VueOnkeypress)
}
if (window.Vue) {
window.VueOnkeypress = VueOnkeypress
Vue.use(install);
}
VueOnkeypress.install = install
export default VueOnkeypress
最后在main.js注冊全局指令
import VueOnkeypress from "src/directive/onkeypress/index"
Vue.directive("VueOnkeypress", VueOnkeypress);
然后就闊以使用了
end
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95639.html
摘要：指令綁定的前一個值，僅在和鉤子中可用。字符串形式的指令表達式。上一個虛擬節(jié)點在上可根據(jù)需要定義一些鉤子函數(shù)只調(diào)用一次，指令第一次綁定到元素時調(diào)用。指令的值可能發(fā)生了改變，也可能沒有。 前文 先來bb一堆廢話哈哈.. 用vue做項目也有一年多了.除了用別人的插件之外.自己也沒嘗試去封裝指令插件之類的東西來用. 剛好最近在項目中遇到一個問題.(快速點擊按鈕多次觸發(fā)多...
摘要：原文的第四篇文章中的一個重要元素在上一篇文章中沒有涉及，使用高階組件中的常用模式可以將組件中的公用邏輯分離出來。同時，因為組件的模板并不存在任何的變動，我們可以將它轉(zhuǎn)化為一個指令，這樣我們可以以更加靈活的方式來使用它。 03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent...
流行框架 簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團隊開發(fā)維護，能夠快速構(gòu)建單頁web應(yīng)用，化繁為簡 無論是angularjs還是jQuery都是用原生JS封裝的 庫：對代碼進行封裝，調(diào)用封裝的方法，簡化操作 傳統(tǒng)方式是用get方式獲取元素，然后點方法 jQuery庫實現(xiàn)了對獲取方式的封裝，對方法的封裝 框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實現(xiàn)響應(yīng)的功能...
摘要：原文這個系列記錄我在一年開發(fā)中總結(jié)的一些經(jīng)驗和技巧。利用提升性能是新增的特性，可以凍結(jié)一個對象，防止對象被修改。僅在不得已的時候使用。一個指令應(yīng)該表示一個獨立的功能，可以為不同的標(biāo)簽和組件提供相同的功能。 原文： https://github.com/Coffcer/Bl... 這個系列記錄我在一年vue開發(fā)中總結(jié)的一些經(jīng)驗和技巧。 利用Object.freeze()提升性能 Obje...
閱讀 2303·2021-11-24 09:38
閱讀 2166·2021-11-22 14:44
閱讀 1162·2021-07-29 13:48
閱讀 2622·2019-08-29 13:20
閱讀 1123·2019-08-29 11:08
閱讀 2065·2019-08-26 10:58
閱讀 1270·2019-08-26 10:55
閱讀 3165·2019-08-26 10:39
