Vue 单选题组件实现

在前端开发中，常常需要使用到单选题组件。本文将介绍如何使用 Vue 实现一个简单的单选题组件，并提供了相应的代码示例。

首先，我们需要针对单选题组件的特点，定义组件所需的数据和事件。在 Vue 中，组件的数据和事件可以通过 props 和 setup 来定义，代码如下：

<template>
  <div>
    <label v-for="(option, index) in options" :key="option.id">
      <input
        type="radio"
        :name="'radio-' + id"
        :value="option.id"
        v-model="selectedOptionId"
        :checked="option.isRight"
        @click="handleClick(option, index)"
      />
      {
   
   { String.fromCharCode(65 + index) }}. {
   
   { option.content }}
    </label>
  </div>
</template>

<script>
import {
      
       defineProps, onMounted, ref } from 'vue';

export default {
      
      
  props: {
      
      
    options: {
      
      
      type: Array,
      default: () => [],
    },
  },

  setup(props) {
      
      
    const id = ref(Math.floor(Math.random() * 900000 + 100000));
    const selectedOptionId = ref(null);

    onMounted(() => {
      
      
      selectedOptionId.value =
        props.options.find((option) => option.isRight)?.id || props.options[0].id;
    });

    function handleClick(option, index) {
      
      
      props.options.forEach((opt, i) => {
      
      
        opt.isRight = false;
        if (i === index) opt.isRight = true;
      });
    }

    return {
      
      
      id,
      selectedOptionId,
      handleClick,
    };
  },
};
</script>

以上代码定义了一个单选题组件，其中包括以下数据和事件：

props：options，表示组件需要接收一个选项数组。
data：selectedOptionId，表示当前选中的选项 ID。
method：handleClick，用来处理选项的点击事件。

组件的模板部分使用了 v-for 指令遍历选项数组，生成单选项列表。同时通过 v-model 将选项列表中被选中的选项的 id 绑定到 selectedOptionId 变量上，实现对选中选项的管理。

在组件内部还定义了一个 handleClick 函数，它用于处理单选项的点击事件。当某一个选项被选中时，该函数会将当前选中的选项 id 绑定到 selectedOptionId 变量上，并将选项列表中的 isRight 属性进行更新，确保只有一个选项被设置为正确答案。

最后，组件在 mounted 钩子函数中初始化选中的选项 ID 为默认选中项的 ID，如果找不到正确选项则取第一个选项的 ID 作为默认选中项。

组件的使用方法如下：

<template>
  <Radio
    :options="[
      { id: '1', content: 'A. 选项 A', isRight: true },
      { id: '2', content: 'B. 选项 B', isRight: false },
      { id: '3', content: 'C. 选项 C', isRight: false },
      { id: '4', content: 'D. 选项 D', isRight: false },
    ]"
  />
</template>

<script>
import Radio from './Radio.vue';

export default {
      
      
  components: {
      
      
    Radio,
  },
};
</script>

以上代码演示了如何在 Vue 组件中使用该单选题组件，并向组件传递一个包含选项数据的数组。

至此，我们已经完成了 Vue 单选题组件的实现。希望这篇文章对您有所帮助！

Vue 单选题组件实现

猜你喜欢