1.0.5 • Published 2 years ago
style-template-string v1.0.5
style-template-string
功能
通过模板字符串标记实现链式函数调用,更简洁的一次性修改DOM多个样式及属性
。
教程(以Vue为例)
下载
npm install style-template-string
引入
// 建议在main.js全局引入
import 'style-template-string'
使用
mounted() {
// 需要在mounted钩子之后调用
const hello = document.querySelector('.hello')
}
修改样式
const color = 'red'
hello.setStyle`
font-size: 40px;
color: ${color};
border: 1px solid #ccc
`
修改属性
const b = 2
hello.setProp`
a: 1;
b: ${b};
data-c: 3
`
修改内容
const text = 'content text'
hello.setContent`this is a ${text} !!!`
链式调用
hello.setStyle`
font-size: 40px;
color: ${color};
border: 1px solid #ccc
`.setProp`
a: 1;
b: ${b};
data-c: 3
`.setContent`this is a ${text} !!!`