聚合物 - 自定义元素在就绪回调中设置 CSS 类

Polymer - Custom element set a CSS class in ready callback?

本文关键字：设置 CSS 回调 就绪 自定义 元素 聚合物      更新时间：2023-09-26

我正在尝试学习如何使用聚合物和网络组件，但我遇到了这个问题，我找不到任何解决方案。

我正在开发自己的 Web 组件，但我不知道动态设置特定类。

这是我调用组件的方式

<custom-toogle label="my label" class="blue" checked></custom-toogle>

这是我的网络组件

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
<dom-module id="custom-toogle">
<style>
    label {
        display: block;
        font-weight: bold;
        color: #333;
    }
    paper-toggle-button.blue {
        --paper-toggle-button-checked-bar-color: #B3E5FC;
        --paper-toggle-button-checked-button-color: #0288D1;
        --paper-toggle-button-unchecked-bar-color: #B6B6B6;
        --paper-toggle-button-unchecked-button-color: #727272;
    }
</style>
<template>
    <label>{{label}}</label>
    <paper-toggle-button id="toggleButton"></paper-toggle-button>
</template>
<script>
Polymer({
    is: "custom-toogle",
    properties: {
        label: {
            type: String,
            value: null
        },
        checked: {
            type: Boolean,
            value: false
        },
        class: {
            type: String,
            value: 'blue'
        }
    },
    ready: function(){
        var e = document.getElementById("toggleButton");
        if(this.checked) {
            e.checked = true;
        }
        e.className += e.className + " " + this.class;
    }
});
}
</script>
</dom-module>

当我这样做时，蓝色类不应用，但如果我做一个控制台.log（e.classList），"蓝色"类在列表中。

我也尝试在我的元素中做到这一点

<paper-toggle-button id="toggleButton" class="{{class}}"></paper-toggle-button>

它不起作用。

如何动态设置类？

谢谢！

要获取聚合物元素中元素的 id，请使用 this.$.elementId 。试试这个：

var e = this.$.toggleButton;

要更改类，您需要使用 class$ 而不是类

<paper-toggle-button id="toggleButton" class$="{{class}}"></paper-toggle-button>

我在这里的文档中找到了这个：https://www.polymer-project.org/1.0/docs/devguide/data-binding.html

相关文章：