69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<van-radio-group v-model="radio">
|
||
|
|
<van-cell-group>
|
||
|
|
<van-cell title="最新发布" clickable @click="radio = '1'">
|
||
|
|
<van-radio name="1">
|
||
|
|
<template #icon="props">
|
||
|
|
<span v-html="props.checked ? activeIcon : inactiveIcon"></span>
|
||
|
|
</template>
|
||
|
|
</van-radio>
|
||
|
|
</van-cell>
|
||
|
|
<van-cell title="最高讨论" clickable @click="radio = '2'">
|
||
|
|
<van-radio name="2">
|
||
|
|
<template #icon="props">
|
||
|
|
<span v-html="props.checked ? activeIcon : inactiveIcon"></span>
|
||
|
|
</template>
|
||
|
|
</van-radio>
|
||
|
|
</van-cell>
|
||
|
|
<van-cell title="最高阅读" clickable @click="radio = '3'">
|
||
|
|
<van-radio name="3">
|
||
|
|
<template #icon="props">
|
||
|
|
<span v-html="props.checked ? activeIcon : inactiveIcon"></span>
|
||
|
|
</template>
|
||
|
|
</van-radio>
|
||
|
|
</van-cell>
|
||
|
|
<van-cell title="最高评分" :style="activeColor ? 'color:#378dec;' : ''" clickable @click="radio = '4'">
|
||
|
|
<van-radio name="4">
|
||
|
|
<template #icon="props">
|
||
|
|
<span v-html="props.checked ? activeIcon : inactiveIcon"></span>
|
||
|
|
</template>
|
||
|
|
</van-radio>
|
||
|
|
</van-cell>
|
||
|
|
</van-cell-group>
|
||
|
|
</van-radio-group>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'radio',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
radio: '1',
|
||
|
|
activeColor: '',
|
||
|
|
inactiveColor: '',
|
||
|
|
activeIcon: '<i class="awsui-iconfont" style="color:#378dec;margin-right:5px;"></i>',
|
||
|
|
inactiveIcon: '<i class="awsui-iconfont" style="color:#fefefe;margin-right:5px;"></i>'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
.van-cell__value {
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.van-cell {
|
||
|
|
padding: 10px 0 10px 17px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.van-cell__title, .van-cell__value {
|
||
|
|
-webkit-box-flex: none;
|
||
|
|
-webkit-flex: none;
|
||
|
|
flex: none;
|
||
|
|
}
|
||
|
|
</style>
|