Vue---组件的插件化使用

最新推荐文章于 2024-03-26 10:00:00 发布

学好javascript换名

最新推荐文章于 2024-03-26 10:00:00 发布

阅读量546

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41644449/article/details/107998028

版权

本文介绍了如何将Vue组件插件化，从编写组件、打包、发布到改进现有Toast插件的过程。通过实例展示了如何在main.js中导入和使用组件，以及如何进行插件的打包和发布。此外，还详细讲解了对原版Toast插件的改进，提供了一种进阶版的使用方式。

摘要由CSDN通过智能技术生成

组件的插件化

编写组件（以toast为例子）

<template>
  <div class="toast" v-show='isShow'>
    <div>{
   {
   message}}</div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
   
  name:'Toast',
  data(){
   
    return {
   
      isShow:false,
      message:'默认消息'
    }
  },
  methods:{
   
    Show(value,time=2000){
   
      this.isShow = true
      this.message = value
      var that = this
      setTimeout(()=>{
   
        that.isShow = false
      },time)
    }
  }
}
</script>
<style scoped>
.toast{
   
  position:fixed;
  top:50%;
  left:50%;
  transform: translate( -50%, -50%);
  z-index: 999;
  background-color: rgba(0,0