Sunlight UI

主题

Teeker2026-01-11
762
3.2m

事件处理 ​

事件处理 ​

SunlightInput 支持多种事件处理，包括输入、变化、焦点、失焦、清除和键盘事件。

基础事件处理 ​

您可以监听输入框的各种事件，实现自定义的业务逻辑。

0 / 20

输入与变化事件 ​

  • input 事件：实时触发，每次输入都会调用
  • change 事件：失焦或按下回车键时触发

焦点与失焦事件 ​

  • focus 事件：输入框获得焦点时触发
  • blur 事件：输入框失去焦点时触发

清除与键盘事件 ​

  • clear 事件：点击清除按钮时触发
  • keydown 事件：按下键盘按键时触发

组合事件处理 ​

您可以同时监听多个事件，实现复杂的业务逻辑。

文档说明 ​

事件处理概述 ​

SunlightInput 支持多种事件，涵盖了输入、焦点、键盘等各种交互场景，方便开发者实现复杂的业务逻辑。

支持的事件列表 ​

事件名说明触发时机参数
update:modelValue绑定值更新事件，用于双向数据绑定输入值变化时新的输入值
input输入事件，实时触发每次输入字符时新的输入值
change变化事件失焦或按下回车键时新的输入值
focus焦点事件输入框获得焦点时原生事件对象
blur失焦事件输入框失去焦点时原生事件对象
clear清除事件点击清除按钮时原生事件对象
keydown键盘事件按下键盘按键时原生事件对象

事件使用方式 ​

SunlightInput 组件支持两种事件绑定方式：直接通过 v-on 绑定和通过 eventFunction 配置项绑定。

1. 直接通过 v-on 绑定事件 ​

vue
<template>
  <SunlightInput
    v-model="inputValue"
    :item="{
      placeholder: '请输入内容',
      clearable: true
    }"
    @input="handleInput"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SunlightInput } from 'sunlight-ui';
import { ElMessage } from 'element-plus';

const inputValue = ref('');

function handleInput(val) {
  ElMessage({
    message: 'input事件已触发',
    type: 'success',
  });
}

function handleChange(val) {
  ElMessage({
    message: 'change事件已触发',
    type: 'success',
  });
}

function handleFocus(event) {
  ElMessage({
    message: 'focus事件已触发',
    type: 'success',
  });
}

function handleBlur(event) {
  ElMessage({
    message: 'blur事件已触发',
    type: 'success',
  });
}
</script>

2. 通过 eventFunction 配置项绑定事件 ​

vue
<template>
  <SunlightInput
    v-model="inputValue"
    :item="{
      placeholder: '通过 eventFunction 绑定事件',
      clearable: true,
      eventFunction: {
        input: (val) => {
          ElMessage({
            message: 'input事件已触发',
            type: 'success',
          });
        },
        change: (val) => {
          ElMessage({
            message: 'change事件已触发',
            type: 'success',
          });
        },
        focus: (event) => {
          ElMessage({
            message: 'focus事件已触发',
            type: 'success',
          });
        },
        blur: (event) => {
          ElMessage({
            message: 'blur事件已触发',
            type: 'success',
          });
        }
      }
    }"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SunlightInput } from 'sunlight-ui';
import { ElMessage } from 'element-plus';

const inputValue = ref('');
</script>

3. 两种方式结合使用 ​

直接绑定的事件和通过 eventFunction 配置的事件可以同时使用，都会被触发。

vue
<template>
  <SunlightInput
    v-model="inputValue"
    :item="{
      placeholder: '两种方式结合使用',
      clearable: true,
      eventFunction: {
        input: (val) => {
          ElMessage({
            message: 'eventFunction - input事件已触发',
            type: 'success',
          });
        }
      }
    }"
    @input="(val) => {
      ElMessage({
        message: '直接绑定 - input事件已触发',
        type: 'success',
      });
    }"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SunlightInput } from 'sunlight-ui';
import { ElMessage } from 'element-plus';

const inputValue = ref('');
</script>