vue函数组件

vue函数组件

有时候我们需要在非vue文件使用组件，这时候我们可以通过vue插件的方式使用

一、js加载文件

import Vue from 'vue';
import toast from'./index.vue';
const ToastConstructor = Vue.extend(toast);
let toastPool = [];
let instance;
let installed = false;
//安装组件
const install = function (Vue, config = {}) {
  if (installed) return;
  console.log(installed);
  Vue.component(toast.name, toast);
  installed = true;
};
install(Vue);
let getAnInstance = () => {
  if (toastPool.length > 0) {
  let instance = toastPool[0];
  toastPool.splice(0, 1);
  return instance;
  }
  return new ToastConstructor({
  el: document.createElement('div')
 });
};

let Toast = (options = {}) => {
  console.log('Toast', options);
  let duration = options.duration || 3000;
  let instance = getAnInstance();
  instance.closed = false;
  clearTimeout(instance.timer);
  instance.message = typeof options === 'string' ? options : options.message;
  instance.position = options.position || 'middle';
  instance.className = options.className || '';
  instance.type = options.type || '';
  instance.iconClass = options.iconClass || '';
  instance.duration = duration / 1000;
  document.body.appendChild(instance.$el);
  Vue.nextTick(function () {
  instance.visible = true;
  setTimeout(() => {
  instance.visible = false;
  if (options.close) {
  options.close();
  }
 }, duration);
  });

  return instance;
};
export default Toast;

二、vue件