| commit | author | age | ||
| e3ba12 | 1 | <template> |
| Z | 2 | <view class="u-textarea" :class="textareaClass" :style="[textareaStyle]"> |
| 3 | <textarea | |
| 4 | class="u-textarea__field" | |
| 5 | :value="innerValue" | |
| 6 | :style="{ height: $u.addUnit(height) }" | |
| 7 | :placeholder="placeholder" | |
| 8 | :placeholder-style="$u.addStyle(placeholderStyle, 'string')" | |
| 9 | :placeholder-class="placeholderClass" | |
| 10 | :disabled="disabled" | |
| 11 | :focus="focus" | |
| 12 | :autoHeight="autoHeight" | |
| 13 | :fixed="fixed" | |
| 14 | :cursorSpacing="cursorSpacing" | |
| 15 | :cursor="cursor" | |
| 16 | :showConfirmBar="showConfirmBar" | |
| 17 | :selectionStart="selectionStart" | |
| 18 | :selectionEnd="selectionEnd" | |
| 19 | :adjustPosition="adjustPosition" | |
| 20 | :disableDefaultPadding="disableDefaultPadding" | |
| 21 | :holdKeyboard="holdKeyboard" | |
| 22 | :maxlength="maxlength" | |
| 23 | :confirmType="confirmType" | |
| 24 | @focus="onFocus" | |
| 25 | @blur="onBlur" | |
| 26 | @linechange="onLinechange" | |
| 27 | @input="onInput" | |
| 28 | @confirm="onConfirm" | |
| 29 | @keyboardheightchange="onKeyboardheightchange" | |
| 30 | ></textarea> | |
| 31 | <text | |
| 32 | class="u-textarea__count" | |
| 33 | :style="{ | |
| 34 | 'background-color': disabled ? 'transparent' : '#fff', | |
| 35 | }" | |
| 36 | v-if="count" | |
| 37 | >{{ innerValue.length }}/{{ maxlength }}</text | |
| 38 | > | |
| 39 | </view> | |
| 40 | </template> | |
| 41 | ||
| 42 | <script> | |
| 43 | import props from "./props.js"; | |
| 44 | /** | |
| 45 | * Textarea 文本域 | |
| 46 | * @description 文本域此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等 | |
| 47 | * @tutorial https://www.uviewui.com/components/textarea.html | |
| 48 | * | |
| 49 | * @property {String | Number} value 输入框的内容 | |
| 50 | * @property {String | Number} placeholder 输入框为空时占位符 | |
| 51 | * @property {String} placeholderClass 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ （ 默认 'input-placeholder' ） | |
| 52 | * @property {String | Object} placeholderStyle 指定placeholder的样式，字符串/对象形式，如"color: red;" | |
| 53 | * @property {String | Number} height 输入框高度（默认 70 ） | |
| 54 | * @property {String} confirmType 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效（默认 'done' ） | |
| 55 | * @property {Boolean} disabled 是否禁用（默认 false ） | |
| 56 | * @property {Boolean} count 是否显示统计字数（默认 false ） | |
| 57 | * @property {Boolean} focus 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现（默认 false ） | |
| 58 | * @property {Boolean | Function} autoHeight 是否自动增加高度（默认 false ） | |
| 59 | * @property {Boolean} fixed 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true（默认 false ） | |
| 60 | * @property {Number} cursorSpacing 指定光标与键盘的距离（默认 0 ） | |
| 61 | * @property {String | Number} cursor 指定focus时的光标位置 | |
| 62 | * @property {Function} formatter 内容式化函数 | |
| 63 | * @property {Boolean} showConfirmBar 是否显示键盘上方带有”完成“按钮那一栏，（默认 true ） | |
| 64 | * @property {Number} selectionStart 光标起始位置，自动聚焦时有效，需与selection-end搭配使用，（默认 -1 ） | |
| 65 | * @property {Number | Number} selectionEnd 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认 -1 ） | |
| 66 | * @property {Boolean} adjustPosition 键盘弹起时，是否自动上推页面（默认 true ） | |
| 67 | * @property {Boolean | Number} disableDefaultPadding 是否去掉 iOS 下的默认内边距，只微信小程序有效（默认 false ） | |
| 68 | * @property {Boolean} holdKeyboard focus时，点击页面的时候不收起键盘，只微信小程序有效（默认 false ） | |
| 69 | * @property {String | Number} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度（默认 140 ） | |
| 70 | * @property {String} border 边框类型，surround-四周边框，none-无边框，bottom-底部边框（默认 'surround' ） | |
| 71 | * | |
| 72 | * @event {Function(e)} focus 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 | |
| 73 | * @event {Function(e)} blur 输入框失去焦点时触发，event.detail = {value, cursor} | |
| 74 | * @event {Function(e)} linechange 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} | |
| 75 | * @event {Function(e)} input 当键盘输入时，触发 input 事件 | |
| 76 | * @event {Function(e)} confirm 点击完成时， 触发 confirm 事件 | |
| 77 | * @event {Function(e)} keyboardheightchange 键盘高度发生变化的时候触发此事件 | |
| 78 | * @example <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea> | |
| 79 | */ | |
| 80 | export default { | |
| 81 | name: "u-textarea", | |
| 82 | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], | |
| 83 | data() { | |
| 84 | return { | |
| 85 | // 输入框的值 | |
| 86 | innerValue: "", | |
| 87 | // 是否处于获得焦点状态 | |
| 88 | focused: false, | |
| 89 | // value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化 | |
| 90 | firstChange: true, | |
| 91 | // value绑定值的变化是由内部还是外部引起的 | |
| 92 | changeFromInner: false, | |
| 93 | // 过滤处理方法 | |
| 94 | innerFormatter: value => value | |
| 95 | } | |
| 96 | }, | |
| 97 | watch: { | |
| 98 | value: { | |
| 99 | immediate: true, | |
| 100 | handler(newVal, oldVal) { | |
| 101 | this.innerValue = newVal; | |
| 102 | /* #ifdef H5 */ | |
| 103 | // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法 | |
| 104 | if ( | |
| 105 | this.firstChange === false && | |
| 106 | this.changeFromInner === false | |
| 107 | ) { | |
| 108 | this.valueChange(); | |
| 109 | } | |
| 110 | /* #endif */ | |
| 111 | this.firstChange = false; | |
| 112 | // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的 | |
| 113 | this.changeFromInner = false; | |
| 114 | }, | |
| 115 | }, | |
| 116 | }, | |
| 117 | computed: { | |
| 118 | // 组件的类名 | |
| 119 | textareaClass() { | |
| 120 | let classes = [], | |
| 121 | { border, disabled, shape } = this; | |
| 122 | border === "surround" && | |
| 123 | (classes = classes.concat(["u-border", "u-textarea--radius"])); | |
| 124 | border === "bottom" && | |
| 125 | (classes = classes.concat([ | |
| 126 | "u-border-bottom", | |
| 127 | "u-textarea--no-radius", | |
| 128 | ])); | |
| 129 | disabled && classes.push("u-textarea--disabled"); | |
| 130 | return classes.join(" "); | |
| 131 | }, | |
| 132 | // 组件的样式 | |
| 133 | textareaStyle() { | |
| 134 | const style = {}; | |
| 135 | // #ifdef APP-NVUE | |
| 136 | // 由于textarea在安卓nvue上的差异性，需要额外再调整其内边距 | |
| 137 | if (uni.$u.os() === "android") { | |
| 138 | style.paddingTop = "6px"; | |
| 139 | style.paddingLeft = "9px"; | |
| 140 | style.paddingBottom = "3px"; | |
| 141 | style.paddingRight = "6px"; | |
| 142 | } | |
| 143 | // #endif | |
| 144 | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)); | |
| 145 | }, | |
| 146 | }, | |
| 147 | methods: { | |
| 148 | // 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用 | |
| 149 | setFormatter(e) { | |
| 150 | this.innerFormatter = e | |
| 151 | }, | |
| 152 | onFocus(e) { | |
| 153 | this.$emit("focus", e); | |
| 154 | }, | |
| 155 | onBlur(e) { | |
| 156 | this.$emit("blur", e); | |
| 157 | // 尝试调用u-form的验证方法 | |
| 158 | uni.$u.formValidate(this, "blur"); | |
| 159 | }, | |
| 160 | onLinechange(e) { | |
| 161 | this.$emit("linechange", e); | |
| 162 | }, | |
| 163 | onInput(e) { | |
| 164 | let { value = "" } = e.detail || {}; | |
| 165 | // 格式化过滤方法 | |
| 166 | const formatter = this.formatter || this.innerFormatter | |
| 167 | const formatValue = formatter(value) | |
| 168 | // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效 | |
| 169 | this.innerValue = value | |
| 170 | this.$nextTick(() => { | |
| 171 | this.innerValue = formatValue; | |
| 172 | this.valueChange(); | |
| 173 | }) | |
| 174 | }, | |
| 175 | // 内容发生变化，进行处理 | |
| 176 | valueChange() { | |
| 177 | const value = this.innerValue; | |
| 178 | this.$nextTick(() => { | |
| 179 | this.$emit("input", value); | |
| 180 | // 标识value值的变化是由内部引起的 | |
| 181 | this.changeFromInner = true; | |
| 182 | this.$emit("change", value); | |
| 183 | // 尝试调用u-form的验证方法 | |
| 184 | uni.$u.formValidate(this, "change"); | |
| 185 | }); | |
| 186 | }, | |
| 187 | onConfirm(e) { | |
| 188 | this.$emit("confirm", e); | |
| 189 | }, | |
| 190 | onKeyboardheightchange(e) { | |
| 191 | this.$emit("keyboardheightchange", e); | |
| 192 | }, | |
| 193 | }, | |
| 194 | }; | |
| 195 | </script> | |
| 196 | ||
| 197 | <style lang="scss" scoped> | |
| 198 | @import "../../libs/css/components.scss"; | |
| 199 | ||
| 200 | .u-textarea { | |
| 201 | border-radius: 4px; | |
| 202 | background-color: #fff; | |
| 203 | position: relative; | |
| 204 | @include flex; | |
| 205 | flex: 1; | |
| 206 | padding: 9px; | |
| 207 | ||
| 208 | &--radius { | |
| 209 | border-radius: 4px; | |
| 210 | } | |
| 211 | ||
| 212 | &--no-radius { | |
| 213 | border-radius: 0; | |
| 214 | } | |
| 215 | ||
| 216 | &--disabled { | |
| 217 | background-color: #f5f7fa; | |
| 218 | } | |
| 219 | ||
| 220 | &__field { | |
| 221 | flex: 1; | |
| 222 | font-size: 15px; | |
| 223 | color: $u-content-color; | |
| 224 | width: 100%; | |
| 225 | } | |
| 226 | ||
| 227 | &__count { | |
| 228 | position: absolute; | |
| 229 | right: 5px; | |
| 230 | bottom: 2px; | |
| 231 | font-size: 12px; | |
| 232 | color: $u-tips-color; | |
| 233 | background-color: #ffffff; | |
| 234 | padding: 1px 4px; | |
| 235 | } | |
| 236 | } | |
| 237 | </style> | |
