blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore: clean code (#9870)

Browse Source
This commit is contained in:
neverland 2021-11-15 20:09:56 +08:00 committed by GitHub
parent d2d1604276
commit 6244161d6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 117 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/vant/src/button/Button.tsx
View File

@ -9,6 +9,7 @@ import {
import { import {
extend, extend,
numericProp, numericProp,
preventDefault,
makeStringProp, makeStringProp,
createNamespace, createNamespace,
BORDER_SURROUND, BORDER_SURROUND,
@ -135,7 +136,7 @@ export default defineComponent({
const onClick = (event: MouseEvent) => { const onClick = (event: MouseEvent) => {
if (props.loading) { if (props.loading) {
event.preventDefault(); preventDefault(event);
} else if (!props.disabled) { } else if (!props.disabled) {
emit('click', event); emit('click', event);
route(); route();

3
packages/vant/src/dropdown-menu/DropdownMenu.tsx
View File

@ -12,6 +12,7 @@ import {
isDef, isDef,
truthProp, truthProp,
numericProp, numericProp,
windowHeight,
makeStringProp, makeStringProp,
makeNumericProp, makeNumericProp,
createNamespace, createNamespace,
@ -86,7 +87,7 @@ export default defineComponent({
if (props.direction === 'down') { if (props.direction === 'down') {
offset.value = rect.bottom; offset.value = rect.bottom;
} else { } else {
offset.value = window.innerHeight - rect.top; offset.value = windowHeight.value - rect.top;
} }
} }
}; };

3
packages/vant/src/form/Form.tsx
View File

@ -5,6 +5,7 @@ import {
FORM_KEY, FORM_KEY,
truthProp, truthProp,
numericProp, numericProp,
preventDefault,
makeStringProp, makeStringProp,
createNamespace, createNamespace,
} from '../utils'; } from '../utils';
@ -170,7 +171,7 @@ export default defineComponent({
}; };
const onSubmit = (event: Event) => { const onSubmit = (event: Event) => {
event.preventDefault(); preventDefault(event);
submit(); submit();
}; };

7
packages/vant/src/image-preview/ImagePreview.tsx
View File

@ -16,6 +16,8 @@ import {
truthProp, truthProp,
unknownProp, unknownProp,
Interceptor, Interceptor,
windowWidth,
windowHeight,
makeArrayProp, makeArrayProp,
makeStringProp, makeStringProp,
makeNumericProp, makeNumericProp,
@ -25,7 +27,7 @@ import {
} from '../utils'; } from '../utils';
// Composables // Composables
import { useRect, useWindowSize } from '@vant/use'; import { useRect } from '@vant/use';
import { useExpose } from '../composables/use-expose'; import { useExpose } from '../composables/use-expose';
// Components // Components
@ -78,7 +80,6 @@ export default defineComponent({
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const swipeRef = ref<SwipeInstance>(); const swipeRef = ref<SwipeInstance>();
const windowSize = useWindowSize();
const state = reactive({ const state = reactive({
active: 0, active: 0,
@ -185,7 +186,7 @@ export default defineComponent({
onMounted(resize); onMounted(resize);
watch([windowSize.width, windowSize.height], resize); watch([windowWidth, windowHeight], resize);
watch( watch(
() => props.startPosition, () => props.startPosition,

12
packages/vant/src/lazyload/vue-lazyload/lazy-container.js
View File

@ -14,7 +14,7 @@ class LazyContainer {
this.options = {}; this.options = {};
this.lazy = lazy; this.lazy = lazy;
this._queue = []; this.queue = [];
this.update({ el, binding }); this.update({ el, binding });
} }
@ -61,7 +61,7 @@ class LazyContainer {
export default class LazyContainerManager { export default class LazyContainerManager {
constructor({ lazy }) { constructor({ lazy }) {
this.lazy = lazy; this.lazy = lazy;
this._queue = []; this.queue = [];
} }
bind(el, binding, vnode) { bind(el, binding, vnode) {
@ -71,19 +71,19 @@ export default class LazyContainerManager {
vnode, vnode,
lazy: this.lazy, lazy: this.lazy,
}); });
this._queue.push(container); this.queue.push(container);
} }
update(el, binding, vnode) { update(el, binding, vnode) {
const container = this._queue.find((item) => item.el === el); const container = this.queue.find((item) => item.el === el);
if (!container) return; if (!container) return;
container.update({ el, binding, vnode }); container.update({ el, binding, vnode });
} }
unbind(el) { unbind(el) {
const container = this._queue.find((item) => item.el === el); const container = this.queue.find((item) => item.el === el);
if (!container) return; if (!container) return;
container.clear(); container.clear();
remove(this._queue, container); remove(this.queue, container);
} }
} }

2
packages/vant/src/lazyload/vue-lazyload/lazy-image.js
View File

@ -59,7 +59,7 @@ export default (lazyManager) => ({
}, },
methods: { methods: {
init() { init() {
const { src, loading, error } = lazyManager._valueFormatter(this.src); const { src, loading, error } = lazyManager.valueFormatter(this.src);
this.state.loaded = false; this.state.loaded = false;
this.options.src = src; this.options.src = src;
this.options.error = error; this.options.error = error;

136
packages/vant/src/lazyload/vue-lazyload/lazy.js
View File

@ -50,9 +50,9 @@ export default function () {
observerOptions, observerOptions,
}) { }) {
this.mode = modeType.event; this.mode = modeType.event;
this.ListenerQueue = []; this.listeners = [];
this.TargetIndex = 0; this.targetIndex = 0;
this.TargetQueue = []; this.targets = [];
this.options = { this.options = {
silent, silent,
dispatchEvent: !!dispatchEvent, dispatchEvent: !!dispatchEvent,
@ -70,10 +70,10 @@ export default function () {
observer: !!observer, observer: !!observer,
observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS, observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS,
}; };
this._initEvent(); this.initEvent();
this._imageCache = new ImageCache({ max: 200 }); this.imageCache = new ImageCache({ max: 200 });
this.lazyLoadHandler = throttle( this.lazyLoadHandler = throttle(
this._lazyLoadHandler.bind(this), this.lazyLoadHandler.bind(this),
this.options.throttleWait this.options.throttleWait
); );
@ -94,7 +94,7 @@ export default function () {
* @return {Array} * @return {Array}
*/ */
performance() { performance() {
return this.ListenerQueue.map((item) => item.performance()); return this.listeners.map((item) => item.performance());
} }
/* /*
@ -103,12 +103,12 @@ export default function () {
* @return * @return
*/ */
addLazyBox(vm) { addLazyBox(vm) {
this.ListenerQueue.push(vm); this.listeners.push(vm);
if (inBrowser) { if (inBrowser) {
this._addListenerTarget(window); this.addListenerTarget(window);
this._observer && this._observer.observe(vm.el); this.observer && this.observer.observe(vm.el);
if (vm.$el && vm.$el.parentNode) { if (vm.$el && vm.$el.parentNode) {
this._addListenerTarget(vm.$el.parentNode); this.addListenerTarget(vm.$el.parentNode);
} }
} }
} }
@ -121,17 +121,17 @@ export default function () {
* @return * @return
*/ */
add(el, binding, vnode) { add(el, binding, vnode) {
if (this.ListenerQueue.some((item) => item.el === el)) { if (this.listeners.some((item) => item.el === el)) {
this.update(el, binding); this.update(el, binding);
return nextTick(this.lazyLoadHandler); return nextTick(this.lazyLoadHandler);
} }
const value = this._valueFormatter(binding.value); const value = this.valueFormatter(binding.value);
let { src } = value; let { src } = value;
nextTick(() => { nextTick(() => {
src = getBestSelectionFromSrcset(el, this.options.scale) || src; src = getBestSelectionFromSrcset(el, this.options.scale) || src;
this._observer && this._observer.observe(el); this.observer && this.observer.observe(el);
const container = Object.keys(binding.modifiers)[0]; const container = Object.keys(binding.modifiers)[0];
let $parent; let $parent;
@ -156,16 +156,16 @@ export default function () {
loading: value.loading, loading: value.loading,
error: value.error, error: value.error,
cors: value.cors, cors: value.cors,
elRenderer: this._elRenderer.bind(this), elRenderer: this.elRenderer.bind(this),
options: this.options, options: this.options,
imageCache: this._imageCache, imageCache: this.imageCache,
}); });
this.ListenerQueue.push(newListener); this.listeners.push(newListener);
if (inBrowser) { if (inBrowser) {
this._addListenerTarget(window); this.addListenerTarget(window);
this._addListenerTarget($parent); this.addListenerTarget($parent);
} }
this.lazyLoadHandler(); this.lazyLoadHandler();
@ -180,11 +180,11 @@ export default function () {
* @return * @return
*/ */
update(el, binding, vnode) { update(el, binding, vnode) {
const value = this._valueFormatter(binding.value); const value = this.valueFormatter(binding.value);
let { src } = value; let { src } = value;
src = getBestSelectionFromSrcset(el, this.options.scale) || src; src = getBestSelectionFromSrcset(el, this.options.scale) || src;
const exist = this.ListenerQueue.find((item) => item.el === el); const exist = this.listeners.find((item) => item.el === el);
if (!exist) { if (!exist) {
this.add(el, binding, vnode); this.add(el, binding, vnode);
} else { } else {
@ -194,9 +194,9 @@ export default function () {
loading: value.loading, loading: value.loading,
}); });
} }
if (this._observer) { if (this.observer) {
this._observer.unobserve(el); this.observer.unobserve(el);
this._observer.observe(el); this.observer.observe(el);
} }
this.lazyLoadHandler(); this.lazyLoadHandler();
nextTick(() => this.lazyLoadHandler()); nextTick(() => this.lazyLoadHandler());
@ -209,12 +209,12 @@ export default function () {
*/ */
remove(el) { remove(el) {
if (!el) return; if (!el) return;
this._observer && this._observer.unobserve(el); this.observer && this.observer.unobserve(el);
const existItem = this.ListenerQueue.find((item) => item.el === el); const existItem = this.listeners.find((item) => item.el === el);
if (existItem) { if (existItem) {
this._removeListenerTarget(existItem.$parent); this.removeListenerTarget(existItem.$parent);
this._removeListenerTarget(window); this.removeListenerTarget(window);
remove(this.ListenerQueue, existItem); remove(this.listeners, existItem);
existItem.$destroy(); existItem.$destroy();
} }
} }
@ -226,12 +226,12 @@ export default function () {
*/ */
removeComponent(vm) { removeComponent(vm) {
if (!vm) return; if (!vm) return;
remove(this.ListenerQueue, vm); remove(this.listeners, vm);
this._observer && this._observer.unobserve(vm.el); this.observer && this.observer.unobserve(vm.el);
if (vm.$parent && vm.$el.parentNode) { if (vm.$parent && vm.$el.parentNode) {
this._removeListenerTarget(vm.$el.parentNode); this.removeListenerTarget(vm.$el.parentNode);
} }
this._removeListenerTarget(window); this.removeListenerTarget(window);
} }
setMode(mode) { setMode(mode) {
@ -242,21 +242,21 @@ export default function () {
this.mode = mode; // event or observer this.mode = mode; // event or observer
if (mode === modeType.event) { if (mode === modeType.event) {
if (this._observer) { if (this.observer) {
this.ListenerQueue.forEach((listener) => { this.listeners.forEach((listener) => {
this._observer.unobserve(listener.el); this.observer.unobserve(listener.el);
}); });
this._observer = null; this.observer = null;
} }
this.TargetQueue.forEach((target) => { this.targets.forEach((target) => {
this._initListen(target.el, true); this.initListen(target.el, true);
}); });
} else { } else {
this.TargetQueue.forEach((target) => { this.targets.forEach((target) => {
this._initListen(target.el, false); this.initListen(target.el, false);
}); });
this._initIntersectionObserver(); this.initIntersectionObserver();
} }
} }
@ -269,22 +269,22 @@ export default function () {
* @param {DOM} el listener target * @param {DOM} el listener target
* @return * @return
*/ */
_addListenerTarget(el) { addListenerTarget(el) {
if (!el) return; if (!el) return;
let target = this.TargetQueue.find((target) => target.el === el); let target = this.targets.find((target) => target.el === el);
if (!target) { if (!target) {
target = { target = {
el, el,
id: ++this.TargetIndex, id: ++this.targetIndex,
childrenCount: 1, childrenCount: 1,
listened: true, listened: true,
}; };
this.mode === modeType.event && this._initListen(target.el, true); this.mode === modeType.event && this.initListen(target.el, true);
this.TargetQueue.push(target); this.targets.push(target);
} else { } else {
target.childrenCount++; target.childrenCount++;
} }
return this.TargetIndex; return this.targetIndex;
} }
/* /*
@ -292,13 +292,13 @@ export default function () {
* @param {DOM} el or window * @param {DOM} el or window
* @return * @return
*/ */
_removeListenerTarget(el) { removeListenerTarget(el) {
this.TargetQueue.forEach((target, index) => { this.targets.forEach((target, index) => {
if (target.el === el) { if (target.el === el) {
target.childrenCount--; target.childrenCount--;
if (!target.childrenCount) { if (!target.childrenCount) {
this._initListen(target.el, false); this.initListen(target.el, false);
this.TargetQueue.splice(index, 1); this.targets.splice(index, 1);
target = null; target = null;
} }
} }
@ -311,13 +311,13 @@ export default function () {
* @param {boolean} start flag * @param {boolean} start flag
* @return * @return
*/ */
_initListen(el, start) { initListen(el, start) {
this.options.ListenEvents.forEach((evt) => this.options.ListenEvents.forEach((evt) =>
(start ? on : off)(el, evt, this.lazyLoadHandler) (start ? on : off)(el, evt, this.lazyLoadHandler)
); );
} }
_initEvent() { initEvent() {
this.Event = { this.Event = {
listeners: { listeners: {
loading: [], loading: [],
@ -358,9 +358,9 @@ export default function () {
* find nodes which in viewport and trigger load * find nodes which in viewport and trigger load
* @return * @return
*/ */
_lazyLoadHandler() { lazyLoadHandler() {
const freeList = []; const freeList = [];
this.ListenerQueue.forEach((listener) => { this.listeners.forEach((listener) => {
if (!listener.el || !listener.el.parentNode) { if (!listener.el || !listener.el.parentNode) {
freeList.push(listener); freeList.push(listener);
} }
@ -369,7 +369,7 @@ export default function () {
listener.load(); listener.load();
}); });
freeList.forEach((item) => { freeList.forEach((item) => {
remove(this.ListenerQueue, item); remove(this.listeners, item);
item.$destroy(); item.$destroy();
}); });
} }
@ -379,19 +379,19 @@ export default function () {
* set mode to observer * set mode to observer
* @return * @return
*/ */
_initIntersectionObserver() { initIntersectionObserver() {
if (!hasIntersectionObserver) { if (!hasIntersectionObserver) {
return; return;
} }
this._observer = new IntersectionObserver( this.observer = new IntersectionObserver(
this._observerHandler.bind(this), this.observerHandler.bind(this),
this.options.observerOptions this.options.observerOptions
); );
if (this.ListenerQueue.length) { if (this.listeners.length) {
this.ListenerQueue.forEach((listener) => { this.listeners.forEach((listener) => {
this._observer.observe(listener.el); this.observer.observe(listener.el);
}); });
} }
} }
@ -400,13 +400,13 @@ export default function () {
* init IntersectionObserver * init IntersectionObserver
* @return * @return
*/ */
_observerHandler(entries) { observerHandler(entries) {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
this.ListenerQueue.forEach((listener) => { this.listeners.forEach((listener) => {
if (listener.el === entry.target) { if (listener.el === entry.target) {
if (listener.state.loaded) if (listener.state.loaded)
return this._observer.unobserve(listener.el); return this.observer.unobserve(listener.el);
listener.load(); listener.load();
} }
}); });
@ -421,7 +421,7 @@ export default function () {
* @param {bool} inCache is rendered from cache * @param {bool} inCache is rendered from cache
* @return * @return
*/ */
_elRenderer(listener, state, cache) { elRenderer(listener, state, cache) {
if (!listener.el) return; if (!listener.el) return;
const { el, bindType } = listener; const { el, bindType } = listener;
@ -463,7 +463,7 @@ export default function () {
* @param {string} image's src * @param {string} image's src
* @return {object} image's loading, loaded, error url * @return {object} image's loading, loaded, error url
*/ */
_valueFormatter(value) { valueFormatter(value) {
let src = value; let src = value;
let { loading, error } = this.options; let { loading, error } = this.options;

6
packages/vant/src/lazyload/vue-lazyload/listener.js
View File

@ -30,7 +30,7 @@ export default class ReactiveListener {
this.$parent = $parent; this.$parent = $parent;
this.elRenderer = elRenderer; this.elRenderer = elRenderer;
this._imageCache = imageCache; this.imageCache = imageCache;
this.performanceData = { this.performanceData = {
loadStart: 0, loadStart: 0,
loadEnd: 0, loadEnd: 0,
@ -156,7 +156,7 @@ export default class ReactiveListener {
return; return;
} }
if (this.state.rendered && this.state.loaded) return; if (this.state.rendered && this.state.loaded) return;
if (this._imageCache.has(this.src)) { if (this.imageCache.has(this.src)) {
this.state.loaded = true; this.state.loaded = true;
this.render('loaded', true); this.render('loaded', true);
this.state.rendered = true; this.state.rendered = true;
@ -182,7 +182,7 @@ export default class ReactiveListener {
this.record('loadEnd'); this.record('loadEnd');
this.render('loaded', false); this.render('loaded', false);
this.state.rendered = true; this.state.rendered = true;
this._imageCache.add(this.src); this.imageCache.add(this.src);
onFinish(); onFinish();
}, },
(err) => { (err) => {

13
packages/vant/src/lazyload/vue-lazyload/util.js
View File

@ -139,8 +139,7 @@ export const loadImageAsync = (item, resolve, reject) => {
const image = new Image(); const image = new Image();
if (!item || !item.src) { if (!item || !item.src) {
const err = new Error('image src is required'); return reject(new Error('image src is required'));
return reject(err);
} }
image.src = item.src; image.src = item.src;
@ -163,22 +162,22 @@ export class ImageCache {
this.options = { this.options = {
max: max || 100, max: max || 100,
}; };
this._caches = []; this.caches = [];
} }
has(key) { has(key) {
return this._caches.indexOf(key) > -1; return this.caches.indexOf(key) > -1;
} }
add(key) { add(key) {
if (this.has(key)) return; if (this.has(key)) return;
this._caches.push(key); this.caches.push(key);
if (this._caches.length > this.options.max) { if (this.caches.length > this.options.max) {
this.free(); this.free();
} }
} }
free() { free() {
this._caches.shift(); this.caches.shift();
} }
} }

5
packages/vant/src/list/List.tsx
View File

@ -139,10 +139,7 @@ export default defineComponent({
} }
}; };
watch( watch(() => [props.loading, props.finished, props.error], check);
[() => props.loading, () => props.finished, () => props.error],
check
);
if (tabStatus) { if (tabStatus) {
watch(tabStatus, (tabActive) => { watch(tabStatus, (tabActive) => {

4
packages/vant/src/number-keyboard/NumberKeyboardKey.tsx
View File

@ -1,5 +1,5 @@
import { ref, PropType, defineComponent } from 'vue'; import { ref, PropType, defineComponent } from 'vue';
import { numericProp, createNamespace } from '../utils'; import { numericProp, createNamespace, preventDefault } from '../utils';
import { useTouch } from '../composables/use-touch'; import { useTouch } from '../composables/use-touch';
import { Loading } from '../loading'; import { Loading } from '../loading';
@ -61,7 +61,7 @@ export default defineComponent({
// eliminate tap delay on safari // eliminate tap delay on safari
// see: https://github.com/youzan/vant/issues/6836 // see: https://github.com/youzan/vant/issues/6836
if (!slots.default) { if (!slots.default) {
event.preventDefault(); preventDefault(event);
} }
active.value = false; active.value = false;
emit('press', props.text, props.type); emit('press', props.text, props.type);

13
packages/vant/src/stepper/Stepper.tsx
View File

@ -247,14 +247,14 @@ export default defineComponent({
// fix mobile safari page scroll down issue // fix mobile safari page scroll down issue
// see: https://github.com/youzan/vant/issues/7690 // see: https://github.com/youzan/vant/issues/7690
if (props.disableInput) { if (props.disableInput) {
event.preventDefault(); preventDefault(event);
} }
}; };
const createListeners = (type: 'plus' | 'minus') => ({ const createListeners = (type: typeof actionType) => ({
onClick: (event: MouseEvent) => { onClick: (event: MouseEvent) => {
// disable double tap scrolling on mobile safari // disable double tap scrolling on mobile safari
event.preventDefault(); preventDefault(event);
actionType = type; actionType = type;
onChange(); onChange();
}, },
@ -267,12 +267,7 @@ export default defineComponent({
}); });
watch( watch(
[ () => [props.max, props.min, props.integer, props.decimalLength],
() => props.max,
() => props.min,
() => props.integer,
() => props.decimalLength,
],
check check
); );

3
packages/vant/src/sticky/test/index.spec.tsx
View File

@ -1,6 +1,6 @@
import { nextTick, ref } from 'vue'; import { nextTick, ref } from 'vue';
import { VueWrapper } from '@vue/test-utils'; import { VueWrapper } from '@vue/test-utils';
import { mockScrollTop, mount } from '../../../test'; import { mockScrollTop, trigger, mount } from '../../../test';
import { Sticky } from '..'; import { Sticky } from '..';
import { ComponentInstance } from '../../utils'; import { ComponentInstance } from '../../utils';
@ -130,6 +130,7 @@ test('should allow to using offset-top prop with rem unit', async () => {
test('should allow to using offset-top prop with vw unit', async () => { test('should allow to using offset-top prop with vw unit', async () => {
Object.defineProperty(window, 'innerWidth', { value: 300 }); Object.defineProperty(window, 'innerWidth', { value: 300 });
trigger(window, 'resize');
const wrapper = mount({ const wrapper = mount({
render() { render() {

12
packages/vant/src/swipe/Swipe.tsx
View File

@ -19,18 +19,15 @@ import {
isHidden, isHidden,
truthProp, truthProp,
numericProp, numericProp,
windowWidth,
windowHeight,
preventDefault, preventDefault,
createNamespace, createNamespace,
makeNumericProp, makeNumericProp,
} from '../utils'; } from '../utils';
// Composables // Composables
import { import { doubleRaf, useChildren, usePageVisibility } from '@vant/use';
doubleRaf,
useChildren,
useWindowSize,
usePageVisibility,
} from '@vant/use';
import { useTouch } from '../composables/use-touch'; import { useTouch } from '../composables/use-touch';
import { useExpose } from '../composables/use-expose'; import { useExpose } from '../composables/use-expose';
import { onPopupReopen } from '../composables/on-popup-reopen'; import { onPopupReopen } from '../composables/on-popup-reopen';
@ -78,7 +75,6 @@ export default defineComponent({
}); });
const touch = useTouch(); const touch = useTouch();
const windowSize = useWindowSize();
const { children, linkChildren } = useChildren(SWIPE_KEY); const { children, linkChildren } = useChildren(SWIPE_KEY);
const count = computed(() => children.length); const count = computed(() => children.length);
@ -413,7 +409,7 @@ export default defineComponent({
watch(count, () => initialize(state.active)); watch(count, () => initialize(state.active));
watch(() => props.autoplay, autoplay); watch(() => props.autoplay, autoplay);
watch([windowSize.width, windowSize.height], resize); watch([windowWidth, windowHeight], resize);
watch(usePageVisibility(), (visible) => { watch(usePageVisibility(), (visible) => {
if (visible === 'visible') { if (visible === 'visible') {
autoplay(); autoplay();

5
packages/vant/src/tabs/Tabs.tsx
View File

@ -24,6 +24,7 @@ import {
truthProp, truthProp,
numericProp, numericProp,
Interceptor, Interceptor,
windowWidth,
getElementTop, getElementTop,
makeStringProp, makeStringProp,
callInterceptor, callInterceptor,
@ -39,7 +40,6 @@ import { scrollLeftTo, scrollTopTo } from './utils';
import { import {
useRect, useRect,
useChildren, useChildren,
useWindowSize,
useScrollParent, useScrollParent,
useEventListener, useEventListener,
onMountedOrActivated, onMountedOrActivated,
@ -123,7 +123,6 @@ export default defineComponent({
const navRef = ref<HTMLElement>(); const navRef = ref<HTMLElement>();
const wrapRef = ref<HTMLElement>(); const wrapRef = ref<HTMLElement>();
const windowSize = useWindowSize();
const scroller = useScrollParent(root); const scroller = useScrollParent(root);
const [titleRefs, setTitleRefs] = useRefs<ComponentInstance>(); const [titleRefs, setTitleRefs] = useRefs<ComponentInstance>();
const { children, linkChildren } = useChildren(TABS_KEY); const { children, linkChildren } = useChildren(TABS_KEY);
@ -408,7 +407,7 @@ export default defineComponent({
); );
}; };
watch([() => props.color, windowSize.width], setLine); watch([() => props.color, windowWidth], setLine);
watch( watch(
() => props.active, () => props.active,

4
packages/vant/src/utils/dom.ts
View File

@ -1,4 +1,4 @@
import { useRect } from '@vant/use'; import { useRect, useWindowSize } from '@vant/use';
import { unref, Ref } from 'vue'; import { unref, Ref } from 'vue';
import { isIOS as checkIsIOS } from './validate'; import { isIOS as checkIsIOS } from './validate';
@ -84,3 +84,5 @@ export function isHidden(
return hidden || parentHidden; return hidden || parentHidden;
} }
export const { width: windowWidth, height: windowHeight } = useWindowSize();

8
packages/vant/src/utils/format.ts
View File

@ -1,6 +1,6 @@
import { CSSProperties } from 'vue'; import { CSSProperties } from 'vue';
import { useWindowSize } from '@vant/use';
import { inBrowser } from './basic'; import { inBrowser } from './basic';
import { windowWidth, windowHeight } from './dom';
import { isDef, isNumeric } from './validate'; import { isDef, isNumeric } from './validate';
export function addUnit(value?: string | number): string | undefined { export function addUnit(value?: string | number): string | undefined {
@ -51,15 +51,13 @@ function convertRem(value: string) {
} }
function convertVw(value: string) { function convertVw(value: string) {
const { width } = useWindowSize();
value = value.replace(/vw/g, ''); value = value.replace(/vw/g, '');
return (+value * width.value) / 100; return (+value * windowWidth.value) / 100;
} }
function convertVh(value: string) { function convertVh(value: string) {
const { height } = useWindowSize();
value = value.replace(/vh/g, ''); value = value.replace(/vh/g, '');
return (+value * height.value) / 100; return (+value * windowHeight.value) / 100;
} }
export function unitToPx(value: string | number): number { export function unitToPx(value: string | number): number {

2
packages/vant/src/utils/test/index.spec.ts
View File

@ -3,6 +3,7 @@ import { deepClone } from '../deep-clone';
import { deepAssign } from '../deep-assign'; import { deepAssign } from '../deep-assign';
import { isDef, isMobile, isNumeric } from '../validate'; import { isDef, isMobile, isNumeric } from '../validate';
import { addUnit, unitToPx, camelize, formatNumber } from '../format'; import { addUnit, unitToPx, camelize, formatNumber } from '../format';
import { trigger } from '../../../test';
test('deepClone', () => { test('deepClone', () => {
const a = { foo: 0 }; const a = { foo: 0 };
@ -110,6 +111,7 @@ test('unitToPx', () => {
Object.defineProperty(window, 'innerWidth', { value: 100 }); Object.defineProperty(window, 'innerWidth', { value: 100 });
Object.defineProperty(window, 'innerHeight', { value: 200 }); Object.defineProperty(window, 'innerHeight', { value: 200 });
trigger(window, 'resize');
expect(unitToPx(0)).toEqual(0); expect(unitToPx(0)).toEqual(0);
expect(unitToPx(10)).toEqual(10); expect(unitToPx(10)).toEqual(10);