欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中引用轮播图组件解析

程序员文章站 2023-12-02 13:08:04
vue中引用轮播图 1、首先是vue的组件库(官方的vue组件库地址):https://github.com/vuejs/awesome-vue 2、查找自己需要的组件:可以ctrl+f 来快速搜索...

vue中引用轮播图

1、首先是vue的组件库(官方的vue组件库地址):https://github.com/vuejs/awesome-vue
2、查找自己需要的组件:可以ctrl+f 来快速搜索这些组件。
3、根据组件的使用指南进行引用(以引用轮播图实例):
1)npm 全局安装组件:npm install -s vue-carousel
2) 引用该组件(有两种方式):
a、全局引用:在main.js中引用。

import vue from 'vue';
import vuecarousel from 'vue-carousel';
vue.use(vuecarousel);
此时在该vue项目中都可以使用该组件。
b、在当前组件中引用:

import { carousel, slide } from 'vue-carousel';

export default { ... components: { carousel, slide } ... };

此时只能在该组件中使用。
4、在html中使用:

轮播的内容。 slide 2 content

5、相关参数的使用(都添加到 carousel 标签内。):

其中轮播的宽度由carousel的父节点宽度来决定。
相关api的查询地址:
https://github.com/ssense/vue-carousel/blob/master/docs/source/api/index.md