Vue : Grenz-Zeichen im text-Bereich Eingang, truncate-filter?

<textarea name="" id="" cols="30" rows="10" v-model="$store.state.user.giftMessage | truncate 150"></textarea>
Ich habe versucht, erstellen Sie einen benutzerdefinierten filter :

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

aber das hat nicht brach den bauen, wenn ich es auf das v-Modell für den input...

Irgendwelche Ratschläge?

InformationsquelleAutor J W | 2017-09-18

1

Habe ich verbessert auf @J Ws beantworten. Der resultierende code nicht haben, um zu definieren, wie Sie reagieren auf die Tastenbefehle, die ist, warum es verwendet werden kann, die mit einem beliebigen Zeichen im Gegensatz zu den akzeptierten Antworten. Es kümmert sich nur um den string-length das Ergebnis ist. Es kann auch behandeln Copy-Paste-Aktionen und schneidet überlange Pasten, Größe:
```
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>'
});
```
Die Magie liegt in der @keydown-Ereignis und das @einfügen-Ereignisse, die eine Aktualisierung erzwingen. Da der Wert bereits geschnitten, um die Größe richtig, es sichert, dass die internalValue ist entsprechend zu handeln.

Wenn Sie wollen auch zum Schutz der Wert aus deaktiviert Skript-änderungen, können Sie die folgenden watcher:
```
watch: {
  value: function(aOldValue){
    if(this.value.length > this.max){
      this.$emit("input", this.value.substring(0, this.max));
    }
  }
}
```
Ich habe gerade ein problem mit dieser einfachen Lösung: Wenn Sie setzen Sie den cursor irgendwo in der Mitte und geben Sie, überschreiten die maximale, das Letzte Zeichen entfernt wird und der cursor ans Ende des Textes. Es ist also noch etwas Raum für Verbesserung...

InformationsquelleAutor Nils-o-mat

Meine benutzerdefinierte Richtlinie version. Einfach zu bedienen.

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

- Ereignis () - browser-Kompatibilität Problems.
Leider nicht für mich -, keydown-Ansatz scheint nicht eine gute Arbeit mit CJK.
es können Nebenwirkungen sein, da diese Methode feuert Eingabe-Ereignis der doppelten Zeit.

InformationsquelleAutor user1386890

Ich Ihren code benutzt, und dann brach er aus in eine .Vue-Komponente, vielen Dank!
<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
            }
        }
    }

}

InformationsquelleAutor J W

0

Beste Weg ist, um beobachten zu string-Länge und legen Sie den alten Wert, wenn die Zeichenkette länger, als Sie wollen:
```
watch: {
    'inputModel': function(val, oldVal) {
        if (val.length > 250) {
            this.inputModel = oldVal
        }
    },
},
```
Das problem bei dieser Lösung ist, dass Sie die änderung einer überwachten Eigenschaft innen, die Eigenschaften watcher. Während der Zustand kann verhindern, dass eine unendliche Rekursion aus geschieht, ist es immer noch ein entmutigter Praxis.

InformationsquelleAutor Даниил Пронин

Während ich Stimme mit der ausgewählten Antwort. Sie können auch leicht verhindern, dass die Länge mit einem keydown-Ereignisprozedur.

Vue Vorlage

<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();
            }
        }
    }
}

Tun auf diese Weise, Sie können auch reguläre Ausdrücke zu Fall verhindern, dass die Art der Schlüssel akzeptiert. Zum Beispiel, wenn Sie nur wollte, annehmen numerischen Werten können Sie das folgende tun.

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

InformationsquelleAutor J. Rambo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.