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 maskede.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