插件的创建和使用

plugin插件

1.插件是一个对象，必须实现install方法
2.插件需要在vue文件中使用Vue.use(插件)
3.插件方法
    vue.extend(.vue文件)    继承.vue文件的构造函数
    instance.$mount(dom)   手动挂载
    instance.$el  实例的真实dom
    Vue.protoytpe.$toast = Toast
      将插件挂载到全局的（所有组件的实力都将拥有插件的方法和属性)

ToastCom 加载中插件

• 在piugin下创建一个Toast文件
• 创建ToastCom.vue
• 编写代码

<template>
    <div class="toast" v-if="msg">
        {{msg}}
    </div>
</template>
<script>
//当文本msg为空的时候提示隐藏，有文本的时候显示
export default {
    data() {
        return {
            msg: ""
        }//提示的文本
    },
    methods: {
        show(str = "加载中...",delay=2000) {
            this.msg = str;
            //显示等待2秒隐藏
            setTimeout(() => this.hide(), delay)
        },
        hide() {
            this.msg = "";
        }
    }
}
</script>
<style scoped="scoped">
.toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    border-radius: 4px;
    color: #fff;
    background-color: rgba(0, 0, 0, .4);
    z-index: 1000000;
}
</style>

• 创建js文件
• 编写代码

//01 导入组件
import ToastVue from './ToastCom.vue'
//定义一个插件  它是一个对象
var Toast = {}
//vue的插件必须实现install方法
Toast.install = function (Vue) {
    //02 获取组件的构造函数
    var ToastCom = Vue.extend(ToastVue);
    //03 创建组件的实例
    var instance = new ToastCom();
    //04 挂载到真实的dom
    instance.$mount(document.createElement("div"));
    //05 插入到body
    document.body.appendChild(instance.$el);
    //06 关联Toast插件
    Toast.show = instance.show;
    Toast.hide = instance.hide;

    //把对象挂载到vue的原型上
    //vue所有的组件和实例都可以使用$toast方法
    Vue.prototype.$toast = Toast;
}
//导出插件
export default Toast;

• 使用插件

<button @click="$toast.show('我可怜的没有人爱')">可爱</button> |
<button @click="$toast.show('终于挂电话可以自己打游戏了')">晚安拜拜</button> |
<button @click="$toast.show('开始刷剧',5000)">早点睡</button>

效果图

Notify通知插件

js
    保持一致

vue
    template
        <div class="notify">{{msg}}</div>

    js
        data
            msg通知的颜色
            color文本的颜色
            bgColor背景颜色

        methods
            success（msg）成功提示
            warn(msg)警告提示
            danger（msg）危险警告
            show（msg，bgColor，color）显示
            hide（）隐藏

• 在piugin下创建一个Notify文件
• 创建NotifyVue.vue
• 编写代码

<template>
    <div v-if="msg" class="notify" :style="{clor:color,backgroundColor:bgColor}">
        {{msg}}
    </div>
</template>
<style scoped="scoped">
.notify {
    height: 44px;
    line-height: 44px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
}
</style>
<script>
export default {
    data() {
        return {
            //通知文本
            msg: "",
            color: "#fff",
            bgColor: "#090",
        }
    },
    methods: {
        //显示通知
        show(msg, bgColor = "#090", color = "#fff") {
            this.bgColor = bgColor;
            this.color = color;
            this.msg = msg;
            //2秒后隐藏通知
            setTimeout(() => {
                this.hide()
            }, 2000)
        },
        //隐藏通知
        hide() {
            this.msg = "";
        },
        success(msg) {
            this.show(msg, "#090")
        },
        danger(msg) {
            this.show(msg, "#ff5500")
        },
        warning(msg) {
            this.show(msg, "#ffd606")
        },
    }
}
</script>

• 创建js文件
• 编写代码

//01 导入Vue
import NotifyVue from './NotifyVue.vue'
//定义插件
const Notify = {};
//实现install方法
Notify.install = function (Vue) {
    // 02 获取到构造函数
    var NotifyCom = Vue.extend(NotifyVue);
    // 03 创建实例
    var instance = new NotifyCom();
    // 04 手动挂载真实dom
    instance.$mount(document.createElement("div"))
    // 05 插入到body标签
    document.body.appendChild(instance.$el);
    // 06 同步插件  Notify和NotifyVue实例的方法
    Notify.show = instance.show;
    Notify.hide = instance.hide;
    Notify.success=instance.success;
    Notify.danger=instance.danger;
    Notify.warning=instance.warning;
    //挂载到全局
    Vue.prototype.$notify = Notify;
}
//导出
export default Notify;

• 使用插件

<button @click="$notify.success('登录成功')"></button>
<button @click="$notify.danger('登录失败')"></button>
<button @click="$notify.warning('密码错误')"></button>
<button @click="$notify.show('该做核酸了!','pink')">自定义通知</button>

效果图