Vue中快速使用layui实现简易轮播图（易上手）

layui 快速实现简易轮播图（易上手）

1. 首先介绍一下layui这个框架

layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为后端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

2. 下载layui

方法一：如果你的电脑安装了npm的话 可以执行以下命令安装

npm i layui-src

方法二：官网下载最新版（这里演示我用的是这一种）

3. 创建一个vue项目（这里我就用vue项目演示，如果没有安装vue-cli请移步这里）

vue create vue-swiper
(中间创建过程就忽略了)

4. 用编辑器打开vue-swiper,并且打开浏览器输入http:localhost:8080/
5. 将我们下载好的layui复制到我们项目的public目录下（这里演示的是vue3.X，如果是vue2.X，建议放在static文件夹下，有关于更多vue中静态资源的加载请移步到这里）
   
6. 在public中的index.html中引入静态资源

<link rel="stylesheet" href="<%= BASE_URL %>layui/css/layui.css">
<script src="<%= BASE_URL %>layui/layui.js"></script>

7. 然后打开项目的views/Home.vue，就可以使用了

<template>
  <div class="layui-carousel" id="test1">
    <div carousel-item>
      <div><img src="../assets/JjlwRwx_yIo.jpg" alt="" /></div>
      <div><img src="../assets/NDwt0ojQ06U.jpg" alt="" /></div>
      <div><img src="../assets/P_mHx7RNzu0.jpg" alt="" /></div>
      <div><img src="../assets/ph4vENj9AQk.jpg" alt="" /></div>
      <div><img src="../assets/tN-z9_9kFXQ.jpg" alt="" /></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  created: function () {
    // eslint-disable-next-line no-undef
    layui.use('carousel', function () {
      // eslint-disable-next-line no-undef
      var carousel = layui.carousel
      // 建造实例
      carousel.render({
        elem: '#test1',
        width: '100%', // 设置容器宽度
        height: '700px',// 设置容器高度
        arrow: 'always' // 始终显示箭头
        // ,anim: 'updown' // 切换动画方式
      })
    })
  }
}
</script>

<style scoped>
img {
  width: 1000px;
  height: 700px;
}
</style>

8. 演示
   
9. 官方提供的参数可选项

可选项	说明	类型	默认值
elem	指向容器选择器，如：elem: ‘#id’。也可以是DOM对象	string/object	无
width	设定轮播容器宽度，支持像素和百分比	string	‘600px’
height	设定轮播容器高度，支持像素和百分比	string	‘280px’
full	是否全屏轮播	boolean	false
anim	轮播切换动画方式，可选值为：default（左右切换）updown（上下切换）fade（渐隐渐显切换）	string	‘default’
autoplay	是否自动切换	boolean	true
interval	自动切换的时间间隔，单位：ms（毫秒），不能低于800	number	3000
index	初始开始的条目索引	number	0
arrow	切换箭头默认显示状态，可选值为：hover（悬停显示）always（始终显示）none（始终不显示）	string	‘hover’
indicator	指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示） 注意：如果设定了 anim:‘updown’，该参数将无效	string	‘inside’
trigger	指示器的触发事件	string	‘click’