Vue.js:从父级折叠/展开所有元素 [英] Vue.js: Collapse/expand all elements from parent

问题描述

我需要为我的 Vue 组件(一些可折叠面板)添加展开/折叠所有"功能.

如果用户点击折叠按钮，然后点击某个面板并展开它，然后点击折叠按钮什么也不做，因为观察的参数不会改变.

那么如何正确实现这个功能(按钮必须始终折叠和展开组件)?

我准备了一个简单的例子(抱歉格式不正确，它在编辑器中看起来不错:():

var collapsible = {模板:#collapsible"，道具:["collapseAll"],数据:函数(){返回 {折叠:真的}},手表: {折叠全部:函数(值){this.collapsed = 值}}}var app = new Vue({模板:#app"，el: "#foo",数据: {折叠全部:真},成分: {可折叠:可折叠}});

.wrapper {宽度:100%；}.wrapper + .wrapper {边距顶部:10px；}.header {高度:20px；宽度:100%；背景:#ccc;}.可折叠{高度:100px；宽度:100%；背景:#aaa;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script><div id="foo"></div><script type="text/x-template" id="collapsible"><div class="wrapper"><div class="header" v-on:click="collapsed = !collapsed"></div><div class="collapsible" v-show="!collapsed"></div>

<script type="text/x-template" id="app"><div><button v-on:click="collapseAll = true">全部折叠</button><button v-on:click="collapseAll = false">全部展开</button><collapsible v-for="a in 10" v-bind:collapseAll="collapseAll" v-bind:key="a"></collapsible>

</script>

谢谢！

解决方案

在这种情况下，我可能会使用 ref.

Collapse All<button v-on:click="expandAll">全部展开</button><collapsible ref="collapsible" v-for="a in 10" v-bind:key="a"></collapsible>

并为您的 Vue 添加方法.

var app = new Vue({模板:#app"，el: "#foo",方法:{全部收缩(){this.$refs.collapsible.map(c => c.collapsed = true)},展开全部(){this.$refs.collapsible.map(c => c.collapsed = false)}},成分: {可折叠:可折叠}});

示例.

I need to add "expand/collapse all" functionality for my Vue component(some collapsible panel).

If user clicks collapse button then clicks on some panel and expand it then clicking on collapse button will do nothing because watched parameter will not change.

So how to implement this functionality properly (buttons must collapse and expand components always)?

I prepared simple example(sorry for bad formatting, it looks nice in editor :( ):

var collapsible = {
  template: "#collapsible",
  props: ["collapseAll"],
  data: function () {
      return {
        collapsed: true
    }
  },
  watch: {
  	collapseAll: function(value) {
    	this.collapsed = value
    }
  }
}

var app = new Vue({
	template: "#app",
  el: "#foo",
  data: {
      collapseAll: true
  },
  components: {
  	collapsible: collapsible
  }
});

.wrapper {
  width: 100%;
}

.wrapper + .wrapper {
  margin-top: 10px;
}

.header {
  height: 20px;
  width: 100%;
  background: #ccc;
}

.collapsible {
  height: 100px;
  width: 100%;
  background: #aaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>

<div id="foo"></div>


<script type="text/x-template" id="collapsible">
 	<div class="wrapper">
    <div class="header" v-on:click="collapsed = !collapsed"></div>
    <div class="collapsible" v-show="!collapsed"></div>
	</div>
</script>


<script type="text/x-template" id="app">
	<div>
    <button v-on:click="collapseAll = true">Collapse All</button>
    <button v-on:click="collapseAll = false">Expand All</button>
 		<collapsible v-for="a in 10" v-bind:collapseAll="collapseAll" v-bind:key="a"></collapsible>
  </div>
</script>

Thanks!

解决方案

This is a case where I might use a ref.

<button v-on:click="collapseAll">Collapse All</button>
<button v-on:click="expandAll">Expand All</button>
<collapsible ref="collapsible" v-for="a in 10" v-bind:key="a"></collapsible>

And add methods to your Vue.

var app = new Vue({
    template: "#app",
  el: "#foo",
  methods:{
    collapseAll(){
      this.$refs.collapsible.map(c => c.collapsed = true)
    },
    expandAll(){
      this.$refs.collapsible.map(c => c.collapsed = false)
    }
  },
  components: {
    collapsible: collapsible
  }
});

Example.

这篇关于Vue.js:从父级折叠/展开所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！