Vue.js的圆形文本计数器 - vue-twitter-counter

Vue.js的圆形文本计数器 - vue-twitter-counter
插件名称 vue-twitter-counter
发布时间 2020年11月30日
插件作者 LucasLeandro1204

一个vue.js组件,用于创建一个圆形进度条,该进度条表示在textarea元素中键入的字符数。

安装和下载:

# NPM
$ npm install vue-twitter-counter --save

用法:

导入文本计数器组件。

import Vue from 'vue';
import VueTwitterCounter from './components/VueTwitterCounter.vue';

创建一个新的Vue应用程序实例。

window.app = new Vue({
  el: '#app',

  components: {
    VueTwitterCounter,
  },

  data () {
    return {
      message: '',
    };
  },

  computed: {
    message_length () {
      return this.message.length;
    },
  },
});

默认道具。

/*
 * The min rest to show the warns.
 */
warnLength: {
  type: Number,
  default: 20,
},
/*
 * The length to be in danger.
 */
dangerAt: {
  type: Number,
  default: 280,
},
/*
 * The current length of whatever you want to.
 */
currentLength: {
  type: Number,
  required: true,
},
/*
 * Underlay counter color.
 */
underlay: {
  type: String,
  default: '#ccd6dd',
  validator: colorValidator,
},
/*
 * Safe color.
 */
safe: {
  type: String,
  default: '#1da1f2',
  validator: colorValidator,
},
/*
 * Warn color.
 */
warn: {
  type: String,
  default: '#ffad1f',
  validator: colorValidator,
},
/*
 * Danger color.
 */
danger: {
  type: String,
  default: '#e0245e',
  validator: colorValidator,
},
/*
 * Round progress circle edges.
 */
round: {
  type: Boolean,
  default: false,
},
/*
 * Animate the progress circle.
 */
animate: {
  type: Boolean,
  default: false,
},
/*
 * The animation speed in ms.
 */
speed: {
  type: Number,
  default: 150,
},