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