Merge pull request #6 from medevicex/dev

Dev
lzxb · Jun 21, 2017 · fa5686b · fa5686b
2 parents 81882cd + 78f751c
commit fa5686b
Show file tree

Hide file tree

Showing 13 changed files with 113 additions and 11 deletions.
diff --git a/dist/vuet.js b/dist/vuet.js
diff --git a/dist/vuet.js.map b/dist/vuet.js.map
diff --git a/dist/vuet.min.js b/dist/vuet.min.js
diff --git a/dist/vuet.min.js.map b/dist/vuet.min.js.map
diff --git a/examples/index.html b/examples/index.html
@@ -35,6 +35,9 @@
     <li>
       <a href="./route-scroll-cnode/index.html">route-scroll-cnode</a>
     </li>
+    <li>
+      <a href="./scroll-self/index.html">scroll-self</a>
+    </li>
     <li>
       <a href="./user-login-exit/index.html">user-login-exit</a>
     </li>

diff --git a/examples/route-scroll-sync/App.vue b/examples/route-scroll-sync/App.vue
@@ -25,7 +25,7 @@
           {{ num }}
         </li>
       </ul>
-      <ul v-route-scroll="{ path: 'test', name: 'list-view', self: test.areaScrolls }">
+      <ul v-route-scroll="{ path: 'test', name: 'list-view-2', self: test.areaScrolls }">
         <li v-for="num in 500">
           {{ num }}
           {{ num }}

diff --git a/examples/scroll-self/App.vue b/examples/scroll-self/App.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <header>
+      <button v-for="item in names" @click="test.active = item">{{ item }}</button>
+    </header>
+    <span>{{ scrolls.x }}</span>,
+    <span>{{ scrolls.y }}</span>
+    <div class="view" v-route-scroll="{ path: 'test', name: this.test.active, self: scrolls }">
+      <div class="inner">
+        </div>
+    </div>
+    <div class="view" v-route-scroll="{ path: 'test', name: this.test.active + '-' }">
+      <div class="inner">
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { mapModules, mapRules } from 'vuet'
+
+  export default {
+    mixins: [
+      mapModules({ test: 'test' })
+    ],
+    data () {
+      return {
+        names: ['view-1', 'view-2']
+      }
+    },
+    computed: {
+      scrolls () {
+        return this.test.scrolls[this.test.active]
+      }
+    }
+  }
+</script>
+<style scoped>
+  header button {
+    margin: 10px;
+  }
+  .view {
+    overflow: auto;
+    width: 400px;
+    height: 400px;
+    border: 1px solid #ddd;
+  }
+  .view .inner {
+    width: 800px;
+    height: 800px;
+  }
+</style>
+
diff --git a/examples/scroll-self/index.html b/examples/scroll-self/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Vuet scroll-self</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="/__build__/js/common.js"></script>
+  <script src="/__build__/js/scroll-self.js"></script>
+</body>
+</html>
diff --git a/examples/scroll-self/main.js b/examples/scroll-self/main.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App'
+import vuet from './vuet'
+
+export default new Vue({
+  el: '#app',
+  vuet,
+  render (h) {
+    return h(App)
+  }
+})
diff --git a/examples/scroll-self/vuet.js b/examples/scroll-self/vuet.js
@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import Vuet from 'vuet'
+
+Vue.use(Vuet)
+
+export default new Vuet({
+  modules: {
+    test: {
+      data () {
+        return {
+          active: 'view-1',
+          scrolls: {
+            'view-1': { x: 50, y: 50 },
+            'view-2': { x: 0, y: 0 }
+          }
+        }
+      }
+    }
+  }
+})
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuet",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Vue state management plugin",
   "main": "dist/vuet.js",
   "scripts": {

diff --git a/src/rules/route/route-scroll.js b/src/rules/route/route-scroll.js
@@ -74,10 +74,10 @@ export default {
       if (utils.isObject(value.self)) {
         el.__vuetRouteSelfScrolls__ = value.self
       }
-      const areaScrolls = initScroll(el, vnode, value, el.__vuetRouteScrolls__)
+      el.__areaScrolls__ = initScroll(el, vnode, value, el.__vuetRouteSelfScrolls__)
       el.dataset.vuetRouteScroll = value.name
       el.__vuetRouteSelfScroll__ = event => {
-        updateScroll(areaScrolls, event)
+        updateScroll(el.__areaScrolls__, event)
         if (utils.isObject(el.__vuetRouteSelfScrolls__)) {
           updateScroll(el.__vuetRouteSelfScrolls__, event)
         }

diff --git a/src/vuet.js b/src/vuet.js
@@ -92,7 +92,8 @@ export default class Vuet {
       path,
       params: { ...params },
       state: this.getState(path),
-      route: this.app.$route || {}
+      route: this.app.$route || {},
+      app: this.app
     }
     const callHook = (hook, ...arg) => {
       for (let i = 0; i < this[hook].length; i++) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,9 @@ @@
         <li>
           <a href="./route-scroll-cnode/index.html">route-scroll-cnode</a>
         </li>
+        <li>
+          <a href="./scroll-self/index.html">scroll-self</a>
+        </li>
         <li>
           <a href="./user-login-exit/index.html">user-login-exit</a>
         </li>
@@ Expand Down @@