XImg

demo 原始链接demo 源码编辑文档组件源码

x-img - 图1

二维码

x-img - 图2

安装

局部注册

全局注册

  1. import { XImg } from 'vux'
  2. export default {
  3. components: {
  4. XImg
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { XImg } from 'vux'
  4. Vue.component('x-img', XImg)

属性

名字类型默认值说明版本要求
default-srcstring默认显示的图片地址
srcstring最终加载的图片地址
webp-srcstringwebp 格式的图片地址,如果当前浏览器支持webp,则加载该地址
error-classstring加载失败时添加到 img 元素上的类名
success-classstring加载成功时添加到 img 元素上的类名
offsetnumber100距离多远时开始加载
containerstringwindow当图片是在一个容器里滚动时(比如demo站点100%高度的布局),你需要指定容器的选择器
delaynumber0延迟执行,在存在路由过渡时立即执行可能会导致进入页面后并不会正确加载图片。该属性在 2.5.4 后已经不推荐使用,推荐使用 BusPlugin 来通知组件页面已经载入完成。
separatorstring支持设置src的分隔符

相关 issue

贡献者

该组件(包含文档)迭代次数 15,贡献人数 3airylandlichunqiangF-loat

发布日志

  • v2.9.2 [enhance] 支持设置separator属性 #2744
  • v2.6.0 [fix] 当 src 变化时重新初始化 #1901
  • v2.5.4 [feature] 在 router-view 动画结束后自动重新监听加载
  • v2.1.1-rc.2 [feature] 支持延迟执行属性 delay