vue插件开发的两种方法：以通知插件toastr为例

\n    
\n        {{message}}\n    
\n\n\n\n\n","classes":{"has":1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><template>
    <div class="vue-toastr-wraper" v-show="isShow">
        {{message}}
    div>
template>

<script>
export default {
    name:'toastr',
    props:{
        message:{
            default:"",
            type:String
        },
        isShow:{
            default:false,
            type:Boolean
        }
    },
    mounted(){
        if(this.isShow){
            setTimeout(() => {
                this.isShow = false
            },2500);
        }
    }
}
script>

<style scoped>
.vue-toastr-wraper{
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 17px;
    padding: 10px;
    border-radius:12px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2000;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
style>

import VueToastrPlugin from './toastr.vue'

const toastrPlugin = {
    install: function(Vue) {
        Vue.component(VueToastrPlugin.name, VueToastrPlugin)
    }
}

// global 情况下 自动安装
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(toastrPlugin)
}

// 导出模块
export default toastrPlugin

 h(App)\n})","classes":{"has":1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet">import Vue from 'vue'
import App from './App.vue'

import Toastr from './lib/toastr/toastr.js'
Vue.use(Toastr)

new Vue({
  el: '#app',
  render: h => h(App)
})

\n  
\n    \n  
\n\n\n\n\n","classes":{"has":1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><template>
  <div id="app">
    <toastr :msg = "'测试'" :isShow = "true"/>
  div>
template>

<script>
export default {
  name: 'app'
}
script>

<style lang="scss">
style>

\n    \n        
\n            {{message}}\n        
\n    \n\n\n\n\n","classes":{"has":1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><template>
    <transition name="fade">
        <div class="toast" v-show="show">
            {{message}}
        div>
    transition>
template>

<script>
export default {
  data() {
    return {
      show: false,
      message: ""
    };
  }
};
script>

<style lang="scss" scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -30px;
  padding: 2vw;
  width: 200px;
  height: 60px;
  overflow-y: auto;
  font-size: 14px;
  color: #fff;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  z-index: 999;
}

.fade-enter-active,
.fade-leave-active {
  transition: 0.3s ease-out;
}
.fade-enter {
  opacity: 0;
  transform: scale(1.2);
}
.fade-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
style>

 {\n        instance.message = msg;\n        instance.show = true;\n\n        setTimeout(() => {\n            \n            instance.show = false;\n        }, duration);\n    }\n}\n\nexport default Toast","classes":{"has":1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet">import ToastComponent from './toastr.vue'

const Toast = {};

// 注册Toast
Toast.install = function (Vue) {
    // 生成一个Vue的子类
    // 同时这个子类也就是组件
    const ToastCOnstructor= Vue.extend(ToastComponent)
    // 生成一个该子类的实例
    const instance = new ToastConstructor();

    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
    
    // 通过Vue的原型注册一个方法
    // 让所有实例共享这个方法 
    Vue.prototype.$toast = (msg, duration = 2000) => {
        instance.message = msg;
        instance.show = true;

        setTimeout(() => {
            
            instance.show = false;
        }, duration);
    }
}

export default Toast

'\n})","classes":{"has":1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet">// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Toast from './lib/toastr/toastr.js'

Vue.use(Toast)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

\n  
\n    显示taost弹出框\n  
\n\n\n\n\n","classes":{"has":1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet">// app.vue
<template>
  <div id="app">
    <button @click="toast">显示taost弹出框button>
  div>
template>

<script>
export default {
  name: "app",
  methods: {
    toast() {
      this.$toast("你好");
    }
  }
};
script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
style>