vue-manual-data-masking

vue-manual-data-masking

Vue2 version of easy-data-masking.

Features

1. Input dialog (supporting enter keypress) for entering categories of sensitive data like swear word, person name, home address...
2. Display sensitive data been masked when mouse hover.
3. Hide sensitive data by using characters like "●" and "*".

Demo

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	Data been masked e.g. [{ content: "080080080", category: "phone number", start: 0, end: 5 }]	Array	true	[]
text	text	String	true
maskingTextColor	color of masking text	String	false	"#35495e"
maskingBgColor	color of masking background	String	false	"#41b883"
maxHeight	max height of data masking container	Number or Null	false	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