• XImg
    • 安装
    • 属性
    • 相关 issue
    • 贡献者
    • 发布日志

    XImg

    XImg

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

    x-img - 图1

    二维码

    x-img - 图2

    Install

    安装

    局部注册

    全局注册

    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)

    API

    属性

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

    Issues

    相关 issue

    • #2744 [Bug Report] XImg组件的src地址中出现"|"符号时,地址会被截断
    • #2413 XImg组件内的 props->offset->default单词写错啦!!导致报错,
    • #2314 x-img为什么要在create时走一遍init,mounted时又走一遍
    • #1962 xImg单个元素重复绑定了事件
    • #1901 XImg图片正确路径重复
    • #1833 XImg 图片在 Popup 中无法展示问题

    贡献者

    贡献者

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

    Changelog

    发布日志

    • 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