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 0000000000000000000000000000000000000000..2a1f15bc83986d9ae514af5cb91825bbc1c2551a --- /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 cf96aca5e8fb28809d9a2094907ddb89ffaaa88d..ddf97e1c304fe7287a8434666e83280bc12662fa 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 6a176e62b89a06dd5e694e0625b5ac69be62f9c8..47391849232b2ac0a0778af4864e34907527a1e0 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 987a144a6ec9f3b4cbf52ffbfe13d6394a57f7b5..3506c179296730eec0552bb0ecf3289d09ecd902 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 d72b031061b32aa52802579a5db9e435b42d686c..fbf41de10ffb46c45ccc083030dc0c580fe3ffb2 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 52dc951ed7d2c89fc5eb66fbcbea808f920d33d2..1522e8067bbbe5eed5d594f1f7e43fcdae3b87b3 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',