事件处理

事件处理

SunlightSelect 支持多种事件处理，包括选择变化、焦点、失焦、清空、下拉框显示/隐藏和搜索事件。

基本事件处理

您可以监听选择器的各种事件，实现自定义业务逻辑。

基础事件处理示例

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

const selectValue = ref("");

const options = [
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
  { label: "选项3", value: "option3" },
  { label: "选项4", value: "option4" },
  { label: "选项5", value: "option5" },
];

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 handleVisibleChange = (val: boolean) => {
  ElMessage({
    message: "visible-change事件已触发",
    type: "success",
  });
};

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

<template>
  <div>
    <div style="margin-bottom: 20px">
      <SunlightSelect
        v-model="selectValue"
        :item="{
          placeholder: '基础事件处理示例',
          options: options,
          clearable: true,
          filterable: true,
        }"
        @change="handleChange"
        @focus="handleFocus"
        @blur="handleBlur"
        @clear="handleClear"
        @visible-change="handleVisibleChange"
        @search="handleSearch"
      />
    </div>
  </div>
</template>

隐藏源代码

选择变化事件

• change 事件：选择值变化时触发

选择变化事件示例

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

const selectValue = ref("");

const options = [
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
  { label: "选项3", value: "option3" },
  { label: "选项4", value: "option4" },
  { label: "选项5", value: "option5" },
];

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

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightSelect
        v-model="selectValue"
        :item="{
          placeholder: '选择变化事件示例',
          options: options,
          clearable: true,
        }"
        @change="handleChange"
      />
    </div>
  </div>
</template>

隐藏源代码

焦点与失焦事件

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

焦点与失焦事件示例

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

const selectValue = ref("");

const options = [
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
  { label: "选项3", value: "option3" },
];

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;">
      <SunlightSelect
        v-model="selectValue"
        :item="{
          placeholder: '焦点与失焦事件示例',
          options: options,
        }"
        @focus="handleFocus"
        @blur="handleBlur"
      />
    </div>
  </div>
</template>

隐藏源代码

清空事件

• clear 事件：点击清空按钮时触发

清除事件示例

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

const selectValue = ref("");

const options = [
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
  { label: "选项3", value: "option3" },
];

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

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightSelect
        v-model="selectValue"
        :item="{
          placeholder: '清除事件示例',
          options: options,
          clearable: true,
        }"
        @clear="handleClear"
      />
    </div>
  </div>
</template>

隐藏源代码

下拉框显示/隐藏事件

• visible-change 事件：下拉框显示状态变化时触发

下拉框显示/隐藏事件示例

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

const selectValue = ref("");

const options = [
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
  { label: "选项3", value: "option3" },
];

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

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightSelect
        v-model="selectValue"
        :item="{
          placeholder: '下拉框显示/隐藏事件示例',
          options: options,
        }"
        @visible-change="handleVisibleChange"
      />
    </div>
  </div>
</template>

隐藏源代码

搜索事件

• search 事件：输入搜索关键词时触发（仅在 filterable 为 true 时生效）

搜索事件示例

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

const selectValue = ref("");

const options = [
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
  { label: "选项3", value: "option3" },
  { label: "选项4", value: "option4" },
  { label: "选项5", value: "option5" },
];

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

<template>
  <div>
    <div style="margin-bottom: 20px;">
      <SunlightSelect
        v-model="selectValue"
        :item="{
          placeholder: '搜索事件示例',
          options: options,
          filterable: true,
        }"
        @search="handleSearch"
      />
    </div>
  </div>
</template>

隐藏源代码

文档说明

支持的事件列表

事件名	说明	触发时机	参数
update:modelValue	绑定值更新事件，用于双向数据绑定	选择值变化时	val: any
change	选择变化事件	选择值变化时	val: any
focus	焦点事件	获得焦点时	event: Event
blur	失焦事件	失去焦点时	event: Event
clear	清空事件	点击清空按钮时	event: Event
visible-change	下拉框显示/隐藏事件	下拉框状态变化时	val: boolean
search	搜索事件	输入搜索关键词时（仅 filterable 为 true 时）	val: string

事件使用方式

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

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

<template>
  <SunlightSelect
    v-model="selectValue"
    :item="{
      placeholder: '请选择',
      options: options,
      clearable: true,
    }"
    @change="handleChange"
  />
</template>

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

const selectValue = ref("");
const options = [
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
  { label: "选项3", value: "option3" },
];

function handleChange(val) {
  ElMessage.success("选择变化: " + val);
}
</script>

2. 通过 eventFunction 配置事件

<template>
  <SunlightSelect
    v-model="selectValue"
    :item="{
      placeholder: '通过配置绑定事件',
      options: options,
      eventFunction: {
        change: val => {
          ElMessage.success('配置事件触发: ' + val);
        },
      },
    }"
  />
</template>

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

const selectValue = ref("");
const options = [
  { label: "选项1", value: "option1" },
  { label: "选项2", value: "option2" },
  { label: "选项3", value: "option3" },
];
</script>