Skip to content

Cobertos/vue-input-contenteditable

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

build status twitter twitter twitter Tidelift - For Enterprise

vue-input-contenteditable

Make beautiful inputs without the restrictions of input[type='text']. A Vue component wrapper for contenteditable with all the features you expect:

  • v-model
  • placeholder
  • maxlength

Installation

npm i vue-input-contenteditable

Usage

Below is an example of the component in use in a Single File Component. After importing it, make sure to add it to your components property and then it will be available in your template.

<template>
    <input-contenteditable
        v-model="myModel"
        _is="p"
        :placeholder="myPlaceHolder"
        :maxlength="25" />
</template>

<script>
import InputContenteditable from 'vue-input-contenteditable';

export default {
    components: {
        'input-contenteditable': InputContenteditable
    },
    data: {
        myModel: '',
        myPlaceholder: 'Type your data here...'
    }
};
</script>

This uses the standard @vue/cli export recommendations. You can import the source .vue component directly by importing vue-input-contenteditable/sfc or use the component from a script tag with unpkg.

For Enterprise

The maintainers of thousands of packages (including me! :3) are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

About

The same features you expect from `<input type="text">` but in a `contenteditable` Vue component

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published