From 54fb8dc9f71f90746a6da9b3dc395d72efe4042c Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Thu, 17 Feb 2022 17:10:53 +0800 Subject: [PATCH] =?UTF-8?q?fix(nvue):=20movable-view=E3=80=81picker-view?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/rich-text.ts | 8 ++ .../uni-components/src/nvue/components.ts | 6 + .../src/nvue/movable-area/index.tsx | 3 +- .../src/nvue/movable-view/index.tsx | 12 +- .../src/nvue/picker-view-column/index.tsx | 115 ++++++++++-------- .../src/nvue/picker-view/index.tsx | 24 ++-- .../src/vue/rich-text/index.tsx | 10 +- 7 files changed, 99 insertions(+), 79 deletions(-) create mode 100644 packages/uni-components/src/components/rich-text.ts diff --git a/packages/uni-components/src/components/rich-text.ts b/packages/uni-components/src/components/rich-text.ts new file mode 100644 index 000000000..2a1f15bc8 --- /dev/null +++ b/packages/uni-components/src/components/rich-text.ts @@ -0,0 +1,8 @@ +export const props = { + nodes: { + type: [Array, String], + default: function () { + return [] + }, + }, +} diff --git a/packages/uni-components/src/nvue/components.ts b/packages/uni-components/src/nvue/components.ts index cf96aca5e..ddf97e1c3 100644 --- a/packages/uni-components/src/nvue/components.ts +++ b/packages/uni-components/src/nvue/components.ts @@ -4,6 +4,9 @@ import Button from './button' import MovableArea from './movable-area' import MovableView from './movable-view' import Progress from './progress' +import PickerView from './picker-view' +import PickerViewColumn from './picker-view-column' +import Picker from './picker' export default { Navigator, Label, @@ -11,4 +14,7 @@ export default { MovableArea, MovableView, Progress, + PickerView, + PickerViewColumn, + Picker, } diff --git a/packages/uni-components/src/nvue/movable-area/index.tsx b/packages/uni-components/src/nvue/movable-area/index.tsx index 6a176e62b..473918492 100644 --- a/packages/uni-components/src/nvue/movable-area/index.tsx +++ b/packages/uni-components/src/nvue/movable-area/index.tsx @@ -32,8 +32,7 @@ export default defineComponent({ styles: [ { 'uni-movable-area': { - width: '10px', - height: '10px', + '': { width: '10px', height: '10px' }, }, }, ], diff --git a/packages/uni-components/src/nvue/movable-view/index.tsx b/packages/uni-components/src/nvue/movable-view/index.tsx index 987a144a6..3506c1792 100644 --- a/packages/uni-components/src/nvue/movable-view/index.tsx +++ b/packages/uni-components/src/nvue/movable-view/index.tsx @@ -113,11 +113,13 @@ export default defineComponent({ styles: [ { 'uni-movable-view': { - position: 'absolute', - top: '0px', - left: '0px', - width: '10px', - height: '10px', + '': { + position: 'absolute', + top: '0px', + left: '0px', + width: '10px', + height: '10px', + }, }, }, ], diff --git a/packages/uni-components/src/nvue/picker-view-column/index.tsx b/packages/uni-components/src/nvue/picker-view-column/index.tsx index d72b03106..fbf41de10 100644 --- a/packages/uni-components/src/nvue/picker-view-column/index.tsx +++ b/packages/uni-components/src/nvue/picker-view-column/index.tsx @@ -47,18 +47,19 @@ export default defineComponent({ const indicatorRef: Ref = ref(null) const pickerViewProps = inject('pickerViewProps')! - const getPickerViewColumn = inject( - 'getPickerViewColumn', - () => computed({ set: () => {}, get: () => 0 }) - ) + const getPickerViewColumn = inject( + 'getPickerViewColumn' + ) as GetPickerViewColumn const current = getPickerViewColumn(instance) const indicatorStyle = computed(() => getStyle(pickerViewProps.indicatorStyle) ) const maskStyle = computed(() => getStyle(pickerViewProps.maskStyle)) - let indicatorHeight = getHeight(indicatorStyle) - let pickerViewHeight = parseFloat(pickerViewProps.height as string) + let indicatorHeight = ref(0) + indicatorHeight.value = getHeight(indicatorStyle.value) + let pickerViewHeight = ref(0) + pickerViewHeight.value = parseFloat(pickerViewProps.height as string) watch( () => props.length, @@ -75,7 +76,7 @@ export default defineComponent({ return } dom.scrollToElement(contentRef.value, { - offset: _current * indicatorHeight, + offset: _current * indicatorHeight.value, animated, }) current.value = _current @@ -83,13 +84,15 @@ export default defineComponent({ scrollToElementTime = Date.now() } } - const onScrollend = (event: { detail: Record }) => { + const onScrollend = (event: { + contentOffset: { x: number; y: number } + }) => { if (Date.now() - scrollToElementTime < 340) { return } - const y = event.detail.contentOffset.y - const _current = Math.round(y / indicatorHeight) - if (y % indicatorHeight) { + const y = event.contentOffset.y + const _current = Math.round(y / indicatorHeight.value) + if (y % indicatorHeight.value) { setCurrent(_current, true, true) } else { current.value = _current @@ -101,15 +104,15 @@ export default defineComponent({ setTimeout(() => { Promise.all([ getComponentSize(rootRef.value!).then(({ height }) => { - height_ = pickerViewHeight = height + height_ = pickerViewHeight.value = height }), isAndroid && props.length ? getComponentSize(scrollViewItemRef.value!).then(({ height }) => { - indicatorHeight_ = indicatorHeight = + indicatorHeight_ = indicatorHeight.value = height / parseFloat(props.length as string) }) : getComponentSize(indicatorRef.value!).then(({ height }) => { - indicatorHeight_ = indicatorHeight = height + indicatorHeight_ = indicatorHeight.value = height }), ]).then(() => { if (height_ && indicatorHeight_) { @@ -140,8 +143,8 @@ export default defineComponent({ return () => { const children = slots.default && slots.default() - let padding = (pickerViewHeight - indicatorHeight) / 2 - const maskPosition = `${pickerViewHeight - padding}px` + let padding = (pickerViewHeight.value - indicatorHeight.value) / 2 + const maskPosition = `${pickerViewHeight.value - padding}px` const scrollOptions: ScrollOptions = { showScrollbar: false, scrollToBegin: false, @@ -149,7 +152,7 @@ export default defineComponent({ scrollY: true, } if (!isAndroid) { - scrollOptions.scrollTop = current.value * indicatorHeight + scrollOptions.scrollTop = current.value * indicatorHeight.value } return ( @@ -172,7 +175,7 @@ export default defineComponent({ {createScrollViewChild(children)} - + - Array.prototype.indexOf.call(columnVNodes, vnode.el) + Array.prototype.indexOf.call(columnVNodes, vnode) const getPickerViewColumn: GetPickerViewColumn = (columnInstance) => { return computed({ get() { @@ -85,17 +85,19 @@ export default defineComponent({ styles: [ { 'uni-picker-view': { - position: 'relative', + '': { position: 'relative' }, }, 'uni-picker-view-wrapper': { - display: 'flex', - flexDirection: 'row', - position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, - overflow: 'hidden', + '': { + display: 'flex', + flexDirection: 'row', + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + overflow: 'hidden', + }, }, }, ], diff --git a/packages/uni-components/src/vue/rich-text/index.tsx b/packages/uni-components/src/vue/rich-text/index.tsx index 52dc951ed..1522e8067 100644 --- a/packages/uni-components/src/vue/rich-text/index.tsx +++ b/packages/uni-components/src/vue/rich-text/index.tsx @@ -6,15 +6,7 @@ import { } from '@dcloudio/uni-components' import parseHtml from './html-parser' import parseNodes from './nodes-parser' - -const props = { - nodes: { - type: [Array, String], - default: function () { - return [] - }, - }, -} +import { props } from '../../components/rich-text' export default /*#__PURE__*/ defineBuiltInComponent({ name: 'RichText', -- GitLab