vue封装一个通过API形式调用的组件 (单例模式思路）

文件结构

├── src
    └── assets  项目静态资源
        ├── logo.png  图片资源
    ├── components  业务组件
        ├── file  组件
          ├── file.js 
          ├── file.vue 
          └── index.js
    ├── view  页面文件
        └── home.vue

$file实现步骤

• 声明一个实例 Instance
• 然后将声明的实例挂载函数$mount()上
• 获取Vue实例关联的DOM元素 然后将获取的DOM结构挂载到body上

file.vue

<template>
  <div class="preview" v-if="visible">
    <div class="preview_mask" @click="handleClose" />
    <div class="content">
      <img :src="src" alt />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: '',
      visible:false,
    }
  },
  props: {
    fileType: {
      type: String,
      default: 'img',
    },
    fileSrc: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.showView()
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    showView() {
      if (!this.fileSrc) {
        const message =
          this.fileType === 'img' ? '暂无相关影像信息' : '暂无相关文件'
        alert(message)
        return
      }
      if (this.fileType === 'img') {
        this.src = this.fileSrc
         this.visible = true
      } else {
        window.open(this.fileSrc)
      }
    },
  },
  // computed: {
  //   list() {
  //     return this.url ? [this.url] : []
  //   },
  // },
}
</script>
<style lang="less" scoped>
.preview {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  .preview_mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(55, 55, 55, 0.6);
    cursor: pointer;
  }
  .content {
    max- 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    img {
      max- 1000px;
    }
  }
}
</style>

file.js

import File from './file.vue'
import Vue from 'vue'

File.newInstance = properties => {
  const props = properties || {}
  const Instance = new Vue({
    data: props,
    render(h) {
      return h(File,{ props })
    }
  })

  const component = Instance.$mount()
  document.body.appendChild(component.$el)
}
export default File

index.js 封装api

import File from './file.js'

let fileInstance

function getFileInstance (props) {
  fileInstance = fileInstance || File.newInstance(props)
  return fileInstance
}


function file(props) {
  getFileInstance(props)
}

export default file

main.js

import Vue from 'vue'
import App from './App.vue'
// import Viewer from 'v-viewer'
import File from '@/components/file'  // 引入组件file
Vue.config.productionTip = false

// Vue.use(Viewer)

Vue.prototype.$File = File // 挂载到原型
new Vue({
  render: h => h(App),
}).$mount('#app')

index.vue 中使用 直接调用this.$File()

<template>
  <div>
    <button @click="handleOpen">打开文件</button>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data() {
    return {
      fileSrc: require('./assets/logo.png')
    }
  },
  methods: {
    handleOpen() {
       this.$File({ fileSrc: this.fileSrc, fileType: 'img'})
    },
  }
}
</script>

使用单例模式实现项目中通用的唯一组件，这种方式封装成插件...开箱即用，可以根据自己的业务需求扩展

文字不够解释一下单例模式（这个是看的别的文字总结的）

单例模式

单例模式(Singleton)，也叫单子模式，是一种常用的软件设计模式。在应用这个模式时，单例对象的类必须保证只有一个实例存在。许多时候整个系统只需要拥有一个的全局对象，这样有利于我们协调系统整体的行为。比如在某个服务器程序中，该服务器的配置信息存放在一个文件中，这些配置数据由一个单例对象统一读取，然后服务进程中的其他对象再通过这个单例对象获取这些配置信息。这种方式简化了在复杂环境下的配置管理

优点

• 在单例模式中，活动的单例只有一个实例，对单例类的所有实例化得到的都是相同的一个实例。这样就 防止其它对象对自己的实例化，确保所有的对象都访问一个实例
• 单例模式具有一定的伸缩性，类自己来控制实例化进程，类就在改变实例化进程上有相应的伸缩性
• 由于在系统内存中只存在一个对象，因此可以 节约系统资源，当 需要频繁创建和销毁的对象时单例模式无疑可以提高系统的性能
• 避免对共享资源的多重占用

缺点

• 不适用于变化的对象，如果同一类型的对象总是要在不同的用例场景发生变化，单例就会引起数据的错误，不能保存彼此的状态
• 由于单利模式中没有抽象层，因此单例类的扩展有很大的困难
• 单例类的职责过重，在一定程度上违背了“单一职责原则”
• 滥用单例将带来一些负面问题，如为了节省资源将数据库连接池对象设计为的单例类，可能会导致共享连接池对象的程序过多而出现连接池溢出；如果实例化的对象长时间不被利用，系统会认为是垃圾而被回收，这将导致对象状态的丢失

适用场景

单例模式只允许创建一个对象，因此节省内存，加快对象访问速度，因此对象需要被公用的场合适合使用，如多个模块使用同一个数据源连接对象等等
1.需要频繁实例化然后销毁的对象。
2.创建对象时耗时过多或者耗资源过多，但又经常用到的对象。
3.有状态的工具类对象。
4.频繁访问数据库或文件的对象