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

最新推荐文章于 2024-03-07 14:39:38 发布

学好javascript换名

最新推荐文章于 2024-03-07 14:39:38 发布

阅读量529

点赞数 1

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

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

版权

组件的插件化

编写组件（以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