键盘点击事件 vue iview ui

KeyDown：按键下去触发事件

KeyPress：按键不松持续事件

用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符

KeyUp： 松开键盘事件

<textarea
  v-model="messageContent"
  class="textarea"
  @keydown="chartFun"
  id="chattext"
></textarea>
<Modal
      footer-hide
      title="人员列表"
      v-model="grouppeople"
      width="400"
      class-name="vertical-center-modal"
    >
      <div>
        <Input v-model="search.name" placeholder="张三" clearable />
        <div
          v-for="(item, index) in peopleList"
          :key="index"
          class="peopleClass"
          @click="curpeoplefn(item.name, index)"
        >
          <img :src="item.img" alt="" style="width: 40px; height: 40px" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </Modal>
          

data() {
    return {
		grouppeople: false,
    ｝
｝

methods: {
	//按下@键事件
    chartFun: function () {
      let _this = this;
      //可以打印你按下键的对应值
      let textarea = document.getElementById("chattext");
      textarea.onkeyup = function (e) {
        if (e.key == "@") {
        	//自定义事件
          _this.grouppeople = true;
        } else if (e.key == "Enter") {
        	//自定义事件
          _this.mineSend();
        }
      };
    },
}

注意:

KeyDown触发后，不一定触发KeyUp，当KeyDown 按下后，拖动鼠标，那么将不会触发KeyUp事件。
KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
KeyPress 只能捕获单个字符
KeyDown 和KeyUp 可以捕获组合键。
KeyPress 可以捕获单个字符的大小写
KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。
KeyPress 不区分小键盘和主键盘的数字字符。
KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。