VUE自定义组件封装(图片查看)

VUE查看图片自定义组件封装

第一次写博客，希望多包涵

一、安装 v-viewer 组件 npm install v-viewer 二、新建VUE文件 然后引入 import Vue from ‘vue’; import Viewer from ‘v-viewer’; import ‘viewerjs/dist/viewer.css’; export default { components: {Vue}, name: ‘ViewerImg’, props:{ imgList:{ type: Array, default () { return []; }, }, size:{ type:Object, default:{ height:120+‘px’, width:120+‘px’ }, } }, data() { Vue.use(Viewer); Viewer.setDefaults({ Options: { inline: false, button: true, navbar: true, title: false, toolbar: true, tooltip: true, movable: true, zoomable: true, rotatable: true, scalable: true, transition: true, fullscreen: true, keyboard: true, url: “data-source” } }); return { imgList: [], }

},
    methods:{
        initImg(){
            if(this.imgList.length<1){
                this.imgList.push("static/img/noImg.jpg");
            }
        },

    },
    mounted() {

    },
    created(){
        this.initImg();
    }

在ui.js里添加 import iView from ‘iview’; import ‘iview/dist/styles/iview.css’; Vue.use(iView);

如果要引用。则直接在使用页面引用 import viewerImg from ‘…/…/components/uploadImg/viewerImg’； components: {viewerImg,},

</viewerImg>
     注意     imgList:[],是数组