Question

我正在使用paper-scroll-header-panel并使用自定义CSS属性

 paper-scroll-header-panel {
   --paper-scroll-header-panel-full-header: {
            background-image: url(images/abcd.jpg);
          };
}

为完整大小的标题设置样式。我的问题是，此自定义组件的标题图像应根据从加载此组件的页面传递的图像URL而有所不同。因此，我已经定义了一个属性并尝试通过计算属性进行分配，但这似乎不起作用。这就是我所做的。

<paper-scroll-header-panel style$={{backgroundCover}}>

并在JS中：

Polymer({
  is: 'dummy-layout',
  properties: {
    cover: String,
    backgroundCover: {
        type: String,
        computed: 'computeBackground(cover)'
    }
  },    
  computeBackground: function(cover) {
    return '--paper-scroll-header-panel-full-header: { background-image: url(' + cover + ');};';
    },

但这不起作用。在使用自定义CSS组件时，如何使用因不同组件实例而异的背景图像？

更新：当前代码如下。仍然没有工作。

<dom-module id="recipe-layout">

  <link rel="import" type="css" href="recipe-layout.css">
  <style is="custom-style">

    paper-scroll-header-panel {
      position: absolute;
      /* background for toolbar when it is at its full size */
      --paper-scroll-header-panel-full-header: {
        background-image: url();
      };
      /* background for toolbar when it is condensed */
      --paper-scroll-header-panel-condensed-header: {
        background-color: #00bcd4;
      };
    }
    paper-toolbar {
      height: 400px;
      background-color: transparent;
    }
</style>
<template>
 <paper-scroll-header-panel condenses condensed-header-height="56" id="scroller">

        <!-- Main Toolbar -->
        <paper-toolbar>
          <paper-icon-button icon="arrow-back" onclick="javascript:history.go(-1)"></paper-icon-button>
          <div class="flex"></div>
          <paper-icon-button icon="more-vert"></paper-icon-button>
          <div class="bottom title"><content select=".cover-title"></content></div>
        </paper-toolbar>

        <div class="content">
            <content select=".main-content"></content>
        </div>

      </paper-scroll-header-panel>
</template>

  <script>

    Polymer({

      is: 'dummy-layout',

      properties: {
        cover: {
            type: String,
            observer: '_updateBg'
        },
      },

      _updateBg: function(cover) {
        this.async(function() { this.subupdateBg(cover); }, 100);
      },

      subupdateBg: function(cover) {
        var scrollerBg = this.$.scroller;
        console.dir(scrollerBg);
        var newStyle = 'background-image: url('+ cover + ');';
        scrollerBg.customStyle['--paper-scroll-header-panel-full-header'] = newStyle;
        scrollerBg.updateStyles();
    }
  </script>

</dom-module>

Answer 1

您无法在style属性中更改自定义css属性，因为它仅在元素的创建时进行评估。您必须在元素内的customStyle属性中应用它们，然后调用updateStyles方法。

来源：https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api

Answer 2

@Neil是对的。这个--paper-scroll-header-panel-full-header是一种CSS变量。 Here I made a small example，我演示了如何操纵它们：

<dom-module id="dummy-layout">

  <style>
    :host {
      --bg: {
        background-color: red;
      }
    }

    .test {
      @apply(--bg);
    }
  }
  </style>

    <template>
      <div class="test">Hello world</div>
      <button type="button" on-click=btn>Click</button>
    </template>

  <script>
    Polymer({
      is: "dummy-layout",
      properties: {
        data: {
          type: String,
          observer: '_updateStyle'
        },
      },
      btn: function () {
        this.set('data', Math.random());
      },
      _updateStyle: function () {
        var colors = ['blue', 'green'];
        this.i = (this.i || 0) + 1;
        var newStyle = 'background-color: '+colors[this.i%2]+';';
        this.customStyle['--bg'] = newStyle;
        this.updateStyles();
      }
    });
  </script>

</dom-module>

您的代码几乎可以使用。实际发生的是，您的样式更改代码永远不会被调用，因为封面永远不会更改。如果添加更改它的按钮或其他任何工作。这是您的代码，几乎没有修改：http://pastebin.com/beNAYMRF

Answer 3

如果你检查了paper-scroll-header-panel（https://github.com/PolymerElements/paper-scroll-header-panel/blob/master/paper-scroll-header-panel.html）的来源，你会看到你输入的样式值＆＃39; - paper-scroll-header-panel-full-报头＆＃39;应用于#headerBg（第127行）。

因此，您可以通过更改headerBg的样式来更改背景图像。如果您正在使用Polymer Starter Kit，则可以在app.js中添加以下行：

    document.querySelector('paper-scroll-header-panel').$.headerBg.style.backgroundImage = "url(path/to/image)";

或者在你的情况下：

    this.$.scroller.$.headerBg.style.backgroundImage = "url(path/to/image)";

Plunker Demo：https://plnkr.co/edit/gd6S7q?p=preview

通过Javascript更新自定义CSS属性

但这不起作用。在使用自定义CSS组件时，如何使用因不同组件实例而异的背景图像？

3 个答案: