前端vue3 巧妙的checkbox 选中框样式

我们 做前端页面交互效果的时候

我们会使用到 checkbox 复选框 做一些交互的效果

我是用的是 nut-ui 组件库中的 checkbox 组件

类似于这样的选中效果

假如 二选一的那种 可以 这样写 交互好看 而不是单纯的 checkbox 框

这里我就不使用 gif 图片了

大家应该都可以看懂的

我把代码 和样式放在下面

大家可以看看 都应该能看懂的

<template>
    <div class="order-detail-type-container">
        <nut-cell-group title="购票方式">
            <nut-cell>
                <div class="purchase-type-container">
                    <div class="item" :class="{ active: !isSpeedTicket }" @click="() => {
                        isSpeedTicket = false;
                    }
                        ">
                        <div class="content">
                            <div class="title">
                                <div class="icon">
                                    <IconFont font-class-name="iconfont" class-prefix="icon" name="tuipiao" />
                                </div>
                                <div class="txt">支付宝</div>
                            </div>
                            <div class="desc">使用支付宝安全支付</div>
                        </div>
                        <div class="price">
                        </div>
                        <div class="operate">
                            <Checked class="checked-icon" color="#6551FC" />
                            <CheckNormal class="check-normal-icon" color="#6551FC" />
                        </div>
                    </div>
                </div>

            </nut-cell>
            <nut-cell>
                <div class="purchase-type-container">
                    <div class="item" :class="{ active: isSpeedTicket }" @click="() => {
                        isSpeedTicket = true;
                    }
                        ">
                        <div class="content">
                            <div class="title">
                                <div class="icon">
                                    <IconFont font-class-name="iconfont" class-prefix="icon" name="tuipiao" />
                                </div>
                                <div class="txt">支付宝</div>
                            </div>
                            <div class="desc">使用支付宝安全支付</div>
                        </div>
                        <div class="price">
                        </div>
                        <div class="operate">
                            <Checked class="checked-icon" color="#6551FC" />
                            <CheckNormal class="check-normal-icon" color="#6551FC" />
                        </div>
                    </div>
                </div>

            </nut-cell>

        </nut-cell-group>
    </div>
</template>
<script setup lang="ts">
import { IconFont, Checked, CheckNormal } from "@nutui/icons-vue-taro";
import { toRefs } from "vue";

import { ref, watch } from "vue";
const props = defineProps({
    info: Object,
});
const { info } = toRefs(props);
const isSpeedTicket = ref(false);
const emit = defineEmits(["getType"]);
watch(isSpeedTicket, (val) => {
    emit("getType", val);
});
</script>
<style lang="scss">
.order-detail-type-container {
    display: flex;
    flex-direction: column;
    font-size: 24px;

    .purchase-type-container {
        font-size: 24px;

        .item.active {
            background: #fff8f9;

            .content {
                .title {
                    .txt {
                        color: #6551FC;
                        font-size: 24px;
                    }
                }
            }

            .operate {
                .checked-icon {
                    display: block;
                }

                .check-normal-icon {
                    display: none;
                }
            }
        }

        .item {
            padding: 20px;
            border-radius: 10px;
            border: 5px solid #fff8f9;
            display: flex;
            flex-direction: row;
            // width: 100%;

            .content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;

                .title {
                    display: flex;
                    flex-direction: row;

                    .icon {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        background: linear-gradient(to right, #875CFD,
                                #6551FC);
                        height: 38px;
                        width: 38px;
                        border-radius: 50px;
                        margin-right: 15px;

                        .iconfont {
                            font-size: 24px;
                            color: #ffffff;
                        }
                    }

                    .txt {
                        font-weight: 500;
                        color: #15181d;
                        font-size: 32px;
                    }
                }

                .desc {
                    margin-top: 15px;
                    color: #858a99;
                    font-size: 22px;
                }
            }

            .price {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: center;

                .title {
                    display: flex;
                    height: 35px;
                    flex-direction: row;
                }

                .desc {
                    color: #858a99;
                    font-size: 22px;
                }
            }

            .operate {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 80px;

                .checked-icon {
                    display: none;
                }

                .check-normal-icon {
                    display: block;
                }
            }
        }
    }
}
</style>