https://github.com/myokyawhtun/label-edit
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!
https://github.com/myokyawhtun/label-edit
vue vuejs vuejs-components vuejs2
Last synced: 9 months ago
JSON representation
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!
- Host: GitHub
- URL: https://github.com/myokyawhtun/label-edit
- Owner: myokyawhtun
- License: mit
- Created: 2018-04-21T02:12:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-24T02:18:33.000Z (over 2 years ago)
- Last Synced: 2025-03-15T23:05:32.790Z (9 months ago)
- Topics: vue, vuejs, vuejs-components, vuejs2
- Language: Vue
- Homepage:
- Size: 1.36 MB
- Stars: 22
- Watchers: 1
- Forks: 16
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - label-edit - Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks! (UI Components [🔝](#readme))
- awesome-vue - label-edit - Inspired by Trello. Click to show editable input and return the value changes. This is a Vue Component. (Components & Libraries / UI Components)
- awesome-vue-zh - 标签编辑 - 受到Trello的启发. 单击以显示可编辑输入并返回值更改. 这是一个Vue组件. (UI组件 / 形成)
- awesome-vue - label-edit ★8 - Inspired by Trello. Click to show editable input and return the value changes. This is a Vue Component. (UI Components / Form)
- awesome-vue - label-edit - Inspired by Trello. Click to show editable input and return the value changes. This is a Vue Component. (UI Components / Form)
README
# label-edit
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!
## Installation
```
npm install --save label-edit
```
### Module
```js
import LabelEdit from 'label-edit'
```
## Usage
```html
```
### Definition
| 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 |
## Example
```html
Text Box 1 with default text and place holder
```
```js
import LabelEdit from 'label-edit'
export default {
name: 'HelloWorld',
data () {
return {
text: 'Click this text!',
}
},
components: {
LabelEdit,
},
methods: {
textUpdated: function(text){
this.text = text;
},
}
}
```
## Demo
![Gif Demo][demo]
### References
[demo]: https://media.giphy.com/media/PMUxyTGtLN8csmXxFm/giphy.gif