ShanaMaid

前端狗

17
文章
11
分类
24
标签

vue仿PC端163music图片滚动组件

实战开发,vue
  |  
 阅读次数

介绍

这是一款模仿PC端网易云音乐的vue图片滚动插件

Github项目地址-vue-image-scroll

在线文档和demo

欢迎各位dalao指点,star or PR!

安装与使用

安装

1
npm install vue-image-scroll

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <template>
      <div>
       <slider v-bind="setting">
      </div>
    </template>
<script>
import slider from 'vue-image-scroll';
export default {
  components: {
    slider
  },
  data: function() {
    return {
      setting: {
        image: ['1.jpg', '2.jpg', '3.jpg']
      }
    }
  }
}
</script>

本地调试

1
2
3
4
5
git clone https://github.com/ShanaMaid/vue-image-scroll.git
npm install 
npm run dev

说明

项目使用vue-cli开发，源文件在src/components/Slider.vue中，lib中的index.js为压缩后的文件

开发遇到的问题

打包组件的时候遇到,loader error的问题，发现webpack2.0开始loaders中babel以及url等都需要写作babel-loader、url-loader