VUE小课堂-简单的封装组件【初学适用】

最新推荐文章于 2024-04-28 15:51:58 发布

不知名BUG制造者

最新推荐文章于 2024-04-28 15:51:58 发布

阅读量403

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_65984842/article/details/124051715

版权

以常用的swiper为例，进行封装

直接上代码看

  Vue.component("swiper", {
            props: {
                //把SWIPER的一些属性设置一下
                autoplay: {
                //可以再swiper官网上看下api文档
                    type: Boolean,
                //写一个默认的模式
                    default: false
                },
                speed: {
                    type: Number,
                    default: 3000
                },
                delay: {
                    type: Number,
                    default: 3000
                },
                pagination: {
                    type: Boolean,
                    default: false
                },
                loop: {
                    type: Boolean,
                    default: true
                }
            },
 
            // 数据渲染完成触发
            mounted() {
                //真正设置的时候在这儿
                new Swiper(".swiper", {
                    autoplay: this.autoplay,
                    speed: this.speed,
                    loop: this.loop,
                    // delay:this.delay,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                })
            },
            template: "#swiper"
        })