数字滚动显示组件 All In One

数字滚动显示组件 All In One

demos

vue-count-to

https://www.npmjs.com/package/vue-count-to

import {
  requestAnimationFrame,
  cancelAnimationFrame,
} from './requestAnimationFrame.js'

https://github.com/PanJiaChen/vue-countTo/blob/master/src/vue-countTo.vue#L137

https://github.com/PanJiaChen/vue-countTo/blob/master/package.json#L6

https://github.com/PanJiaChen/vue-countTo/blob/master/src/requestAnimationFrame.js#L20

import CountTo from './vue-countTo.vue';
export default CountTo;

// web & vue 环境下才注册组件
if (typeof window !== 'undefined' && window.Vue) {
  // window.Vue.component('count-to', CountTo);
}

// globalThis.window ✅

globalThis.window vs window

// Node.js 环境下直接调用 window 会导致潜在的 bug ❌
/*

console.log('window =', window);
// ReferenceError: window is not defined ❌
console.log(`window === undefined`, window === undefined);
// ReferenceError: window is not defined ❌

console.log('typeof window =', typeof window);
// typeof window = 'undefined'
console.log(`typeof window === 'undefined'`, typeof window === 'undefined');
// true

// typeof window => "string type"
if (typeof window !== 'undefined') {
  console.log('组件注册成功了 ✅');
} else {
  console.log('组件注册失败了 ❌');
}

*/

// 方案1: typeof window, 强制转换类型 typeof window => "string type"
if (typeof window !== 'undefined' && window.Vue) {
  console.log('方案1: 组件注册成功了 ✅');
} else {
  console.log('方案1: 组件注册失败了 ❌');
}


// 方案2: globalThis.window ✅
console.log('globalThis.window =', globalThis.window);
// globalThis.window = undefined

console.log(`globalThis.window === undefined`, globalThis.window === undefined);
// true ✅
console.log(`typeof globalThis.window =`, typeof globalThis.window);
// typeof globalThis.window = 'undefined'
console.log(`typeof globalThis.window === 'undefined'`, typeof globalThis.window === 'undefined');
// true

if (globalThis.window !== undefined) {
  console.log('方案2: 组件注册成功了 ✅✅');
} else {
  console.log('方案2: 组件注册失败了 ❌❌');
}


/*

import CountTo from './vue-countTo.vue';
export default CountTo;

// web & vue 环境下才注册组件
if (typeof window !== 'undefined' && window.Vue) {
  // window.Vue.component('count-to', CountTo);
}


*/

countUp.js

https://inorganik.github.io/countUp.js/

https://github.com/inorganik/countUp.js

refs

https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---