<template> <div :style="itemStyle"> <slot></slot> </div> </template> <script> export default { name: "dhtSwiperSideItem", data() { return { show: false, defaultStyle: {}, itemStyle: {} }; }, watch: {}, beforeCreate() {}, created() { //元素创建和需要更新父元素属性 this.$parent && this.$parent.updateItems(); }, beforeMount() {}, mounted() {}, destroyed() { //元素销毁和需要更新父元素属性 this.$parent && this.$parent.updateItems(); }, methods: {} }; </script> <style lang="scss"> .dht-swiper-side-item { position: absolute; transition: all 1s ease; transform: translateX(1000px); // 抖动动画 @keyframes mymove { 0% { left: 0; } 50% { left: 15px; } 100% { left: 0; } } } </style>
致谢
感谢elementUI开源代码，本组件有部分是直接拷贝的elementUI的Carousel的代码。
总结
以上所述是小编给大家介绍的vue轮播组件实现$children和$parent 附带好用的gif录制工具,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: