二手项目开发遇到的问题

vue+vant之van-radio-group的使用

2020-01-20  本文已影响0人  荼蘼toome
<van-radio-group v-model="radio" style="margin-top: 2rem;">
            <div class="cell">
                <img src="../../assets/icons/icon_zhanghuyue@2x.png" />
                <p>账户余额</p>
                <van-radio name="1" class="radio">
                    <img slot="icon" slot-scope="props" :src="props.checked ? activeIcon : inactiveIcon">
                </van-radio>
            </div>
            <div class="cell">
                <img src="../../assets/icons/icon_saomazhifu@2x.png" />
                <p>码支付</p>
                <van-radio name="2" class="radio">
                    <img slot="icon" slot-scope="props" :src="props.checked ? activeIcon : inactiveIcon">
                </van-radio>
            </div>
            <div class="cell">
                <img src="../../assets/icons/icon_jifenzhifu@2x.png" />
                <p>积分支付</p>
                <van-radio name="3" class="radio">
                    <img slot="icon" slot-scope="props" :src="props.checked ? activeIcon : inactiveIcon">
                </van-radio>
            </div>
        </van-radio-group>

van-radio自定义图片只能使用网络上的


.cell {
        display: flex;
        align-items: center;
        width: 90%;
        height: 1.2rem;
        line-height: 1.2rem;
        margin: 0 auto;
        border-bottom: #E5E5E5 solid 1px;

        img {
            width: 25px;
            height: 25px;
            margin-left: 10px;
        }

        p {
            margin-left: 10px;
        }
    }

    .radio {
        height: 1rem;
        line-height: 1rem;
        position: absolute;
        right: 40px;

        img {
            width: 15px;
            height: 15px;
        }
    }
上一篇 下一篇

猜你喜欢

热点阅读