diff --git a/components/xy-button.js b/components/xy-button.js index beea19f..74df49e 100644 --- a/components/xy-button.js +++ b/components/xy-button.js @@ -3,7 +3,7 @@ import './xy-icon.js'; export default class XyButton extends HTMLElement { //https://mladenplavsic.github.io/css-ripple-effect - static get observedAttributes() { return ['disabled','icon','loading'] } + static get observedAttributes() { return ['disabled','icon','loading','href'] } constructor() { super(); @@ -138,7 +138,7 @@ export default class XyButton extends HTMLElement { transition: none; } :host([disabled]) a{ - visibility:hidden; + /*visibility:hidden;*/ } <${this.href?'a':'button'} ${(this.download&&this.href)?'download="'+this.download+'"':''} ${this.href?'href="'+this.href+'" target="'+this.target+'" rel="'+this.rel+'"':''} class="btn" id="btn">${!this.loading && this.icon && this.icon!='null'?'':''} @@ -221,8 +221,14 @@ export default class XyButton extends HTMLElement { if(name == 'disabled' && this.btn){ if(newValue!==null){ this.btn.setAttribute('disabled', 'disabled'); + if(this.href){ + this.btn.removeAttribute('href'); + } }else{ this.btn.removeAttribute('disabled'); + if(this.href){ + this.btn.href = this.href; + } } } if( name == 'loading' && this.btn){ @@ -237,6 +243,11 @@ export default class XyButton extends HTMLElement { if( name == 'icon' && this.ico){ this.ico.name = newValue; } + if( name == 'href' && this.btn){ + if(!this.disabled){ + this.btn.href = newValue; + } + } } } diff --git a/docs/xy-button.md b/docs/xy-button.md index 21c6f5d..ba83313 100644 --- a/docs/xy-button.md +++ b/docs/xy-button.md @@ -38,22 +38,40 @@ visit xy-ui visit xy-ui + ```html visit xy-ui ``` 此外,还可以设置`download`、`target`和`rel`属性,同原生`a`标签。 + + +download + +```html +download +``` + ## 禁用`disabled` 通过`disabled`可以禁用按钮,禁用后该按钮上的事件失效。 primary + + dashed + + flat + + default +visit xy-ui + + ```html primary dashed diff --git a/img/Gokou Ruri.gif b/img/Gokou Ruri.gif new file mode 100644 index 0000000..2d46862 Binary files /dev/null and b/img/Gokou Ruri.gif differ