美文网首页
vue el-input-number千分符指令

vue el-input-number千分符指令

作者: 辉色星空下 | 来源:发表于2023-07-27 15:28 被阅读0次

聚焦时正常显示,失焦时千分符显示

Vue.directive("thousand", {
  // 被绑定元素插入父节点时调用
  inserted: function(el) {
    // 获取input节点
    if (el.tagName.toLocaleUpperCase() !== "INPUT") {
      el = el.getElementsByTagName("input")[0];
    }
    // 千分位
    el.value = parseFloat(el.value).toLocaleString("zh", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });
    // 聚焦转化为数字格式(去除千分位)
    el.onfocus = e => {
      let a = el.value.replace(/,/g, ""); //去除千分号的','
      el.value = parseFloat(a).toFixed(2);
    };
    el.onblur = e => {
      el.value = parseFloat(el.value).toLocaleString("zh", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
    };
  }
});

相关文章

  • vue指令概览

    大纲 1、什么是vue指令2、向指令中传入参数3、指令中带入修饰符4、指令的缩写5、常见的vue指令5.1、v-m...

  • vue指令概览

    原文 博客原文 大纲 1、什么是vue指令2、向指令中传入参数3、指令中带入修饰符4、指令的缩写5、常见的vue指...

  • 浮点类型加千分符和还原为浮点类型

    浮点类型加千分符 去掉千分符,变为浮点类型

  • vue事件、指令、钩子

    vue事件、指令、钩子 vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture:捕...

  • Vue-day3

    Vue常用指令 修饰符 表单修饰符 v-model.lazy:change事件,失去焦点才改变.number ①限...

  • 实例学习vue.js目录

    目录 入门篇 初识vue vue基础指令 vue实例:标语大作战 事件修饰符 双向数据绑定 使用v-for遍历数据...

  • Vue 列表渲染

    Vue 使用 v-for 指令渲染一组数据 渲染数组 渲染对象 在 v-for 指令中可以使用 of 分隔符替换 ...

  • Vue-自定义指令

    一、自定义全局按键修饰符 二、使用 Vue.directive()定义全局的指令其中:参数1——指令的名称,注意:...

  • Vue基础语法2

    Vue基础语法2 修饰符 修饰符是由点开头的指令后置来表示 事件修饰符 在时间处理程序中用event.prentD...

  • Vue 指令、修饰符

    指令 Directive 以 v- 开头的东西就是指令 语法 v-指令名:参数 = 值 , 如 v-on: cli...

网友评论

      本文标题:vue el-input-number千分符指令

      本文链接:https://www.haomeiwen.com/subject/wlnlpdtx.html