2 |
3 |
4 |
5 |
6 | vue-split-pane
7 |
8 |
9 |
14 |
15 |
16 |
17 |
18 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | A
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | B
42 |
43 |
44 |
45 |
46 |
47 |
48 | C
49 |
50 |
51 |
52 | D
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-splitpane",
3 | "description": "vue split-pane component",
4 | "version": "1.0.6",
5 | "repository": "https://github.com/PanJiaChen/vue-split-pane",
6 | "author": "Pan ",
7 | "main": "dist/vue-split-pane.min.js",
8 | "scripts": {
9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --content-base='./demo/'",
10 | "watch": "cross-env NODE_ENV=production webpack --progress --watch",
11 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
12 | },
13 | "license": "MIT",
14 | "homepage": "file:///Users/jiachenpan/www/Github/PanJiaChen.github.io/split-pane/demo/index.html",
15 | "devDependencies": {
16 | "babel-core": "^6.0.0",
17 | "babel-loader": "^6.0.0",
18 | "babel-plugin-transform-runtime": "^6.15.0",
19 | "babel-preset-es2015": "^6.14.0",
20 | "babel-preset-stage-2": "^6.13.0",
21 | "babel-runtime": "^6.11.6",
22 | "cross-env": "^3.0.0",
23 | "css-loader": "^0.25.0",
24 | "file-loader": "^0.9.0",
25 | "vue-loader": "^11.1.4",
26 | "vue-template-compiler": "^2.2.1",
27 | "webpack": "^2.2.0",
28 | "webpack-dev-server": "^2.2.0",
29 | "babel-eslint": "7.1.1",
30 | "eslint": "3.14.1",
31 | "eslint-friendly-formatter": "2.0.7",
32 | "eslint-loader": "1.6.1",
33 | "eslint-plugin-html": "2.0.0",
34 | "eslint-config-airbnb-base": "11.0.1",
35 | "eslint-import-resolver-webpack": "0.8.1",
36 | "eslint-plugin-import": "2.2.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Splitpane from './split-pane/index.vue'
2 |
3 | export default Splitpane
4 |
5 | if (typeof window !== 'undefined' && window.Vue) {
6 | window.Vue.component('split-pane', Splitpane)
7 | }
8 |
--------------------------------------------------------------------------------
/src/split-pane/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
113 |
114 |
138 |
--------------------------------------------------------------------------------
/src/split-pane/pane.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
22 |
23 |
51 |
--------------------------------------------------------------------------------
/src/split-pane/resizer.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
24 |
25 |
57 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | function resolve(dir) {
4 | return path.join(__dirname, '..', dir)
5 | }
6 | module.exports = {
7 | entry: './src/index.js',
8 | output: {
9 | path: path.resolve(__dirname, './dist'),
10 | publicPath: '/dist/',
11 | filename: 'vue-split-pane.min.js',
12 | library: 'SplitPane',
13 | libraryTarget: 'umd',
14 | umdNamedDefine: true
15 | },
16 | module: {
17 | rules: [
18 | {
19 | test: /\.(js|vue)$/,
20 | loader: 'eslint-loader',
21 | enforce: 'pre',
22 | include: [resolve('src'), resolve('test')],
23 | options: {
24 | formatter: require('eslint-friendly-formatter')
25 | }
26 | },
27 | {
28 | test: /\.vue$/,
29 | loader: 'vue-loader'
30 | },
31 | {
32 | test: /\.js$/,
33 | loader: 'babel-loader',
34 | exclude: /node_modules/
35 | },
36 | {
37 | test: /\.(png|jpg|gif|svg)$/,
38 | loader: 'file-loader',
39 | options: {
40 | name: '[name].[ext]?[hash]'
41 | }
42 | }
43 | ]
44 | },
45 | resolve: {
46 | alias: {
47 | vue$: 'vue/dist/vue.esm.js'
48 | }
49 | },
50 | externals: {
51 | vue: {
52 | root: 'Vue',
53 | commonjs: 'vue',
54 | commonjs2: 'vue',
55 | amd: 'vue'
56 | }
57 | },
58 | devServer: {
59 | historyApiFallback: true,
60 | noInfo: true
61 | },
62 | performance: {
63 | hints: false
64 | },
65 | devtool: '#source-map'
66 | }
67 |
68 | if (process.env.NODE_ENV === 'production') {
69 | module.exports.devtool = '#source-map'
70 | // http://vue-loader.vuejs.org/en/workflow/production.html
71 | module.exports.plugins = (module.exports.plugins || []).concat([
72 | new webpack.DefinePlugin({
73 | 'process.env': {
74 | NODE_ENV: '"production"'
75 | }
76 | }),
77 | new webpack.optimize.UglifyJsPlugin({
78 | sourceMap: false,
79 | compress: {
80 | warnings: false
81 | }
82 | }),
83 | new webpack.LoaderOptionsPlugin({
84 | minimize: true
85 | })
86 | ])
87 | }
88 |
--------------------------------------------------------------------------------