Question

<textarea name="" id="" cols="30" rows="10" v-model="$store.state.user.giftMessage | truncate 150"></textarea> 我尝试创建自定义过滤器：

filters: {
    truncate(text, stop, clamp) {
        return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
    }
}

但是当我把它放在用于输入的v模型时，这并没有破坏构建......

有什么建议吗？

Answer 1

很抱歉打扰您。正在寻找解决方案。看着他们所有人。对我来说，它们看起来太复杂了。我一直在寻找简单性。因此，我喜欢@ДаниилПронин的答案。但是它有@J。兰博指出了潜在的问题。

尽可能与本地html textelement保持距离。我想出的解决方案是：

Vue模板

<textarea v-model="value" @input="assertMaxChars()">

JavaScript

let app = new Vue({
  el: '#app',
  data: {
    value: 'Vue is working!',
    maxLengthInCars: 25
  },

  methods: {
    assertMaxChars: function () {
        if (this.value.length >= this.maxLengthInCars) {
            this.value = this.value.substring(0,this.maxLengthInCars);
        }
    }
  }
})

这里是REPL链接：https://repl.it/@tsboh/LimitedCharsInTextarea

我看到的好处是：

该元素尽可能接近本机元素
简单代码
textarea保持焦点
删除仍然有效
还可以粘贴文本

无论如何快乐的编码

Answer 2

这是其中一种情况，你真的想要使用一个组件。

以下是示例组件，它会呈现textarea并限制文本量。

请注意：这不是生产就绪，处理所有角落案例组件。它仅作为示例。

Vue.component("limited-textarea", {
  props:{
    value:{ type: String, default: ""},
    max:{type: Number, default: 250}
  },
  template: `
    <textarea v-model="internalValue" @keydown="onKeyDown"></textarea>
  `,
  computed:{
    internalValue: {
      get() {return this.value},
      set(v){ this.$emit("input", v)}
    }
  },
  methods:{
    onKeyDown(evt){
      if (this.value.length >= this.max) {
        if (evt.keyCode >= 48 && evt.keyCode <= 90) {
          evt.preventDefault()
          return
        }
      }
    }
  }
})

此组件实现v-model，并且只有在文本长度小于指定的最大值时才会对数据发出更改。如果文本的长度等于或大于允许的最大值，则通过监听keydown并阻止默认操作（键入字符）来执行此操作。

console.clear()

Vue.component("limited-textarea", {
  props:{
    value:{ type: String, default: ""},
    max:{type: Number, default: 250}
  },
  template: `
    <textarea v-model="internalValue" @keydown="onKeyDown"></textarea>
  `,
  computed:{
    internalValue: {
      get() {return this.value},
      set(v){ this.$emit("input", v)}
    }
  },
  methods:{
    onKeyDown(evt){
      if (this.value.length >= this.max) {
        if (evt.keyCode >= 48 && evt.keyCode <= 90) {
          evt.preventDefault()
          return
        }
      }
    }
  }
})

new Vue({
  el: "#app",
  data:{
    text: ""
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <limited-textarea v-model="text" 
                    :max="10"
                    cols="30"
                    rows="10">
  </limited-textarea>
</div>

问题中代码的另一个问题是Vuex不允许您直接设置状态值;你必须通过突变来做到这一点。也就是说，应该有一个接受新值并设置它的Vuex变异，并且代码应该提交变异。

mutations: {
  setGiftMessage(state, message) {
    state.user.giftMessage = message
  }
}

在你的Vue中：

computed:{
  giftMessage:{
    get(){return this.$store.state.user.giftMessage},
    set(v) {this.$store.commit("setGiftMessage", v)}
  }
}

从技术上讲，代码应该使用getter来获取用户（以及它的giftMessage），但这应该有效。在模板中，您将使用：

<limited-textarea cols="30" rows="10" v-model="giftMessage"></limited-textarea>

以下是使用Vuex的完整示例。

console.clear()

const store = new Vuex.Store({
  state:{
    user:{
      giftMessage: "test"
    }
  },
  getters:{
    giftMessage(state){
      return state.user.giftMessage
    }
  },
  mutations:{
    setGiftMessage(state, message){
      state.user.giftMessage = message
    }
  }
})



Vue.component("limited-textarea", {
  props:{
    value:{ type: String, default: ""},
    max:{type: Number, default: 250}
  },
  template: `
    <textarea v-model="internalValue" @keydown="onKeyDown"></textarea>
  `,
  computed:{
    internalValue: {
      get() {return this.value},
      set(v){ this.$emit("input", v)}
    }
  },
  methods:{
    onKeyDown(evt){
      if (this.value.length >= this.max) {
        if (evt.keyCode >= 48 && evt.keyCode <= 90) {
          evt.preventDefault()
          return
        }
      }
    }
  }
})

new Vue({
  el: "#app",
  store,
  computed:{
    giftMessage:{
      get(){ return this.$store.getters.giftMessage},
      set(v){ this.$store.commit("setGiftMessage", v)}
    }
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.js"></script>
<div id="app">
  <limited-textarea v-model="giftMessage" 
                    :max="10"
                    cols="30"
                    rows="10">
  </limited-textarea>
  Message: {{giftMessage}}
</div>

Answer 3

我对@J Ws的答案有所改进。生成的代码不必定义如何对哪个按键做出反应，这就是为什么与公认的答案相反，它可以与任何字符一起使用的原因。它只关心结果的字符串长度。它还可以处理“复制粘贴”动作，并将超长的粘贴剪切成一定大小：

Vue.component("limitedTextarea", {
    props: {
      value: {
        type: String,
        default: ""
      },
      max: {
        type: Number,
        default: 25
      }
    },
    computed: {
      internalValue: {
        get: function () {
          return this.value;
        },
        set: function (aModifiedValue) {
          this.$emit("input", aModifiedValue.substring(0, this.max));
        }
      }
    },
    template: '<textarea v-model="internalValue" @keydown="$forceUpdate()" @paste="$forceUpdate()"></textarea>'
});

魔术之处在于@keydown和@ paste-events，它们会强制进行更新。由于该值已经正确地切成适当的大小，因此可以确保internalValue相应地起作用。

如果您还想保护该值不受未经检查的脚本更改的影响，则可以添加以下观察者：

watch: {
  value: function(aOldValue){
    if(this.value.length > this.max){
      this.$emit("input", this.value.substring(0, this.max));
    }
  }
}

我只是发现此简单解决方案存在问题：如果将光标设置在中间的某个位置，然后键入，越过最大值，则会删除最后一个字符，并将光标设置在文本的末尾。因此，仍有一些改进的空间...

Answer 4

我的自定义指令版本。易于使用。

<textarea v-model="input.textarea" v-max-length="10"></textarea>


Vue.directive('maxlength',{
    bind: function(el, binding, vnode) {
        el.dataset.maxLength = Number(binding.value);
        var handler = function(e) {
            if (e.target.value.length > el.dataset.maxLength) {
                e.target.value = e.target.value.substring(0, el.dataset.maxLength);
                var event = new Event('input', {
                    'bubbles': true,
                    'cancelable': true
                });
                this.dispatchEvent(event);
                return;
            }
        };
        el.addEventListener('input', handler);
    },
    update: function(el, binding, vnode) {
        el.dataset.maxLength = Number(binding.value);
    }
})

Event（）具有浏览器兼容性问题。
对于我来说，不幸的是，keydown方法似乎不适用于CJK。
可能会有副作用，因为此方法会触发输入事件两次。

Answer 5

我使用了您的代码并将其分解为.Vue组件，谢谢！ <template> <textarea v-model="internalValue" @keydown="onKeyDown"></textarea> </template>

`

export default {
    props:{
        value:{ type: String, default: ""},
        max:{type: Number, default: 250}
    },
    computed:{
        internalValue: {
            get() {return this.value},
            set(v){ this.$emit("input", v)}
        }
    },
    methods:{
        onKeyDown(evt){
            if (this.value.length >= this.max) {
                evt.preventDefault();
                console.log('keydown');
                return
            }
        }
    }

}

Answer 6

最好的方法是使用watch来字符串长度并在字符串长于你想要的时候设置旧值：

watch: {
    'inputModel': function(val, oldVal) {
        if (val.length > 250) {
            this.inputModel = oldVal
        }
    },
},

Answer 7

虽然我同意所选择的答案。您还可以使用keydown事件处理程序轻松阻止长度。

Vue模板

<input type="text" @keydown="limit( $event, 'myModel', 3)" v-model="myModel" />

<强>的JavaScript

export default {
    name: 'SomeComponent',

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

    methods: {

        limit( event, dataProp, limit ) {
            if ( this[dataProp].length >= limit ) {
               event.preventDefault();
            }
        }
    }
}

这样做，您还可以使用正则表达式来阻止接受的键类型。例如，如果您只想接受数值，则可以执行以下操作。

methods: {
   numeric( event, dataProp, limit ) {
       if ( !/[0-9]/.test( event.key ) ) {
           event.preventDefault();
       }
   }
}

Answer 8

只需像这样使用 maxlength 属性：

<textarea v-model="value" maxlength="50" />

Vue：限制文本区域输入中的字符，截断过滤器？

8 个答案: