自己封装一个vue消息推送组件

<template>
  <div>
    <div class="box" v-show="isshow" ref='box'>
              <i class="el-icon-close" @click="close"></i>
              <header class="header">{{list[index].title}}</header>
              <img class="box-img" :src="list[index].src" v-show='list[index].src' alt="img">
              <p class="article">{{list[index].text}}</p>
              <el-button-group>
                <el-button class="pre" :type="preType" icon="el-icon-arrow-left" size="mini" @click="pre()">上一页</el-button>
                <el-button :type="nextType" size="mini"  @click="next()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
              </el-button-group>
      </div>
  </div>
</template>
<script>
/**
 * 1、数据是外部传入 还是外部传url 组件内方法请求
 * 2、统一样式 还是可自定义？
 * 3、文章主体长度有限制吗？ 
 * 
 * 
 */
import img from'../assets/1.jpg'
export default {
    name:'MyDialog',
    props:{
      width:{
          type:Number,
          default:300,
        },
        height:{
          type:Number,
          default:200,
        },
        // preType:{
        //   type:String,
        //   default:'warn',
        // },
        // nextType:{
        //   type:String,
        //   default:'warn',
        // },
    },
    data(){
      return{
        index:0,//消息队列下标
        isshow:false,
        timer:null,
        preType:'warn',
        nextType:'warn',
        list:[
          {
            title:'我是一个demo3',
            src:img,
            text:'全局注册：一次注册( 调用Vue.component( 组件名称，为组件创建时定义的变量 ) )，可在多个Vue实例中使用。我们先用全局注册，注册上面例子中创建的myCom组件',
          }
        ],
      }
    },
    mounted(){
      // 模拟后端推送消息
      this.list.length=0;
      this.$refs.box.style.width=this.width+'px';
      this.$refs.box.style.height=this.height+'px';
      this.timer=setInterval(()=>{
      this.list.push({
          title:`我是一个新demo${this.list.length+1}`,
          src:img,
          text:'我是一个demo'
        });
        this.index=this.list.length-1;   //每次都显示最新一条？
      },5000)
    },
    watch:{
      index:function(newVal,oldVal){//上、下一步按钮样式
          newVal==0?this.preType='warn':this.preType='primary';
          newVal==this.list.length-1 && this.list.length!=1?this.nextType='warn':this.nextType='primary';
      },
      list:function(newVal,oldVal){
        if(newVal.length){//list长度不为0的时候  显示窗口
          this.isshow=true;
        }
        this.list.length>1?this.nextType='primary':this.nextType='warn'//根据list长度更改下一步按钮颜色
      }
    },
    methods:{
      pre(){
        if(this.index){
          this.index--;
        }
      },
      next(){
        if(this.index!=this.list.length-1){
          this.index++;
        }
      },
      close(){
        this.isshow=false;
        // this.list.length=0;  本地是否保留之前的信息  ？
      }
    }
}
</script>
<style lang="css" scoped>
    .el-icon-close{
      float:right;
    }
    .box {
        width:300px;
        min-height:200px;
        padding: 10px 10px 30px;
        margin:0 10px 10px 0;
        border:1px solid #f2f2f2;
        position: fixed;
        bottom: 0;
        right: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
    .header{
      text-align: center;
      font-weight: 600;
      line-height: 40px;
    }
    .article{
      font-size: 12px;
    }
    .box-img {
      width: 300px;
      height: 100px;
      display: block;
      margin: 0 auto;
    }
    .el-button-group{
      position: absolute;
      bottom: 10px;
    }
</style>

Mydialog.js

import MyDialog from '../MyDialog.vue'

const MyDialogs={
  install(Vue){
    Vue.component('MyDialog',MyDialog)
  }
}


//global 情况下 自动安装
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(MyDialogs)
}
// 导出模块
export default MyDialogs

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import MyDialog from './components/js/MyDialog.js'

Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(MyDialog)

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

hello.vue

<template>
  <div class="hello">
    
    <MyDialog></MyDialog>
  </div>
</template>
 
<script>        
// import MyDialog from './js/MyDialog.js'
export default {
  name: 'hello',
  // components:{MyDialog},
  data () {
    return {
      
    }
  },
  methods:{
  }
}
</script>