🚀 Add Example && Upgrade Eslint

2020-10-06 17:03:32 +08:00
parent 26aa82cd34
commit 7274671610
13 changed files with 2154 additions and 298 deletions
--- a/example/App.vue
+++ b/example/App.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+<script>
+export default {
+  name: 'App'
+}
+</script>
+<style lang="scss">
+
+</style>
--- a/example/index.html
+++ b/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>
--- a/example/main.js
+++ b/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')
--- a/example/router.js
+++ b/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'
+})
--- a/example/src/components/Layout.vue
+++ b/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>
--- a/example/src/views/ExampleAffix.vue
+++ b/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>