简单粗暴修改vant组件nav-bar的title(标题的字体颜色)

痛定思痛。 2023-02-15 03:41 35阅读 0赞

最近我有人问我关于vant组件的nav-bar的标题颜色需要改但是不会，我去网上找了一下，发现都很复杂

然后我发现通过深度选择器可以修改nav-bar的标题的字体颜色

代码：

<template>
    	<view>
    		<demo-block title="基础用法" class="reset">
    			<van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow @clickLeft="onClickLeft" @clickRight="onClickRight" id="reset"/>
    		</demo-block>
    
    		<demo-block title="高级用法">
    			<van-nav-bar title="标题" left-text="返回" left-arrow>
    				<van-icon name="search" slot="right" custom-class="icon" />
    			</van-nav-bar>
    		</demo-block>
    
    	</view>
    </template>
    
    <script>
    	import Page from '../../common/page';
    
    	export default {
    		data() {
    			return {
    
    			}
    		},
    		onLoad() {},
    		methods: {
    			onClickLeft() {
    				console.log("11");//TODO 进不来
    				uni.showToast({
    					title: '点击返回',
    					icon: 'none'
    				});
    			},
    
    			onClickRight() {
    				uni.showToast({
    					title: '点击按钮',
    					icon: 'none'
    				});
    			}
    		}
    	}
    </script>
    
    <style>
    	.icon {
    		color: #1989fa;
    	}
    		
    	
    	#reset /deep/ .van-ellipsis{
    		color: red !important;
    	}
    </style>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]

解释： 给组件定义个id，再通过这个深度选择器获取title的标签的类名，修改它的颜色即可.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200604135236791.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3,size_16,color_FFFFFF,t_70#pic_center