vue简单实现Notify组件

使用vue简单实现vant的notify组件

思路:
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

html

<div id="notify"></div>

notify.js

import Vue from "vue"
import "./notify.css"
const Demo = Vue.extend({
  props:['msg'],
  render(){
    return (
      <div class="show-notify">{this.msg}</div>
    )
  }
})
export default function Notify(msg){
  let instance  = new Demo({
    propsData:{msg} // 使用propsData传参
  })
  let PostEl = instance.$mount().$el; //生成子组件的HTML部分
       //挂载到一个名叫notify的div中，此处也可以是BODY
  document.getElementById("notify").appendChild(PostEl);
  setTimeout(()=>{
    PostEl.style.top = "-50px"
    setTimeout(()=>{
      document.getElementById("notify").removeChild(PostEl)
    },200)
  },2000)
};

css

@keyframes slideDown {
  0% {transform: translateY(-50px);}
  100% {transform: translateY(0);}
}
.show-notify {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: white;
  background-color: red;
  position: fixed;
  top: 0;
  animation: slideDown 200ms;
  -webkit-animation: slideDown 200ms;
  transition: 200ms;
}

在组件中使用

// app.vue
<template>
  <div id="app">
    <button @click="handelClick">通知</button>
  </div>
</template>

<script>
import Notify from "./components/Notify/notify"
export default {
  name: "App",
  methods: {
    handelClick(){
      Notify('警告') // 通过js调用
    }
  },
};
</script>