@niu_/vue-tools v1.3.10

一些插件

图片预览插件

使用

import VueTools from '@niu_/vue-tools';
import '@niu_/vue-tools/css/main.css'

Vue.use(VueTools);

单文件中可以通过组件 Preview 形式或者 this.$preview 访问

<Preview
    v-model="show"
    :img-list="imgList"
    :minus="false"
></Preview>
<button @click="show = !show">点击显示</button>
<button @click="handlePreview"></button>

<script>
import previewImg from './previewimg.png';

export default {
    data () {
        return {
            imgList: [
                {
                    id: 1,
                    url: previewImg
                },
                {
                    id: 2,
                    url: 'https://img.png'
                }
            ]
        }
    },
    methods: {
        handlePreview () {
            this.$preview.open({
                imgList: [
                    {
                        id: 1,
                        url: previewImg
                    }
                ],
                change: (params) => {
                    // params 包含了当前图片的基本信息及切换信息
                    // 例如 角度 缩放程度等
                }
            })
        }
    }
}
</script>

数据格式

id非必填；

通过脚本引入的使用方式和以上类似

API

事件

$preview

使用 this.$preview 的时候，可以通过open 方法打开预览

this.$preview.open({
    imgList: this.imgList,
    change: (params) => {
        // params 回调的参数
    },
    menuList: {
        leftRotate: false,
        // 控制菜单项
        // 同prop值
    }
})

通过 getContainer 可以指定挂载的节点

this.$preview.getContainer(() => document.querySelector('.container'))
    .open({
        imgList: this.imgList
    })

在线演示（暂时）

演示