vue 中这种布局怎么做折叠收起，以及过程中的动画?
发布网友
发布时间：2022-03-25 12:44
我来回答
共1个回答
热心网友
时间：2022-03-25 14:13
VUE 的核心思想是只操作 VDOM ，而不直接操作页面。
也就是说，布局和样式效果本身是必须要提前写成 vue 组件的，然后 vue 加载时渲染成 VDOM，再然后就是我们通过 vue 的规范在 js 代码中去控制 VDOM。
就你上面这个效果而言，实现思路是这样：
1，左右宽度自适应效果这个以前一般是使用 流式布局 或者定位加 margin 的方式实现，现在一般使用 flex 布局实现，具体你可以搜索 “两栏自适应布局”，这个属于 HTML + CSS 基础，与 vue 本身关系不大，你需要先把这个布局写好。
2，左边小三角的折叠、展开效果是通过两个不同状态的效果来实现的，一个展开状态，一个折叠状态。通常的做法是默认为折叠状态，样式通过标签选择器直接添加在默认样式上，然后再写一个展开状态的class样式，当给小三角标签添加这个class时为展开效果，移除class时为折叠效果。这个在 vue 中直接 在 data 中添加一个状态属性就可以实现，比如在 data 中添加一个属性为 isOpen 的布尔值，当值为true时表示展开状态，为 false 时为折叠状态。在vue的html模板中就可以这样写：（假设小三角是通过 span 标签实现的）<span :class="{"active": isOpen}"> ，当然也可以直接用三目的方式赋值，方法有多种。
3，右边的内容切换使用的是 v-if 指令，原理是通过索引与左边的选项进行关联，然后通过索引来判断显示哪一部分内容。
vue 的实现原理跟原生 js 是一样的，只是原生是直接操作页面元素，vue 是操作的 VDOM。
