Skip to content

Latest commit

 

History

History
219 lines (150 loc) · 8.43 KB

xy-img.md

File metadata and controls

219 lines (150 loc) · 8.43 KB
Raw

xy-img

图片。用于替代原生img。

使用方式

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-img.js';
</script>
<!-- 使用 -->
<xy-img src="img.jpg"></xy-img>

用法与原生img基本一致。

链接src

图片链接。可以是绝对路径，也可以是相对路径。

<xy-img src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>

JavaScript操作get、set

img.src;
img.src = 'img.jpg';
//原生属性操作
img.getAttribute('src');
img.setAttribute('src','img.jpg');

当图片链接加载失败时，会默认显示一个占位符。

<xy-img src="https://images.xxx.jpg"></xy-img>

可以设置background、font-size和color来定制占位符。

<style> .img-placeholder{ background:#333; color:#f1f1f1; font-size:16px; } </style> 

<style>
.img-placeholder{
    background:#333;
    color:#f1f1f1;
    font-size:16px;
}
</style>
<xy-img src="https://images.xxx.jpg" class="img-placeholder"></xy-img>

默认链接defaultsrc

默认链接。如果不能保证src一定能加载成功（一般是外部链接），可以设置一个defaultsrc来处理当src加载失败时的情况。

<xy-img src="https://images.xxx.jpg" defaultsrc="https://images.pexels.com/photos/374918/pexels-photo-374918.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>

当defaultsrc仍加载失败时（当然这种情况很少见，而且可控），会默认显示一个占位符。

<xy-img src="https://images.xxx.jpg" defaultsrc="https://images.xxx.jpg"></xy-img>

描述alt

可以设置一个描述，加载成功时会显示在左下方，加载失败时会显示在占位符上。

<xy-img src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="image-keyboard"></xy-img>
<xy-img src="https://images.xxx.jpg" alt="image-keyboard"></xy-img>

比例ratio

可以设置一个比例来约束图片的尺寸（以宽度为基准）。

格式为w/h，如16/9。

16/9 3/2 1/1

<xy-img ratio="16/9" src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>

JavaScript操作get、set

img.ratio;
img.ratio = '16/9';
//原生属性操作
img.getAttribute('ratio');
img.setAttribute('ratio','16/9');

自适应fit

设置自适应方式，同原生object-fit，可取值cover（默认）、fill、contain。

cover fill contain

<xy-img fit="cover" src="https://images.pexels.com/photos/1274640/pexels-photo-1274640.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"></xy-img>

JavaScript操作get、set

img.fit;
img.fit = 'contain';
//原生属性操作
img.getAttribute('fit');
img.setAttribute('fit','contain');

懒加载lazy

可以设置lazy让图片在可见范围时才加载，在此之前不会发送网络请求，提升用户体验。

<xy-img lazy src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940"></xy-img>

画廊gallery

可以设置gallery属性，得到一个画廊效果，此时鼠标hover会出现标识，点击放大展示原图大小，支持键盘操作（左右键切换、Esc和Backspace退出）。

加载失败的图片不会计入。

<xy-img gallery src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940"></xy-img>
<xy-img 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 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 gallery alt="image-keyboard" src="https://images.pexels.com/xxx.jpg" ></xy-img>

可以根据gallery属性值自动分类成不同组别。

gallery="A"

gallery="B"

<xy-img gallery="A" 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 gallery="B" alt="image-keyboard" src="https://images.pexels.com/photos/1274640/pexels-photo-1274640.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"></xy-img>

事件event

onfocus、onblur

仅适用于gallery存在的情况。

focus、blur后的回调事件。

与xy-button使用方式一致。

方法function

focus

仅适用于gallery存在的情况。

用于主动聚焦focus，聚焦以后可以响应键盘事件，按Enter打开画廊。

主动聚焦

img.focus();