切换主题——控制类名的显示隐藏

使用Switch标签切换主题

 <el-switch v-model="theme" />
  watch: {
    theme() {
      toggleClass(document.body, 'custom-theme')
    }
  }

公共方法

/**
 * 判断某标签上如果有某个类名，就去掉；如果没有就添加
 * @param {HTMLElement} element 标签
 * @param {string} className 类名
 */
export function toggleClass(element, className) {
  if (!element || !className) {
    return
  }
  // 获取当前element标签上的类名字符串
  let classString = element.className
  // 获取当前类名className在该字符串中第一次出现的索引，-1代表没有
  const nameIndex = classString.indexOf(className)
  // 如果没有就加上该类名，如果有就去掉该类名
  if (nameIndex === -1) {
    classString += '' + className
  } else {
    classString =
      classString.substr(0, nameIndex) +
      classString.substr(nameIndex + className.length)
  }
  element.className = classString
}