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动画效果
总结使用动画要点
最重要的是搞清楚动画要在什么情况下触发:
- hover
- 页面加载就开始
- 点击后(自身元素点击,其他元素点击)
- 复选框选中状态等等
搞清楚了要用的动画是在什么时候触发,那么就将动画的样式添加在哪个时候
例如:
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中主要是单项数据流的思想
- 父组件可以传递值给子组件,而子组件不能更改传递过来的值,因此在子组件中要使用data拷贝一份副本进而操作副本的值,
- 子组件向父组件传值是通过$emit 向外发送一个事件,而父组件监听这个事件。通过这个事件,就能同时实现向父组件传值。