add button download

XboxYan · Jul 30, 2019 · 921e57d · 921e57d
1 parent 71b85b4
commit 921e57d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git 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;*/
         }
         </style>
         <${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.href?'a':'button'}>${!this.loading && this.icon && this.icon!='null'?'<xy-icon id="icon" name='+this.icon+'></xy-icon>':''}<slot></slot>
@@ -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
@@ -38,22 +38,40 @@
 <xy-button type="flat" href="https://github.com/XboxYan/xy-ui">visit xy-ui</xy-button>
 <xy-button href="https://github.com/XboxYan/xy-ui">visit xy-ui</xy-button>
 
+
 ```html
 <xy-button href="https://github.com/XboxYan/xy-ui">visit xy-ui</xy-button>
 ```
 
 此外，还可以设置`download`、`target`和`rel`属性，同原生`a`标签。
 
+<xy-img src="/img/Gokou Ruri.gif"></xy-img>
+
+<xy-button href="/img/Gokou Ruri.gif" download="Gokou Ruri">download</xy-button>
+
+```html
+<xy-button href="/img/Gokou Ruri.gif" download="Gokou Ruri">download</xy-button>
+```
+
 ## 禁用`disabled`
 
 通过`disabled`可以禁用按钮，禁用后该按钮上的事件失效。
 
 <xy-button disabled type="primary">primary</xy-button>
+<xy-switch checked onchange="this.previousElementSibling.disabled = this.checked;"></xy-switch>
+
 <xy-button disabled type="dashed">dashed</xy-button>
+<xy-switch checked onchange="this.previousElementSibling.disabled = this.checked;"></xy-switch>
+
 <xy-button disabled type="flat">flat</xy-button>
+<xy-switch checked onchange="this.previousElementSibling.disabled = this.checked;"></xy-switch>
+
 <xy-button disabled >default</xy-button>
 <xy-switch checked onchange="this.previousElementSibling.disabled = this.checked;"></xy-switch>
 
+<xy-button href="https://github.com/XboxYan/xy-ui" disabled>visit xy-ui</xy-button>
+<xy-switch checked onchange="this.previousElementSibling.disabled = this.checked;"></xy-switch>
+
 ```html
 <xy-button disabled type="primary">primary</xy-button>
 <xy-button disabled type="dashed">dashed</xy-button>

diff --git a/img/Gokou Ruri.gif b/img/Gokou Ruri.gif