亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

封裝 v-vue-onkeypress 指令

codeGoogle / 2388人閱讀

摘要：在開(kāi)發(fā)項(xiàng)目的過(guò)程中，遇到一個(gè)常見(jiàn)的需求，輸入框只能輸入數(shù)字，最開(kāi)始的時(shí)候是這樣寫(xiě)的后發(fā)現(xiàn)不兼容火狐瀏覽器，于是修改成經(jīng)測(cè)試，沒(méi)有問(wèn)題了，由于使用的地方較多，便萌生了封裝一個(gè)指令的想法，代碼如下驗(yàn)證數(shù)字函數(shù)最后在注冊(cè)全局指令然后就闊以使用了

在開(kāi)發(fā)項(xiàng)目的過(guò)程中，遇到一個(gè)常見(jiàn)的需求，輸入框只能輸入數(shù)字，最開(kāi)始的時(shí)候是這樣寫(xiě)的

后發(fā)現(xiàn)不兼容火狐瀏覽器，于是修改成

經(jīng)測(cè)試，沒(méi)有問(wèn)題了，由于使用的地方較多，便萌生了封裝一個(gè)指令的想法，代碼如下

onkeypress.js

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

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

驗(yàn)證數(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注冊(cè)全局指令

import VueOnkeypress from "src/directive/onkeypress/index"


Vue.directive("VueOnkeypress", VueOnkeypress);

然后就闊以使用了

end

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95639.html

相關(guān)文章

  • 每個(gè)人都能實(shí)現(xiàn)的vue自定義指令

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

    NickZhou 評(píng)論0 收藏0

  • 高級(jí) Angular 組件模式 (3b)

    摘要：原文的第四篇文章中的一個(gè)重要元素在上一篇文章中沒(méi)有涉及，使用高階組件中的常用模式可以將組件中的公用邏輯分離出來(lái)。同時(shí)，因?yàn)榻M件的模板并不存在任何的變動(dòng)，我們可以將它轉(zhuǎn)化為一個(gè)指令，這樣我們可以以更加靈活的方式來(lái)使用它。 03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent...

    wums 評(píng)論0 收藏0

  • AngularJS簡(jiǎn)述

    流行框架 簡(jiǎn)介 angularjs是一款非常優(yōu)秀的前端高級(jí)JS框架，由谷歌團(tuán)隊(duì)開(kāi)發(fā)維護(hù)，能夠快速構(gòu)建單頁(yè)web應(yīng)用，化繁為簡(jiǎn) 無(wú)論是angularjs還是jQuery都是用原生JS封裝的 庫(kù)：對(duì)代碼進(jìn)行封裝，調(diào)用封裝的方法，簡(jiǎn)化操作 傳統(tǒng)方式是用get方式獲取元素，然后點(diǎn)方法 jQuery庫(kù)實(shí)現(xiàn)了對(duì)獲取方式的封裝，對(duì)方法的封裝 框架：提供代碼書(shū)寫(xiě)規(guī)則，按照規(guī)則去寫(xiě)代碼，框架會(huì)幫我們實(shí)現(xiàn)響應(yīng)的功能...

    Jason 評(píng)論0 收藏0

  • vue 實(shí)踐心得和技巧（一）

    摘要：原文這個(gè)系列記錄我在一年開(kāi)發(fā)中總結(jié)的一些經(jīng)驗(yàn)和技巧。利用提升性能是新增的特性，可以凍結(jié)一個(gè)對(duì)象，防止對(duì)象被修改。僅在不得已的時(shí)候使用。一個(gè)指令應(yīng)該表示一個(gè)獨(dú)立的功能，可以為不同的標(biāo)簽和組件提供相同的功能。 原文： https://github.com/Coffcer/Bl... 這個(gè)系列記錄我在一年vue開(kāi)發(fā)中總結(jié)的一些經(jīng)驗(yàn)和技巧。 利用Object.freeze()提升性能 Obje...

    X1nFLY 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<