事件处理

事件处理

SunlightCheckbox 支持变化事件处理。

基础事件处理

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

基础事件演示

选项一选项二选项三选项四

选中值：[ "option1", "option3" ]

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

const checkboxValue = ref(["option1", "option3"]);
const options = [
  { label: "选项一", value: "option1" },
  { label: "选项二", value: "option2" },
  { label: "选项三", value: "option3" },
  { label: "选项四", value: "option4" },
];

const handleChange = (val: any) => {
  ElMessage({
    message: `选择变化: ${val}`,
    type: "success",
  });
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">基础事件演示</div>
      <SunlightCheckbox
        v-model="checkboxValue"
        :item="{
          options: options,
          placeholder: '请选择选项',
        }"
        @change="handleChange"
      />
    </div>

    <div style="margin-top: 20px">
      <p>选中值：{{ checkboxValue || "暂无选择" }}</p>
    </div>
  </div>
</template>

隐藏源代码

变化事件

• change 事件：当复选框选中状态发生变化时触发

change 事件：当选中状态变化时触发

选项一选项二选项三选项四

选中值：[ "option1", "option3" ]

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

const checkboxValue = ref(["option1", "option3"]);
const options = [
  { label: "选项一", value: "option1" },
  { label: "选项二", value: "option2" },
  { label: "选项三", value: "option3" },
  { label: "选项四", value: "option4" },
];

const handleChange = (val: any) => {
  ElMessage({
    message: `选择变化: ${val}`,
    type: "success",
  });
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">change 事件：当选中状态变化时触发</div>
      <SunlightCheckbox
        v-model="checkboxValue"
        :item="{
          options: options,
          placeholder: '请选择选项',
        }"
        @change="handleChange"
      />
    </div>

    <div style="margin-top: 20px">
      <p>选中值：{{ checkboxValue || "暂无选择" }}</p>
    </div>
  </div>
</template>

隐藏源代码

文档说明

事件处理概述

SunlightCheckbox 支持选择变化事件，方便开发者实现复杂的业务逻辑。

支持的事件列表

事件名	说明	触发时机	参数
update:modelValue	绑定值更新事件，用于双向数据绑定	选中状态变化时	val: array - 更新后的选中值
change	变化事件	选中状态发生变化时触发	val: array - 选中后的值

事件使用方式

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

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

<template>
  <SunlightCheckbox
    v-model="checkboxValue"
    :item="{
      options: options,
      placeholder: '请选择选项',
    }"
    @change="handleChange"
  />
</template>

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

const checkboxValue = ref(["option1", "option3"]);
const options = [
  { label: "选项一", value: "option1" },
  { label: "选项二", value: "option2" },
  { label: "选项三", value: "option3" },
  { label: "选项四", value: "option4" },
];

function handleChange(val) {
  ElMessage({
    message: `选择变化: ${val}`,
    type: "success",
  });
}
</script>

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

<template>
  <SunlightCheckbox
    v-model="checkboxValue"
    :item="{
      options: options,
      placeholder: '请选择选项',
      eventFunction: {
        change: val => {
          ElMessage({
            message: `eventFunction - 选择变化: ${val}`,
            type: 'success',
          });
        },
      },
    }"
  />
</template>

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

const checkboxValue = ref(["option1", "option3"]);
const options = [
  { label: "选项一", value: "option1" },
  { label: "选项二", value: "option2" },
  { label: "选项三", value: "option3" },
  { label: "选项四", value: "option4" },
];
</script>

3. 两种方式结合使用

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

<template>
  <SunlightCheckbox
    v-model="checkboxValue"
    :item="{
      options: options,
      placeholder: '请选择选项',
      eventFunction: {
        change: val => {
          ElMessage({
            message: `eventFunction - 选择变化: ${val}`,
            type: 'success',
          });
        },
      },
    }"
    @change="
      val => {
        ElMessage({
          message: `直接绑定 - 选择变化: ${val}`,
          type: 'success',
        });
      }
    "
  />
</template>

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

const checkboxValue = ref(["option1", "option3"]);
const options = [
  { label: "选项一", value: "option1" },
  { label: "选项二", value: "option2" },
  { label: "选项三", value: "option3" },
  { label: "选项四", value: "option4" },
];
</script>