事件处理

事件处理

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

基础事件处理

您可以监听文本域的各种事件，实现自定义的业务逻辑。

<script setup lang="ts">
import { ref } from "vue";
import { SunlightTextarea } from "sunlight-ui";
import { ElMessage } from "element-plus";

const textareaValue = ref("");

const handleInput = (val: string) => {
  ElMessage({
    message: "input事件已触发",
    type: "success",
  });
};

const handleChange = (val: string) => {
  ElMessage({
    message: "change事件已触发",
    type: "success",
  });
};

const handleFocus = (e: Event) => {
  ElMessage({
    message: "focus事件已触发",
    type: "success",
  });
};

const handleBlur = (e: Event) => {
  ElMessage({
    message: "blur事件已触发",
    type: "success",
  });
};

const handleClear = (e: Event) => {
  ElMessage({
    message: "clear事件已触发",
    type: "success",
  });
};

const handleKeydown = (e: KeyboardEvent) => {
  ElMessage({
    message: "keydown事件已触发",
    type: "success",
  });
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <SunlightTextarea
        v-model="textareaValue"
        :item="{
          placeholder: '基础事件处理示例',
          rows: 4,
          clearable: true,
        }"
        @input="handleInput"
        @change="handleChange"
        @focus="handleFocus"
        @blur="handleBlur"
        @clear="handleClear"
        @keydown="handleKeydown"
      />
    </div>
  </div>
</template>

隐藏源代码

输入与变化事件

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

<script setup lang="ts">
import { ref } from "vue";
import { SunlightTextarea } from "sunlight-ui";
import { ElMessage } from "element-plus";

const textareaValue = ref("");

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

const handleChange = (val: string) => {
  ElMessage({
    message: 'change事件已触发',
    type: 'success',
  });
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightTextarea
        v-model="textareaValue"
        :item="{
          placeholder: '输入与变化事件示例',
          rows: 4,
        }"
        @input="handleInput"
        @change="handleChange"
      />
    </div>
  </div>
</template>

隐藏源代码

焦点与失焦事件

• focus 事件：文本域获得焦点时触发
• blur 事件：文本域失去焦点时触发

<script setup lang="ts">
import { ref } from "vue";
import { SunlightTextarea } from "sunlight-ui";
import { ElMessage } from "element-plus";

const textareaValue = ref("");

const handleFocus = (e: Event) => {
  ElMessage({
    message: 'focus事件已触发',
    type: 'success',
  });
};

const handleBlur = (e: Event) => {
  ElMessage({
    message: 'blur事件已触发',
    type: 'success',
  });
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightTextarea
        v-model="textareaValue"
        :item="{
          placeholder: '焦点与失焦事件示例',
          rows: 4,
        }"
        @focus="handleFocus"
        @blur="handleBlur"
      />
    </div>
  </div>
</template>

隐藏源代码

清除与键盘事件

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

<script setup lang="ts">
import { ref } from "vue";
import { SunlightTextarea } from "sunlight-ui";
import { ElMessage } from "element-plus";

const textareaValue = ref("");

const handleClear = (e: Event) => {
  ElMessage({
    message: 'clear事件已触发',
    type: 'success',
  });
};

const handleKeydown = (e: KeyboardEvent) => {
  ElMessage({
    message: 'keydown事件已触发',
    type: 'success',
  });
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightTextarea
        v-model="textareaValue"
        :item="{
          placeholder: '清除与键盘事件示例',
          rows: 4,
          clearable: true,
        }"
        @clear="handleClear"
        @keydown="handleKeydown"
      />
    </div>
  </div>
</template>

隐藏源代码

文档说明

事件处理概述

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

支持的事件列表

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

事件使用方式

SunlightTextarea 组件支持通过 v-on 绑定事件。

<template>
  <SunlightTextarea
    v-model="textareaValue"
    :item="{
      placeholder: '请输入内容',
      rows: 4,
      clearable: true
    }"
    @input="handleInput"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
    @clear="handleClear"
    @keydown="handleKeydown"
  />
</template>

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

const textareaValue = 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',
  });
}

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

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