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;
}

到此，完工。