element el-input directive数字

nifhlheimr 发布于2019-08-23 12:17 / 681人阅读

摘要：使用自定义指令格式化背景使用开发的过程中遇到循环的数据只能输入数字，并且有不要小数点，有需要小数点的使用进行控制开发页面使用方式为保留几位小数因为用的是的，组件外层包着一层所以要使用获取对其监听失

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

背景

使用element开发的过程中遇到循环的数据只能输入数字，并且有不要小数点，有需要小数点的
使用vue directive 进行控制

开发

页面使用方式 v-numberInt:0="item.first_fee" 0为保留几位小数

   
          
          
          
         
     
                
     {{item.additional_amount}}

因为用的是element 的el-input ，组件input外层包着一层div所以要使用const element = el.getElementsByTagName("input")[0]获取 input对其监听失焦当输入的不是数字时，失焦后会变成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组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98243.html

在vue项目中引用element-ui时让el-input 获取焦点的方法

摘要：我到现在也没有搞明白这是为什么，猜测了一下是存才一个全局变量，当我们第一次使获得焦点以后改变了这个预设变量的值，在失去焦点的时候并没有将这个值重置，所以导致了后面的问题。废话不多说，下面是当同时使用和的时候的解决方案。在制作项目的时候遇到一个需求，点击一个按钮弹出一个input输入框，并让输入框获得焦点，项目中引用了element-ui 在网上查找了很多方法，但是在实际使用中发现了一...

ThinkSNS 2019-08-22 16:00 评论0 收藏0
网页顶部导航栏加强（分为左右两部分；添加一个不被污染样式的搜索框）

摘要：目标中间一段空白把导航栏分为左右两个部分在导航栏上加上一个搜索框，但不被的样式污染。前置本文需要对CSS，Vue，ElementUI有基本的了解。本文以ElementUI提供的导航菜单组件为基础。本文希望能在此组件基础上实现以下内容：中间一段空白把导航栏分为左右两个部分在导航栏上加上一个搜索框，但不被 el-menu-item 的样式污染。先研究清楚ElementUI...

yedf 2019-08-30 15:44 评论0 收藏0
VUE防抖与节流的最佳解决方案——函数式组件

摘要：案例持续触发事件时，并不立即执行函数，当毫秒内没有触发事件时，才会延时触发一次函数。也以函数形式暴露普通插槽。这样的场景组件用函数式组件是非常方便的。相关阅读函数式组件自定义指令前言有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts...

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

摘要：基于封装的表单渲染器，完整继承了的属性定义，并进行了简单扩展，从而用户能够通过使用一段预设的数据渲染出一个完整的表单。设置为可禁用所有原子表单。获取当前表单的值。基于 element-ui 封装的表单渲染器，完整继承了 element 的属性定义，并进行了简单扩展，从而用户能够通过使用一段预设的数据渲染出一个完整的 element 表单。演示地址项目地址 Usage // S...

yiliang 2019-08-22 13:57 评论0 收藏0
详解Vue3 Composition API优雅封装第三方组件

　　我们时常会想在保持第三方组件原有功能（属性props、事件events、插槽slots、方法methods）的基础上，这些功能如何优化的实现？　　以Element Plus的el-input为例：　　在封装一个MyInput组件，把要使用的属性props、事件events和插槽slots、方法methods先要依照自己的需求来编写：　　//MyInput.vue 　　<template&...

3403771864 2022-10-30 10:34 评论0 收藏0