perf: no longer need transform prefix (#9588)

* perf: no longer need transform prefix

* chore: upd

* chore: upd
This commit is contained in:
neverland 2021-09-29 17:04:03 +08:00 committed by GitHub
parent ebffeb4cda
commit e8186795b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 59 deletions

View File

@ -15,9 +15,6 @@ function findRootDir(dir: string): string {
return findRootDir(parentDir); return findRootDir(parentDir);
} }
// Colors
export const GREEN = '#07c160';
// Root paths // Root paths
export const CWD = process.cwd(); export const CWD = process.cwd();
export const ROOT = findRootDir(CWD); export const ROOT = findRootDir(CWD);
@ -29,7 +26,6 @@ export const SITE_DIST_DIR = join(ROOT, 'site-dist');
export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js'); export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
export const PACKAGE_JSON_FILE = join(ROOT, 'package.json'); export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js'); export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
export const CACHE_DIR = join(ROOT, 'node_modules/.cache');
// Relative paths // Relative paths
export const DIST_DIR = join(__dirname, '../../dist'); export const DIST_DIR = join(__dirname, '../../dist');
@ -47,7 +43,6 @@ export const SITE_DESKTOP_SHARED_FILE = join(
export const STYLE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json'); export const STYLE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json');
// Config files // Config files
export const BABEL_CONFIG_FILE = join(CONFIG_DIR, 'babel.config.js');
export const POSTCSS_CONFIG_FILE = join(CONFIG_DIR, 'postcss.config.js'); export const POSTCSS_CONFIG_FILE = join(CONFIG_DIR, 'postcss.config.js');
export const JEST_SETUP_FILE = join(CONFIG_DIR, 'jest.setup.js'); export const JEST_SETUP_FILE = join(CONFIG_DIR, 'jest.setup.js');
export const JEST_CONFIG_FILE = join(CONFIG_DIR, 'jest.config.js'); export const JEST_CONFIG_FILE = join(CONFIG_DIR, 'jest.config.js');

View File

@ -415,8 +415,7 @@ export default defineComponent({
); );
if (disabledDay) { if (disabledDay) {
const lastAbledEndDay = getPrevDay(disabledDay); select([startDay, getPrevDay(disabledDay)]);
select([startDay, lastAbledEndDay]);
} else { } else {
select([startDay, date], true); select([startDay, date], true);
} }
@ -528,9 +527,9 @@ export default defineComponent({
showTitle={props.showTitle} showTitle={props.showTitle}
showSubtitle={props.showSubtitle} showSubtitle={props.showSubtitle}
firstDayOfWeek={dayOffset.value} firstDayOfWeek={dayOffset.value}
onClick-subtitle={(event: MouseEvent) => { onClick-subtitle={(event: MouseEvent) =>
emit('click-subtitle', event); emit('click-subtitle', event)
}} }
/> />
<div ref={bodyRef} class={bem('body')} onScroll={onScroll}> <div ref={bodyRef} class={bem('body')} onScroll={onScroll}>
{months.value.map(renderMonth)} {months.value.map(renderMonth)}
@ -542,9 +541,7 @@ export default defineComponent({
watch(() => props.show, init); watch(() => props.show, init);
watch( watch(
() => [props.type, props.minDate, props.maxDate], () => [props.type, props.minDate, props.maxDate],
() => { () => reset(getInitialDate(currentDate.value))
reset(getInitialDate(currentDate.value));
}
); );
watch( watch(
() => props.defaultDate, () => props.defaultDate,

View File

@ -24,7 +24,7 @@ export type CascaderOption = {
type CascaderTab = { type CascaderTab = {
options: CascaderOption[]; options: CascaderOption[];
selectedOption: CascaderOption | null; selected: CascaderOption | null;
}; };
export type CascaderFieldNames = { export type CascaderFieldNames = {
@ -111,7 +111,7 @@ export default defineComponent({
state.tabs = selectedOptions.map((option) => { state.tabs = selectedOptions.map((option) => {
const tab = { const tab = {
options: optionsCursor, options: optionsCursor,
selectedOption: option, selected: option,
}; };
const next = optionsCursor.find( const next = optionsCursor.find(
@ -127,7 +127,7 @@ export default defineComponent({
if (optionsCursor) { if (optionsCursor) {
state.tabs.push({ state.tabs.push({
options: optionsCursor, options: optionsCursor,
selectedOption: null, selected: null,
}); });
} }
@ -142,7 +142,7 @@ export default defineComponent({
state.tabs = [ state.tabs = [
{ {
options: props.options, options: props.options,
selectedOption: null, selected: null,
}, },
]; ];
}; };
@ -152,7 +152,7 @@ export default defineComponent({
return; return;
} }
state.tabs[tabIndex].selectedOption = option; state.tabs[tabIndex].selected = option;
if (state.tabs.length > tabIndex + 1) { if (state.tabs.length > tabIndex + 1) {
state.tabs = state.tabs.slice(0, tabIndex + 1); state.tabs = state.tabs.slice(0, tabIndex + 1);
@ -161,7 +161,7 @@ export default defineComponent({
if (option[childrenKey]) { if (option[childrenKey]) {
const nextTab = { const nextTab = {
options: option[childrenKey], options: option[childrenKey],
selectedOption: null, selected: null,
}; };
if (state.tabs[tabIndex + 1]) { if (state.tabs[tabIndex + 1]) {
@ -176,7 +176,7 @@ export default defineComponent({
} }
const selectedOptions = state.tabs const selectedOptions = state.tabs
.map((tab) => tab.selectedOption) .map((tab) => tab.selected)
.filter(Boolean); .filter(Boolean);
const eventParams = { const eventParams = {
@ -260,19 +260,19 @@ export default defineComponent({
); );
const renderTab = (tab: CascaderTab, tabIndex: number) => { const renderTab = (tab: CascaderTab, tabIndex: number) => {
const { options, selectedOption } = tab; const { options, selected } = tab;
const title = selectedOption const title = selected
? selectedOption[textKey] ? selected[textKey]
: props.placeholder || t('select'); : props.placeholder || t('select');
return ( return (
<Tab <Tab
title={title} title={title}
titleClass={bem('tab', { titleClass={bem('tab', {
unselected: !selectedOption, unselected: !selected,
})} })}
> >
{renderOptions(options, selectedOption, tabIndex)} {renderOptions(options, selected, tabIndex)}
</Tab> </Tab>
); );
}; };
@ -298,9 +298,7 @@ export default defineComponent({
() => props.modelValue, () => props.modelValue,
(value) => { (value) => {
if (value || value === 0) { if (value || value === 0) {
const values = state.tabs.map( const values = state.tabs.map((tab) => tab.selected?.[valueKey]);
(tab) => tab.selectedOption?.[valueKey]
);
if (values.includes(value)) { if (values.includes(value)) {
return; return;
} }

View File

@ -29,10 +29,8 @@ const MOMENTUM_LIMIT_DISTANCE = 15;
const [name, bem] = createNamespace('picker-column'); const [name, bem] = createNamespace('picker-column');
function getElementTranslateY(element: Element) { function getElementTranslateY(element: Element) {
const style = window.getComputedStyle(element); const { transform } = window.getComputedStyle(element);
const transform = style.transform || style.webkitTransform;
const translateY = transform.slice(7, transform.length - 1).split(', ')[5]; const translateY = transform.slice(7, transform.length - 1).split(', ')[5];
return Number(translateY); return Number(translateY);
} }
@ -316,36 +314,30 @@ export default defineComponent({
watch( watch(
() => props.defaultIndex, () => props.defaultIndex,
(value) => { (value) => setIndex(value)
setIndex(value);
}
); );
return () => { return () => (
const wrapperStyle = { <div
transform: `translate3d(0, ${state.offset + baseOffset()}px, 0)`, class={[bem(), props.className]}
transitionDuration: `${state.duration}ms`, onTouchstart={onTouchStart}
transitionProperty: state.duration ? 'all' : 'none', onTouchmove={onTouchMove}
}; onTouchend={onTouchEnd}
onTouchcancel={onTouchEnd}
return ( >
<div <ul
class={[bem(), props.className]} ref={wrapper}
onTouchstart={onTouchStart} style={{
onTouchmove={onTouchMove} transform: `translate3d(0, ${state.offset + baseOffset()}px, 0)`,
onTouchend={onTouchEnd} transitionDuration: `${state.duration}ms`,
onTouchcancel={onTouchEnd} transitionProperty: state.duration ? 'all' : 'none',
}}
class={bem('wrapper')}
onTransitionend={stopMomentum}
> >
<ul {renderOptions()}
ref={wrapper} </ul>
style={wrapperStyle} </div>
class={bem('wrapper')} );
onTransitionend={stopMomentum}
>
{renderOptions()}
</ul>
</div>
);
};
}, },
}); });