radio 在移动端自定义
# 在移动端 单选框样式不好看 ui会设计一套单选框样式 开发也就只有按照ui样式来进行开发
本人测试 使用2中方法实现单选，动态改变图片，获取选中的值 不足之处请指出（谢谢）
以下是实现代码：
<template>
<div class="bankInfo">
<!-- 列表 start-->
<section>
<ul>
<!-- 第一种实现方法 -->
<li v-for="(item, index) in listArray" :key="index">
<i @click="change(item,index)" :class="['not_icon',{style:selectBg[index]}]"></i>
<span class="number">{{item.num}}</span>
<span class="text">{{item.text}}</span>
</li>
<!-- 第二种实现方法 -->
<!-- <li><i @click="change(item,index)" :class="['not_icon',{style:index == selectedInfo}]"></i>
<span class="number">{{item.num}}</span>
<span class="text">{{item.text}}</span>
</li> -->
</ul>
</section>
<!-- 列表 end-->
</div>
</template>
<script>
export default {
data () {
return {
／／ 模拟数据
listArray: [
{
id: 0,
num: '01233890',
text: '哈哈哈哈'
},
{
id: 1,
num: '01233890',
text: '嘻嘻嘻嘻'
},
{
id: 2,
num: '01233890',
text: '呃呃呃呃'
},
{
id: 3,
num: '01233890',
text: '嘿嘿嘿嘿'
},
{
id: 4,
num: '01233890',
text: '么么么么'
}
],
selectBg:[],
selectedInfo: 0 //第二种方法直接根据索引来切换类
}
},
methods: {
／／ 当切换单选按钮时 保存当前获取到的值
change (item,index) {
// 第一种方法通过vue中set方法来改变数组 // this.selectBg.forEach(function(element,index) {
// this.$set(this.selectBg,index,false)
// }, this)
// this.$set(this.selectBg,index,true)
this.selectedInfo = item.id
console.log('获取',this.selectedInfo)
}
},
created () {
},
mounted (){
}
}
</script>
<style lang="scss" >
.bankInfo {
width: 100%;
height: 200px;
section {
width: 100%;
ul {
width: 100%;
li {
width: 100%;
display: flex;
align-items: center;
i {
display: inline-block;;
width: 46px;
height: 46px;
background-size: 100% 100%;
}
.not_icon {
background: url('https://images2015.cnblogs.com/blog/385935/201606/385935-20160614150028885-517912247.png')
no-repeat;
}
.style {
background: url('https://images2015.cnblogs.com/blog/385935/201606/385935-20160614150011338-374586129.png')
no-repeat;
}
.number {
margin-left: 30px;
}
.text {
margin-left: 30px;
}
}
}
}
}
</style>