[TOC]
使⽤ Vant 的 Radio 单选框 组件 与 Cell 组件⼀起使⽤的⽤法。
// Vant 官⽅示例：Radio 单选框组件 与 Cell 组件⼀起使⽤
<van-radio-groupv-model=“radio”>
<van-cell-group>
<van-celltitle=“单选框 1”clickable @click=“radio = ‘1’”>
<template #right-icon>
<van-radioname=“1” />
</template>
</van-cell>
<van-celltitle=“单选框 2”clickable @click=“radio = ‘2’”>
<template #right-icon>
<van-radioname=“2” />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
设置到⻚⾯中
添加左侧⽀付宝与微信图标
进⾏布局样式设置
// pay/index.vue
<van-cell class=“pay-channel”>
<div>
<p>支付方式</p>
<van-radio-group v-model=”radio“>
<van-cell-group>
<van-cell @click=“radio = payInfo[1].channelCode“>
<template #title>
<imgsrc=“http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png“ alt=“”>
<span>微信支付</span>
</template>
<template #right-icon>
<van-radio :name=“1“ />
</template>
</van-cell>
<van-cellclickable @click=“radio = payInfo[0].channelCode“>
<template #title>
<imgsrc=“http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png“ alt=“”>
<span>支付宝支付</span>
</template>
<template #right-icon>
<van-radio :name=“2“ />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
</div>
<van-button @click=“handlePay“>￥{{ course.discounts }} 立即支付</van-button>
</van-cell>
</van-cell-group>
</div>
</template>
若有收获，就点个赞吧
0 人点赞
