From bbc6dc088bffaada3f88360565681d4e720f9e14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E7=83=AC?= <1425816423@qq.com>
Date: Sun, 22 Jan 2023 13:39:41 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20img=E6=96=B0=E5=A2=9E=E5=AF=B9srcset?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E7=9A=84=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/xy-img.js | 13 ++++++++++++-
 index.html           |  7 +++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/xy-img.js b/components/xy-img.js
index b05783f..e11a761 100644
--- a/components/xy-img.js
+++ b/components/xy-img.js
@@ -269,7 +269,7 @@ if (!customElements.get('xy-gallery')) {
 
 export default class XyImg extends HTMLElement {
 
-    static get observedAttributes() { return ['lazy', 'src', 'defaultsrc', 'ratio'] }
+    static get observedAttributes() { return ['lazy', 'src', 'defaultsrc', 'ratio', 'srcset'] }
 
     constructor() {
         super();
@@ -517,6 +517,10 @@ export default class XyImg extends HTMLElement {
         return this.getAttribute('src');
     }
 
+    get srcset() {
+        return this.getAttribute('srcset')
+    }
+
     get defaultsrc() {
         return this.getAttribute('defaultsrc');
     }
@@ -559,6 +563,10 @@ export default class XyImg extends HTMLElement {
         this.setAttribute('src', value);
     }
 
+    set srcset(value) {
+        this.setAttribute('srcset', value)
+    }
+
     set fit(value) {
         this.setAttribute('fit', value);
     }
@@ -593,6 +601,9 @@ export default class XyImg extends HTMLElement {
         img.onload = () => {
             this.img.alt = this.alt;
             this.img.src = src;
+            if (this.srcset) {
+                this.img.srcset = this.srcset;
+            }
             if(!this.default){
                 this.initgallery();
             }
diff --git a/index.html b/index.html
index 796a870..69ed7d8 100644
--- a/index.html
+++ b/index.html
@@ -476,6 +476,13 @@ <h2>img</h2>
     <xy-img lazy gallery src="https://images.pexels.com/photos/698808/pexels-photo-698808.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>
     <xy-img lazy gallery src="https://images.pexels.com/photos/1440387/pexels-photo-1440387.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>
     <xy-img lazy gallery alt="image-keyboard" src="https://images.pexels.com/xxx.jpg" defaultsrc="https://images.pexels.com/photos/697662/pexels-photo-697662.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>
+    <p>srcset</p>
+    <xy-img 
+        src="https://s1.ax1x.com/2023/01/22/pSJu3ND.jpg"
+        srcset="
+        https://s1.ax1x.com/2023/01/22/pSJu84e.png 2x,
+        https://s1.ax1x.com/2023/01/22/pSJuJ9H.png 3x"
+        ></xy-img>
     <h2>rate</h2>
     <xy-rate onchange="console.log(event)"></xy-rate>
     <p>tips</p>