study-el-scrollbar

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-transform-modules-umd","@vue/babel-plugin-transform-vue-jsx"]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

.npmignore

@@ -0,0 +1,3 @@
+/*
+!package.json
+!dist/

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-present bateme
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,41 @@
+![npm version](https://img.shields.io/badge/npm-6.14.5-informational)
+![element-ui version](https://img.shields.io/badge/element--ui-2.13.2-ff69b4)
+![vue version](https://img.shields.io/badge/vue-2.6.12-blueviolet)
+
+# v-element-scrollbar
+从element-ui分离出来的scrollbar
+
+## Install
+```
+$npm install v-element-scrollbar
+```
+## 使用
+
+```
+// main.js
+import Vue from 'vue'
+import vElementScrollbar from 'v-element-scrollbar'
+Vue use(vElementScrollbar)
+// **.vue
+<template>
+    <div>
+        <v-element-scrollbar>
+            <div>内容</div>
+        </v-element-scrollbar>
+    </div>
+</template> 
+```
+## Props
+|  prop   | type | describe | default |
+|  ----  | ----  | ---- | ---- |
+| native  | boolean | 是否使用原生滚动 | false |
+| wrapStyle | object | el-scrollbar__wrap元素的行内样式 | {} |
+| wrapClass | object | el-scrollbar__wrap额外的className | {} |
+| viewStyle | object | el-scrollbar__view元素的行内样式 | {} |
+| viewClass | object | el-scrollbar__view额外的className | {} |
+| noresize | boolean | 不根据container的尺寸变化而变化 | false |
+| direction | string | `vertical | horizontal | both` 设置滚动方向 | vertical |
+| tag | string | 实现view元素的HTML标签 | div |
+
+
+

build/utils.js

@@ -0,0 +1,102 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+// 该方法可以获取对应环境下静态文件的路径
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,21 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? false : true
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: !isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.dev.config.js

@@ -0,0 +1,91 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const webpack = require('webpack')
+const vueLoaderConfig = require('./vue-loader.conf.js')
+const vueLoaderPlugin = require('vue-loader/lib/plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+function resolve (dir) {
+    return path.join(__dirname, '..', dir)
+}
+
+const devWebpackConfig = {
+    context: path.resolve(__dirname, '../'),
+    entry: {
+      app: './src/main.js'
+    },
+    output: {
+        path: path.resolve(__dirname, '../dest'),
+        filename: '[name].js',
+    },
+    resolve: {
+      extensions: ['.js', '.vue', '.json'],
+      alias: {
+        '@': resolve('src'),
+      }
+    },
+    module: {
+      rules: [
+        {
+            test: /\.vue$/,
+            use:[{
+                loader: 'vue-loader',
+                options: vueLoaderConfig
+            }]
+        },
+        { 
+          test: /\.js$/,
+          use:[{
+            loader:'babel-loader',
+
+          }],
+          include: [resolve('src')]
+        },
+        {
+            test: /\.scss$/,
+            use: ['css-loader', 'sass-loader']
+          },
+          {
+            test: /\.css$/,
+            use:['style-loader','css-loader']
+        }
+      ],
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+          'process.env': require('../config/dev.env')
+        }),
+        new vueLoaderPlugin(),
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+        new webpack.NoEmitOnErrorsPlugin(),
+        // https://github.com/ampedandwired/html-webpack-plugin
+        new HtmlWebpackPlugin({
+          filename: 'index.html',
+          template: 'index.html',
+          inject: true
+        }),
+      ],
+    devServer: {
+        clientLogLevel: 'warning',
+        hot: true,
+        contentBase: false, // since we use CopyWebpackPlugin.
+        compress: true,
+        host: 'localhost',
+        port: '8083',
+    },
+    node: {
+      // prevent webpack from injecting useless setImmediate polyfill because Vue
+      // source contains it (although only uses it if it's native).
+      setImmediate: false,
+      // prevent webpack from injecting mocks to Node native modules
+      // that does not make sense for the client
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty'
+    }
+  }
+  module.exports = devWebpackConfig

build/webpack.plugin.config.js

@@ -0,0 +1,65 @@
+'use strict'
+const path = require('path')
+const vueLoaderConfig = require('./vue-loader.conf.js')
+
+function resolve (dir) {
+    return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+    context: path.resolve(__dirname, '../'),
+    entry: {
+      app: './src/plugin/index.js'
+    },
+    output: {
+        path: path.resolve(__dirname, '../dist'),
+        publicPath: '/dist/',
+        filename: 'vElementScrollbar.js',
+        library: 'vElementScrollbar', // library指定的就是你使用require时的模块名，这里便是require("vueAjaxUpload")
+        libraryTarget: 'umd', //libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
+        // umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
+    },
+    resolve: {
+      extensions: ['.js', '.vue', '.json'],
+      alias: {
+        '@': resolve('src'),
+      }
+    },
+    mode:"development",
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use:[{
+            loader: 'vue-loader',
+            options: vueLoaderConfig
+          }]
+        },
+        { 
+          test: /\.js$/,
+          use:[{
+            loader:'babel-loader',
+
+          }],
+          include: [resolve('src')]
+        },
+        {
+            test: /\.css$/,
+            use:['style-loader','css-loader']
+        }
+      ]
+    },
+    node: {
+      // prevent webpack from injecting useless setImmediate polyfill because Vue
+      // source contains it (although only uses it if it's native).
+      setImmediate: false,
+      // prevent webpack from injecting mocks to Node native modules
+      // that does not make sense for the client
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty'
+    }
+  }
+

config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const {merge} = require('webpack-merge');
+const prodEnv = require('./prod.env')
+console.log(merge)
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})