2018/11/28 Element-ui 布局

1、在使用element-ui中 row与col 响应式布局时

出现了以下这种情况，当点击中间模块时，因其高度变化打乱了相邻模块的正常的布局。

而我想要效果是类似这样的，不管哪一个模块点击都使下方的整体移动，而不是散乱的铺开

解决办法：因为这是一行中的8个模块。每个模块在内可以被被动的打乱其布局，因此使用多行多列，每一行最多3个模块，这样一来因为不管哪个模块点击都能使下方的模块整体移动，因为他们是一行。
缺点:因为一行是三个模块，因此在窗口调整是不能实现两个在一行的效果

而是这样的：

因此最终还没有确定最好的解决方案，暂时采用一行多列的模式

2、在非父子之间的传值时，采用bus总线型方案

Vue.prototype.bus=new Vue();

实际上是使用了原型继承，这样一来每个组件都拥有了bus方法，因为他们都是Vue的实例，因此使用this.bus.$emit()向外触发一个事件，而使用this.bus.$on() 监听这个事件，
这样就能实现非父子之间的传值了

3、在Vue中使用动画

可以使用transition组件、也可以使用element自带的动画效果，因为我对Vue和element的动画作用原理还不是很熟悉，因此使用的是原生CSS3动画效果

总结使用动画要点

最重要的是搞清楚动画要在什么情况下触发：

1. hover
2. 页面加载就开始
3. 点击后(自身元素点击，其他元素点击)
4. 复选框选中状态等等

搞清楚了要用的动画是在什么时候触发，那么就将动画的样式添加在哪个时候

例如：

hover状态下：
元素{
	width：100px;
	transition width 1s；
}
元素:hover{
	width：200px;
}
 
这样一来就在hover状态下实现了100px到200px  1s 的过滤效果

点击后（其他元素点击）
<div id="div"></div>
<button onclick="animation()"></button>

在按钮点击后为div添加一个类来实现动画，在这个类中绑定了相应的动画效果并且持续一秒，但在一秒之后去除这个类，反复点击反复添加类，就能反复实现效果

animation:function(){
	document.getElementById('div').className="animation";
	settimeout(function(){
		document.getElementById('div').className="";
	},1000)
}
.animationDiv{
	animaton: scaleDiv 1s 
}

复选框选中状态与自身元素点击，都是采用类似的思想，在点击的时候添加动画，之后去除，如果单单使用animation实现属性变化过滤，因为它是样式属性改变后自动执行，所有不用主动去除，
而animaton或transform 添加后只能实现一次，因为想要反复实现。那么就要反复添加

4、Vue中主要是单项数据流的思想

1. 父组件可以传递值给子组件，而子组件不能更改传递过来的值，因此在子组件中要使用data拷贝一份副本进而操作副本的值，
2. 子组件向父组件传值是通过$emit 向外发送一个事件，而父组件监听这个事件。通过这个事件，就能同时实现向父组件传值。