VUE 注册全局函数组件，通过 this.$XXX()调用

  1. plugins/uploadFile/index.js

    import Vue from 'vue';
import UploadTool from '@/components/uploadTool';
let uploadFileInstance = null;
let init = () => {
  let uploadFileConstructor = Vue.extend(UploadTool);
  // 构造函数可以传参，data，method
  uploadFileInstance = new uploadFileConstructor({});
  uploadFileInstance.$mount();
  document.body.appendChild(uploadFileInstance.$el);
}
let caller = (options) => {
  if(!uploadFileInstance) {
    init(options);
  }
  // uploadTool.vue 中使用getParams接收调用时传入的参数。 type: image等
  uploadFileInstance.getParams(options);
}
export default {
  install(Vue) {
    Vue.prototype.$uploadTool = caller;
  }
}

  2. /components/uploadTool.vue

    <template>
  <div>
     <input type="file" ref="input" hidden multiple @change="onFileChange($event)" accept="*" />
  </div>
</template>
<script>
 export default {
     name: "UploadTool",
    components: {},
    componentName: "UploadTool",
    data() {
      return {
        callBack: null, // Function. Return data when upload success
      }
    },
    methods: {
      getParams(options) {
        this.callBack = options.callBack;
        this.chooseFile();
      },
      chooseFile() {
        this.$refs.input.click();
      },
      onFileChange(e) {
        if(e.target.files.length) {
          // you can deal with files here, like filter type, size...
          this.uploadFileToOss();
        }
      },
      uploadFileToOss() {
        // upload file to Oss here
        // when success, get file data from oss
        this.callBack(data);
      }
    }
 }      
</script>

  1. XXX.vue 中使用

    // 使用
startChooseFile() {
  this.$uploadTool({
    msg: "upload", // uploadTool can get "upload" from options.msg
    callBack: (data) => {
      // get file info here
      // ...
    }
  })
}

这样一个简单的全局方法就注册完毕了，想要使用的时候可以直接 this.$uploadTool() 调用，不必在页面 import ，然后声明组件，适合常用的但是功能简单而且主要是JS操作逻辑的功能。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容