实现一个简单的Vue插件

本文介绍了Vue插件的开发过程,包括概念、组件模板、逻辑实现和使用方法。通过封装插件,可以避免代码臃肿,提高代码复用性。在逻辑实现中,重点讲解了如何创建插件对象,定义install函数,以及在Vue原型上添加全局方法。最后提供了在main.js中的使用示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概念

最近看了篇关于Vue插件的文章,为了避免忘记,打算写下来,以遍日后查阅。

我们引入全局变量的时候,可能需要一个一个的引入,而且在一个vue文件中引用的组件多了,会显得代码臃肿,所以才有了封装vue插件的需求。

插件组件模板

<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: 40%;
  left: 50%;
  margin-left: -15vw;
  padding: 2vw;
  width: 30vw;
  font-size: 4vw;
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5vw;
  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>

这里面主要的内容只有两个,决定是否显示的show和显示什么内容的message,关键在于逻辑实现。

插件逻辑实现

import ToastComponent from './toast.vue'
const Toast = {}

// 注册toast
Toast.install = function (Vue) {
 const ToastContstructor = Vue.extend(ToastComponent)
 const instance = new ToastContstructor()
 instance.$mount(document.createElement('div'))
 document.body.appendChild(instance.$el)

 Vue.prototype.$toast = (msg, duration = 2000) => {
   instance.message = msg
   instance.show = true
   setTimeout(() => {
     instance.show = false
   }, duration)
 }
}
export default Toast

这里的逻辑大致可以分成这么几步:

创建一个空对象,这个对象就是日后要使用到的插件的名字。此外,这个对象中要有一个install的函数。
使用vue的extend方法创建一个插件的构造函数(可以看做创建了一个vue的子类),实例化该子类,之后的所有操作都可以通过这个子类完成。
之后再Vue的原型上添加一个共用的方法。

使用

之后再main.js中像我们之前一样使用普通的组件就行了

import Vue from 'vue'
import App from './App'
import router from './router'
import Toast from './components/toast'

Vue.use(Toast)

Vue.config.productionTip = false

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

全局调用

<template>
 <div class="hello">
   <h1>{{ msg }}</h1>
   <button @click="toast">显示toast弹出框</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
   return {
     msg: 'Welcome to Your Vue.js App'
   }
 },
 methods: {
   toast () {
     this.$toast('测试')
   }
 }
}
</script>

该博客仅为记录开发中一些遇到的问题及解决方案,后续还会继续更新维护。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值