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件

<template>
<div class="toast " :class="position " v-if="visible" :style="style()">
 <span class="toast-msg" :class="type">{{message}}span>
div>
template>

<style>
@keyframes toastKF {
  0% {
  opacity: 0;
}
  25% {
  opacity: 1;
  z-index: 9999
}
  50% {
  opacity: 1;
  z-index: 9999
}
  75% {
  opacity: 1;
  z-index: 9999
}
  100% {
  opacity: 0;
  z-index: 0
}
}
style>

<style scoped lang="less">
.toast {
  opacity: 0;
  position: fixed;
  color: #fff;
  width: 100%;
  text-align: center;

&.top {
  top: 5%;
  }

&.bottom {
  bottom: 5%;
  }
&.middle {
  top: 50%;
  }
.toast-msg {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 8px 15px;
  border-radius: 4px;
  max-width: 80%;
  display: inline-block;
  margin: auto;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

 &.danger {
  background: red;
  color: #fff;
  }

  &.success {
  background: #70ca63;
  color: #fff;
  }

  &.primary {
  background: #3bafda;
  color: #fff;
  }
  &.warning {
  background: #f6bb42;
  color: #fff;
  }
 }&.toastAnimate {
  animation: toastKF 3s;
  }

}
style>

<script type="text/babel">
export default {
  name: 'toast',
  props: {
  duration: {
  type: Number,
  default: 2
  },
  type: {
  type: String,
  default: 'primary'
  },
  message: {
  type: String,
  default: ''
  },

  position: {
  type: String,
  default: 'middle'
  }

 },
  mounted(){
  console.log('mounted');
  },
  watch: {
  duration(){
  this.toastAnimate = `animation: toastKF ${this.duration}s;`;
  }
 },
  data() {
  return {
  el: this.$el,
  visible: false,
  toastAnimate: `animation: toastKF ${this.duration}s;`
  };
  },
  methods: {
  style(){
  if (this.visible) {
  return this.toastAnimate;
  }
 } },

  computed: {}
};
script>

三、使用

import Toast from '../../../../components/toast/index.js';
Toast({
  message: msg,
  type: 'warning'
});