如何抽象一个Vue公共组件

<div class='kb-left'>
<div @click='handleInput(item)' class='kb-item' v-for='item in keyArr'>{{item}}</div>
<div class='kb-item kb-toggle'></div> //键盘图标
</div>
//...
</div>
</template>
<script>
export default {
data() {
return {
inputStr: ''
}
},
//...
methods: {
handleInput(value) {
this.inputStr += value;
this.$emit('change-event', this.inputStr, value);
}
}
}
</script>

增加了 max 属性后修改方法如下：

handleInput(value) {
  let max = Number(this.max);
  if (!isNaN(max) && this.inputStr.length+1 > max) {
    return;
  }
  this.inputStr += value;
  this.$emit('change-event', this.inputStr, value);
}

最后看看退格删除是如何实现的。

handleDelete()

handleDelete() {
  let str = this.inputStr;
　　 if (!str.length) return;
  this.inputStr = str.substring(0, str.length - 1);
  this.$emit('change-event', this.inputStr);
} 

上面的例子都是些核心代码的片段，并且其他辅助函数并未列出，想查看完整的代码请看源码。

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持软件开发网。