怎样开发公司的网站建设/荨麻疹怎么治疗能除根
最近我有人问我关于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>
效果:
解释: 给组件定义个id,再通过这个深度选择器获取title的标签的类名,修改它的颜色即可.