Question

我试图限制在content editable div上输入的字符数量。

这可以正常工作......

<div onkeypress="return (this.innerText.length >= 140 ? false : true )">

但是，我需要将其作为Vue方法运行（在单个文件组件中）。我试图做以下事情，但无法让它发挥作用：

<div @keypress="limitTextChar">

// data
props: {
    limitText: {
        type: Boolean,
        default: false
    },
    limitLength: {
        type: Number,
        default: 140
    }
}

limitTextChar(event) {
    return this.limitText && event.target.innerText.length >= this.limitLength ? false : true
}

我哪里错了？

完整组件的JSBIN： https://jsbin.com/pezetuxecu/edit?js

Answer 1

您需要根据您的逻辑调用preventDefault()事件。例如

limitTextChar(event) {
  if (this.limitText && event.target.innerText.length >= this.limitLength) {
    event.preventDefault()
  }
}

另外需要注意的是，道具在非字符串模板中使用时必须使用烤肉串，即代替

<editable :limitText="true"...

应该是

<editable :limit-text="true"

演示〜https://jsfiddle.net/yo5o0vwt/

Vue2 - 将Vanilla ONKEYPRESS函数转换为方法

1 个答案: