<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>
