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




本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！