教你如何用Vue自己实现一个message插件

今天我们来自己动手用实现一个message插件:

  Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:

//message.vue
<template> <transition name="msg-fade"> <div class="message" :class="type" v-show="visible"> <span class="icon"></span> <p class="content">{{content}}</p> <span class="delete-icon" @click="onCancle">x</span> </div> </transition> </template> <script>   const Msg = {     name:'message',     data(){       return {         visible:false,         type:'',         content:''       }     },     install(Vue){       Vue.prototype.$msg = (config)=>{ //通过原型注册一个方法         const MessageConstructor = Vue.extend(Msg); //生成一个Vue子类,子类就是这个组件         const instance = new MessageConstructor({data:config}); //生成该子类的实例         instance.vm = instance.$mount(); //将该实例手动挂载         document.body.appendChild(instance.vm.$el); //将实例挂载到body上         instance.vm.visible = true;       }     }   },   watch:{     visible(v){       if(v){         setTimeout(()=>{           this.onClose()         },3000)       }     }    },    methods:{      onClose(){        this.visible = false        this.$el.parentNode.removeChild(this.$el)      },      show(){        this.visible = true      },      onCancle(){        if(this.cancelBtn){           this.cancelBtn.apply(this.content)        };        this.onClose();      }    },   }   export default Msg  </script>  <style scoped lang='less'>     .message {       position: fixed;       left: 50%;       top: 50%;       transform: translate3d(-50%,-50%,0);       background: rgba(0,0,0, 0.6);       z-index: 1000;       min-width: 288px;       height: 32px;       box-sizing: border-box;       .icon{         display: inline-block;         width: 12px;         height: 12px;         margin-left: 16px;         background: url(../assets/default.svg) no-repeat;           background-size: 12px 12px;         vertical-align: middle;       }       &.success {         background: #EBF8F2;         border: 1px solid #A7E1C4;         border-radius: 4px;         .icon{           background: url(../assets/success.svg)no-repeat;           background-size: 12px 12px;         }       }       &.warn {         background: #FFFAEB;         border: 1px solid #FCCCA7;         border-radius: 4px;         .icon{           background: url(../assets/remind.svg)no-repeat;           background-size: 12px 12px;         }       }       &.error {         background: #FEF3EB;         border: 1px solid #FFE9A7;         border-radius: 4px;         .icon{           background: url(../assets/error.svg)no-repeat;           background-size: 12px 12px;         }       }       .content{         display: inline-block;         font-size: 12px;         color: rgba(0,0,0,0.65);         letter-spacing: 0;         line-height: 30px;         margin-left: 8px;       }       .delete-icon{         display: block;         width: 10px;         height: 10px;         position:absolute;         top:9px;         right:12px;         font-size:18px;         line-height: 10px;           cursor: pointer;         color: #000;         opacity: .43;       }      }     .msg-fade-enter-active {       animation: alert-fade-in .3s;     }     .msg-fade-leave-active {       animation: alert-fade-out .3s;     }     @keyframes alert-fade-in {       0% {         opacity: 0;       }       100% {         opacity: 1;       }     }     @keyframes alert-fade-out {       0% {         opacity: 1;       }       100% {         opacity: 0;       }     }  </style> //main.js import msg from './components/Message'; Vue.use(msg); //使用: this.$msg({   type:'error',   content:'这是一条自定义消息' }) 效果如图


 

转载于:https://www.cnblogs.com/AIonTheRoad/p/11139888.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一个流行的JavaScript框架,可以轻松地创建动态的Web应用程序。它被广泛用于构建单页应用程序。在现代Web应用程序中,多语言功能是不可或缺的。多语言功能可以帮助您的网站吸引更多的国际用户,因为它可以让您的网站在不同的语言中呈现。 在Vue.js中,有许多多语言插件可供选择。其中一些最流行的包括vue-i18n、vuex-i18n和vue-multilanguage。在这篇文章中,我们将介绍这些插件的基本用法和如何在Vue.js应用程序中使用它们。 1. vue-i18n vue-i18n是Vue.js中最流行的多语言插件之一。它提供了易于使用的API,可以在应用程序中轻松添加多语言支持。它支持复数形式、日期格式和时间格式等常见的多语言特性。 首先,您需要通过npm安装vue-i18n插件。在终端中输入以下命令: ``` npm install vue-i18n ``` 然后,在您的Vue.js应用程序中添加以下代码: ``` import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const messages = { en: { message: { hello: 'Hello world!' } }, fr: { message: { hello: 'Bonjour le monde!' } } } const i18n = new VueI18n({ locale: 'en', // set locale messages, // set locale messages }) new Vue({ i18n, render: h => h(App) }).$mount('#app') ``` 接下来,您可以在Vue.js组件中使用以下代码来访问多语言翻译: ``` <template> <div>{{ $t("message.hello") }}</div> </template> ``` 这将返回“Hello world!”或“Bonjour le monde!”,具体取决于当前的语言设置。 2. vuex-i18n vuex-i18n是基于Vue.js和Vuex的多语言插件。它提供了一个易于使用的API,可以在应用程序中轻松添加多语言支持。它支持复数形式、日期格式和时间格式等常见的多语言特性。 首先,您需要通过npm安装vuex-i18n插件。在终端中输入以下命令: ``` npm install vuex-i18n ``` 然后,在您的Vue.js应用程序中添加以下代码: ``` import Vue from 'vue' import Vuex from 'vuex' import vuexI18n from 'vuex-i18n' Vue.use(Vuex) const store = new Vuex.Store() Vue.use(vuexI18n.plugin, store) const translationsEn = { hello: 'Hello world!' } const translationsFr = { hello: 'Bonjour le monde!' } Vue.i18n.add('en', translationsEn) Vue.i18n.add('fr', translationsFr) Vue.i18n.set('en') new Vue({ store, render: h => h(App) }).$mount('#app') ``` 接下来,您可以在Vue.js组件中使用以下代码来访问多语言翻译: ``` <template> <div>{{ $t("hello") }}</div> </template> ``` 这将返回“Hello world!”或“Bonjour le monde!”,具体取决于当前的语言设置。 3. vue-multilanguage vue-multilanguage是一个轻量级的多语言插件,它提供了易于使用的API,可以在应用程序中轻松添加多语言支持。它支持复数形式、日期格式和时间格式等常见的多语言特性。 首先,您需要通过npm安装vue-multilanguage插件。在终端中输入以下命令: ``` npm install vue-multilanguage ``` 然后,在您的Vue.js应用程序中添加以下代码: ``` import Vue from 'vue' import Multilanguage from 'vue-multilanguage' Vue.use(Multilanguage, { default: 'en', en: { hello: 'Hello world!' }, fr: { hello: 'Bonjour le monde!' } }) new Vue({ render: h => h(App) }).$mount('#app') ``` 接下来,您可以在Vue.js组件中使用以下代码来访问多语言翻译: ``` <template> <div>{{ $ml.hello }}</div> </template> ``` 这将返回“Hello world!”或“Bonjour le monde!”,具体取决于当前的语言设置。 以上是三种Vue.js多语言插件的基本用法和示例。根据您的应用程序需要和个人喜好,您可以选择其中任何一种多语言插件实现多语言功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值