代码之家 › 专栏 › 技术社区 › josefdev

Vue。js:单个div的崩溃

vue.js

1

josefdev · 技术社区 · 8 年前

是否可以使用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>

2 回复 | 直到 8 年前

1

2

B. Fleming 8 年前

存储数据值,例如。 display_div 初始值为 true .那么,在你的div标签中 <div v-if="display_div"> 或 <div v-show="display_div"> 。最后,您的按钮应处理 显示\u div 价值,例如。 <input type="button" value="Toggle Collapse" v-on:click="display_div = !display_div"/> 。

您还可以将切换逻辑移动到自己的方法中,例如:。 toggleDiv() 您的方法可以如下所示:

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

完整示例:

<div id="app">
    <div v-if="display_div">Test</div>
    <input type="button" value="Toggle Collapse" v-on:click="toggleDiv()"/>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            display_div: false
        },
        methods: {
            toggleDiv: function() {
                this.display_div = !this.display_div;
            }
        }
    });
</script>

2

1

Circuit Breaker 6 年前

如果您想要像引导程序4那样进行动画折叠/展开。如果是,则可以使用以下指令。 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