vue2-client 1.2.0 → 1.2.1

package/src/components/transition/PageToggleTransition.vue

@@ -1,97 +1,97 @@
-<template>
-  <transition
-    v-if="!disabled"
-    :enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
-    :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
-  >
-    <slot></slot>
-  </transition>
-  <div v-else><slot></slot></div>
-</template>
-
-<script>
-  import { preset as animates } from '@vue2-client/config/default/animate.config'
-
-  export default {
-    name: 'PageToggleTransition',
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      animate: {
-        type: String,
-        validator (value) {
-          return animates.findIndex(item => item.name == value) != -1
-        },
-        default: 'bounce'
-      },
-      // eslint-disable-next-line vue/require-default-prop
-      direction: {
-        type: String,
-        validator (value) {
-          return ['x', 'y', 'left', 'right', 'up', 'down', 'downLeft', 'upRight', 'downRight', 'upLeft', 'downBig',
-            'upBig', 'downLeft', 'downRight', 'topRight', 'bottomLeft', 'topLeft', 'bottomRight', 'default'].indexOf(value) > -1
-        }
-      },
-      reverse: {
-        type: Boolean,
-        default: true
-      }
-    },
-    computed: {
-      enterAnimate () {
-        return this.activeClass(false)
-      },
-      leaveAnimate () {
-        return this.activeClass(true)
-      }
-    },
-    methods: {
-      activeClass (isLeave) {
-        const animate = animates.find(item => this.animate == item.name)
-        if (animate == undefined) {
-          return ''
-        }
-        let direction = ''
-        if (this.direction == undefined) {
-          direction = animate.directions[0]
-        } else {
-          direction = animate.directions.find(item => item == this.direction)
-        }
-        direction = (direction == undefined || direction === 'default') ? '' : direction
-        if (direction != '') {
-          direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
-          direction = direction[0].toUpperCase() + direction.substring(1)
-        }
-        const t = isLeave ? 'Out' : 'In'
-        return animate.name + t + direction
-      },
-      reversePosition (direction, directions) {
-        if (direction.length == 0 || direction == 'x' || direction == 'y') {
-          return direction
-        }
-        let index = directions.indexOf(direction)
-        index = (index % 2 == 1) ? index - 1 : index + 1
-        return directions[index]
-      }
-    }
-  }
-</script>
-
-<style lang="less">
-  .page-toggle-enter-active{
-    position: absolute !important;
-    animation-duration: 0.8s !important;
-    width: calc(100%) !important;
-  }
-  .page-toggle-leave-active{
-    position: absolute !important;
-    animation-duration: 0.8s !important;
-    width: calc(100%) !important;
-  }
-  .page-toggle-enter{
-  }
-  .page-toggle-leave-to{
-  }
-</style>
+<template>
+  <transition
+    v-if="!disabled"
+    :enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
+    :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
+  >
+    <slot></slot>
+  </transition>
+  <div v-else><slot></slot></div>
+</template>
+
+<script>
+  import { preset as animates } from '@vue2-client/config/default/animate.config'
+
+  export default {
+    name: 'PageToggleTransition',
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      animate: {
+        type: String,
+        validator (value) {
+          return animates.findIndex(item => item.name == value) != -1
+        },
+        default: 'bounce'
+      },
+      // eslint-disable-next-line vue/require-default-prop
+      direction: {
+        type: String,
+        validator (value) {
+          return ['x', 'y', 'left', 'right', 'up', 'down', 'downLeft', 'upRight', 'downRight', 'upLeft', 'downBig',
+            'upBig', 'downLeft', 'downRight', 'topRight', 'bottomLeft', 'topLeft', 'bottomRight', 'default'].indexOf(value) > -1
+        }
+      },
+      reverse: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      enterAnimate () {
+        return this.activeClass(false)
+      },
+      leaveAnimate () {
+        return this.activeClass(true)
+      }
+    },
+    methods: {
+      activeClass (isLeave) {
+        const animate = animates.find(item => this.animate == item.name)
+        if (animate == undefined) {
+          return ''
+        }
+        let direction = ''
+        if (this.direction == undefined) {
+          direction = animate.directions[0]
+        } else {
+          direction = animate.directions.find(item => item == this.direction)
+        }
+        direction = (direction == undefined || direction === 'default') ? '' : direction
+        if (direction != '') {
+          direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
+          direction = direction[0].toUpperCase() + direction.substring(1)
+        }
+        const t = isLeave ? 'Out' : 'In'
+        return animate.name + t + direction
+      },
+      reversePosition (direction, directions) {
+        if (direction.length == 0 || direction == 'x' || direction == 'y') {
+          return direction
+        }
+        let index = directions.indexOf(direction)
+        index = (index % 2 == 1) ? index - 1 : index + 1
+        return directions[index]
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .page-toggle-enter-active{
+    position: absolute !important;
+    animation-duration: 0.8s !important;
+    width: calc(100%) !important;
+  }
+  .page-toggle-leave-active{
+    position: absolute !important;
+    animation-duration: 0.8s !important;
+    width: calc(100%) !important;
+  }
+  .page-toggle-enter{
+  }
+  .page-toggle-leave-to{
+  }
+</style>

package/src/layouts/CommonLayout.vue

@@ -1,42 +1,42 @@
-<template>
-  <div class="common-layout">
-    <div class="content"><slot></slot></div>
-    <page-footer :link-list="footerLinks" :copyright="copyright"></page-footer>
-  </div>
-</template>
-
-<script>
-import PageFooter from '@vue2-client/layouts/footer/PageFooter'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'CommonLayout',
-  components: { PageFooter },
-  computed: {
-    ...mapState('setting', ['footerLinks', 'copyright'])
-  }
-}
-</script>
-
-<style scoped lang="less">
-.common-layout{
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: auto;
-  background-color: @layout-body-background;
-  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
-  background-repeat: no-repeat;
-  background-position-x: center;
-  background-position-y: 110px;
-  background-size: 100%;
-  .content{
-    padding: 32px 0;
-    flex: 1;
-    @media (min-width: 768px){
-
-      padding: 112px 0 24px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="common-layout">
+    <div class="content"><slot></slot></div>
+    <page-footer :link-list="footerLinks" :copyright="copyright"></page-footer>
+  </div>
+</template>
+
+<script>
+import PageFooter from '@vue2-client/layouts/footer/PageFooter'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'CommonLayout',
+  components: { PageFooter },
+  computed: {
+    ...mapState('setting', ['footerLinks', 'copyright'])
+  }
+}
+</script>
+
+<style scoped lang="less">
+.common-layout{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background-color: @layout-body-background;
+  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: 110px;
+  background-size: 100%;
+  .content{
+    padding: 32px 0;
+    flex: 1;
+    @media (min-width: 768px){
+
+      padding: 112px 0 24px;
+    }
+  }
+}
+</style>

package/src/layouts/PageLayout.vue

@@ -1,151 +1,151 @@
-<template>
-  <div class="page-layout">
-    <page-header
-      ref="pageHeader"
-      :style="`margin-top: ${multiPage ? 0 : -24}px`"
-      :breadcrumb="breadcrumb"
-      :title="pageTitle"
-      :logo="logo"
-      :avatar="avatar">
-      <slot name="action" slot="action"></slot>
-      <slot slot="content" name="headerContent"></slot>
-      <div slot="content" v-if="!this.$slots.headerContent && desc">
-        <p>{{ desc }}</p>
-        <div v-if="this.linkList" class="link">
-          <template v-for="(link, index) in linkList">
-            <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{ link.title }}</a>
-          </template>
-        </div>
-      </div>
-      <slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
-    </page-header>
-    <div ref="page" :class="['page-content', layout, pageWidth]" >
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import PageHeader from '@vue2-client/components/page/header/PageHeader'
-import { mapState, mapMutations } from 'vuex'
-import { getI18nKey } from '@vue2-client/utils/routerUtil'
-
-export default {
-  name: 'PageLayout',
-  components: { PageHeader },
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
-  data () {
-    return {
-      page: {},
-      pageHeaderHeight: 0
-    }
-  },
-  watch: {
-    $route () {
-      this.page = this.$route.meta.page
-    }
-  },
-  updated () {
-    if (!this._inactive) {
-      this.updatePageHeight()
-    }
-  },
-  activated () {
-    this.updatePageHeight()
-  },
-  deactivated () {
-    this.updatePageHeight(0)
-  },
-  mounted () {
-    this.updatePageHeight()
-  },
-  created () {
-    this.page = this.$route.meta.page
-  },
-  beforeDestroy () {
-    this.updatePageHeight(0)
-  },
-  computed: {
-    ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth', 'customTitles']),
-    pageTitle () {
-      const pageTitle = this.page && this.page.title
-      return this.customTitle || (pageTitle && this.$t(pageTitle)) || this.title || this.routeName
-    },
-    routeName () {
-      const route = this.$route
-      return this.$t(getI18nKey(route.matched[route.matched.length - 1].path))
-    },
-    breadcrumb () {
-      const page = this.page
-      const breadcrumb = page && page.breadcrumb
-      if (breadcrumb) {
-        const i18nBreadcrumb = []
-        breadcrumb.forEach(item => {
-          i18nBreadcrumb.push(this.$t(item))
-        })
-        return i18nBreadcrumb
-      } else {
-        return this.getRouteBreadcrumb()
-      }
-    },
-    marginCorrect () {
-      return this.multiPage ? 24 : 0
-    }
-  },
-  methods: {
-    ...mapMutations('setting', ['correctPageMinHeight']),
-    getRouteBreadcrumb () {
-      const routes = this.$route.matched
-      const path = this.$route.path
-      const breadcrumb = []
-      routes.filter(item => path.includes(item.path))
-        .forEach(route => {
-        const path = route.path.length === 0 ? '/home' : route.path
-        breadcrumb.push(this.$t(getI18nKey(path)))
-      })
-      const pageTitle = this.page && this.page.title
-      if (this.customTitle || pageTitle) {
-        breadcrumb[breadcrumb.length - 1] = this.customTitle || pageTitle
-      }
-      return breadcrumb
-    },
-    /**
-     * 用于计算页面内容最小高度
-     * @param newHeight
-     */
-    updatePageHeight (newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
-      this.correctPageMinHeight(this.pageHeaderHeight - newHeight)
-      this.pageHeaderHeight = newHeight
-    }
-  }
-}
-</script>
-
-<style lang="less">
-  .page-header{
-    margin: 0 -24px 0;
-  }
-  .link{
-    /*margin-top: 16px;*/
-    line-height: 24px;
-    a{
-      font-size: 14px;
-      margin-right: 32px;
-      i{
-        font-size: 22px;
-        margin-right: 8px;
-      }
-    }
-  }
-  .page-content{
-    position: relative;
-    padding: 24px 0 0;
-    &.side{
-    }
-    &.head.fixed{
-      margin: 0 auto;
-      max-width: 1400px;
-    }
-  }
-</style>
+<template>
+  <div class="page-layout">
+    <page-header
+      ref="pageHeader"
+      :style="`margin-top: ${multiPage ? 0 : -24}px`"
+      :breadcrumb="breadcrumb"
+      :title="pageTitle"
+      :logo="logo"
+      :avatar="avatar">
+      <slot name="action" slot="action"></slot>
+      <slot slot="content" name="headerContent"></slot>
+      <div slot="content" v-if="!this.$slots.headerContent && desc">
+        <p>{{ desc }}</p>
+        <div v-if="this.linkList" class="link">
+          <template v-for="(link, index) in linkList">
+            <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{ link.title }}</a>
+          </template>
+        </div>
+      </div>
+      <slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
+    </page-header>
+    <div ref="page" :class="['page-content', layout, pageWidth]" >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import PageHeader from '@vue2-client/components/page/header/PageHeader'
+import { mapState, mapMutations } from 'vuex'
+import { getI18nKey } from '@vue2-client/utils/routerUtil'
+
+export default {
+  name: 'PageLayout',
+  components: { PageHeader },
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
+  data () {
+    return {
+      page: {},
+      pageHeaderHeight: 0
+    }
+  },
+  watch: {
+    $route () {
+      this.page = this.$route.meta.page
+    }
+  },
+  updated () {
+    if (!this._inactive) {
+      this.updatePageHeight()
+    }
+  },
+  activated () {
+    this.updatePageHeight()
+  },
+  deactivated () {
+    this.updatePageHeight(0)
+  },
+  mounted () {
+    this.updatePageHeight()
+  },
+  created () {
+    this.page = this.$route.meta.page
+  },
+  beforeDestroy () {
+    this.updatePageHeight(0)
+  },
+  computed: {
+    ...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth', 'customTitles']),
+    pageTitle () {
+      const pageTitle = this.page && this.page.title
+      return this.customTitle || (pageTitle && this.$t(pageTitle)) || this.title || this.routeName
+    },
+    routeName () {
+      const route = this.$route
+      return this.$t(getI18nKey(route.matched[route.matched.length - 1].path))
+    },
+    breadcrumb () {
+      const page = this.page
+      const breadcrumb = page && page.breadcrumb
+      if (breadcrumb) {
+        const i18nBreadcrumb = []
+        breadcrumb.forEach(item => {
+          i18nBreadcrumb.push(this.$t(item))
+        })
+        return i18nBreadcrumb
+      } else {
+        return this.getRouteBreadcrumb()
+      }
+    },
+    marginCorrect () {
+      return this.multiPage ? 24 : 0
+    }
+  },
+  methods: {
+    ...mapMutations('setting', ['correctPageMinHeight']),
+    getRouteBreadcrumb () {
+      const routes = this.$route.matched
+      const path = this.$route.path
+      const breadcrumb = []
+      routes.filter(item => path.includes(item.path))
+        .forEach(route => {
+        const path = route.path.length === 0 ? '/home' : route.path
+        breadcrumb.push(this.$t(getI18nKey(path)))
+      })
+      const pageTitle = this.page && this.page.title
+      if (this.customTitle || pageTitle) {
+        breadcrumb[breadcrumb.length - 1] = this.customTitle || pageTitle
+      }
+      return breadcrumb
+    },
+    /**
+     * 用于计算页面内容最小高度
+     * @param newHeight
+     */
+    updatePageHeight (newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
+      this.correctPageMinHeight(this.pageHeaderHeight - newHeight)
+      this.pageHeaderHeight = newHeight
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .page-header{
+    margin: 0 -24px 0;
+  }
+  .link{
+    /*margin-top: 16px;*/
+    line-height: 24px;
+    a{
+      font-size: 14px;
+      margin-right: 32px;
+      i{
+        font-size: 22px;
+        margin-right: 8px;
+      }
+    }
+  }
+  .page-content{
+    position: relative;
+    padding: 24px 0 0;
+    &.side{
+    }
+    &.head.fixed{
+      margin: 0 auto;
+      max-width: 1400px;
+    }
+  }
+</style>