Image: add support for transmit "attrs" and "listeners" (ElemeFE#15578)

lzq4047 · May 22, 2020 · efa6900 · efa6900
1 parent 1d5d80f
commit efa6900
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
@@ -9,9 +9,9 @@
     <img
       v-else
       class="el-image__inner"
+      v-bind="$attrs"
+      v-on="$listeners"
       :src="src"
-      :alt="alt"
-      :referrerpolicy="referrerPolicy"
       :style="imageStyle"
       :class="{ 'el-image__inner--center': alignCenter }">
   </div>
@@ -37,14 +37,13 @@
     name: 'ElImage',
 
     mixins: [Locale],
+    inheritAttrs: false,
 
     props: {
       src: String,
       fit: String,
       lazy: Boolean,
-      scrollContainer: {},
-      alt: String,
-      referrerPolicy: String
+      scrollContainer: {}
     },
 
     data() {
@@ -104,13 +103,20 @@
         const img = new Image();
         img.onload = e => this.handleLoad(e, img);
         img.onerror = this.handleError.bind(this);
+
+        // bind html attrs
+        // so it can behave consistently
+        Object.keys(this.$attrs)
+          .forEach((key) => {
+            const value = this.$attrs[key];
+            img.setAttribute(key, value);
+          });
         img.src = this.src;
       },
       handleLoad(e, img) {
         this.imageWidth = img.width;
         this.imageHeight = img.height;
         this.loading = false;
-        this.$emit('load', e);
       },
       handleError(e) {
         this.loading = false;

diff --git a/test/unit/specs/image.spec.js b/test/unit/specs/image.spec.js
@@ -64,5 +64,49 @@ describe('Image', () => {
     await wait();
     expect(image2.loading).to.be.false;
   });
+
+  it('$attrs', async() => {
+    vm = createVue({
+      template: `
+        <el-image
+          alt="$attrs test"
+          referrerpolicy="origin"
+          :src="src"></el-image>
+      `,
+      data() {
+        return {
+          src
+        };
+      }
+    }, true);
+
+    await wait();
+    const $img = vm.$el.querySelector('.el-image__inner');
+    expect($img.getAttribute('alt')).to.be.equal('$attrs test');
+    expect($img.getAttribute('referrerpolicy')).to.be.equal('origin');
+  });
+
+  it('pass event listeners', async() => {
+    let result;
+    vm = createVue({
+      template: `
+        <el-image @click="handleClick" :src="src"></el-image>
+      `,
+      data() {
+        return {
+          src
+        };
+      },
+      methods: {
+        handleClick(e) {
+          result = e;
+        }
+      }
+    }, true);
+    await wait();
+    vm.$el.querySelector('.el-image__inner').click();
+    await wait();
+    expect(result).to.exist;
+  });
 });