Question

是否可以使用Vue折叠单个div，而不使用BootstrapVue等其他附加组件？如果是这样，我该怎么办？

This example is from the mentioned addon

<div>
  <b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
  <b-collapse id="collapse1" class="mt-2">
    <b-card>
      <p class="card-text">Collapse contents Here</p>
      <b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>
      <b-collapse id=collapse1_inner class="mt-2">
        <b-card>Hello!</b-card>
      </b-collapse>
    </b-card>
  </b-collapse>
</div>

Answer 1

存储数据值，例如# here we have a parameterized JSON string ('{' + variable + '}'), # inside a Jinja template ({{ }}), # inside Ansible shorthand syntax for the uri module (body=""), # inside a YAML string (>) for the local_action's module - name: interact local_action: module: > uri url=http://server:4000/api method=POST body="{{ '{ "jsonKey0":"' + some_variable.stdout_lines[0] + '", "jsonKey1": "... etc." }' }}" body_format=json，初始值为display_div。然后，在div标签中有true或<div v-if="display_div">。最后，您的按钮应处理切换<div v-show="display_div">值，例如display_div。

您也可以将切换逻辑移动到自己的方法中，例如<input type="button" value="Toggle Collapse" v-on:click="display_div = !display_div"/>您的方法可能如下所示：

toggleDiv()

完整示例：

toggleDiv: function() {
    this.display_div = !this.display_div;
}

Answer 2

如果您想像bootstrap 4.x一样进行动画折叠/展开，则可以使用以下指令。需要Bootstrap.css，但不需要jQuery或Bootstrap.js。此解决方案添加collapsing css类来添加动画。

Vue.directive('collapsible', {
   bind: function (el, binding) {        
      el.transitionDuration = 350;
   },
   update: function (el, binding) {        
      if (binding.oldValue != binding.value){
          if (binding.value) {      
             setTimeout(function () {
                 el.classList.remove("collapse");                    
                 var height = window.getComputedStyle(el).height;                    
                 el.classList.add('collapsing');
                 el.offsetHeight;
                 el.style.height = height;
                 setTimeout(function() {                
                    el.classList.remove("collapsing");
                    el.classList.add('collapse');                   
                    el.style.height = null;                        
                    el.classList.add('show');                    
                }, el.transitionDuration)
             }, 0);
          } 
          else {                
             el.style.height = window.getComputedStyle(el).height;                
             el.classList.remove("collapse");
             el.classList.remove('show');
             el.offsetHeight;
             el.style.height = null;            
             el.classList.add('collapsing');
             setTimeout(function() {                
                el.classList.add('collapse');                
                el.classList.remove("collapsing");                                               
             }, el.transitionDuration)
          }
      }
   }
});

使用方法：

<button v-on:click="displayDiv = !displayDiv;" class="btn btn-primary"> Click Me                     
</button>
<div class="collapse" v-collapsible="displayDiv">
  Some text <br/>
  More text <br/>
  More text... <br/>
</div>

查看jsFiddle

Vue.js：单个div崩溃

2 个答案: