XImg 组件使用教程
优质
小牛编辑
139浏览
2023-12-01
安装
import { XImg } from 'vux'
export default {
components: {
XImg
}
}// 在入口文件全局引入
import Vue from 'vue'
import { XImg } from 'vux'
Vue.component('x-img', XImg)
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| default-src | string | 默认显示的图片地址 | -- | |
| src | string | 最终加载的图片地址 | -- | |
| webp-src | string | webp 格式的图片地址，如果当前浏览器支持webp，则加载该地址 | -- | |
| error-class | string | 加载失败时添加到 img 元素上的类名 | -- | |
| success-class | string | 加载成功时添加到 img 元素上的类名 | -- | |
| offset | number | 100 | 距离多远时开始加载 | -- |
| container | string | window | 当图片是在一个容器里滚动时(比如demo站点100%高度的布局)，你需要指定容器的选择器 | -- |
| delay | number | 0 | 延迟执行，在存在路由过渡时立即执行可能会导致进入页面后并不会正确加载图片。该属性在 2.5.4 后已经不推荐使用，推荐使用 BusPlugin 来通知组件页面已经载入完成。 | -- |
| separator | string | 支持设置src的分隔符 | -- |