根据输入的最大长度更新进度条答案

【问题标题】：Update Progress Bar based on max length of input根据输入的最大长度更新进度条
【发布时间】：2019-07-30 22:09:33
【问题描述】：

所以我正在构建一个表单，表单中的一个字段需要限制在一定长度。

然后，我需要一个简单的进度条，它显示用户距离超过输入字段最大长度的距离。因此，假设输入的上限为 50 个字符。当用户在输入中点击 25 个字符时，进度条应该在 50%。

我已经尝试使用以下代码，但我不确定如何根据按键或最大字符来执行此操作。

类似于我所追求的东西：

Vue 代码：

Vue.component('count-fieldtype', {
    mixins: [Fieldtype],
    template: `
        <div>
            <input type="text" class="form-control type-text mb-2" placeholder="" :maxlength="max" v-model="text" />
            <small class="help-block">You have: <strong><span v-text="(max - text.length)"></span></strong> characters left.</small>
            <progress max="100" :value="calculatePercentage(value)" id="progress"></progress>
        </div>
    `,
    methods: {
        calculatePercentage(value) {
            let contentLentg = handleKeyUp();
            return 50;
        }
    },
    data: function() {
        return {
            max: 50,
            text: ''
        };
    },
});

任何帮助将不胜感激！

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

你应该使用计算属性来计算进度https://vuejs.org/v2/guide/computed.html

new Vue({
  el: "#app",
  data() {
    return {
      text: '',
      max: 150
    }
  },
  computed: {
  	progress() {
      return this.text.length / this.max * 100
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
  <div>
    <input type="text" class="form-control type-text mb-2" placeholder="" :maxlength="max" v-model="text" />
    <small class="help-block">You have: <strong><span v-text="(max - text.length)"></span></strong> characters left.</small>
    <progress max="100" :value="progress" id="progress"></progress>
  </div>
</div>

【讨论】：

你让我在几秒钟内完成了 :)
谢谢你，Emīls，就像一个魅力。斯蒂芬，谢谢你几乎评论哈哈！
我们应该有一些“另一位专家正在输入...”指示器。 :D
不是专家，但 +1 ：D

【解决方案2】：

您可能不需要检查按键事件。文本长度的计算属性可用于映射进度条。

template: `
    <div>
        <input type="text" class="form-control type-text mb-2" placeholder="" :maxlength="max" v-model="text" />
        <small class="help-block">You have: <strong><span v-text="(max - text.length)"></span></strong> characters left.</small>
        <progress max="100" :value="progress" id="progress"></progress>
    </div>
`,
computed: {
    progress: function(){
      return Math.floor((this.text.length/this.max)*100)
    }
}

【讨论】：

【解决方案3】：

如果有帮助，这里有一个带有一些样式的版本。它也使用计算属性来计算进度条值。（sn-p 需要扩展运行）。

new Vue({
  el: "#app",
  data: function() {
        return {
            max: 50,
            text: ''
        };
    },
 computed: {
   calculatePercentage() {
     let contentLength = this.text.length;
     return (contentLength / this.max) * 100;
   }
 }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.container {
  width: 30%;
}
progress, input  {
  width: 100%;
  box-sizing: border-box;
}

progress {
  height: 8px;
  background-color: white;
  appearance: none;
 
}

progress[value]::-webkit-progress-bar {
  background-color: lightgrey;
  border-radius: 2px;
}

progress[value]::-webkit-progress-value {
  background-color: orange;
  border-radius: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container">
  <div >
    <input type="text" class="form-control type-text mb-2" placeholder="" :maxlength="max" v-model="text" />
    
    
  </div>
  <progress max="100" :value="calculatePercentage" id="progress"></progress>
  <small class="help-block">You have: <strong><span v-text="(max - text.length)"></span></strong> characters left.</small>
  </div>
</div>

【讨论】：