The Element El-Image component can preview a large image by passing in the property previewSrcList, but now the need is to click a button to preview an image. The el-image preview is done by the component el-image-viewer. It carries on the simple secondary encapsulation into the global component, realizes the click the button programmatically calls the component to realize the preview effect.

imgView.vue

Create a common component and import el-image-viewer for business processing.

<template>
  <div>
    <el-image-viewer
      :on-close="closeViewer"
      :url-list="urlList"
    />
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: "imageView".components: {ElImageViewer},
  methods: {
    closeViewer() {
      // Destroy the mount from the parent DOM after closing the component
      this.$el.parentNode.removeChild(this.$el)
    },
  }
}
</script>
<style scoped lang="less">::v-deep .el-image-viewer__close{ color:white; }</style>
Copy the code

imgView.js

Create a JS file in the same folder to configure global components.

Vue.use ( plugin )

Install the vue.js plug-in. If the plug-in is an object, you must provide the install method. If the plug-in were a function, it would be used as the install method. When the install method is called, Vue is passed in as an argument.

This method needs to be called before calling new Vue().

When the install method is called multiple times by the same plug-in, the plug-in will only be installed once.

Vue.extend ( options )

Using the base Vue constructor, create a “subclass.” The parameter is an object that contains component options

vm.$mount( [elementOrSelector] )

If the Vue instance does not receive the EL option when instantiated, it is in the “unmounted” state and has no associated DOM elements. An unmounted instance can be manually mounted using vm.$mount().

If the elementOrSelector parameter is not provided, the template will be rendered as an element outside of the document, and you must insert it into the document using the native DOM API.

This method returns the instance itself, so other instance methods can be chain-called.

import ImgView from './imgView.vue'
export default {
  // Provide the install method to the object, passing vue as an argument
  install(vue) {
    // Create a Constructor "subclass" using the base Vue Constructor.
    // The argument is an object containing ImgView component options
    const Constructor = vue.extend(ImgView)
    // Mount the $imgView method to the vue prototype for global calls
    vue.prototype.$imgView = urlList= > {
      // Instantiate the subclass constructor
      const instance = new Constructor({
        data() {
          return {
            urlList: urlList
          }
        }
      })
      // Manually mount an unmounted instance using vm.$mount().
      // If no parameters are provided, the template will be rendered as an element outside the document
      const instanceDom = instance.$mount()
      // Insert the instance into the body using the native DOM API.
      document.body.appendChild(instanceDom .$el)
    }
  }
}
Copy the code

main.js

import ImgView from '@/components/imgView/imgView.js'
Vue.use(ImgView)
Copy the code

use

<el-table-column fixed label="Photos" align="center">
  <template v-slot='{row}'>
    <el-button type="text" @click="$imgView([row.photo])">To view</el-button>
  </template>
</el-table-column>
Copy the code