事件处理

事件处理

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>

隐藏源代码

文档说明

事件处理概述

SunlightSelect 支持多种事件，涵盖了选择、焦点、下拉框状态和搜索等各种交互场景，方便开发者实现复杂的业务逻辑。

支持的事件列表

事件名	说明	触发时机	参数
update:modelValue	绑定值更新事件，用于双向数据绑定	选择值变化时	val: string/number/array - 更新后的值
change	选择变化事件	选择值变化时	val: string/number/array - 选择后的值
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"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</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({
    message: 'change事件已触发',
    type: 'success',
  });
}

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

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

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

<template>
  <SunlightSelect
    v-model="selectValue"
    :item="{
      placeholder: '通过 eventFunction 绑定事件',
      options: options,
      clearable: true,
      eventFunction: {
        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 { 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>

3. 两种方式结合使用

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

<template>
  <SunlightSelect
    v-model="selectValue"
    :item="{
      placeholder: '两种方式结合使用',
      options: options,
      clearable: true,
      eventFunction: {
        change: (val) => {
          ElMessage({
            message: 'eventFunction - change事件已触发',
            type: 'success',
          });
        }
      }
    }"
    @change="(val) => {
      ElMessage({
        message: '直接绑定 - change事件已触发',
        type: 'success',
      });
    }"
  />
</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>