uniapp实现单选组件覆盖选中样式

news/2024/4/27 18:32:46/文章来源:https://blog.csdn.net/qq_61950936/article/details/137064475

uniapp实现单选组件覆盖选中样式

在这里插入图片描述

完整代码：

<!-- 是否选择组件: trueOfFalseChooseBtn -->
<template><view class="is-true-body"><view class="btn-con" :class="isTrue ? 'btn-con-active' : ''" @click="clickBtn(true)"><text>是</text></view><view class="btn-con" :class="isTrue ? '' : 'btn-con-active'" @click="clickBtn(false)"><text>否</text></view></view>
</template><script>export default {props: {value: {type: Boolean,default: true,},},watch: {isTrue(nv) {this.$emit('input', nv)}},data() {return {isTrue: this.value,}},methods: {clickBtn(e) {this.isTrue = e;}}}
</script><style lang="scss" scoped>.is-true-body {width: 100%;display: flex;justify-content: space-between;.btn-con {flex: 1;height: 40px;border-radius: 10px;text-align: center;line-height: 40px;position: relative;border: 1px solid rgba(255, 255, 255, 0);}.btn-con-active {border: 1px solid $uni-color-primary;}// 左上角三角形.btn-con-active::after {content: '';position: absolute;top: 0;left: 0;width: 0;height: 0;border-top: 28px solid $uni-color-primary;border-right: 30px solid rgba(255, 255, 255, 1);border-radius: 8px 0 0 0;}// 左上角勾勾图片.btn-con-active::before {content: url('@/static/images/icon/gg.svg');position: absolute;top: -12px;left: 3px;width: 10px;height: 10px;z-index: 999;}}
</style>