javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uniapp覆盖组件样式

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

作者:星月前端

最近使用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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文