Question

因此，我正在构建一个表单，并且表单中的字段需要限制为一定长度。

然后，我需要一个简单的进度条，该进度条显示用户与输入字段上的最大长度之间的距离。因此，假设输入上限为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: ''
        };
    },
});

任何帮助将不胜感激！

Answer 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>

Answer 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)
    }
}

Answer 3

如果可以的话，这里是带有某些样式的版本。它也使用计算属性来计算进度条值。（该代码段需要展开）。

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>

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

3 个答案: