imgview

install

两种使用方式

一.加载到全局

import imgview  from "imgview";
import "imgview/imgview.css";
import Vue from 'vue';
Vue.use(imgview)

此时,将会注册imgview到全局component,可直接使用

二,手动注册

import imgview,{ AlloyFingerPlugin }  from "imgview";
import "imgview/imgview.css";
import Vue from 'vue';
Vue.use(AlloyFingerPlugin)
export default {
  components: {
    imgview
  },
}

imgview内提供了AlloyFinger指令,你需要注册此指令才能使imgview正常工作

当然,你也可以只使用AlloyFinger提供的指令,而不使用imgview

指令相关使用可参考https://github.com/AlloyTeam/AlloyFinger/tree/fc1467f3bca56b69017c02915925d06b48da6f63/vue

此版本的AlloyFinger是经过修改的AlloyFinger,并非原版

usage

属性

| 属性 | 类型 | 描述 | | :---- | -------- | --------------------------------------- | | total | number | 显示在左上角总图片张数 | | next | function | 返回一个Promise,reslove下一张图片的地址 | | prev | function | 返回一个Promise,reslove上一张图片的地址 |

事件

| 事件 | Shija | 描述 | | :----------- | -------- | ----------------------------- | | on-click | number | | | index-change | function | 参数:切换后的显示的图片的索引 |