常见错误解决记录

100

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"
  }
}

重新编译运行