Hand in hand to realize the picture preview plug-in (3)

因为项目需要,A global component that encapsulates a picture click preview before.This time we try to encapsulate it as a plugin.Through the imperative way to achieve the effect of click preview.

before packaging the plugin.我们要对vuehave a basic understanding of the plugin mechanism.vueThe core of the plugin isuse方法.

其实就是在Vue类上添加一个use方法,This method sees whether the first parameter passed in is a function,If it is a function, it will be executed directly,如果是对象,就看是否有install方法,然后执行install方法,执行的时候把Vue类传入,At the same time, the user is passed inoption也传入

Vue.use = function (plugin) {   
    // Registered plugins are ignored
    if (plugin.installed) {
      return
    }
    
    // 集合转数组,and remove the first parameter
    var args = toArray(arguments, 1);
    
    // 把this（即Vue）to the first parameter of the array
    args.unshift(this);
    
    // 调用install方法
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }
    
    // 注册成功
    plugin.installed = true;
    return this;
  };

而在install方法里.vueProvides us with several ways to register plugins

(1) 全局minx混入  （2）全局组件注册 （3）给vueObject's prototype is added to the plugin

也就是说.The way the plug-in is called can be called in the way of the global component,也可以选择在vueCalled on the prototype or on minxCalled at some point in the mixin.

说了那么多,We started the development of our own image preview component

（1） 我们在src下新建一个plugins文件夹.新建两个文件：

prevImg.vue和index.js

<template>
    <div class="prewImg-wrap" v-show="show">
        <div class="mask"></div>       
            <div class="action">
                <i class="el-icon-minus ic"></i>
                <i class=" ic el-icon-plus"></i>
                <i class=" ic el-icon-refresh-right"></i>
                <i class=" ic el-icon-close" @click="close"></i>
            </div>
            <div class="img-wrap">
                <span v-if="loading" style="color:#fff">加载中...</span>
                <img v-else ref="img" :src="url" alt="" class="pic" 
                    @load="handleImgLoad"
                    @error="handleImgError">
            </div>   
    </div>
</template>

<script>
    export default {
        data(){
            return {
                show: false,
                loading:false,
                url:"https://s1.chu0.com/src/img/gif/30/30e530c90d674d26aa5afb35ab7eda84.gif"
            }
        },
        mounted(){
            this.loadImg()
        },
        watch:{
           url(val) {
            this.$nextTick(_ => {
                const $img = this.$refs.img;
                if (!$img.complete) {
                this.loading = true;
                }
            });
            }
        },
        methods:{
            close(){
                this.show=false
            },
            handleImgLoad(){
                this.loading=false
            },
            handleImgError(e){
                console.log("e-rror--",e)
                this.loading=false
            }
        }

    }
</script>
<style scoped>
    
.prewImg-wrap{
    position:fixed;
    left:0;
    top:0;
    width: 100%;
    height: 100%;;
   overflow: hidden;
   z-index:1;
}
.action{
    width: 200px;
    padding: 20px;
    position: absolute;
    right:10px;
    top:20px;
    color:#fff;
    z-index: 30;
    display: flex;
    justify-content: flex-end;
}
.ic{
    display: inline-block;
    margin-right: 10px;
}
.mask{
    background: rgba(0,0,0,0.6);
    position: absolute;
    top:0;
    left:0;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.img-wrap{
   position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index:20;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pic{
    max-height: 100%;
    max-width: 100%;
}

</style>

prevImg/index.js

import PrevView from "./prewImg.vue"
export default {

    install(Vue,options){
        let PrevVueConstructor= Vue.extend(PrevView)
        let instance= new PrevVueConstructor()
        document.body.appendChild(instance.$mount().$el);

        let prevObj={
            show(opts={text:"",url:""}){
                console.log("instance:",instance)
                instance.show=true
                instance.text=opts.text||""
                instance.url=opts.url||""
            },
            hide(){
                instance.show=false
                instance=null
            }
        }
        if(!Vue.$prevObj){
            Vue.$prevObj=prevObj
        }
        Vue.prototype.$prevImg = prevObj
    }

}

This file makes us the core of this plugin.首先我们通过vue.extendConstructs a basevue的构造函数,它类似于vue的实例.具备vue实例的所有属性和方法,和根vue实例不同的是,通过extendConstructed subclasses onlydata只能是一个函数.我们创建Vue实例时,都会有一个el选项,to specify the root node of the instance,如果不写el选项,That component is in an unmounted state.Vue.extend 的作用,就是基于 Vue 构造器,创建一个‘ 子类 ',再配合$mount,The component can be rendered,And mount it on any specified node,比如body（This is not possible with single-file components）

在show方法中,console.log("instance:",instance)can see its specific structure.也正是因为它.So we have direct access to usprewImg组件中data定义的数据.比如show,我们就可以通过操作show变量来控制open和hidemethod directlyprevImgComponents are shown or hidden.

最后我们把这个prevImg对象挂载到vue的原型上.

（2）main.js中引入 prevImg文件夹下的index.js

import Vue from 'vue'
import App from './App.vue'
import "./directives/composImg"
Vue.config.productionTip = false
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import prewImg from "./plugins/prewImg"

Vue.use(ElementUI);

Vue.use(prewImg)
new Vue({
  render: h => h(App),
}).$mount('#app')

（3）具体使用

    <el-button @click="openPrev">打开预览</el-button>
    <el-button @click="closePrve">关闭预览</el-button>
<script>
export default{

   data(){
    return{
        restaurants: [],
        state1: '',
        url:"https://baj-dabanjiz-conf.oss-cn-hangzhou.aliyuncs.com/intelligent-design/image/20210730/middle/9bbeb6570f7b416b1bcbcc59a1b38635.jpg",
        url2:"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"
        
    }
  },
}
    methods:{
        
        openPrev(){
          this.$prevImg.show({url:this.url2})
        },  
        closePrve(){
            this.$prevImg.hide()
        },          
    }

</script>