vue
编程式导航
// 注意:一定要区分 this.$route 和 this.$router 这两个对象,
// 其中:this.$route 是路由参数的对象,所有路由参数中,params,query 都属于它。
// 其中:this.$router 是一个路由导航对象,用它可以方便的使用 JS 代码,实现路由的前进、后退、跳转到新的 URL 地址。
以下的就相当于 router-link to="'/home/goodsinfo/' + item.id"
// 1. 最简单的
// this.$router.push('/home/goodsinfo/' + id);
// 2. 传递对象
// this.$router.push({path: '/home/goodsinfo/' + id});
// 3. 传递命名的路由
this.$router.push({ name: "goodsinfo", params: { id } });
这儿使用到的 name 需要在写路由的时候写进去。
示例:{ path: '/home/goodsinfo/:id', component: GoodsInfo, name: 'goodsinfo' },
轮播图组件的封装
- 封装好的轮播图组件存在 width 是100%还是自适应的问题
- 因此需要传递参数,确定是否要100%,由传递的参数决定。
数字选择框组件的封装
- 使用 MUI 组件中的数字选择框组件。
- 导入
mui
的 JS 包。
- 初始化数字组件,初始化数字组件的时候必须在
mounted
中。
- 数据的交互:父子组件之间的传值:
- 父组件向子组件传值:
- 通过属性绑定机制即可,然后在子组件中的
props
属性中声明传递过来的元素即可:props: ["max"],
- 但是这个值由于在父组件中是异步请求的,可能存在延迟。
- 所以使用
watch
属性监听 max
,
- 然后按照
mui的api
文档中传递值要设置的对象,也就是实时更新 max 的值。
mui('.mui-numbox').numbox().setOption('max',newVal);
- 子组件向父组件传值:
- 首先在父组件中,传递一个方法,通过方法的传值,将子组件的值传递到父组件。
- 然后监测数值的变化,通过
@change
触发方法,然后通过 this.$emit('getcount', parseInt(this.$refs.numbox.value));
将值传递出来。
- 然后通过父组件中的方法,将值及时的更新到父组件中计数的变量身上。
小球添加到购物车
- 首先画出小球确定它的初始位置,然后将它放在顶层隐藏起来。
- 然后设置一个方法,在点击加入购物车的时候触发,让小球显示出来。
- 然后通过:
this.$refs.ball.getBoundingClientRect();
来获取相关组件的位置。
document.getElementById('badge').getBoundingClientRect();
这是通过 DOM 来获取的。
- 然后设置移动的距离,这样就解决了机型无法适应的问题。
beforeEnter(el) {
el.style.transform = "translate(0,0)";
},
enter(el,done)