mixins混入--backtop回到顶部封装 · 要努力

[vue的api---mixins（混入）](https://cn.vuejs.org/v2/api/#mixins) [vue文档](https://cn.vuejs.org/v2/api/#Vue-mixin) 解决代码重复问题 [参考思否文章111](https://segmentfault.com/a/1190000015698391?utm_source=tag-newest) ### - home.vue 中 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408214422493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) - Detail.vue中 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408214822790.png) ### 解决方法 - 新建mixins.js文件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408215630299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) - 在detail.vue 删除重复代码，然后导入mixins.js文件并使用， ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408215249507.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408215354389.png) <hr> ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200408215819411.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) ## backtop回到顶部封装 - 在mixins.js文件添加 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200409001627982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70) - 使用 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200409001921714.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ltYWdlX2Z6eA==,size_16,color_FFFFFF,t_70)