【Vue】swiper封装自定义组件配合自定义命令实现

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="../js/swiper-4.5.3/swiper.js"></script>
    <link rel="stylesheet" href="../css/swiper-4.5.3/swiper.css">
    <title>swiper组件和指令实现轮播图效果</title>
    <style>
        .swiper-container {
            width: 500px;
            height: auto;
            --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
            --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
            --swiper-navigation-size: 5px;/* 设置按钮大小 */
            /* border: #ff6600 1px solid; */
            text-align:center;
    }
    </style>
</head>
<body>
    <div id="app">
        <myswiper :key="dataList.length">
            <div class="swiper-slide" v-for="(data,index) in dataList" v-swipe="{
                index:index,
                length:dataList.length
            }">
                {{data}}
            </div>
        </myswiper>
    </div>
</body>
    <script>

        var swiper = {
            template:
            `
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <slot></slot>
                    </div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            `
        }

        Vue.directive('swipe',{
            inserted(el,bind){
                //根据传入的对象  判断当最后一个节点dom初始化完成后，就实例化swiper对象
                if(bind.value.index === bind.value.length-1){
                        var swiper = new Swiper('.swiper-container',{
                        autoplay:true,//等同于以下设置
                        /*autoplay: {
                            delay: 3000,
                            stopOnLastSlide: false,
                            disableOnInteraction: true,
                            },*/
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    });
                }
            }
        }),

        new Vue({
            el:'#app',
            data:{
                dataList:[]
            },
            components:{
                "myswiper":swiper,
            },
            mounted(){
                //两秒后给dataList赋值，模拟数据请求到了 
                setTimeout(()=>{
                    this.dataList = ["中国陆军","中国空军","中国海军"]   //状态改完，异步更新dom
                },2000)
            }
        })
    </script>
</html>

 

posted @ 2020-12-12 19:32  狼窝窝  阅读(423)  评论(0)    收藏  举报