bem.js

/*
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-23 17:20:11
 * @LastEditTime: 2019-09-23 17:53:49
 * @LastEditors: Please set LastEditors
 */
/**
 * bem helper
 * b() // 'button'
 * b('text') // 'button__text'
 * b({ disabled }) // 'button button--disabled'
 * b('text', { disabled }) // 'button__text button__text--disabled'
 * b(['disabled', 'primary']) // 'button button--disabled button--primary'
 */
const ELEMENT = '__'
const MODS = '--'

const join = (name, el, symbol) =>
  el ? (name ? name + symbol + el : el) : name

const prefix = (name, mods) => {
  if (typeof mods === 'string') {
    return join(name, mods, MODS)
  }

  if (Array.isArray(mods)) {
    return mods.map(item => prefix(name, item))
  }

  const ret = {}
  Object.keys(mods).forEach(key => {
    ret[name + MODS + key] = mods[key]
  })
  return ret
}

export default {
  methods: {
    b(el, mods) {
      const { name } = this.$options

      if (el && typeof el !== 'string') {
        mods = el
        el = ''
      }
      el = join(name, el, ELEMENT)

      return mods ? [el, prefix(el, mods)] : el
    }
  }
}

使用

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-24 19:19:09
 * @LastEditTime: 2019-10-17 12:56:05
 * @LastEditors: Please set LastEditors
 -->
<!-- </template>
tion: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-24 19:19:09
 * @LastEditTime: 2019-09-24 19:19:09
 * @LastEditors: your name
 -->
<template>
  <div :class="b('wrapper', ['wrapper'])">
    <CommonHeader></CommonHeader>
    <div :class="b('wrapper', ['container'])">
      <div :class="b('wrapper', ['breadcrumb'])">
        <slot name="breadcrumb"></slot>
      </div>
      <div :class="b('wrapper', ['main'])">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CommonMainLayout',
  components: {}
}
</script>
<style lang="scss">
body {
  background: #f4f5f6;
}
.CommonMainLayout {
  &__wrapper {
    &--wrapper {
      background: #f4f5f6;
    }
    &--container {
      width: 1200px;
      margin: 0 auto;
    }
    &--breadcrumb {
      margin-top: 8px;
    }
    .dark.ant-menu-light.ant-menu-horizontal li:not(:nth-last-child(1)):before {
      position: absolute;
      content: '';
      width: 0;
      height: 20px;
      border-right: 1px dotted #fff;
      top: 0;
      right: -4px;
      bottom: 0;
      margin: auto;
    }
  }
}

</style>