组件中通过：before(伪类)给文字前面加样式-vue

要求实现效果：

如果不是组件内使用把props中传的参数改为data中挂载即可
实现方案1.

 <div class="status">
    <div class="outer-circle" :style="{'margin-left':left}">
      <span :class="colorClass"></span>
      <span>{{ text }}</span>
    </div>
  </div>
  export default{
  data () {
  return {
  colorClass: ''
  }}
  props: {
    text: {
      type: String,
      required: false,
      default: ''
    }
  }
  }
<style>
.circle{
  width: 8px;
  height: 8px;
  margin-right: 0.3em;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  &.yellow{
    background: $yellow;
  }
  &.green{
    background: $green;
  }
  &.blue{
    background-color: $blue;
  }
  &.red{
    background-color: $red;
  }
  &.gray{
    background-color: $gray;
  }
}
</style>

在状态前面加入一个div去盛放这个有颜色的⚪

性能不好，会形成很多没必要的div块而且形成的dom树比较复杂以后修改的话不好修改

下面有一种更好的方法

实现方案2.

<span :class="colorClass">{{ text }}</span>

export default {
 data () {
  return {
  text : ''
  }}
  props: {
  text: {
  type: String,
   required: false,
      default: ''
  },
    colorClass: {
      type: String,
      required: false,
      default: '',
		// 校验规则
      validator: function (value) {
        const colorList = ['red', 'green', 'yellow', 'blue', 'gray', '']
        return colorList.indexOf(value) > -1
      }
    }
  }
}
<style>
.red, .green, .yellow, .blue, .gray{
  padding-left:20px;
  position: relative;
  &:before{
    content: '';
    left:0.5em;
    top: 0.5em;
    position:absolute;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
}
.red:before{
  background-color:$red;
}
.green:before{
  background-color:$green;
}
.yellow:before{
  background-color:$yellow;
}
.blue:before{
  background-color:$blue;
}
.gray:before{
  background-color:$gray;
}
</style>

先用padding-left给⚪腾一个位置，然后通过伪类的width，height创建出一个⚪，把它直接定位到文字前面的空间里，

然后再通过colorClass动态控制它的颜色