npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

v-limit-input

v0.0.32

Published

针对数字处理的vue指令包

Downloads

1

Readme

v-limitNumber

以下是会面临的一些场景化的思考, 所以在做指令功能健全以及测试, 还有易用性上, 会存在取舍

功能 > 易用性 > 测试

  • 有1个修饰符, 就是整数 , 可以是正整数, 可以是负整数, 可以是0
  • 有2个修饰符, 就是带小数的
  • 3个修饰符, 就是标志正数还是负数
  • 参数为数字, 值为正则, 就是显示 [位数], 规则替换为正则
  • 没有参数, 没有修饰符, 没有表达式值, 就什么都不做
// 参数int 限制5位整数
v-limitNumber:5.+

// 3位整数, 2位小数
v-limitNumber.+.3.2

// 正则 - 自定义强, 限制位数 10位
v-limit-text:10="/\D/g"

feature

v-limit-text-int:5

限制输入的内容为正整数 , 后面的参数可选, 如果传递,则只能输入对应的maxlenth 长度

注意事项

同时, 对于 input等文本域, 原生属性 maxlength='' , 如果同时设置 原生属性以及传递参数, 则会以原生属性为准

<input v-limit-text-int:5  maxlength='10'/>

<el-input v-limit-text-int:5  maxlength='10'/>

则 限制长度为 10

注意事项:

如果使用element-ui 的 el-input @input事件,同时也对 value做了二次数据处理, 会存在一个问题, 请使用 native修饰符

<el-input v-limit-text-int:5 @input.native='handleCurrentVal($event)' />

使用 natiev修饰符,则 $event是原生的 event 对象, 不使用 native修饰符, 则handleCurrentVal 默认的第一个参数直接是 value

export default {
  methods: {
    handleCurrentVal(event) {
      console.log('value -->', event.target.value)
    }
  }
}

v-limit-text-float:5 =

限制输入浮点数

简单用法

限定总长度为10位的浮点数

<input
  v-model='testValue'
  v-limit-text-float:10
/>

完整配置用法

<input
  v-model='testValue'
  v-limit-text-float='{unit: "-", decimal: 2, length: 10, fill: false}'
/>

限制输入,总长度为10位的「负」浮点数, 且保留2位小数点, 且不主动补0

<input
  v-model='testValue'
  v-limit-text-float='{ decimal: 4, length: 8, fill: true}'
/>

限制输入,总长度为8为浮点数,且自动补0, 则意味着,整数最多输入 8-1-4=3 位,小数输入4位,小数点1位

fill 为false

1234.  // 会形成  1234
1234.1 // 会形成  1234.1

fill为true

1234.  // 会形成  1234.00
1234.1 // 会形成  1234.10

| 参数 | 类型 | 默认值 | 可选值 | 描述 | |-----------|-------------|--------|--------------|---------------------------------------------------------------------------------------------------------| | unit | String/null | + | - ,null, + | 表示是正整数还是负整数, 默认是正数, 可以支持负数, 或者null, 表示正数负数都可以 | | decimal | int | 2 | | 小数点位数, 参数为正整数 | | length | int | 无 | | 总长度, 默认不限定, 参数为正整数 | | toDecimal | boolean | false | | 默认是处理完以后, 值是字符串,设置为 ttue. 转换为数字类型 | | arg | int | 无 | | arg 指令的参数, 实质就是和length 是一样的 v-limit-text-float:5 等价于 v-limit-text-float="{length: 5}" |

注意事项
  • 对于 input等文本域, 原生属性 maxlength='' , 如果同时设置 原生属性以及传递参数, 则会以原生属性为准

demo

-0.22
-0.00
-1
2