From 2a227a9acb52f53379f13fb6289667337892c230 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Thu, 10 Jun 2021 18:48:19 +0800
Subject: [PATCH] fix: textarea picker ssr
---
.../src/components/textarea/index.tsx | 27 ++++++---
.../src/view/components/picker/index.tsx | 57 +++++++++++++++----
2 files changed, 65 insertions(+), 19 deletions(-)
diff --git a/packages/uni-components/src/components/textarea/index.tsx b/packages/uni-components/src/components/textarea/index.tsx
index e7b6433c2e..57cec3195c 100644
--- a/packages/uni-components/src/components/textarea/index.tsx
+++ b/packages/uni-components/src/components/textarea/index.tsx
@@ -1,4 +1,4 @@
-import { Ref, ref, computed, watch } from 'vue'
+import { Ref, ref, computed, watch, onMounted } from 'vue'
import { extend } from '@vue/shared'
import { defineBuiltInComponent } from '../../helpers/component'
import {
@@ -23,6 +23,18 @@ const props = /*#__PURE__*/ extend({}, fieldProps, {
},
})
+let fixMargin: Boolean = false
+
+function setFixMargin() {
+ // iOS 13 以下版本需要修正边距
+ const DARK_TEST_STRING = '(prefers-color-scheme: dark)'
+ fixMargin = __NODE_JS__
+ ? false
+ : String(navigator.platform).indexOf('iP') === 0 &&
+ String(navigator.vendor).indexOf('Apple') === 0 &&
+ window.matchMedia(DARK_TEST_STRING).media !== DARK_TEST_STRING
+}
+
export default /*#__PURE__*/ defineBuiltInComponent({
name: 'Textarea',
props,
@@ -88,12 +100,11 @@ export default /*#__PURE__*/ defineBuiltInComponent({
}
}
- // iOS 13 以下版本需要修正边距
- const DARK_TEST_STRING = '(prefers-color-scheme: dark)'
- const fixMargin =
- String(navigator.platform).indexOf('iP') === 0 &&
- String(navigator.vendor).indexOf('Apple') === 0 &&
- window.matchMedia(DARK_TEST_STRING).media !== DARK_TEST_STRING
+ if (__NODE_JS__) {
+ onMounted(setFixMargin)
+ } else {
+ setFixMargin()
+ }
return () => {
let textareaNode =
@@ -120,6 +131,7 @@ export default /*#__PURE__*/ defineBuiltInComponent({
value={state.value}
disabled={!!props.disabled}
maxlength={state.maxlength}
+ // @ts-ignore
enterkeyhint={props.confirmType}
class={{
'uni-textarea-textarea': true,
@@ -148,6 +160,7 @@ export default /*#__PURE__*/ defineBuiltInComponent({
{valueCompute.value.map((item) => (
{item.trim() ? item : '.'}
))}
+ {/* @ts-ignore */}
{props.confirmType === 'search' ? (
diff --git a/packages/uni-h5/src/view/components/picker/index.tsx b/packages/uni-h5/src/view/components/picker/index.tsx
index 732b88e443..b9361d90fd 100644
--- a/packages/uni-h5/src/view/components/picker/index.tsx
+++ b/packages/uni-h5/src/view/components/picker/index.tsx
@@ -11,6 +11,7 @@ import {
Transition,
Ref,
ExtractPropTypes,
+ onMounted,
} from 'vue'
import {
useBooleanAttr,
@@ -440,6 +441,43 @@ function usePickerState(props: Props) {
}
}
+const getiPadFlag = () =>
+ String(navigator.vendor).indexOf('Apple') === 0 &&
+ navigator.maxTouchPoints > 0
+function useIsiPad() {
+ const isiPad = ref(false)
+
+ if (__NODE_JS__) {
+ onMounted(() => (isiPad.value = getiPadFlag()))
+ } else {
+ isiPad.value = getiPadFlag()
+ }
+
+ return isiPad
+}
+
+const getSystem = () => {
+ if (/win|mac/i.test(navigator.platform)) {
+ if (navigator.vendor === 'Google Inc.') {
+ return 'chrome'
+ } else if (/Firefox/.test(navigator.userAgent)) {
+ return 'firefox'
+ }
+ }
+ return ''
+}
+function useSystem() {
+ const _system = ref('')
+
+ if (__NODE_JS__) {
+ onMounted(() => (_system.value = getSystem()))
+ } else {
+ _system.value = getSystem()
+ }
+
+ return _system
+}
+
let __contentVisibleDelay: number
function usePickerMethods(
props: Props,
@@ -450,29 +488,24 @@ function usePickerMethods(
selectRef: HTMLRef,
inputRef: HTMLRef
) {
+ const isiPad = useIsiPad()
+ const _system = useSystem()
+
const selectorTypeComputed = computed(() => {
const type = props.selectorType
if (Object.values(selectorType).includes(type)) {
return type
}
- return String(navigator.vendor).indexOf('Apple') === 0 &&
- navigator.maxTouchPoints > 0
- ? selectorType.PICKER
- : selectorType.SELECT
+
+ return isiPad.value ? selectorType.PICKER : selectorType.SELECT
})
const system = computed(() => {
- if (__NODE_JS__) return ''
if (
props.mode === mode.DATE &&
!Object.values(fields).includes(props.fields) &&
- state.isDesktop &&
- /win|mac/i.test(navigator.platform)
+ state.isDesktop
) {
- if (navigator.vendor === 'Google Inc.') {
- return 'chrome'
- } else if (/Firefox/.test(navigator.userAgent)) {
- return 'firefox'
- }
+ return _system.value
}
return ''
})
--
GitLab