我们 做前端页面交互效果的时候
我们会使用到 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>
