From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 01 Mar 2024 09:58:45 +0800
Subject: [PATCH] fix:手持设备

---
 uni_modules/uview-ui/components/u-textarea/u-textarea.vue |  239 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 239 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-textarea/u-textarea.vue b/uni_modules/uview-ui/components/u-textarea/u-textarea.vue
new file mode 100644
index 0000000..2cd5fdc
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-textarea/u-textarea.vue
@@ -0,0 +1,239 @@
+<template>
+    <view class="u-textarea" :class="textareaClass" :style="[textareaStyle]">
+        <textarea
+            class="u-textarea__field"
+            :value="innerValue"
+            :style="{ height: $u.addUnit(height) }"
+            :placeholder="placeholder"
+            :placeholder-style="$u.addStyle(placeholderStyle, 'string')"
+            :placeholder-class="placeholderClass"
+            :disabled="disabled"
+            :focus="focus"
+            :autoHeight="autoHeight"
+            :fixed="fixed"
+            :cursorSpacing="cursorSpacing"
+            :cursor="cursor"
+            :showConfirmBar="showConfirmBar"
+            :selectionStart="selectionStart"
+            :selectionEnd="selectionEnd"
+            :adjustPosition="adjustPosition"
+            :disableDefaultPadding="disableDefaultPadding"
+            :holdKeyboard="holdKeyboard"
+            :maxlength="maxlength"
+            :confirmType="confirmType"
+            :ignoreCompositionEvent="ignoreCompositionEvent"
+            @focus="onFocus"
+            @blur="onBlur"
+            @linechange="onLinechange"
+            @input="onInput"
+            @confirm="onConfirm"
+            @keyboardheightchange="onKeyboardheightchange"
+        ></textarea>
+        <text
+            class="u-textarea__count"
+            :style="{
+                'background-color': disabled ? 'transparent' : '#fff',
+            }"
+            v-if="count"
+            >{{ innerValue.length }}/{{ maxlength }}</text
+        >
+    </view>
+</template>
+
+<script>
+import props from "./props.js";
+/**
+ * Textarea ���������
+ * @description ������������������������������������������������������������������������������������������������������������������������
+ * @tutorial https://www.uviewui.com/components/textarea.html
+ *
+ * @property {String | Number} 		value					������������������
+ * @property {String | Number}		placeholder				���������������������������
+ * @property {String}			    placeholderClass		������placeholder���������������������������������������style���������scoped���������������������������/deep/ ��� ������ 'input-placeholder' ���
+ * @property {String | Object}	    placeholderStyle		������placeholder���������������������/������������������"color: red;"
+ * @property {String | Number}		height					������������������������ 70 ���
+ * @property {String}				confirmType				������������������������������������������������������������App-vue���H5��������������� 'done' ���
+ * @property {Boolean}				disabled				��������������������� false ���
+ * @property {Boolean}				count					��������������������������������� false ���
+ * @property {Boolean}				focus					���������������������������nvue������������H5������������������������������������ false ���
+ * @property {Boolean | Function}	autoHeight				��������������������������������� false ���
+ * @property {Boolean}				fixed					������textarea������������position:fixed������������������������������������fixed���true��������� false ���
+ * @property {Number}				cursorSpacing			��������������������������������������� 0 ���
+ * @property {String | Number}		cursor					������focus������������������
+ * @property {Function}			    formatter			    ������������������
+ * @property {Boolean}				showConfirmBar			��������������������������������������������������������������������� true ���
+ * @property {Number}				selectionStart			���������������������������������������������������selection-end������������������������ -1 ���
+ * @property {Number | Number}		selectionEnd			���������������������������������������������������selection-start��������������������� -1 ���
+ * @property {Boolean}				adjustPosition			��������������������������������������������������� true ���
+ * @property {Boolean | Number}		disableDefaultPadding	������������ iOS ��������������������������������������������������������� false ���
+ * @property {Boolean}				holdKeyboard			focus������������������������������������������������������������������������������ false ���
+ * @property {String | Number}		maxlength				������������������������������ -1 ��������������������������������������� 140 ���
+ * @property {String}				border					���������������surround-���������������none-������������bottom-��������������������� 'surround' ���
+ * @property {Boolean}				ignoreCompositionEvent	���������������������������������������������������������
+ *
+ * @event {Function(e)} focus					���������������������������event.detail = { value, height }���height ���������������
+ * @event {Function(e)} blur					���������������������������������event.detail = {value, cursor}
+ * @event {Function(e)} linechange				���������������������������������event.detail = {height: 0, heightRpx: 0, lineCount: 0}
+ * @event {Function(e)} input					��������������������������� input ������
+ * @event {Function(e)} confirm					������������������ ������ confirm ������
+ * @event {Function(e)} keyboardheightchange	������������������������������������������������
+ * @example <u--textarea v-model="value1" placeholder="���������������" ></u--textarea>
+ */
+export default {
+    name: "u-textarea",
+    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+	data() {
+		return {
+			// ���������������
+			innerValue: "",
+			// ������������������������������
+			focused: false,
+			// value���������������������������watch������������������immediate������������������������������������������������������value���������������
+			firstChange: true,
+			// value���������������������������������������������������
+			changeFromInner: false,
+			// ������������������
+			innerFormatter: value => value
+		}
+	},
+	watch: {
+	    value: {
+	        immediate: true,
+	        handler(newVal, oldVal) {
+	            this.innerValue = newVal;
+	            /* #ifdef H5 */
+	            // ���H5������������value������������������input������������������������@input������������������������������������������
+	            if (
+	                this.firstChange === false &&
+	                this.changeFromInner === false
+	            ) {
+	                this.valueChange();
+	            }
+	            /* #endif */
+	            this.firstChange = false;
+	            // ������changeFromInner���������false������������������������������������������������
+	            this.changeFromInner = false;
+	        },
+	    },
+	},
+    computed: {
+        // ���������������
+        textareaClass() {
+            let classes = [],
+                { border, disabled, shape } = this;
+            border === "surround" &&
+                (classes = classes.concat(["u-border", "u-textarea--radius"]));
+            border === "bottom" &&
+                (classes = classes.concat([
+                    "u-border-bottom",
+                    "u-textarea--no-radius",
+                ]));
+            disabled && classes.push("u-textarea--disabled");
+            return classes.join(" ");
+        },
+        // ���������������
+        textareaStyle() {
+            const style = {};
+            // #ifdef APP-NVUE
+            // ������textarea���������nvue���������������������������������������������������
+            if (uni.$u.os() === "android") {
+                style.paddingTop = "6px";
+                style.paddingLeft = "9px";
+                style.paddingBottom = "3px";
+                style.paddingRight = "6px";
+            }
+            // #endif
+            return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+        },
+    },
+    methods: {
+		// ������������������������������������������������props������������������������ref������������
+		setFormatter(e) {
+			this.innerFormatter = e
+		},
+        onFocus(e) {
+            this.$emit("focus", e);
+        },
+        onBlur(e) {
+            this.$emit("blur", e);
+            // ������������u-form���������������
+            uni.$u.formValidate(this, "blur");
+        },
+        onLinechange(e) {
+            this.$emit("linechange", e);
+        },
+        onInput(e) {
+			let { value = "" } = e.detail || {};
+			// ���������������������
+			const formatter = this.formatter || this.innerFormatter
+			const formatValue = formatter(value)
+			// ������������props���������������������������������������innerValue������������������������������$nextTick���������������������������������������
+			this.innerValue = value
+			this.$nextTick(() => {
+				this.innerValue = formatValue;
+				this.valueChange();
+			})
+        },
+		// ���������������������������������
+		valueChange() {
+		    const value = this.innerValue;
+		    this.$nextTick(() => {
+		        this.$emit("input", value);
+		        // ������value���������������������������������
+		        this.changeFromInner = true;
+		        this.$emit("change", value);
+		        // ������������u-form���������������
+		        uni.$u.formValidate(this, "change");
+		    });
+		},
+        onConfirm(e) {
+            this.$emit("confirm", e);
+        },
+        onKeyboardheightchange(e) {
+            this.$emit("keyboardheightchange", e);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+.u-textarea {
+    border-radius: 4px;
+    background-color: #fff;
+    position: relative;
+    @include flex;
+    flex: 1;
+	padding: 9px;
+
+    &--radius {
+        border-radius: 4px;
+    }
+
+    &--no-radius {
+        border-radius: 0;
+    }
+
+    &--disabled {
+        background-color: #f5f7fa;
+    }
+
+    &__field {
+        flex: 1;
+        font-size: 15px;
+        color: $u-content-color;
+		width: 100%;
+    }
+
+    &__count {
+        position: absolute;
+        right: 5px;
+        bottom: 2px;
+        font-size: 12px;
+        color: $u-tips-color;
+        background-color: #ffffff;
+        padding: 1px 4px;
+    }
+}
+</style>

--
Gitblit v1.8.0