Sunlight UI

主题

Teeker2026-01-14
793
3.3m

事件处理 ​

事件处理 ​

SunlightDatePicker 支持多种事件处理，包括选择变化、焦点、失焦、日历变化、下拉框显示/隐藏和面板切换事件。

基础事件处理 ​

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

选择变化事件 ​

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

焦点与失焦事件 ​

  • focus 事件：日期选择器获得焦点时触发
  • blur 事件：日期选择器失去焦点时触发

日历与面板事件 ​

  • calendar-change 事件：当日历面板的日期发生变化时触发
  • panel-change 事件：当日期面板切换时触发

下拉框显示/隐藏事件 ​

  • visible-change 事件：当弹出框出现或隐藏时触发

文档说明 ​

事件处理概述 ​

SunlightDatePicker 支持多种事件，涵盖了选择、焦点、日历状态和面板切换等各种交互场景，方便开发者实现复杂的业务逻辑。

支持的事件列表 ​

事件名说明触发时机参数
update:modelValue绑定值更新事件，用于双向数据绑定选择值变化时val: string/number/Date/Array - 更新后的值
change选择变化事件选择值变化时val: string/number/Date/Array - 选择后的值
focus焦点事件日期选择器获得焦点时event: Event - 原生事件对象
blur失焦事件日期选择器失去焦点时event: Event - 原生事件对象
calendar-change日历变化事件日历面板的日期发生变化时val: string/number/Date/Array - 当前日历面板显示的日期
visible-change下拉框显示/隐藏事件弹出框出现或隐藏时val: boolean - 弹出框是否可见
panel-change面板切换事件日期面板切换时value: string/number/Date - 当前选中的值
mode: string - 当前面板模式
oldMode: string - 上一个面板模式

事件使用方式 ​

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

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

vue
<template>
  <SunlightDatePicker
    v-model="dateValue"
    :item="{
      placeholder: '请选择日期',
      type: 'date'
    }"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SunlightDatePicker } from 'sunlight-ui';

const dateValue = ref('');

function handleChange(val) {
  console.log('选择变化:', val);
}

function handleFocus(event) {
  console.log('聚焦事件:', event);
}

function handleBlur(event) {
  console.log('失焦事件:', event);
}
</script>

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

vue
<template>
  <SunlightDatePicker
    v-model="dateValue"
    :item="{
      placeholder: '通过 eventFunction 绑定事件',
      type: 'date',
      eventFunction: {
        change: (val) => {
          console.log('eventFunction - 选择变化:', val);
        },
        focus: (event) => {
          console.log('eventFunction - 聚焦事件:', event);
        },
        blur: (event) => {
          console.log('eventFunction - 失焦事件:', event);
        }
      }
    }"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SunlightDatePicker } from 'sunlight-ui';

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

3. 两种方式结合使用 ​

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

vue
<template>
  <SunlightDatePicker
    v-model="dateValue"
    :item="{
      placeholder: '两种方式结合使用',
      type: 'date',
      eventFunction: {
        change: (val) => {
          console.log('eventFunction - 选择变化:', val);
        }
      }
    }"
    @change="(val) => console.log('直接绑定 - 选择变化:', val)"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SunlightDatePicker } from 'sunlight-ui';

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