vue.js中confirm怎样实现

JavaScript07

vue.js中confirm怎样实现,第1张

<template>

  <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访问后台,后台来确定是否有数据更新,无论这个数据是哪来的。

消息通知可以了解一下极光推送