vue-backup

一个回到顶部Vue组件，动画、icon

DEMO

安装

1. npm || yarn

# install dependencies
npm i vue-backup -s
yarn add vue-backup

2. CDN

<script src="https://unpkg.com/vue-backup/dist/vue-backup.min.js"></script>

使用

// main.js
// 全局注册
import Vue from 'vue'
import BackUp from 'vue-backup'

Vue.use(BackUp)

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
// 局部注册
// app.vue
import { BackUp } from 'vue-backup'

export default {
  name: 'App',
  components: {
    [BackUp.name]: BackUp  // 推荐该形式注册
  }
}

props

| name | desc | type | default | required | | :--: | :--: | ---: | :-----: | :------: | | scrollY | 控制组件出现时机(px) | Number | 1000 | false | | enterAnimatedName | 组件出现动画| String | rubberBand | false | | leaveAnimatedName | 组件消失动画 | String | bounceOut | false | | size | icon 字体大小(px) | Number | 20 | false | | el | 滚动元素 | HTMLElement || window | window | false | | icon | 默认显示icon | Props.icon | Props.icon.top | false |

slot

| name | desc | info | | :--: | :--: | ---: | | default | icon插槽 | 不传递会使用组件默认icon |

提示

1. 可选icon封装在Props.icon对象中，修改默认icon方式如下：

<template>
  <div>
    <v-backup :icon="icon"/>
    <!-- 修改默认icon -->
  </div>
</template>

<script>
import { Props, BackUp } from 'vue-backup'
export default {
  name: 'test-icon',
  components: {
    [BackUp.name]: BackUp  // 推荐该形式注册
  },
  data () {
    return {
      icon: Props.icon.xxx // 通过该形式修改默认icon
    }
  }
}
</script>

1. 组件依赖animate.css enterAnimatedName leaveAnimatedName 可选值如下：

| AnimatedName | | | | | ----------------- | ------------------ | ------------------- | -------------------- | | bounce | flash | pulse | rubberBand | | shake | headShake | swing | tada | | wobble | jello | bounceIn | bounceInDown | | bounceInLeft | bounceInRight | bounceInUp | bounceOut | | bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp | | fadeIn | fadeInDown | fadeInDownBig | fadeInLeft | | fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp | | fadeInUpBig | fadeOut | fadeOutDown | fadeOutDownBig | | fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig | | fadeOutUp | fadeOutUpBig | flipInX | flipInY | | flipOutX | flipOutY | lightSpeedIn | lightSpeedOut | | rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft | | rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight | | rotateOutUpLeft | rotateOutUpRight | hinge | jackInTheBox | | rollIn | rollOut | zoomIn | zoomInDown | | zoomInLeft | zoomInRight | zoomInUp | zoomOut | | zoomOutDown | zoomOutLeft | zoomOutRight | zoomOutUp | | slideInDown | slideInLeft | slideInRight | slideInUp | | slideOutDown | slideOutLeft | slideOutRight | slideOutUp |

Github