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

1. 大致框架建好

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

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

在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中直接使用（即）调用。

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

/* 写视图 */




/* 写样式，基本结构&命令 */

在

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

在

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

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

3. 添加左右按钮

视图中，ul的前后加上和

添加样式

.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,
        }