Sunlight UI

主题

Teeker2026-01-15
746
3.2m

事件处理 ​

事件处理 ​

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

基础事件处理 ​

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

基础事件演示

选择变化事件 ​

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

选择的值: 暂无选择

焦点与失焦事件 ​

  • focus 事件：级联选择器获得焦点时触发
  • blur 事件：级联选择器失去焦点时触发
focus & blur 事件：点击输入框获得焦点，点击其他地方失去焦点

选择的值: 暂无选择

下拉框显示/隐藏事件 ​

  • visible-change 事件：当弹出框出现或隐藏时触发
visible-change 事件：点击输入框显示下拉框，点击其他地方或选择选项后隐藏

选择的值: 暂无选择

文档说明 ​

事件处理概述 ​

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

支持的事件列表 ​

事件名说明触发时机参数
update:modelValue绑定值更新事件，用于双向数据绑定选择值变化时val: string/number/array - 更新后的值
change选择变化事件选择的值发生变化时触发val: string/number/array - 选择后的值
focus焦点事件级联选择器获得焦点时触发event: Event - 原生事件对象
blur失焦事件级联选择器失去焦点时触发event: Event - 原生事件对象
visible-change下拉框显示/隐藏事件当弹出框出现或隐藏时触发val: boolean - 弹出框是否可见

事件使用方式 ​

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

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

vue
<template>
  <SunlightCascader
    v-model="cascaderValue"
    :item="{
      placeholder: '请选择内容...',
      clearable: true,
      options: options,
      showAllLevels: true
    }"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

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

const cascaderValue = ref('');
const options = [
  {
    value: 'zhinan',
    label: '指南',
    children: [
      {
        value: 'shejiyuanze',
        label: '设计原则',
        children: [
          { value: 'yizhi', label: '一致' },
          { value: 'fankui', label: '反馈' }
        ]
      }
    ]
  }
];

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

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

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

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

vue
<template>
  <SunlightCascader
    v-model="cascaderValue"
    :item="{
      placeholder: '请选择内容...',
      clearable: true,
      options: options,
      showAllLevels: true,
      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 { SunlightCascader } from 'sunlight-ui';

const cascaderValue = ref('');
const options = [
  {
    value: 'zhinan',
    label: '指南',
    children: [
      {
        value: 'shejiyuanze',
        label: '设计原则',
        children: [
          { value: 'yizhi', label: '一致' },
          { value: 'fankui', label: '反馈' }
        ]
      }
    ]
  }
];
</script>

3. 两种方式结合使用 ​

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

vue
<template>
  <SunlightCascader
    v-model="cascaderValue"
    :item="{
      placeholder: '请选择内容...',
      clearable: true,
      options: options,
      showAllLevels: true,
      eventFunction: {
        change: (val) => {
          console.log('eventFunction - 选择变化:', val);
        }
      }
    }"
    @change="(val) => console.log('直接绑定 - 选择变化:', val)"
  />
</template>

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

const cascaderValue = ref('');
const options = [
  {
    value: 'zhinan',
    label: '指南',
    children: [
      {
        value: 'shejiyuanze',
        label: '设计原则',
        children: [
          { value: 'yizhi', label: '一致' },
          { value: 'fankui', label: '反馈' }
        ]
      }
    ]
  }
];
</script>