From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-textarea/u-textarea.vue | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 237 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..0dac03e
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-textarea/u-textarea.vue
@@ -0,0 +1,237 @@
+<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"
+ @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鐨勬牱寮忕被锛屾敞鎰忛〉闈㈡垨缁勪欢鐨剆tyle涓啓浜唖coped鏃讹紝闇�瑕佸湪绫诲悕鍓嶅啓/deep/ 锛� 榛樿 'input-placeholder' 锛�
+ * @property {String | Object} placeholderStyle 鎸囧畾placeholder鐨勬牱寮忥紝瀛楃涓�/瀵硅薄褰㈠紡锛屽"color: red;"
+ * @property {String | Number} height 杈撳叆妗嗛珮搴︼紙榛樿 70 锛�
+ * @property {String} confirmType 璁剧疆閿洏鍙充笅瑙掓寜閽殑鏂囧瓧锛屼粎寰俊灏忕▼搴忥紝App-vue鍜孒5鏈夋晥锛堥粯璁� 'done' 锛�
+ * @property {Boolean} disabled 鏄惁绂佺敤锛堥粯璁� false 锛�
+ * @property {Boolean} count 鏄惁鏄剧ず缁熻瀛楁暟锛堥粯璁� false 锛�
+ * @property {Boolean} focus 鏄惁鑷姩鑾峰彇鐒︾偣锛宯vue涓嶆敮鎸侊紝H5鍙栧喅浜庢祻瑙堝櫒鐨勫疄鐜帮紙榛樿 false 锛�
+ * @property {Boolean | Function} autoHeight 鏄惁鑷姩澧炲姞楂樺害锛堥粯璁� false 锛�
+ * @property {Boolean} fixed 濡傛灉textarea鏄湪涓�涓猵osition:fixed鐨勫尯鍩燂紝闇�瑕佹樉绀烘寚瀹氬睘鎬ixed涓簍rue锛堥粯璁� false 锛�
+ * @property {Number} cursorSpacing 鎸囧畾鍏夋爣涓庨敭鐩樼殑璺濈锛堥粯璁� 0 锛�
+ * @property {String | Number} cursor 鎸囧畾focus鏃剁殑鍏夋爣浣嶇疆
+ * @property {Function} formatter 鍐呭寮忓寲鍑芥暟
+ * @property {Boolean} showConfirmBar 鏄惁鏄剧ず閿洏涓婃柟甯︽湁鈥濆畬鎴愨�滄寜閽偅涓�鏍忥紝锛堥粯璁� true 锛�
+ * @property {Number} selectionStart 鍏夋爣璧峰浣嶇疆锛岃嚜鍔ㄨ仛鐒︽椂鏈夋晥锛岄渶涓巗election-end鎼厤浣跨敤锛岋紙榛樿 -1 锛�
+ * @property {Number | Number} selectionEnd 鍏夋爣缁撴潫浣嶇疆锛岃嚜鍔ㄨ仛鐒︽椂鏈夋晥锛岄渶涓巗election-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 杈规绫诲瀷锛宻urround-鍥涘懆杈规锛宯one-鏃犺竟妗嗭紝bottom-搴曢儴杈规锛堥粯璁� 'surround' 锛�
+ *
+ * @event {Function(e)} focus 杈撳叆妗嗚仛鐒︽椂瑙﹀彂锛宔vent.detail = { value, height }锛宧eight 涓洪敭鐩橀珮搴�
+ * @event {Function(e)} blur 杈撳叆妗嗗け鍘荤劍鐐规椂瑙﹀彂锛宔vent.detail = {value, cursor}
+ * @event {Function(e)} linechange 杈撳叆妗嗚鏁板彉鍖栨椂璋冪敤锛宔vent.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鏄惁绗竴娆″彉鍖栵紝鍦╳atch涓紝鐢变簬鍔犲叆immediate灞炴�э紝浼氬湪绗竴娆¤Е鍙戯紝姝ゆ椂涓嶅簲璇ヨ涓簐alue鍙戠敓浜嗗彉鍖�
+ firstChange: true,
+ // value缁戝畾鍊肩殑鍙樺寲鏄敱鍐呴儴杩樻槸澶栭儴寮曡捣鐨�
+ changeFromInner: false,
+ // 杩囨护澶勭悊鏂规硶
+ innerFormatter: value => value
+ }
+ },
+ watch: {
+ value: {
+ immediate: true,
+ handler(newVal, oldVal) {
+ this.innerValue = newVal;
+ /* #ifdef H5 */
+ // 鍦℉5涓紝澶栭儴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鍦ㄥ畨鍗搉vue涓婄殑宸紓鎬э紝闇�瑕侀澶栧啀璋冩暣鍏跺唴杈硅窛
+ 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鐨勫崟鍚戞暟鎹祦鐗规�э紝闇�瑕佸厛灏唅nnerValue鍊艰缃负褰撳墠鍊硷紝鍐嶅湪$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.9.3