Javascript LitElement：从属性设置样式_Javascript_Polymer_Web Component_Lit Element

Javascript LitElement：从属性设置样式

javascript polymer

Javascript LitElement：从属性设置样式,javascript,polymer,web-component,lit-element,Javascript,Polymer,Web Component,Lit Element,我正在用LitElement构建一个自定义web组件，并希望给它一个disabled属性。我已经做好了造型，但恐怕我正在使用反模式来完成它。我已经定义了一个类方法，并在render（）方法中调用它来设置我想要的样式。这是正确的还是有更好的模式？谢谢 Javascript: class Button extends LitElement { static get properties() { return { disabled: {type: Boo

我正在用LitElement构建一个自定义web组件，并希望给它一个

disabled

属性。我已经做好了造型，但恐怕我正在使用反模式来完成它。我已经定义了一个类方法，并在

render（）

方法中调用它来设置我想要的样式。这是正确的还是有更好的模式？谢谢

Javascript:

class Button extends LitElement {
    static get properties() {
        return {
            disabled: {type: Boolean},
            isFocused: {type: Boolean},
            isHovered: {type: Boolean},
            isMouseDown: {type: Boolean}
        }
    }

    constructor() {
        super();

        this.disabled = false;
        this.innerButtonText = this.innerHTML;
        this.styles = {};
        this.isFocused = false;
        this.isHovered = false;
        this.isMouseDown = false;
    }

    render() {
        this.setStyles();
        return html`
        <style>@import "https://fonts.googleapis.com/css?family=Montserrat:700";</style>
        <style>@import "https://fonts.googleapis.com/css?family=Montserrat:700";</style>
        <button 
        @focus="${this.onFocus}" 
        @blur="${this.onFocus}" 
        @mouseover="${this.onHover}"
        @mouseout="${this.onHover}"
        @mousedown="${this.onMouseDown}"
        @mouseup="${this.onMouseUp}"
        style=${styleMap(this.styles)}>${this.innerButtonText}</button>
      `
    }

    onHover() {
        this.isHovered = !this.isHovered;
    }

    onMouseDown(event) {
        event.stopPropagation();
        this.isMouseDown = !this.isMouseDown;
    }

    onMouseUp() {
        this.isMouseDown = !this.isMouseDown;
    }

    onFocus() {
           this.isFocused = !this.isFocused
    }

    onClick() {

    }

    setStyles() {
        if (this.disabled)
            this.styles = {
                backgroundColor: 'rgba(51,51,51,0.22)', color: 'rgba(51,51,51,0.66)', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0px 1px 3px #33333338', lineHeight: '1.3', letterSpacing: '1.3px'
            };
        else if (this.isFocused)
            this.styles = {
                backgroundColor: '#2e7d32', color: 'white', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0 0 0 2px white, 0 0 0 4px #84BD00', outline: 'none', lineHeight: '1.3', letterSpacing: '1.3px'
            };
        else if (this.isHovered)
            this.styles = {
                backgroundColor: '#005005', color: 'white', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0px 1px 3px #33333338', lineHeight: '1.3', letterSpacing: '1.3px',
                position: 'relative', top: '+3px', cursor: 'pointer'
            };
        else if (this.isMouseDown)
            this.styles = {
                backgroundColor: '#005005', color: 'white', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0px 1px 3px #33333338', lineHeight: '1.3', letterSpacing: '1.3px',
                position: 'relative', top: '-3px', cursor: 'pointer'
            };
        else {
            this.styles = {
                backgroundColor: '#2e7d32', color: 'white', fontFamily: 'Montserrat', fontWeight: '700', height: '45px',
                padding: '15px 30px 15px 30px', borderRadius: '5px', border: 'none', boxShadow: '0px 1px 3px #33333338', lineHeight: '1.3', letterSpacing: '1.3px'
            };
        }
    }
}

customElements.define('custom-button', Button);

class按钮扩展了LitElement{
静态获取属性（）{
返回{
已禁用：{type:Boolean}，
isFocused:{type:Boolean}，
isHovered:{type:Boolean}，
isMouseDown:{type:Boolean}
}
}
构造函数（）{
超级（）；
this.disabled=false；
this.innerButtonText=this.innerHTML；
this.styles={}；
this.isFocused=false；
this.isHovered=false；
this.isMouseDown=false；
}
render（）{
这个.setStyles（）；
返回html`
@进口”https://fonts.googleapis.com/css?family=Montserrat:700";
@进口”https://fonts.googleapis.com/css?family=Montserrat:700";
${this.innerButtonText}
`
}
onHover（）{
this.isHovered=！this.isHovered；
}
onMouseDown（事件）{
event.stopPropagation（）；
this.isMouseDown=！this.isMouseDown；
}
onMouseUp（）{
this.isMouseDown=！this.isMouseDown；
}
onFocus（）{
this.isFocused=！this.isFocused
}
onClick（）{
}
设置样式（）{
如果（此项已禁用）
此参数为0.styles={
背景颜色：“rgba（51,51,51,0.22）”，颜色：“rgba（51,51,51,0.66）”，fontFamily:“蒙特塞拉特”，fontWeight:“700”，身高：“45px”，
填充：“15px 30px 15px 30px”，边框半径：“5px”，边框：“无”，盒影：“0px 1px 3px#3333333 8”，线宽：“1.3”，字母间距：“1.3px”
};
else if（this.isFocused）
此参数为0.styles={
背景颜色：“#2e7d32”，颜色：“白色”，fontFamily:“蒙特塞拉特”，fontWeight:“700”，高度：“45px”，
填充：“15px 30px 15px 30px”，边框半径：“5px”，边框：“无”，框影：“0 0 0 2px白色，0 0 0 4px#84BD00”，轮廓：“无”，线宽：“1.3”，字母间距：“1.3px”
};
否则，如果（这是我发现的）
此参数为0.styles={
背景颜色：'#005005'，颜色：'白色'，fontFamily:'蒙特塞拉特'，fontWeight:'700'，高度：'45px'，
填充：“15px 30px 15px 30px”，边框半径：“5px”，边框：“无”，盒影：“0px 1px 3px#3333333 8”，线宽：“1.3”，字母间距：“1.3px”，
位置：“相对”，顶部：“+3px”，光标：“指针”
};
else if（this.isMouseDown）
此参数为0.styles={
背景颜色：'#005005'，颜色：'白色'，fontFamily:'蒙特塞拉特'，fontWeight:'700'，高度：'45px'，
填充：“15px 30px 15px 30px”，边框半径：“5px”，边框：“无”，盒影：“0px 1px 3px#3333333 8”，线宽：“1.3”，字母间距：“1.3px”，
位置：'相对'，顶部：'-3px'，光标：'指针'
};
否则{
此参数为0.styles={
背景颜色：“#2e7d32”，颜色：“白色”，fontFamily:“蒙特塞拉特”，fontWeight:“700”，高度：“45px”，
填充：“15px 30px 15px 30px”，边框半径：“5px”，边框：“无”，盒影：“0px 1px 3px#3333333 8”，线宽：“1.3”，字母间距：“1.3px”
};
}
}
}
自定义元素。定义（'自定义按钮'，按钮）；

HTML:


标题
@进口”https://fonts.googleapis.com/css?family=Montserrat:700";
按钮
按钮

首先，将添加到

已禁用的

属性，以便该属性“反映”属性的值：

静态获取属性（）{
返回{
残疾人士：{
类型：布尔型，
反思：没错，
},
};
}

接下来，创建一个用于定义默认和禁用状态下的

样式的：

从'lit element'导入{LitElement，css，html}；
// ...
静态获取样式（）{
返回css`
钮扣{
背景色：#2e7d32；
颜色：白色；
/* ... */
}
按钮[禁用]{
背景色：rgba（51,51,51,0.22）；
颜色：rgba（51,51,51,0.66）；
}
`;
}

最后，在

渲染

方法中设置

的

禁用

属性：

render（）{
返回html`
`;
}

（您会注意到，我还去掉了

innerbuttonext

属性，转而使用更惯用的属性。）

您可以在下面的代码段中看到这一切都在一起工作：

//从'lit element'导入{LitElement，css，html}；
常量{LitElement，css，html}=LitElement；
类CustomButton扩展了LitElement{
静态获取属性（）{
返回{
残疾人士：{
类型：布尔型，
反思：没错，
}
};
}
构造函数（）{
超级（）；
this.disabled=false；
}
静态获取样式（）{
返回css`
钮扣{
背景色：#2e7d32；
颜色：白色；
字体系列：蒙特塞拉特；
字号：700；
高度：45px；
填充：15px 30px 15px 30px；
边界半径：5px；
边界：无；
盒影：0px 1px 3px#3333333 8；
线高：1.3；
字母间距：1.3px；
}
按钮[禁用]{
背景色：rgba（51,51,51,0.22）；
颜色：rgba（51,51,51,0.66）；
}
`;          
}
render（）{
返回html`
`;
}
}
customElements.define（'custom-button'，CustomButton'）

按钮
禁用按钮
首先，将添加到禁用
属性，以便属性“反映”属性的值：
静态获取属性（）{
返回{
残疾人士：{
类型：布尔型，
反思：没错，
},
};
}

接下来，创建
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>@import "https://fonts.googleapis.com/css?family=Montserrat:700";</style>
<script type="module" src="./components/button/button.js"></script>
<body>
<custom-button>Button</custom-button>
<button style="margin: 5px">Button</button>
</body>
</html>