简介
Veer-Vue-Slider 是一款基于 Vue2.x 开发的轮播图组件，它支持多种类型的轮播图，包括图片轮播、文字轮播和混合轮播，而且它非常易于使用，通过简单的配置就可以快速构建出一个漂亮的轮播图。
安装
使用 Veer-Vue-Slider 首先你需要安装它，你可以通过 npm 来安装它，具体步骤如下：
npm install veer-vue-slider --save
注意，在安装之前，你需要先确保已经安装了 Vue，否则需要先安装 Vue。
使用
安装完成之后，在你需要使用 Veer-Vue-Slider 的组件中导入它：
import VeerVueSlider from 'veer-vue-slider'
export default {
components: {
VeerVueSlider
}
}此时，你就可以在组件中使用 VeerVueSlider 组件了，下面是一个简单的例子：
-- -------------------- ---- -------
----------
-----
---------------- ------------ --
------
-----------
--------
------ ------- -
------ -
------ -
----- -
-
------ ------- ------
-------- ---- -- ----------
------ -----------------------------------------
--
-
------ ------- ------------------
-------- ---------------- -- ----------
------ -----------------------------------------
-
-
-
-
-
---------在这个例子中，我们使用了 Veer-Vue-Slider 展示了两个轮播图，包括标题、内容和图片，它们都被存储在 data 数组中。在 VeerVueSlider 组件中，我们只需要在 data 属性中传入这个数组，然后 Veer-Vue-Slider 就会自动渲染这个轮播图了。
配置
在使用 Veer-Vue-Slider 的时候，你可以配置一些参数来控制轮播图的展示效果，下面是一些常用的配置：
type
type 表示轮播图的类型，它可以取值为 'image'、'text' 或 'mixed'，分别表示图片轮播、文字轮播和混合轮播。默认为 'image'。
<veer-vue-slider :type="'text'" :data="data" />
interval
interval 表示每个轮播图的展示时间，单位为毫秒。默认为 3000。
<veer-vue-slider :interval="5000" :data="data" />
height
height 表示轮播图的高度，可以是一个数值或者一个字符串，如果是数值，表示高度以像素为单位，如果是字符串，可以写成 '50%' 或者 '100vh' 的形式。默认为 '400px'。
<veer-vue-slider :height="'50%'" :data="data" />
loop
loop 表示轮播图是否循环展示，它可以是一个布尔值或者一个数值，如果是一个布尔值，表示是否循环展示，如果是一个数值，表示循环轮播的次数。默认为 true。
<veer-vue-slider :loop="false" :data="data" />
事件
在 Veer-Vue-Slider 中，你还可以监听一些事件，在事件发生的时候执行一些操作，下面是一些常用的事件：
before-change
before-change 表示轮播图切换之前触发的事件。
<veer-vue-slider :data="data" @before-change="doSomething" />
after-change
after-change 表示轮播图切换之后触发的事件。
<veer-vue-slider :data="data" @after-change="doSomething" />
总结
Veer-Vue-Slider 是一款非常好用的 Vue 轮播图组件，它提供了多种类型的轮播图以及丰富的配置和事件，帮助你快速构建出漂亮的轮播图。希望本文能够对你了解 Veer-Vue-Slider 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd11c