首页 > 技术文章 > vue单页面在不同路由添加不同body样式

zerofan 2021-09-13 14:41 原文

import { addClass, removeClass } from '../../common/js/dom'
export default {
beforeCreate () {
let uniqueClass = this.$options && this.$options.uniqueBodyClass
if( uniqueClass ) {
addClass(document.body, uniqueClass)
}
},
beforeDestroy () {
let uniqueClass = this.$options && this.$options.uniqueBodyClass
if( uniqueClass ) {
removeClass(document.body, uniqueClass)
}
}
}
 
// dom.js(可参考element源码中dom.js)
const isServer = false;

/* istanbul ignore next */
const trim = function (string) {
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
};

/* istanbul ignore next */
export function hasClass(el, cls) {
if (!el || !cls) return false;
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
if (el.classList) {
return el.classList.contains(cls);
} else {
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
};

/* istanbul ignore next */
export function addClass(el, cls) {
if (!el) return;
var curClass = el.className;
var classes = (cls || '').split(' ');

for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;

if (el.classList) {
el.classList.add(clsName);
} else if (!hasClass(el, clsName)) {
curClass += ' ' + clsName;
}
}
if (!el.classList) {
el.className = curClass;
}
};


/* istanbul ignore next */
export function removeClass(el, cls) {
if (!el || !cls) return;
var classes = cls.split(' ');
var curClass = ' ' + el.className + ' ';

for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;

if (el.classList) {
el.classList.remove(clsName);
} else if (hasClass(el, clsName)) {
curClass = curClass.replace(' ' + clsName + ' ', ' ');
}
}
if (!el.classList) {
el.className = trim(curClass);
}
};
 
使用:

 

 

 

 

 

推荐阅读