vue vux x-header组件的返回图标颜色修改

业务场景：自己在x-header的基础上再封装了一下，要求根据父页面传来的参数设置x-header的标题背景色、标题字色和返回颜色

动态修改背景色比较简单

<template><x-header :style='backColor'></x-header>
</template>data () {return {backColor: {backgroundColor: '#fff' //默认白色}
}
mounted () {//一些条件...this.backColor = {backgroundColor: this.cHeaderColor}
}

动态修改字体的话方法稍微有点寒碜了，需要直接操作dom了

mounted () {//一些条件...let headColor = document.getElementsByClassName('vux-header-title')[0]headColor.style.color = '#fff'
}

最头疼的就是修改修改返回图标的颜色了，因为这是一个before伪元素，用第二种方法也行不通，搜"left-arrow::before"是undefine。

网上搜了js怎么修改伪元素样式发现要用到removeClass()和addClass()，然后发现报错，

当时我是用的document 按照类名获取出来的元素去addClass，最后才发现这个东西不是这么用的（因为没怎么用过JQuery，基础还不够），后来吭哧吭哧按照教程引入了JQuery

$('.left-arrow').removeClass('left-arrow').addClass('returnIcon')

这边就是把left-arrow的样式复制以下然后修改里面的before里的border-color为你要的颜色

.returnIcon {position: absolute;width: 30px;height: 30px;left: -5px;&::before {content: "";position: absolute;width: 12px;height: 12px;border: 1px solid #fff;  //这边要改border-width: 1px 0 0 1px;-webkit-transform: rotate(315deg);transform: rotate(315deg);top: 8px;left: 7px;}}

刷新下页面就有了。

然后我觉得这么搞也太麻烦了，就很难受呀，就又去看扒了下官方文档，找到了一条更简单的方法，重载overwrite-left插槽

<template><x-header><div slot="overwrite-left" class="goBack" :style="borderColor"></div></x-header>
</template>data () {return {borderColor: {borderColor: 'black'}}
},//这边copy刚才的before伪元素就行
.goBack {position: absolute;width: 12px;height: 12px;border-style: solid;border-color: white;border-width: 1px 0 0 1px;-webkit-transform: rotate(315deg);transform: rotate(315deg);top: 8px;
}

到此，完工。

vue vux x-header组件的返回图标颜色修改相关推荐

vue html 百度地图3D楼建筑物上颜色修改颜色
先看效果图: 引入GL版 <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥&quo ...
vue刘海屏兼容组件
vue 刘海屏兼容组件 /* 无返回按钮的标头 */ <template><div v-if="GLOBAL.evnType === GLOBAL.ENV_TYPES.AP ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
vue高仿饿了么项目学习笔记之二:头部header组件的实现
1. Vue-resource应用在父组件APP.vue的钩子函数created使用vue-resource来ajax请求/api/seller,将数据赋值给vue实例的seller对象,并传值给子 ...
vue高仿饿了么学习笔记（五）—— header 组件
先贴一张 header 的 UI 图一.header 组件 1)传入 seller 数据 // App.vue <template><div id="app"& ...
vue中headers是什么_【vue】饿了么项目-header组件开发
1.数据传递的理解在App.vue中用到了header组件,首先注册组件 components: {'v-header': header } 然后才能引用 :seller="seller& ...
vux组件的cell组件上下箭头图标显示问题，cell必须放在groud内才会显示
vux组件的cell组件上下箭头图标显示问题,cell必须放在groud内才会显示 <template><div><x-header :left-options=&quo ...
Vue子组件使用$emit接收从父组件的返回值
1.父组件 <template><div><div style="font-weight:bold">{{ fatherText }}:{{ t ...
vue通过返回值来判断图标的显示/隐藏，改变图标颜色
在表格中通过后台返回数据来判断图标的变化方法1: 如上,后台返回的status=1为已阅,status=0为未批阅,已阅则显示绿色的图标,我这里是用vue+elementui来实现的: <el ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...

vue vux x-header组件的返回图标颜色修改

vue vux x-header组件的返回图标颜色修改相关推荐

最新文章

热门文章