VUE：原生input进行中文输入时触发的事件

简介

这里是关于 原生input 在 Vue 中的一些事件方法。

具体过程

1.中文输入时触发不常见的两个事件：compositionstart、compositionend

1.1 代码如下

<template>
  <div>
    <input
      v-model="inputVal"
      @input="inputChange"
      @compositionstart="inputStart"
      @compositionend="inputEnd"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
    };
  },
  methods: {
    // #region 输入框的单个输入事件 [中文是多次输入，结果一个]
    // 输入框值变了
    inputChange(e) {
      console.log(e.data);
    },
    // 中文拼音：开始输入
    inputStart(e) {
      console.log('中文拼音输入开始', e);
    },
    // 中文拼音：输入完毕
    inputEnd(e) {
      console.log('中文拼音输入结束', e);
    },
    // #endregion
  },
};
</script>

1.2 打印过程如下

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！