Category: Form

Circular Text Counter For Vue.js

A vue.js component to create a circular progress bar that represents the number of characters typed in a textarea element. Usage: Import the text counter¬†component. import Vue from ‘vue’; import VueTwitterCounter from ‘./components/VueTwitterCounter.vue’; Create a new Vue app instance. window.app = new Vue({ el: ‘#app’, components: { VueTwitterCounter, }, data () { return { message: ”, }; }, computed: { message_length () { return this.message.length; }, }, }); Default props. /* * The min rest to show the warns. */ warnLength: { type: Number, default: 20, }, /* * The length to be in danger. */ dangerAt: { type: Number,