vue.js中confirm怎样实现

Posted 2023-03-27

参考技术A <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>
      .confirmdisplay:none;
         position:fixed; z-index:1;width: 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 buttonwidth: 60px; border: none; height: 30px; display: inline-block; 
    .bottom button:first-childbackground-color:#1E9FFF;color: white;margin-right: 3px
    .bottom button:last-childmargin-left: 3px

</style>

<!-- 插件开发教程 -->
<!-- https://cn.vuejs.org/v2/guide/plugins.html -->

<!-- 此办法行不通
http://www.cnblogs.com/yufann/p/Vue-Node8.html -->