uniapp使用uview组件如何做单选列表可取消选中

在UniApp中，使用UView组件库创建单选列表并允许用户取消选择通常涉及到`radio-group`和`radio-button`组件。以下是一个简单的步骤示例：

1. 首先，在页面的模板文件(.vue)中引入`radio-group`和`radio-button`组件。

<template>
  <view class="uni-section">
    <u-radio-group v-model="selectedOption" @change="onChange">
      <u-radio-button :value="option.value" v-for="(option, index) in options" :key="index">{{ option.label }}</u-radio-button>
    </u-radio-group>
    <button @click="toggleAll">取消所有</button>
  </view>
</template>

2. 在对应的script部分，初始化一个数据属性`options`用于存储选项列表，以及`selectedOption`来保存当前选中的项。同时，定义`onChange`函数来处理选中状态的变化，以及`toggleAll`函数用于切换所有选项的状态。

<script setup>
import { ref } from 'vue';
import { uRadioGroup, uRadioButton } from '@vant/uview';

const options = [
  {
    value: '1',
    label: '选项1'
  },
  {
    value: '2',
    label: '选项2'
  },
  // 添加更多选项...
];

const selectedOption = ref(null);
const toggleAll = () => {
  options.forEach(option => {
    option.checked = !selectedOption.value || option.value !== selectedOption.value;
  });
};
const onChange = (val) => {
  if (!val) { // 用户点击了“取消所有”
    selectedOption.value = null;
  } else {
    selectedOption.value = val; // 设置新的选中项
  }
};
</script>

在这个例子中，当用户点击“取消所有”按钮时，会遍历`options`数组，将每个`radio-button`的`checked`属性设置为`false`，实现取消选中效果。而当选中某个选项时，`selectedOption`会更新为相应的值。