A vue2 component for manual data masking

Overview

vue-manual-data-masking

Vue2 version of easy-data-masking.

Features

1. Configurable categories of sensitive data like swear word, person name, home address...

  1. Providing input (supporting enter keypress) to enter categories of sensitive data like swear word, person name, home address...
  2. Showing sensitive data been masked when mouse hover.
  3. Replacing sensitive data by using characters "●" and "*".

Demo

Try!

Installation

npm install --save vue-manual-data-masking

How to use

import dataMasking from "vue-manual-data-masking";
">
<data-masking v-model="dataMasked" :text="text" @afterMasking="afterMasking" />

Options

Property Description Type Required Default
v-model sensitive data been masked
e.g.
[{ content: "080080080", category: "phone number", start: 0, end: 5 }]
Array yes []
text text String yes
maskingTextColor color of masking text String no "#35495e"
maskingBgColor color of masking background String no "#41b883"
maxHeight max height of data masking container Number or Null no null

Events

afterMasking event will be emitted when new sensitive data been masked. textAfterMasking can be used inside of the callback function registered in advance.

Build Setup

# install dependencies
npm install
# serve with hot reload at localhost:8888
npm run serve
# build for production with minification
npm run build
You might also like...
A simple, customization star rating component for your vue3 projects

A simple, customization star rating component for your vue3 projects

A versetile tag input component built with Vue 3 Composition API
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

A Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Vue-money-format: A lightweight display component for localized currency display

This is a lightweight display component for localized currency display. It has no dependencies other than Vue. It supports both float and integer input, and can adjust for values stored as decimal-based subunits, such as cents, dirham, groszy, etc. Storing currency values in terms of the subunit allows you to store integers, rather than floating numbers, which ensures accuracy.

Vue Currency Input component allows an easy input of currency formatted numbers
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (curren

Vue Cleave component is based on cleave.js for Vue

Vue Cleave component is based on cleave.js for Vue

A tags input component for VueJS

A tags input component for VueJS

Releases(0.0.8)
Owner
HC
HC
A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Ronald Jerez 139 Sep 14, 2022
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Obeta 66 Jan 10, 2022
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Sep 27, 2022
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jose Quintana 14 Jul 24, 2022
Vue.js component for Cleave.js :keyboard:

Vue Cleave Component Vue.js component for Cleave.js Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 2.x 2.x 3.x 3.x master F

Ankur Kumar 282 Aug 30, 2022
Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Ankur Kumar 19 Mar 4, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022