Click to show input text box Vue Component ... inspired by Trello (Originally developed by myokyawhtun)
npm install vue-label-editBase code by https://github.com/myokyawhtun/label-edit
Pull requests are welcomed on this repo to make this better.
npm install --save vue-label-edit
$3
js
import LabelEdit from 'vue-label-edit'
`
Usage
html
`$3
| Props | Description |
| --------- |:----- |
| :text | default value for label edit |
| v-on:text-updated-blur | callback function to capture the value changes of the input text when text lost its focus |
| v-on:text-updated-enter | callback function to capture the value changes of the input text when user pressed enter |
| placeholder | (optional) placeholder for empty label edit value |
| name | (optional) unique name/identifier for the label when you want to easily track edit value input from many rendered in page |
Example
html
Text Box 1 with default text and place holder
`js
`$3
html
Text Box 1 with default text and place holder
`js
``[demo]: https://media.giphy.com/media/PMUxyTGtLN8csmXxFm/giphy.gif