mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
2 lines
80 KiB
JavaScript
2 lines
80 KiB
JavaScript
|
import{_ as E,a as C,b as c,c as l,d as i}from"./placeholder.81f06346.js";import{b as u,G as p,A as e,u as o,e as a,E as s,ae as F,y as D,o as r}from"./framework.f98c6945.js";import"./plugin-vue_export-helper.21dcd24c.js";import"./picture.80f5675a.js";import"./plugin-vue_export-helper.b2df8d49.js";const k=a("h1",{id:"image",tabindex:"-1"},[s("Image "),a("a",{class:"header-anchor",href:"#image","aria-hidden":"true"},"#")],-1),d=a("p",null,"Besides the native features of img, support lazy load, custom placeholder and load failure, etc.",-1),A=a("h2",{id:"basic-usage",tabindex:"-1"},[s("Basic Usage "),a("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#")],-1),g=a("p",null,"image/basic-usage",-1),m=a("h2",{id:"placeholder",tabindex:"-1"},[s("Placeholder "),a("a",{class:"header-anchor",href:"#placeholder","aria-hidden":"true"},"#")],-1),h=a("p",null,"image/placeholder",-1),B=a("h2",{id:"load-failed",tabindex:"-1"},[s("Load Failed "),a("a",{class:"header-anchor",href:"#load-failed","aria-hidden":"true"},"#")],-1),f=a("p",null,"image/load-failed",-1),b=a("h2",{id:"lazy-load",tabindex:"-1"},[s("Lazy Load "),a("a",{class:"header-anchor",href:"#lazy-load","aria-hidden":"true"},"#")],-1),v=a("p",null,"image/lazy-load",-1),y=a("h2",{id:"image-preview",tabindex:"-1"},[s("Image Preview "),a("a",{class:"header-anchor",href:"#image-preview","aria-hidden":"true"},"#")],-1),_=a("p",null,"image/image-preview",-1),x=F('<h2 id="image-attributes" tabindex="-1">Image Attributes <a class="header-anchor" href="#image-attributes" aria-hidden="true">#</a></h2><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted values</th><th>Default</th></tr></thead><tbody><tr><td>alt</td><td>Native alt</td><td>string</td><td>-</td><td>-</td></tr><tr><td>fit</td><td>Indicate how the image should be resized to fit its container, same as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit" target="_blank" rel="noopener noreferrer">object-fit</a></td><td>string</td><td>fill / contain / cover / none / scale-down</td><td>-</td></tr><tr><td>hide-on-click-modal</td><td>When enabling preview, use this flag to control whether clicking on backdrop can exit preview mode</td><td>boolean</td><td>true / false</td><td>false</td></tr><tr><td>initial-index</td><td>The initial preview image index, less than the length of <code>url-list</code></td><td>number</td><td>int</td><td>0</td></tr><tr><td>lazy</td><td>Whether to use lazy load</td><td>boolean</td><td>\u2014</td><td>false</td></tr><tr><td>preview-src-list</td><td>allow big image preview</td><td>Array</td><td>\u2014</td><td>-</td></tr><tr><td>referrer-policy</td><td>Native referrerPolicy</td><td>string</td><td>-</td><td>-</td></tr><tr><td>src</td><td>Image source, same as native</td><td>string</td><td>\u2014</td><td>-</td></tr><tr><td>scroll-container</td><td>The container to add scroll listener when using lazy load</td><td>string / HTMLElement</td><td>\u2014</td><td>The nearest parent container whose overflow property is auto or scroll</td></tr><tr><td>z-index</td><td>set image preview z-index</td><td>Number</td><td>\u2014</td><td>2000</td></tr><tr><td>preview-teleported</td><td>whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to <code>true</code></td><td>boolean</td><td>\u2014</td><td>false</td></tr></tbody></table><h2 id="image-events" tabindex="-1">Image Events <a class="header-anchor" href="#image-events" aria-hidden="true">#</a></h2><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>load</td><td>Same as native load</td><td>(e: Event)</td></tr><tr><td>error</td><td>Same as native error</td><td>(e: Error)</td></tr></tbody></table><h2 id="image-slots" tabindex="-1">Image Slots <a class="header-anchor" href="#image-slots" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>placeholder</td><td>Triggers when image load</td></tr><tr><td>error</td><td>Triggers when image load failed</td></
|