import Vue from 'vue'
import VueImageLoader from '@~lisfan/vue-image-loader'
// 注册指令
// 以下是默认值
Vue.use(VueImageLoader,{
// 以下均是默认值
name:'directive-image-loader',
debug: false, // 关闭调试模式
remRatio: 100, // rem和px的比例
placeholders: { // 内置一些占位图片枚举，方便进行快速引用
avatar: 'path/to/image'
},
loadingDelay: 300, // 载入中占位图片显示延迟时间
loadingPlaceholder: 'path/to/image', // 载入中占位图片地址
animationClassName = '', // 动效产式
animate: true, // 开启动效
force: false, // 每次加载动效
})// 在img标签上使用
// 调用格式：<img :src="源图片地址（可不要，如果设置，则loading-placeholder则无效）" :loading-placeholder="自定义载入中占位图片" :placeholder="自定义失败占位图片地址" :image-src="请求图片地址" v-image-loader:[宽x高].[强制每次加载动效].[调用内置占位图片]="动效类名" />
// 最简单的调用，若图片不存在，则调用预设的失败占位图片
<img :image-src="'http://domain/src.png'" v-image-loader.avatar />
// 自定义占位图片，同时设置了图片容器的高宽，并使用了一个渐现动画效果(需要自定义动效样式)
<img :placeholder="'http://domain/ph.png'" :image-src="'http://domain/src.png'" v-image-loader:500x300="'mj-ani-fadeIn'" />
// 自定义载入中占位图片
<img :loading-placeholder="'http://domain/loading-ph.png'" :image-src="'http://domain/src.png'" v-image-loader/>
// 原始src属性存在值，则忽略loading-placeholder的设定
<img :src="'http://domain/loading-ph.png'" :image-src="'http://domain/src.png'" v-image-loader/>
// 实际图片已下载完毕，但是我想让每次路由切换重新回到这个页面的使用，这个图片加载都触发翻转动画效果(需要自定义动效样式)
<img :image-src="http://domain/src.png" v-image-loader.avatar.force="'mj-ani-flip'" />
// 支持在非image标签上使用：区别在于图片会被当成背景图
<!img :image-src="http://domain/src.png" v-image-loader.avatar></!img>