element el-input directive數(shù)字

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

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

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

背景

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

開發(fā)

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

   
          
          
          
         
     
                
     {{item.additional_amount}}

因為用的是element 的el-input ，組件input外層包著一層div所以要使用const element = el.getElementsByTagName("input")[0]獲取 input對其監(jiān)聽失焦?當輸入的不是數(shù)字時，失焦后會變成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    // 初始化設置 
   element.value = Number(element.value ).toFixed(len)    // 失焦時候格式化
   element.addEventListener("blur", function() { 
    if (isNaN(element.value)) {     
       vnode.data.model.callback(0)    
      } else {     
       vnode.data.model.callback(Number(element.value).toFixed(len)) 
     }   
     }) 
 }})

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

云服務器 GPU云服務器 Element Elements element-ui element-ui dialog組件

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

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

相關(guān)文章

在vue項目中引用element-ui時讓el-input 獲取焦點的方法

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

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

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

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

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

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

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

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

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

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