vant/packages/tag/index.js

import { use } from '../utils';
import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';

const [sfc, bem] = use('tag');

const COLOR_MAP = {
  danger: RED,
  primary: BLUE,
  success: GREEN
};

export default sfc({
  props: {
    size: String,
    type: String,
    mark: Boolean,
    color: String,
    plain: Boolean,
    round: Boolean,
    textColor: String
  },

  computed: {
    style() {
      const color = this.color || COLOR_MAP[this.type] || GRAY_DARK;
      const key = this.plain ? 'color' : 'backgroundColor';
      const style = { [key]: color };

      if (this.textColor) {
        style.color = this.textColor;
      }

      return style;
    }
  },

  render(h) {
    const {
      mark,
      plain,
      round,
      size
    } = this;

    return (
      <span
        class={[
          bem({ mark, plain, round, [size]: size }),
          {
            'van-hairline--surround': plain
          }
        ]}
        style={this.style}
      >
        {this.$slots.default}
      </span>
    );
  }
});