vue-manual-data-masking

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