UniApp 组件内修改组件内的组件的样式,穿透组件中的组件样式

UniApp 组件内修改组件内的组件的样式,穿透组件中的组件样式


页面可以修改页面引入的组件样式 直接使用 /deep/
例如:
main页面 修改 a组件的样式

	<style lang="scss" scoped>
	<template>
		<view>
			<a-d class="a-d"></a-d>
		</view>
	</template>
	<script>
		import a from "@/components/a.vue";
		export default {
			components: {
				"a-d": a
			}
		}
	</script>
	<style lang="scss">
		.a-d /deep/ .a{
			color: red;
		}
	</style>
</style>

重点:组件中样式不能直接穿透组件,需要在页面中穿透组件(也就是说在页面中组件的样式再写组件中的组件的样式),参考下列写法

main.vue 这是一个页面
<template>
	<view>
		<a-d class="a-d"></a-d>
	</view>
</template>
<script>
	import a from "@/components/a.vue";
	export default {
		components: {
			"a-d": a
		}
	}
</script>
<style lang="scss" scoped>
	.a-d /deep/ .a{
		color: red;
		.b{
			color: blue;
		}
	}
</style>
这是 a 组件

a 组件不包含样式

<template>
	<view class="a">
		<text>a</text>
		<b-d class="b-d"></b-d>
	</view>
</template>

<script>
	import b from "./b.vue";
	export default {
		components:{
			"b-d": b
		},
		name:"a"
	}
</script>
这是 b 组件

b 组件不包含样式

<<template>
	<view class="b">
		<text>b</text>
	</view>
</template>
<script>
	export default {
		name:"b",
	}
</script>
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在 nvue 页面修改 Slider 组件样式和行为与在普通页面有些不同,需要使用自定义组件样式。具体步骤如下: 1. 在项目新建一个自定义组件,用于封装 Slider 组件。在组件使用原生的 Slider 组件,并将其样式和行为进行封装和暴露。例如: ```vue <template> <slider ref="slider" :value="value" :min="min" :max="max" :step="step" @change="handleChange" @changing="handleChanging" /> </template> <script> export default { props: { value: { type: Number, default: 0, }, min: { type: Number, default: 0, }, max: { type: Number, default: 100, }, step: { type: Number, default: 1, }, }, methods: { handleChange(e) { this.$emit('change', e); }, handleChanging(e) { this.$emit('changing', e); }, }, }; </script> ``` 这样,就可以在 nvue 页面使用该自定义组件来代替原生的 Slider 组件,并通过 props 属性来控制其样式和行为。需要注意的是,自定义组件可以引用原生组件组件,但无法直接修改样式和行为。 2. 在 nvue 页面使用自定义组件,并使用样式修改样式。在 nvue 页面引入自定义组件,并使用样式修改样式,例如: ```vue <template> <view> <my-slider class="my-slider" /> </view> </template> <style scoped> .my-slider >>> .uni-slider-bar { height: 10px; } </style> ``` 这样,自定义组件样式就会被修改为线条高度为 10px。 需要注意的是,nvue 页面样式选择器需要使用 >>> 符号来进行样式穿透,以便选择到自定义组件内部的原生组件。另外,由于 nvue 页面的渲染和样式处理方式不同于普通页面,可能会出现样式失效或影响其他组件的情况,需要进行充分测试和调试。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值