🚀 Add Example && Upgrade Eslint

.eslintrc.js

@@ -1,41 +1,43 @@
 const eslintConfig = {
-  "root": true,
+  root: true,
-  "parserOptions": {
+  parserOptions: {
-    "parser": "babel-eslint",
+    parser: '@babel/eslint-parser',
-    "ecmaVersion": 7,
+    ecmaVersion: 7,
-    "sourceType": "module",
+    sourceType: 'module',
-    "ecmaFeatures": {
+    ecmaFeatures: {
-      "jsx": true
+      jsx: true
     }
   },
-  "env": {
+  env: {
-    "browser": true,
+    browser: true,
-    "es6": true,
+    es6: true,
-    "node": true
+    node: true
   },
-  "globals":{
+  globals: {
-    "console": true
+    console: true
   },
-  "extends": [
+  extends: [
-    "plugin:vue/essential",
+    'plugin:vue/essential',
-    "standard"
+    'plugin:vue/recommended',
+    '@vue/standard'
   ],
-  "plugins": [
+  plugins: [
-    "vue"
+    '@babel',
+    'vue'
   ],
-  "rules": {
+  rules: {
-    "no-var": 1,
+    'no-var': 1,
-    "no-alert": 1,
+    'no-alert': 1,
-    "no-ternary": 0,
+    'no-ternary': 0,
-    "no-self-assign": 0,
+    'no-self-assign': 0,
-    "standard/no-callback-literal": 0,
+    'standard/no-callback-literal': 0,
-    "func-call-spacing": 0,
+    'func-call-spacing': 0,
-    "prefer-promise-reject-errors": 0,
+    'prefer-promise-reject-errors': 0,
-    "no-unused-vars": 1,
+    'no-unused-vars': 1,
-    "no-debugger": 1,
+    'no-debugger': 1,
-    "no-console": 1,
+    'no-console': 1,
-    'no-useless-constructor': "off"
+    'no-useless-constructor': 'off'
   }
-};
+}
 
-module.exports = eslintConfig;
+module.exports = eslintConfig

build/webpack.config.js

@@ -5,14 +5,14 @@ const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 const notifier = require('node-notifier')
 
 function resolve (dir) {
-  return path.join(__dirname, '.', dir)
+  return path.join(process.cwd(), dir)
 }
 
 module.exports = {
   mode: 'production',
   entry: './src/main.js',
   output: {
-    path: path.resolve(__dirname, './lib'),
+    path: resolve('./lib'),
     publicPath: '/lib/',
     filename: 'hoc-el-affix.js',
     libraryTarget: 'umd'
@@ -69,7 +69,7 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            extends: resolve('babelrc.js')
+            extends: resolve('babel.config.js')
           }
         }
       },

build/webpack.example.js

@@ -0,0 +1,118 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
+
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+function resolve (dir) {
+  return path.join(process.cwd(), dir)
+}
+
+const webpackConfig = {
+  mode: process.env.NODE_ENV,
+  entry: './example/main.js',
+  output: {
+    path: resolve('./example/dist'),
+    filename: '[name].[hash:7].js',
+  },
+  resolve: {
+    alias: {
+      vue$: 'vue/dist/vue.esm.js',
+      'source': resolve('./src'),
+      '@': resolve('./example/src')
+    },
+    extensions: ['*', '.js', '.vue', '.json']
+  },
+  devServer: {
+    publicPath: '/',
+    port: 8085,
+    quiet: true,
+    hot: true,
+    open: true,
+    openPage: 'affix-example'
+  },
+  performance: {
+    hints: false
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.(vue|jsx?)$/,
+        exclude: /node_modules/,
+        loader: 'eslint-loader'
+      },
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            extends: resolve('babel.config.js')
+          }
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        }
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: '[name].[hash:7].[ext]'
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: './example/index.html',
+    }),
+    new VueLoaderPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      vue: {
+        compilerOptions: {
+          preserveWhitespace: false
+        }
+      }
+    }),
+    new FriendlyErrorsWebpackPlugin({
+      clearConsole: false,
+      onErrors: (severity, errors) => {
+        if (severity !== 'error') {
+          return
+        }
+        const error = errors[0]
+        notifier.notify({
+          title: 'Webpack error',
+          message: `${severity}: ${error.name}`,
+          subtitle: error.file || ''
+        })
+      }
+    })
+  ],
+  optimization: {
+    minimizer: []
+  },
+  devtool: '#eval-source-map'
+};
+
+module.exports = webpackConfig;

example/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+<script>
+export default {
+  name: 'App'
+}
+</script>
+<style lang="scss">
+
+</style>

example/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="renderer" content="webkit" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Language" content="zh-CN" />
+  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

example/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import router from './router.js'
+
+import HocElementAffix from 'source/main.js'
+import App from './App.vue'
+
+Vue.use(HocElementAffix)
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')

example/router.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+const Layout = () => import('@/components/Layout')
+const importModule = (filePath) => {
+  return () => import(`@/${filePath}`)
+}
+
+const routes = [{
+  path: '/',
+  component: Layout,
+  children: [
+    {
+      path: 'affix-example',
+      component: importModule('views/ExampleAffix')
+    }
+  ]
+}]
+
+Vue.use(VueRouter)
+export default new VueRouter({
+  routes,
+  mode: 'history'
+})

example/src/components/Layout.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+<script>
+export default {
+  name: 'Layout'
+}
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+ }
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 14px;
+}
+</style>

example/src/views/ExampleAffix.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="box-container">
+    <div class="content">
+      <div class="long-list">
+        <div
+          v-for="(item, index) in 50"
+          :key="index"
+          class="long"
+        >
+          <template
+            v-if="index === 2"
+          >
+            <hoc-el-affix>
+              <div class="box">
+                吸顶
+              </div>
+            </hoc-el-affix>
+          </template>
+          <template
+            v-else-if="index === 7"
+          >
+            <hoc-el-affix
+              :offset-top="120"
+            >
+              <div class="box">
+                距离顶部120px时固定
+              </div>
+            </hoc-el-affix>
+          </template>
+          <template
+            v-else
+          >
+            {{ index === 99 ? '到底了' : `占位符${index + 1}` }}
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ExampleAffix'
+}
+</script>
+
+<style lang="scss" scoped>
+.box-container {
+  .content {
+    position: relative;
+    width: 300px;
+    margin: 0 auto;
+    text-align: center;
+    .box {
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      border: 1px solid #000;
+    }
+    .long-list {
+      .long {
+        height: 50px;
+        line-height: 50px;
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>

package.json

@@ -6,7 +6,8 @@
   "author": "Wisdom <pdsu.wwz@foxmail.com>",
   "license": "MIT",
   "scripts": {
-    "build": "NODE_ENV=production webpack --progress --colors --hide-modules"
+    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js --progress --colors --hide-modules",
+    "dev:example": "cross-env NODE_ENV=development webpack-dev-server --display-error-details --progress --colors --history-api-fallback --config build/webpack.example.js"
   },
   "repository": {
     "type": "git",
@@ -19,7 +20,9 @@
     "vue": "^2.6.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.11.6",
+    "@babel/eslint-parser": "^7.11.5",
+    "@babel/eslint-plugin": "^7.11.5",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-decorators": "^7.1.2",
     "@babel/plugin-proposal-export-default-from": "^7.0.0",
@@ -35,11 +38,11 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/runtime": "^7.1.2",
     "@babel/runtime-corejs2": "^7.1.2",
-    "babel-eslint": "^10.0.3",
+    "@vue/eslint-config-standard": "^5.1.2",
     "babel-loader": "8.0.0",
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
-    "eslint": "^6.8.0",
+    "eslint": "^7.10.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^3.0.3",
@@ -51,13 +54,16 @@
     "eslint-plugin-vue": "^6.1.2",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.7.0",
+    "html-webpack-plugin": "^4.5.0",
     "node-notifier": "^6.0.0",
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "^2.4.4",
+    "vue-router": "^3.4.5",
+    "vue-template-compiler": "^2.6.12",
     "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.11.0"
   },
   "browserslist": [
     "> 1%",

src/components/ScrollAffix/index.vue

@@ -3,13 +3,13 @@
     <div
       v-if="showPlaceHolder"
       :style="stylePlaceHolder"
-    ></div>
+    />
     <div
       ref="scroll-affix"
       :style="affixStyle"
       class="scroll-affix-container"
     >
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>
@@ -49,6 +49,9 @@ export default {
       this.createAffix()
     })
   },
+  beforeDestroy () {
+    document.removeEventListener('scroll', this.scrollListener)
+  },
   methods: {
     getInstanceRect () {
       return this.instance.getBoundingClientRect()
@@ -110,9 +113,6 @@ export default {
         this.stylePlaceHolder = {}
       }
     }
-  },
-  beforeDestroy () {
-    document.removeEventListener('scroll', this.scrollListener)
   }
 }
 </script>