vue-manual-data-masking
Vue2 version of easy-data-masking.
Features
- Input dialog (supporting enter keypress) for entering categories of sensitive data like swear word, person name, home address...
- Display sensitive data been masked when mouse hover.
- 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