Bootstrap显示下拉框和模态框

Bootstrap显示下拉框和模态框

一、Demo描述

​ 医生可以通过下拉框，给学生问题添加标签。若标签不存在，则可以自己创建标签。创建成功后，会自动刷新页面。

二、Bootstrap显示下拉框

1、如何使用

Ⅰ、设置按钮组

<div class="btn-group">
  <button type="button" class="btn btn-neutral dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="zmdi zmdi-label"></i>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right pullDown">
    <li>
        <a href="#" data-toggle="modal" data-target="#myModal">压力</a>
        <a href="#" data-toggle="modal" data-target="#myModal">焦虑</a>
        <a href="#" data-toggle="modal" data-target="#myModal">忧郁</a>
        <a href="#" data-toggle="modal" data-target="#myModal">创建标签</a>
    </li>
  </ul>
</div>

注意：

• 可以使用一个按钮或链接来打开下拉菜单
• 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。
• 一个按钮组（btn-group），与其标签内的按钮或链接，绑定成一个下拉框。

Ⅱ、多种下拉框

上拉菜单只需要在div定义class时将dropdown改成" 替换为 “dropup”:

这里参照网友代码

2、绑定vue事件实现遍历

Ⅰ、丢失样式

问题：当用axios从后台获取tag标签数据后，用v-for标签来遍历输出，会发现丢padding样式。

原因：bootstrap页面绑定vue事件，需要使用bootstrap-vue标签，这里用来代替

<div class="btn-group">
  <button type="button" class="btn btn-neutral dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="zmdi zmdi-label"></i>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right pullDown">
    <div v-for="tag in tags">
      <b-dropdown-item>{{tag.tagName}}</b-dropdown-item>
    </div>

    <b-dropdown-item data-toggle="modal" data-target="#myModal">创建标签</b-dropdown-item>
  </ul>
</div>

Ⅱ、重新加载标签

​ vue中添加 location.href，实现页面跳转

 location.href = "/mheal/doctor/toAnsPage?id=" + this.question_id;

三、Bootstrap显示模态框

1、如何使用

Ⅰ、打开模态框

<!--法一-->
<a href="#" data-toggle="modal" data-target="#myModal">创建标签</a>

<!--法二-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<!--法三-->
<b-dropdown-item data-toggle="modal" data-target="#myModal">创建标签</b-dropdown-item>

注意

• data-toggle=“modal”
• data-target="#myModal"，与模态框的id相同
• 模态框主要为三部分，model-head，modeal-body，model-footer,主要内容在body中显示，class="close"为一个关闭模态框样式。
  ​

Ⅱ、模态框代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">×
        </button>
        <h4 class="modal-title" id="myModalLabel">
          创建标签
        </h4>
      </div>
      <div class="modal-body">
        <input type="text" autofocus class="form-control" v-model="label" placeholder="请输入标签名">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
                data-dismiss="modal">关闭
        </button>
        <button type="button" class="btn btn-primary" @click="createLabel">
          提交更改
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

模态框相关参数请见菜鸟教程

2、遇到的问题

Ⅰ、modal框点击不了

bootstrap modal框出现蒙层,无法点击modal框内容

主要是bootstrap的默认样式的问题，在style中添加样式即可

.modal-backdrop.show {
     opacity: .0;
 }

.modal-backdrop{
     z-index: 0;
}

Ⅱ、modal模态框关闭

问题：当页面判断自定义标签在数据库中不存在时，点击确定，页面会提交自定义标签，但是模态框却没有关闭

解决方法：

用v-if，再定义一个show变量=true/false。

.... 
//打开modal框
openModal:function () {
  this.show = true;
},

  //创建label
  createLabel: async function (){

    if(!$.isEmptyObject(this.label)){

      //检测该label名是否存在
      let temp  = "";
      try{
        await axios.get('/mheal/question/getTagByName?tagName=' + _this.label).then(res=>{
          temp = res.data;
        })
      }catch(err){
        console.log(err);
      }

      if($.isEmptyObject(temp)){
        let formdata = new FormData();
        formdata.append("tagName",this.label);

        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        try{
          axios.post('/mheal/question/submitTag',formdata,config).then(res=>{
            alert("提交标签");
          }
                                                                      )
        }catch (err){
          console.log(err);
        }
        this.show = false;
        location.href = "/mheal/doctor/toAnsPage?id=" + this.question_id;
      }else{
        this.msg = "标签名已存在"
      }
    }else{
      this.msg = "标签名不能为空"
    }
  }
...

四、效果演示

五、参考文档

1、Bootstrap的下拉菜单dropdown

2、bootstrap-vue中的b-dropdown-item标签

3、Bootstrap Modal hide from Vue Method