element el-input directive數(shù)字

nifhlheimr 發(fā)布于2019-08-23 12:17 / 776人閱讀

摘要：使用自定義指令格式化背景使用開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點(diǎn)，有需要小數(shù)點(diǎn)的使用進(jìn)行控制開發(fā)頁面使用方式為保留幾位小數(shù)因?yàn)橛玫氖堑?，組件外層包著一層所以要使用獲取對其監(jiān)聽失

使用自定義指令格式化el-input

背景

使用element開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點(diǎn)，有需要小數(shù)點(diǎn)的
使用vue directive 進(jìn)行控制

開發(fā)

頁面使用方式 v-numberInt:0="item.first_fee" 0為保留幾位小數(shù)

   
          
          
          
         
     
                
     {{item.additional_amount}}

因?yàn)橛玫氖莈lement 的el-input ，組件input外層包著一層div所以要使用const element = el.getElementsByTagName("input")[0]獲取 input對其監(jiān)聽失焦?當(dāng)輸入的不是數(shù)字時(shí)，失焦后會(huì)變成0，沒有使用directive update方法，比較簡單directives.js

directives.js

Vue.directive("numberInt", {  bind: function(el, binding, vnode) { 
   const element = el.getElementsByTagName("input")[0]  
   const len = binding.arg    // 初始化設(shè)置 
   element.value = Number(element.value ).toFixed(len)    // 失焦時(shí)候格式化
   element.addEventListener("blur", function() { 
    if (isNaN(element.value)) {     
       vnode.data.model.callback(0)    
      } else {     
       vnode.data.model.callback(Number(element.value).toFixed(len)) 
     }   
     }) 
 }})

如果大家有更好的方法希望能留言交流

GPU云服務(wù)器云服務(wù)器 Element Elements element-ui element-ui dialog組件

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98243.html

相關(guān)文章

在vue項(xiàng)目中引用element-ui時(shí) 讓el-input 獲取焦點(diǎn)的方法

摘要：我到現(xiàn)在也沒有搞明白這是為什么，猜測了一下是存才一個(gè)全局變量，當(dāng)我們第一次使獲得焦點(diǎn)以后改變了這個(gè)預(yù)設(shè)變量的值，在失去焦點(diǎn)的時(shí)候并沒有將這個(gè)值重置，所以導(dǎo)致了后面的問題。廢話不多說，下面是當(dāng)同時(shí)使用和的時(shí)候的解決方案。在制作項(xiàng)目的時(shí)候遇到一個(gè)需求，點(diǎn)擊一個(gè)按鈕彈出一個(gè)input輸入框，并讓輸入框獲得焦點(diǎn)，項(xiàng)目中引用了element-ui 在網(wǎng)上查找了很多方法，但是在實(shí)際使用中發(fā)現(xiàn)了一...

ThinkSNS 2019-08-22 16:00 評論0 收藏0
網(wǎng)頁頂部導(dǎo)航欄加強(qiáng)（分為左右兩部分；添加一個(gè)不被污染樣式的搜索框）

摘要：目標(biāo)中間一段空白把導(dǎo)航欄分為左右兩個(gè)部分在導(dǎo)航欄上加上一個(gè)搜索框，但不被的樣式污染。前置本文需要對CSS，Vue，ElementUI有基本的了解。本文以ElementUI提供的導(dǎo)航菜單組件為基礎(chǔ)。本文希望能在此組件基礎(chǔ)上實(shí)現(xiàn)以下內(nèi)容：中間一段空白把導(dǎo)航欄分為左右兩個(gè)部分在導(dǎo)航欄上加上一個(gè)搜索框，但不被 el-menu-item 的樣式污染。先研究清楚ElementUI...

yedf 2019-08-30 15:44 評論0 收藏0
VUE防抖與節(jié)流的最佳解決方案——函數(shù)式組件

摘要：案例持續(xù)觸發(fā)事件時(shí)，并不立即執(zhí)行函數(shù)，當(dāng)毫秒內(nèi)沒有觸發(fā)事件時(shí)，才會(huì)延時(shí)觸發(fā)一次函數(shù)。也以函數(shù)形式暴露普通插槽。這樣的場景組件用函數(shù)式組件是非常方便的。相關(guān)閱讀函數(shù)式組件自定義指令前言有echarts使用經(jīng)驗(yàn)的同學(xué)可能遇到過這樣的場景，在window.onresize事件回調(diào)里觸發(fā)echartsBox.resize()方法來達(dá)到重繪的目的，resize事件是連續(xù)觸發(fā)的這意味著echarts...

OldPanda 2019-05-22 19:08 評論0 收藏0
基于element的表單渲染器 (el-form-renderer)

摘要：基于封裝的表單渲染器，完整繼承了的屬性定義，并進(jìn)行了簡單擴(kuò)展，從而用戶能夠通過使用一段預(yù)設(shè)的數(shù)據(jù)渲染出一個(gè)完整的表單。設(shè)置為可禁用所有原子表單。獲取當(dāng)前表單的值。基于 element-ui 封裝的表單渲染器，完整繼承了 element 的屬性定義，并進(jìn)行了簡單擴(kuò)展，從而用戶能夠通過使用一段預(yù)設(shè)的數(shù)據(jù)渲染出一個(gè)完整的 element 表單。演示地址項(xiàng)目地址 Usage // S...

yiliang 2019-08-22 13:57 評論0 收藏0
詳解Vue3 Composition API優(yōu)雅封裝第三方組件

　　我們時(shí)常會(huì)想在保持第三方組件原有功能（屬性props、事件events、插槽slots、方法methods）的基礎(chǔ)上，這些功能如何優(yōu)化的實(shí)現(xiàn)？　　以Element Plus的el-input為例：　　在封裝一個(gè)MyInput組件，把要使用的屬性props、事件events和插槽slots、方法methods先要依照自己的需求來編寫：　　//MyInput.vue 　　<template&...

3403771864 2022-10-30 10:34 評論0 收藏0