<div class="confirm">
<div class="shade"></div>
<div class="content">
<div class="top">提示</div>
<div class="center">{{title}}</div>
<div class="bottom">
<button v-on:click="clickBtn(true)">确定</button>
<button v-on:click="clickBtn(false)">取消</button>
</div>
</div>
</div>
</template>
<script>
// import Vue from 'vue'
export default {
name:'confirmCmp',
props:['title'],
data() {return {
}},
methods:{
clickBtn(b){
this.close()
//监听result变化,并发出通知（在angularjs中叫做广播，angularjs提供了emit,broadcast和$on服务用于向子父中传递消息）
this.$emit('result', b)
},
open(){
document.querySelector('.confirm').style.display='block'
},
close(){
document.querySelector('.confirm').style.display='none'
}
},
mounted() {
//垂直居中
var windowHeight=window.innerHeight
var domObj=document.querySelector('.content')
var domObjHeight=domObj.offsetHeight
//console.log(domObjHeight)不知道为啥获取不到高
var top=windowHeight/2-77
domObj.style.top=top+'px'
},
install(Vue){ //核心部分，在我们使用Vue.use()时，自动调用的是install，而install导出的必须是的组件
// console.log('confirmCmpInstall')
Vue.component('confirmCmp',this)
}
}
</script>
<style>
.confirm{display:none
position:fixed z-index:1width: 100%
height: 100%
}
.shade{
position:fixed
z-index: 2
background-color: rgb(0, 0, 0)
opacity: 0.3
width: 100%
height: 100%
}
.content{
background-color: white
z-index: 3
width: 260px
margin: auto
position: relative
left: 0 right: 0
}
.top{
padding-left: 20px
background: #f6f6f6
/*color: #212a31*/
font-size: 16px
font-weight: 700
height: 46px
line-height: 46px
border-bottom: 1px solid #D5D5D5
}
.center{
padding: 20px
line-height: 20px
font-size: 14px
}
.bottom{
border-top: 1px solid #D5D5D5
text-align:center
height: 46px
line-height: 46px
background: #f6f6f6}
.bottom button{width: 60px border: none height: 30px display: inline-block }
.bottom button:first-child{background-color:#1E9FFFcolor: whitemargin-right: 3px}
.bottom button:last-child{margin-left: 3px}
</style>
<!-- 插件开发教程 -->
<!-- https://cn.vuejs.org/v2/guide/plugins.html -->
<!-- 此办法行不通
http://www.cnblogs.com/yufann/p/Vue-Node8.html -->
java消息通知有两种方案：1.如果是平台级别的系统,可使用第三方消息推送服务,例如极光,用这个来做消息订阅与分发。
2.如果只是简简单单的需要提示到web页面,可以用js 定时ajax访问后台,后台来确定是否有数据更新,无论这个数据是哪来的。
消息通知可以了解一下极光推送
