2 |
3 |
Default
4 |
5 | Slide1
6 | Slide2
7 | Slide3
8 |
9 |
10 |
11 |
12 | Change swipe
13 |
14 | Slide1
15 | Slide2
16 | Slide3
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | Drag single swipe
25 |
26 | SINGLE SLIDE
27 |
28 |
29 |
30 |
31 | Default index
32 |
33 | Slide1
34 | Slide2
35 | Slide3
36 |
37 |
38 |
39 |
40 |
59 |
60 |
80 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | vue-swipe examples
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Example from './example.vue';
3 |
4 | new Vue({
5 | el: '#app',
6 | render: h => h(Example)
7 | });
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-swipe",
3 | "version": "2.4.0",
4 | "description": "A touch slider for vue.js.",
5 | "main": "dist/vue-swipe.js",
6 | "scripts": {
7 | "dev": "webpack-dev-server --config ./webpack.example.config.js --inline --hot",
8 | "remote-dev": "npm run dev --host",
9 | "build": "webpack -p",
10 | "release": "standard-version & git push --follow-tags eleme master & npm publish",
11 | "prepare": "npm run build"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "https://github.com/ElemeFE/vue-swipe.git"
16 | },
17 | "babel": {
18 | "presets": [
19 | "env"
20 | ]
21 | },
22 | "files": [
23 | "dist",
24 | "src"
25 | ],
26 | "keywords": [
27 | "swipe",
28 | "slider",
29 | "vue"
30 | ],
31 | "author": "long.zhang@ele.me",
32 | "license": "MIT",
33 | "devDependencies": {
34 | "babel-core": "^6.26.0",
35 | "babel-loader": "^7.1.4",
36 | "babel-preset-env": "^1.6.1",
37 | "css-loader": "^0.28.11",
38 | "eslint": "^4.19.1",
39 | "eslint-loader": "^2.0.0",
40 | "eslint-plugin-vue": "^4.4.0",
41 | "extract-text-webpack-plugin": "4.0.0-beta.0",
42 | "style-loader": "^0.20.3",
43 | "vue": "2.5.16",
44 | "vue-loader": "^14.2.2",
45 | "vue-template-compiler": "2.5.16",
46 | "webpack": "^4.5.0",
47 | "webpack-cli": "^2.0.14",
48 | "webpack-dev-server": "^3.1.3"
49 | },
50 | "dependencies": {
51 | "wind-dom": "0.0.3"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Swipe from './swipe.vue';
2 | import SwipeItem from './swipe-item.vue';
3 |
4 | export { Swipe, SwipeItem };
5 |
--------------------------------------------------------------------------------
/src/swipe-item.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
20 |
--------------------------------------------------------------------------------
/src/swipe.vue:
--------------------------------------------------------------------------------
1 |
47 |
48 |
49 |
60 |
61 |
62 |
558 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require('path');
2 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
3 |
4 | module.exports = {
5 | mode: 'production',
6 | entry: './src/',
7 | output: {
8 | library: 'VueSwipe',
9 | libraryTarget: 'commonjs2',
10 | filename: 'vue-swipe.js',
11 | path: resolve('dist'),
12 | },
13 | module: {
14 | rules: [
15 | {
16 | enforce: 'pre',
17 | test: /\.(js|vue)$/,
18 | loader: 'eslint-loader',
19 | exclude: /node_modules/
20 | },
21 | {
22 | test: /\.vue$/,
23 | loader: 'vue-loader',
24 | options: {
25 | extractCSS: true
26 | }
27 | },
28 | { test: /\.js$/,
29 | loader: 'babel-loader'
30 | }
31 | ]
32 | },
33 | plugins: [
34 | new ExtractTextPlugin('vue-swipe.css')
35 | ]
36 | };
37 |
--------------------------------------------------------------------------------
/webpack.example.config.js:
--------------------------------------------------------------------------------
1 | const {resolve} = require('path');
2 | const options = require('./webpack.config');
3 |
4 | options.mode = 'development';
5 | options.entry = './example/';
6 |
7 | options.output.filename = 'example.js';
8 | options.output.libraryTarget = 'var';
9 | options.output.publicPath = '/dist/';
10 |
11 | options.devServer = {
12 | contentBase: [
13 | resolve(__dirname, "example"),
14 | ],
15 | publicPath: '/dist/'
16 | };
17 |
18 | module.exports = options;
19 |
--------------------------------------------------------------------------------