html – CSS通过data-image attr设置background-image 无效
我在编程中,有些无关紧要的点缀样式我会用伪元素实现。比方某个元素后面的注释,但有时注释的内容会是动态的,这时就可以用attr实现
<template lang="pug">
.header(
:data-date="logs.date"
:header="{rank: '排名',name:'用户名', charm: `${config.theme}值`}"
)
</template>
<style lang="stylus" scoped>
.header
height .5rem
background-color #FF725C
position relative
border-radius .17rem .17rem 0 0
&::before
content attr(data-date)
display block
bg-size(.94rem,.5rem,'date_bg')
position absolute
left -.93rem
top 0rem
font-size .26rem
padding-left 0.2rem
text-align center
</style>
但是如果碰到想动态设置背景,该属性将不能使用 文档 如 background-image - 是 CSS第2级规范,结合了 url()和 attr()无效 ~~content:url(attr(data-image)); ~~。 目前只能用js解决设置内联样式
运行报错Parsing error: The keyword 'export' is reserved
这是因为我们还没有在配置文件.eslintrc中配置parserOptions来指定语言版本为和模块类型
在.eslintrc添加如下配置:
{
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
}
}
重新编译运行