0.1.14 • Published 2 years ago
vue-manual-data-masking v0.1.14
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-maskingHow 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