ljc-scroll-num-vue2

light-joint-case 轻量的联合的方案，缩写也是俺的名儿，以后会将想要封装的东西放到这个 “ light-joint-case ” 系列里

一个基于Vue2的滚动数字组件，由于很多涉及 “看板” 的项目都会用到类似的组件，所以封一个

• ljc-scroll-num-vue2
  • Install
  • Usage
  • Preview
  • API
    • ScrollNum options
    • ScrollUnit options
  • About timingFunction
  • Extend

Install

# npm 
npm i ljc-scroll-num-vue2

# yarn
yarn add ljc-scroll-num-vue2

Usage

global usage:

import { ScrollUnit, ScrollNum } from 'ljc-scroll-num-vue2';

Vue.use(ScrollUnit);
Vue.use(ScrollNum);

local usage

// local.vue
<script>
import { ScrollUnit, ScrollNum } from 'ljc-scroll-num-vue2';

export default {
  components: { ScrollUnit, ScrollNum },
  data() {
    return {
      ...
    };
  },
};
</script>

Preview

预览效果 首页 => 滚动数字

API

ScrollNum options

| prop | type | description | default | | -------------- | ------ | -------------------------------------------------------- | -------- | | value | Number | num you want to show. 单位值 | 0 | | timingFunction | String | Time function of scrolling animation. 滚动动画的时间函数 | "LINEAR" | | duration | String | animation duration. 滚动时间 | '0.5s' | | size | String | font-size, 字体尺寸 | '20px' | | lineHeight | String | font-size, 字体尺寸 | '23px' |

ScrollUnit options

| prop | type | description | default | | -------------- | ------ | -------------------------------------------------------- | -------- | | num | Number | num you want to show. 单位值 | 0 | | timingFunction | String | Time function of scrolling animation. 滚动动画的时间函数 | "LINEAR" | | duration | String | animation duration. 滚动时间 | '0.5s' | | size | String | font-size, 字体尺寸 | '20px' | | lineHeight | String | font-size, 字体尺寸 | '23px' |

About timingFunction

https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

参考链接

Extend

实际上，ScrollUnit 的props都是由 ScrollNum 直接传递的。并且 ScrollUnit 的 props 的基本上是 css 中 transition 的值，可以参考 vue的样式穿透 和 '!important' 实现更灵活的样式。

In fact, almost all props of ScrollUnit are from '$attrs' whitch has bind in ScrollNum. And the props of ScrollUnit is basically the value of transition in CSS. Can refer to Vue Deep Selectors and '!Important' implements more flexible styles.