Package Exports

ljc-scroll-num-vue2
ljc-scroll-num-vue2/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ljc-scroll-num-vue2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ljc-scroll-num-vue2

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

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

ljc-scroll-num-vue2

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.