You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.6 KiB
43 lines
1.6 KiB
10 months ago
|
import test from './test.js'
|
||
|
|
/**
|
||
|
|
* @description 样式转换
|
||
|
|
* 对象转字符串，或者字符串转对象
|
||
|
|
* @param {object | string} customStyle 需要转换的目标
|
||
|
|
* @param {String} target 转换的目的，object-转为对象，string-转为字符串
|
||
|
|
* @returns {object|string}
|
||
|
|
*/
|
||
|
|
function addStyle(customStyle, target = 'object') {
|
||
|
|
// 字符串转字符串，对象转对象情形，直接返回
|
||
|
|
if (test.empty(customStyle) || typeof(customStyle) === 'object' && target === 'object' || target === 'string' && typeof(customStyle) === 'string') {
|
||
|
|
return customStyle
|
||
|
|
}
|
||
|
|
// 字符串转对象
|
||
|
|
if (target === 'object') {
|
||
|
|
// 去除字符串样式中的两端空格(中间的空格不能去掉，比如padding: 20px 0如果去掉了就错了)，空格是无用的
|
||
|
|
customStyle = trim(customStyle)
|
||
|
|
// 根据";"将字符串转为数组形式
|
||
|
|
const styleArray = customStyle.split(';')
|
||
|
|
const style = {}
|
||
|
|
// 历遍数组，拼接成对象
|
||
|
|
for (let i = 0; i < styleArray.length; i++) {
|
||
|
|
// 'font-size:20px;color:red;'，如此最后字符串有";"的话，会导致styleArray最后一个元素为空字符串，这里需要过滤
|
||
|
|
if (styleArray[i]) {
|
||
|
|
const item = styleArray[i].split(':')
|
||
|
|
style[trim(item[0])] = trim(item[1])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return style
|
||
|
|
}
|
||
|
|
// 这里为对象转字符串形式
|
||
|
|
let string = ''
|
||
|
|
for (const i in customStyle) {
|
||
|
|
// 驼峰转为中划线的形式，否则css内联样式，无法识别驼峰样式属性名
|
||
|
|
const key = i.replace(/([A-Z])/g, '-$1').toLowerCase()
|
||
|
|
string += `${key}:${customStyle[i]};`
|
||
|
|
}
|
||
|
|
// 去除两端空格
|
||
|
|
return trim(string)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default addStyle
|