Global

Methods

install(Vue, optionsopt)

Source:
Since:
  • 1.1.0

图片加载器注册函数

Parameters:
Name Type Attributes Default Description
Vue Vue

VUE类

options object <optional>
{}

配置选项

Properties
Name Type Attributes Default Description
name string <optional>
'directive-image-loader'

日志打印器命名空间

debug boolean <optional>
false

打印器调试模式是否开启

remRatio number <optional>
100

rem与px的比例,表示1rem=100px

placeholders object <optional>
{}

全局配置占位图片,key名会转换为修饰符

loadingPlaceholder string <optional>
''

全局配置图片载入中占位图片

loadingDelay number <optional>
300

载入中占位图片的延迟加载时间,避免出现载入中图片瞬间切换为真实图片的闪烁问题

animationClassName number <optional>
''

动效的样式类

animate boolean <optional>
true

是否启用动效载入,全局性动效开关,比如为了部分机型,可能会关闭动效的展示

force boolean <optional>
false

是否强制开启每次指令绑定或更新进行动效展示。若关闭,则图片只在初次加载成功进行特效载入,之后不进行特效加载

image-loader(argopt, valueopt, modifiersopt)

Source:
Since:
  • 1.2.0

vue指令:image-loader
该指令会从元素节点属性上读取以下值

  • src - 读取原图片值,如果设置了该值,则loading-placeholder的设置将无效(为了应对一些场景而设立)
  • image-src - 设置了图片'真正'需要加载的图片
  • loading-placeholder - 设置了图片加载中的占位图片
  • placeholder - 设置了当图片加载失败时,使用的占位图片。也可以不设置该值,而是通过读取指令的modifiers进行快捷指定全局配置的占用图片
Parameters:
Name Type Attributes Default Description
arg string <optional>
false

参数图片宽度尺寸

value string <optional>
false

动效样式

modifiers object <optional>

修饰符对象,除了force值外,其他值都将当成占位符的快捷指定

Properties
Name Type Attributes Default Description
debug boolean <optional>
false

是否启用单独启用调试日志

animate boolean <optional>
false

是否启用单独启用动效

force boolean <optional>
false

是否启用启用单独启用强制重新进行动效展示修饰符