shadcn-vue DropdownMenu事件

ShadCN-Vue 是一个基于 Vue.js 的组件库，它包含了一个 DropdownMenu 组件，通常用于创建下拉菜单。DropdownMenu 组件在 ShadCN-Vue 中主要用于提供用户选择项，例如导航菜单、选项卡等。

DropdownMenu 的常见事件包括：

1. `on-click`: 当用户点击下拉菜单项时触发，通常会传递被点击的菜单项数据。

   @click="handleItemClick(item)"

2. `on-toggle`: 当用户打开或关闭下拉菜单时触发，可以用于控制菜单的状态。

   @toggle="handleToggle(isOpened)"

3. `on-select`: 用户完成选中操作（比如点击确认按钮）时触发，返回的是用户最终选择的数据。

   @select="handleSelection(selectedItem)"

使用这些事件，你可以监听用户的交互并执行相应的业务逻辑。记得在组件的模板上绑定这些自定义事件处理函数，并在对应的methods中定义它们的具体功能。

相关问题

shadcn-vue DropdownMenu DropdownMenuRadioGroup选中事件

Shadcn-vue库中的DropdownMenu和DropdownMenuRadioGroup组件都是Vue单选下拉菜单相关的组件。DropdownMenu通常是一个包含多个选项的弹出菜单，而DropdownMenuRadioGroup则是专门用于处理单选选项的下拉框。

当你选择DropdownMenu中的某个选项时，它会触发`on-select`或`@select`这类事件，这通常是自定义事件，传递给组件的值就是所选项的值。对于DropdownMenuRadioGroup，由于它是单选的，所以当用户点击某一选项时，只会有一个选项被选中，并触发`on-radio-change`或`@radio-change`事件，这个事件通常会返回当前选中的radio的key或value。

例如，你可以这样监听事件：

<template>
  <DropdownMenuRadioGroup v-model="selectedValue" @radio-change="handleRadioChange">
    <DropdownMenuItem value="option1">Option 1</DropdownMenuItem>
    <DropdownMenuItem value="option2">Option 2</DropdownMenuItem>
  </DropdownMenuRadioGroup>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
    };
  },
  methods: {
    handleRadioChange(value) {
      this.selectedValue = value; // 更新数据模型或执行其他操作
    },
  },
};
</script>

shadcn-vue from表单

shadcn-vue是基于Vue.js的一个轻量级的前端组件库，它包含了一个名为`from`的表单组件。`from`组件是该库中用于构建表单的基础元素，提供了一种简洁的方式来组织和管理HTML表单结构，比如input、textarea、select等字段。这个组件通常包含了验证、提交处理以及样式方面的便捷功能。

使用`from`组件，开发者可以快速创建美观、易用的表单，并且支持常见的表单交互如数据绑定、事件监听等。例如：

<template>
  <shadcn-form :model="formData" @submit="handleFormSubmit">
    <shadcn-from-item label="姓名">
      <shadcn-input v-model="formData.name"></shadcn-input>
    </shadcn-from-item>
    <!-- 更多输入项... -->
    <shadcn-button type="primary" @click="handleFormSubmit">提交</shadcn-button>
  </shadcn-form>
</template>

<script>
import { ShadcnForm, ShadcnFormItem, ShadcnInput } from 'shadcn-vue';

export default {
  components: {
    ShadcnForm,
    ShadcnFormItem,
    ShadcnInput
  },
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    handleFormSubmit() {
      // 表单提交处理...
    }
  }
};
</script>