Model弹框

vue.js Model弹框

安装bootstrapvue插件才可以使用

bootstrapVue官网：https://bootstrap-vue.js.org/docs/

html页面

 <b-button v-b-modal.logoutMessageBox>Launch demo modal</b-button>
 <b-modal id="logoutMessageBox" centered hide-header  ok-title="确定" cancel-title="取消">
      <h5>请完善用户信息</h5>
 </b-modal>

Css样式

   #logoutMessageBox .modal-content {
      margin: 0 auto;
      width: 90%;
    }
    #logoutMessageBox h5 {
      text-align: center;
    }
    #logoutMessageBox .modal-body {
      padding: 25px 0;
    }
    #logoutMessageBox footer {
      padding-top: 5px;
      padding-bottom: 7px;
    }
    #logoutMessageBox footer button {
      width: 100%;
      background: #fff;
      border: 0px;
      color: black;
    }
    #logoutMessageBox footer .btn-primary {
      border-left: 1px solid rgb(222, 226, 230);
      border-radius: 0;
    }

效果图