Vue3-自定义轮播图插件（逐步-1）

1. 大致框架建好

在src文件下新建一个文件XX，在XX中建立一个index.vue作为主页面。

在文件XX里建一个components文件用于存放组件，在components文件中建一个slideBox.vue来写我们的轮播图主体。在slideBox.vue中，把大致的框架写好：

<template>
    <div class="slideStyle">
        <div><h1>{{msg}}</h1></div>
    </div>
</template>

<script>
export default{
    name:'slideBox',
    setup(){
        let msg = '自定义轮播图插件';

        return{
            msg,
        }
    }
}
</script>

在main.js文件中，进行全局入口注册，

添加 import slideBox from './XX/components/slideBox.vue'

和 createApp(App).component('slide-box',slideBox).

import { createApp } from 'vue'
import 'virtual:windi.css'
import router from './route/index'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style/reset.less'
import slideBox from './XX/components/slideBox.vue'

createApp(App).use(ElementPlus).use(router).component('slide-box',slideBox).mount('#app')


/* const app = createApp(App);
app.use(ElementPlus)
app.use(router)
app.mount('#app')
//组件注册
app.component('slide-box',slideBox) */

 可以在index.vue中直接使用<slideBox />（即<name />）调用。

2. 在slideBox.vue中，写视图，写样式

/* 写视图 */
<template>
    <div class="slideStyle">
        <ul>
            <li>111</li>
        </ul>
    </div>
</template>

<script>
    ...
</script>

/* 写样式，基本结构&命令 */
<style scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none; /* 取消小圆点 */
}
.slideStyle{        /*基本宽高写死*/
    width:400px;
    height: 200px;
    margin: 20px auto;
    border:11px solid #999;
    overflow: hidden;
    position: relative; /* 相对定位 */
}
.slideStyle ul{    /*高写死*/
    display: block; /* 块容器 */
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    transition: left 1s;
}
.slideStyle ul li{    /*基本宽高写死*/

    float: left;
    width: 400px;
    height: 200px;
}
</style>

在<script>中，写数据，在setup()函数中的return之前 写数据imgData。

然后，在其后写个ulStyle()来计算ul的宽度。

在视图<li 后写个for循环，并绑定一下img的src。看下效果，图显示。

/* 写视图 */
<template>
    <div class="slideStyle">
        <ul>
            <li v-for="n, in imgData" :key="n" >
                <img :src=n.url />
            </li>
        </ul>
    </div>
</template>

<script>

import {ref, reactive, toRefs} from 'vue' 
export default{
    name:'slideBox',
    setup(){
        let msg = '自定义轮播图插件';

        //轮播图数据
        let imgData = [
            {
                url:'src/img/bobo.jpg',
                txt:'第一张图'
            },{   
               url:'https://www.keaidian.com/uploads/allimg/190424/24110307_6.jpg',
                txt:'第二张图'
            },{
                url:'src/img/bobo2.jpg',
                txt:'第三张图'
            }
        ];

        //计算ul的宽度
        let ulStyle = reactive({        //reative对象已通过toRefs解构出去
            ul_w : imgData.length * 400,
            ul_left : 1 //索引值
        });

        return{
            msg, 
            imgData,
            ...toRefs(ulStyle)
        }
    }
}
</script>

发现不难发现图是纵向的，

在<ul> 中添加样式设置宽度并绑定style，则去掉overflow样式可以发现图是横向的。

可以在slide的css样式中，将border设置为11，便于观察，即 border:11px solid #999;。

        <ul :style='{
                width: ul_w +"px",
                left: ul_left +"px"
            }'>
            <li v-for="n, in imgData" :key="n">
            <!-- 在v-for循环后加上:key=""。(n, index)(注意冒号和前面的引号之间加一个空格)。
                    否则，报错expect to have 'v-bind:key' directives.
                     Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的 -->
                <img :src=n.url />
            </li>
        </ul>

3. 添加左右按钮

视图中，ul的前后加上<label>和<span>

        <!-- 左按钮 -->
        <label @click='leftBtn'></label>
        <!-- 图片列表 -->
        <ul :style='{
                width: ul_w +"px",
                left: ul_left +"px"
            }'>
            <li v-for="n, in imgData" :key="n">
            <!-- 在v-for循环后加上:key=""。(n, index)(注意冒号和前面的引号之间加一个空格)。
                    否则，报错expect to have 'v-bind:key' directives.
                     Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的 -->
                <img :src=n.url />
            </li>
        </ul>
        <!-- 右按钮 -->
        <span @click='rightBtn'></span>

添加样式

.slideStyle label,.slideStyle span{
    width:30px;
    height: 30px;
    background:#000;
    display: block;
    position: absolute;
    top: 80px;
    z-index: 5; /* 层级 */
    border-radius: 8px;
    cursor: pointer;   /* 鼠标移上去的效果 */
}
/* 左右一个按钮 */
.slideStyle label{
    left:20px;
}
.slideStyle span{
    right: 20px;
}

在标签中绑定事件，在script中 写事件

        //轮播图索引，inx代表的是第几张图被显示//索引值
        let inx = ref(0);   //给初始值为0

        //整个组件的事件对象
        let methodsObj = {
            //左按钮
            leftBtn(){
                if(inx.value < imgData.length-1){
                    ++inx.value;
                }else{
                    inx.value = 0;
                }
                ulStyle.ul_left = -(inx.value *400);

            },
            //右按钮
            rightBtn(){
                if(inx.value > 0){
                    --inx.value;
                }else{
                    inx.value = imgData.length-1;
                }
                ulStyle.ul_left = -(inx.value * 400);
            },
        }
         return{
            msg, 
            imgData, 
            ...toRefs(ulStyle),
            ...methodsObj,
        }