uniapp实现单选组件覆盖选中样式的方法，

uniapp实现单选组件覆盖选中样式的方法，

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>

补充：

修改uniapp组件默认样式

最近使用uniapp开发，有些组件渲染之后会生成一些标签，需要修改生成标签的样式。比如
<uni-data-picker > 等组件，自定义类名还是加重权限均无法覆盖原有样式，解决办法如下：

style标签上加scoped，同时类名前加/deep/ 穿透，即可覆盖原有样式

/deep/ .input-value-border{
    border: none;
}

到此这篇关于uniapp实现单选组件覆盖选中样式的文章就介绍到这了,更多相关uniapp内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• uniapp项目实践之全局公共组件样式及方法使用示例详解
• uniapp组件之tab选项卡滑动切换功能实现
• uniapp使用u-upload组件来实现图片上传功能
• Uniapp全局消息提示以及其组件的实现方法
• uniapp组件uni-popup弹出层的使用