封裝 v-vue-onkeypress 指令

codeGoogle 發布于2019-08-22 18:14 / 2336人閱讀

摘要：在開發項目的過程中，遇到一個常見的需求，輸入框只能輸入數字，最開始的時候是這樣寫的后發現不兼容火狐瀏覽器，于是修改成經測試，沒有問題了，由于使用的地方較多，便萌生了封裝一個指令的想法，代碼如下驗證數字函數最后在注冊全局指令然后就闊以使用了

在開發項目的過程中，遇到一個常見的需求，輸入框只能輸入數字，最開始的時候是這樣寫的

后發現不兼容火狐瀏覽器，于是修改成

經測試，沒有問題了，由于使用的地方較多，便萌生了封裝一個指令的想法，代碼如下

onkeypress.js

import {checkNumber} from "../../utils/util"

export default {
  bind: function (el,binding) {
    el.onkeypress = function(e){
      return checkNumber(e)
    }
  }
}

驗證數字函數 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

GPU云服務器云服務器封裝成封裝類封裝函數函數封裝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95639.html

每個人都能實現的vue自定義指令

摘要：指令綁定的前一個值，僅在和鉤子中可用。字符串形式的指令表達式。上一個虛擬節點在上可根據需要定義一些鉤子函數只調用一次，指令第一次綁定到元素時調用。指令的值可能發生了改變，也可能沒有。前文先來bb一堆廢話哈哈.. 用vue做項目也有一年多了.除了用別人的插件之外.自己也沒嘗試去封裝指令插件之類的東西來用. 剛好最近在項目中遇到一個問題.(快速點擊按鈕多次觸發多...

NickZhou 2019-08-21 18:23 評論0 收藏0
高級 Angular 組件模式 (3b)

摘要：原文的第四篇文章中的一個重要元素在上一篇文章中沒有涉及，使用高階組件中的常用模式可以將組件中的公用邏輯分離出來。同時，因為組件的模板并不存在任何的變動，我們可以將它轉化為一個指令，這樣我們可以以更加靈活的方式來使用它。 03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent...

wums 2019-08-21 18:46 評論0 收藏0
AngularJS簡述

流行框架簡介 angularjs是一款非常優秀的前端高級JS框架，由谷歌團隊開發維護，能夠快速構建單頁web應用，化繁為簡無論是angularjs還是jQuery都是用原生JS封裝的庫：對代碼進行封裝，調用封裝的方法，簡化操作傳統方式是用get方式獲取元素，然后點方法 jQuery庫實現了對獲取方式的封裝，對方法的封裝框架：提供代碼書寫規則，按照規則去寫代碼，框架會幫我們實現響應的功能...

Jason 2019-08-23 11:25 評論0 收藏0
vue 實踐心得和技巧（一）

摘要：原文這個系列記錄我在一年開發中總結的一些經驗和技巧。利用提升性能是新增的特性，可以凍結一個對象，防止對象被修改。僅在不得已的時候使用。一個指令應該表示一個獨立的功能，可以為不同的標簽和組件提供相同的功能。原文： https://github.com/Coffcer/Bl... 這個系列記錄我在一年vue開發中總結的一些經驗和技巧。利用Object.freeze()提升性能 Obje...

X1nFLY 2019-08-22 10:35 評論0 收藏0