1.0.6 • Published 3 months ago

mu-fake-input v1.0.6

Weekly downloads
-
License
-
Repository
-
Last release
3 months ago

一个伪造的输入框

如同手机中输入验证码的输入框

使用方式:

  1. 首先引入组件 import FakeInput from "mu-fake-input"
  2. 引入样式import "mu-fake-input/style.css";

  3. 定义输入框绑定的值const value = ref("")

  4. 使用组件 <FakeInput v-model="value" />

组件传递的参数有:v-modelquantityconfigtypeinputKeys

  • v-model:输入框绑定的值 - 必填项

  • quantity:生成输入框的数量 - 可选项(默认为 6)

  • config:输入框的配置 - 可选项

  • type:输入框的类型,目前有方形frame和线形line两种 - 可选项(默认为 frame)

  • inputKeys:输入内容的格式,numeric为数字,letter为字母,all为数字与字母 - 可选项(默认为 all)

PropsType {
  quantity?: number | string; // 要渲染方块的数量
  modelValue: string; // v-model绑定的值
  type?: "line" | "frame"; // 输入框样式
  config?: {
    width: number; // 输入框的宽
    height: number; // 输入框的高
    fontSize: number; // 输入字体大小
    spacing: number; // 输入框间距
  };
  inputKeys?: "numeric" | "letter" | "all"; // 输入内容的格式
}
1.0.6

3 months ago

1.0.5

5 months ago

1.0.4

5 months ago

1.0.3

6 months ago

1.0.2

6 months ago

1.0.1

6 months ago

1.0.0

6 months ago