vue数字输入框

news2025/6/19 3:14:21

目录

 1.emitter.JS

function broadcast (componentName, eventName, params) {
  this.$children.forEach(child => {
    var name = child.$options.componentName
    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params))
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]))
    }
  })
}

export default {
  methods: {
    dispatch (componentName, eventName, params) {
      var parent = this.$parent || this.$root
      var name = parent.$options.componentName

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent
        if (parent) {
          name = parent.$options.componentName
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params))
      }
    },
    broadcast (componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params)
    }
  }
}

2.number.vue

<template>
  <div>
    <div class="el-number-input-wrap el-input" :class="{'is-disabled': this.inputDisabled}">
      <input
        :type="inputPositive"
        class="el-input__inner"
        :id="elementId"
        :class="inputClasses"
        :disabled="disabled"
        autoComplete="off"
        spellcheck="false"
        :autofocus="autofocus"
        @focus="handleFocus"
        @blur="handleBlur"
        @input="handleInput"
        @change="change"
        :readonly="readonly || !editable"
        :name="name"
        :value="formatterValue"
        :placeholder="placeholder"/>
    </div>
  </div>
</template>
<script>
import emitter from './emitter.js'
export default {
  name: 'Number',
  componentName: 'Number',
  mixins: [ emitter ],
  inheritAttrs: false,
  inject: {
    unForm: {
      default: ''
    },
    unFormItem: {
      default: ''
    }
  },
  props: {
    value: {
      type: [String, Number],
      default: null
    },
    max: {
      type: Number,
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    step: {
      type: Number,
      default: 1
    },
    activeChange: {
      type: Boolean,
      default: true
    },
    isnum: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: true
    },
    name: {
      type: String
    },
    precision: {
      type: Number
    },
    elementId: {
      type: String
    },
    formatter: {
      type: F

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/941295.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode 503. 下一个更大元素 II

2023.8.28 本题类似于下一个更大元素I &#xff0c;区别就是数组变成循环的了&#xff0c;可以将nums数组先double一下&#xff0c;如&#xff1a;{1&#xff0c;2&#xff0c;1}变成{1&#xff0c;2&#xff0c;1&#xff0c;1&#xff0c;2&#xff0c;1}&#xff0c;再用单调…

Spring -学习笔记

文章目录 1. Spring介绍1.1 Spring的体系结构 2.DI/Ioc&#xff08;依赖注入/控制反转&#xff09;2.1 依赖及注解说明1. lombok2. spring-context 2.2 Bean和Spring 上下文的配置方式方式1&#xff1a;基于xml文件的配置方法2&#xff1a; 基于java注解配置bean方法3&#xff…

建筑行业,隐藏这招你不知道的技法!

智慧工地作为现代建筑领域的一项创新概念&#xff0c;通过融合先进的信息技术和物联网技术&#xff0c;为传统的建筑工地带来了全新的变革和优化。 智慧工地为建筑行业注入了数字化和智能化的元素&#xff0c;不仅提升了施工效率和管理水平&#xff0c;还在安全监控、资源利用、…

(LaTeX)换行、换页、断字、字样、字号

通常 LaTeX 会自动换行、换页。用户也可以用 \\ 或 \newline 来强制换行&#xff1b; 用 \newpage 来强制换页。一般情况下 LATEX 会尽量均匀地断字&#xff08;Hyphenate&#xff09;&#xff0c;使得每一行的字间距分布整齐。 但有时我们也需要显式指明断字位置&#xff0c…

【计算机基础】一文搞清楚什么是线程/进程/协程

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

AI智能问答最具体的介绍在这里!

AI智能问答是一种基于人工智能技术的问答系统&#xff0c;它可以通过分析和理解用户提出的问题&#xff0c;然后从大量的知识库、文档或数据中提取相关信息&#xff0c;来生成一个准确的答案。以下是AI智能问答的一些具体介绍&#xff0c;希望可以帮助到大家更了解AI智能问答。…

骨传导耳机对骨头好不好?骨传导耳机对耳朵有影响吗

骨传导耳机是通过将声音以振动的形式传递到颅骨&#xff0c;再由内耳感知而不需要通过传统的声音传导路径&#xff08;即耳道和鼓膜&#xff09;。由于不直接接触耳朵或耳道&#xff0c;骨传导耳机在一定程度上减少了对耳部的压力和刺激&#xff0c;因此对骨头相比传统耳机来说…

leetcode875. 爱吃香蕉的珂珂(java)

二分查找 爱吃香蕉的珂珂二分查找 上期经典 爱吃香蕉的珂珂 难度 - 中等 LC - 875.爱吃香蕉的珂珂 珂珂喜欢吃香蕉。这里有 n 堆香蕉&#xff0c;第 i 堆中有 piles[i] 根香蕉。警卫已经离开了&#xff0c;将在 h 小时后回来。 珂珂可以决定她吃香蕉的速度 k &#xff08;单位&…

automake安装及使用

安装 sudo apt install automake实例 源文件 以一个简单的例子为例&#xff1a; add .c #include "add.h"int add(int a, int b){return a b; }add.h int add(int a, int b);main.c #include <stdio.h> #include "add.h"int main() {int a …

图像处理 信号处理板 设计原理图:367-基于zynq XC7Z100 FMC接口通用计算平台

基于zynq XC7Z100 FMC接口通用计算平台 一、板卡概述 板卡由SoC XC7Z100-2FFG900I芯片来完成卡主控及数字信号处理&#xff0c;XC7Z100内部集成了两个ARM Cortex-A9核和一个kintex 7的FPGA&#xff0c;通过PL端FPGA扩展FMC、光纤、IO等接口&#xff0c;PS端ARM扩展网络、USB、R…

深度适配?华为鸿蒙OS智能座舱酷狗音乐车载版5.0,车内尽享K歌

此次华为 HarmonyOS 智能座舱酷狗音乐车载版 5.0 升级为搭载了 HarmonyOS 车机系统的多款车型带来了更丰富的功能和互动体验。新版本的升级内容主要包括创新交互设计和高品质音质两个方面。 在创新交互设计方面&#xff0c;华为 HarmonyOS 智能座舱酷狗音乐车载版 5.0 深度适配…

pandas读取excel,再写入excel

需求是这样的&#xff0c;从一个表读取数据&#xff0c;然后每次执行创建一个新表将值写入 读取这个表 写入到这个表 分别对应的是e、h列数据&#xff0c;代码如下&#xff1a; import pandas as pd import openpyxl import datetime dfpd.read_excel(rC:\Users\admin\Deskt…

法律小程序开发:让法律咨询更便捷

在现代社会&#xff0c;法律咨询服务越来越受到人们的重视和需求。为了方便用户预约法律咨询&#xff0c;很多律所都开始使用小程序来提供在线预约服务。那么&#xff0c;如何制作一款律所预约小程序呢&#xff1f; 首先&#xff0c;我们可以选择乔拓云网作为制作小程序的平台。…

spring小记

Spring是轻量级的开源的javaEE框架目的&#xff1a;解决企业应用开发的复杂性 Spring有两个核心部分&#xff1a;IOC和AOP <1>IOC&#xff1a;控制反转&#xff0c;把创建的对象过程交给Spring进行管理 <2>AOP&#xff1a;面向切面&#xff0c;不修改源代码进行…

C#搭建WebSocket服务实现通讯

在学习使用websocket之前我们先了解一下websocket&#xff1a; WebSocket是一种在单个TCP连接上进行全双工通信的通信协议。与HTTP协议不同&#xff0c;它允许服务器主动向客户端发送数据&#xff0c;而不需要客户端明确地请求。这使得WebSocket非常适合需要实时或持续通信的应…

go gin 参数绑定常用验证器

https://pkg.go.dev/github.com/go-playground/validator/v10#readme-baked-in-validations min 最小max 最大len 长度限制gt 大于eq 等于ne 不等于eqfield 与某个字段值一样nefield 与某个字段值不一样 package mainimport ("net/http""github.com/gin-gonic…

无锁并发:探秘CAS机制的魔力

&#x1f60a; 作者&#xff1a; 一恍过去 &#x1f496; 主页&#xff1a; https://blog.csdn.net/zhuocailing3390 &#x1f38a; 社区&#xff1a; Java技术栈交流 &#x1f389; 主题&#xff1a; 无锁并发&#xff1a;探秘CAS机制的魔力 ⏱️ 创作时间&#xff1a; 2…

React 生命周期新旧对比

前言 React16.4版本之后使用了新的生命周期&#xff0c;它使用了一些新的生命周期钩子&#xff08;getDerivedStateFromProps、getSnapshotBeforeUpdate&#xff09;&#xff0c;并且即将废弃老版的3个生命周期钩子&#xff08;componentWillMount、componentWillReceiveProps…

中国社科院与美国杜兰大学金融管理硕士——创造职业生涯的转折点

作为金融领域从业人员&#xff0c;时刻都在关注行业最新资讯是非常有必要的&#xff0c;只有金融业的前沿讯息&#xff0c;才能防范于未然&#xff0c;紧跟时代脚步。针对在职的你&#xff0c;如何利用业余时间让自己实现质的飞跃你&#xff1f;中国社科院与美国杜兰大学金融管…

门禁系统忘记登入密码,现在更换电脑如何迁移旧电脑门禁系统的数据

环境&#xff1a; ivms-4200 v3.10.0.6_c 问题描述&#xff1a; 门禁系统忘记登入密码,现在更换电脑如何迁移旧电脑门禁系统的数据&#xff0c;旧电脑记住密码&#xff0c;忘了密码和密保了 解决方案&#xff1a; 1.前往海康官网下载4200客户端&#xff0c;在新电脑上安装 …