学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

239 lines
9.4 KiB

1 year ago
  1. <template>
  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. :ignoreCompositionEvent="ignoreCompositionEvent"
  25. @focus="onFocus"
  26. @blur="onBlur"
  27. @linechange="onLinechange"
  28. @input="onInput"
  29. @confirm="onConfirm"
  30. @keyboardheightchange="onKeyboardheightchange"
  31. ></textarea>
  32. <text
  33. class="u-textarea__count"
  34. :style="{
  35. 'background-color': disabled ? 'transparent' : '#fff',
  36. }"
  37. v-if="count"
  38. >{{ innerValue.length }}/{{ maxlength }}</text
  39. >
  40. </view>
  41. </template>
  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. * @property {Boolean} ignoreCompositionEvent 是否忽略组件内对文本合成系统事件的处理
  72. *
  73. * @event {Function(e)} focus 输入框聚焦时触发event.detail = { value, height }height 为键盘高度
  74. * @event {Function(e)} blur 输入框失去焦点时触发event.detail = {value, cursor}
  75. * @event {Function(e)} linechange 输入框行数变化时调用event.detail = {height: 0, heightRpx: 0, lineCount: 0}
  76. * @event {Function(e)} input 当键盘输入时触发 input 事件
  77. * @event {Function(e)} confirm 点击完成时 触发 confirm 事件
  78. * @event {Function(e)} keyboardheightchange 键盘高度发生变化的时候触发此事件
  79. * @example <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
  80. */
  81. export default {
  82. name: "u-textarea",
  83. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  84. data() {
  85. return {
  86. // 输入框的值
  87. innerValue: "",
  88. // 是否处于获得焦点状态
  89. focused: false,
  90. // value是否第一次变化,在watch中,由于加入immediate属性,会在第一次触发,此时不应该认为value发生了变化
  91. firstChange: true,
  92. // value绑定值的变化是由内部还是外部引起的
  93. changeFromInner: false,
  94. // 过滤处理方法
  95. innerFormatter: value => value
  96. }
  97. },
  98. watch: {
  99. value: {
  100. immediate: true,
  101. handler(newVal, oldVal) {
  102. this.innerValue = newVal;
  103. /* #ifdef H5 */
  104. // 在H5中,外部value变化后,修改input中的值,不会触发@input事件,此时手动调用值变化方法
  105. if (
  106. this.firstChange === false &&
  107. this.changeFromInner === false
  108. ) {
  109. this.valueChange();
  110. }
  111. /* #endif */
  112. this.firstChange = false;
  113. // 重置changeFromInner的值为false,标识下一次引起默认为外部引起的
  114. this.changeFromInner = false;
  115. },
  116. },
  117. },
  118. computed: {
  119. // 组件的类名
  120. textareaClass() {
  121. let classes = [],
  122. { border, disabled, shape } = this;
  123. border === "surround" &&
  124. (classes = classes.concat(["u-border", "u-textarea--radius"]));
  125. border === "bottom" &&
  126. (classes = classes.concat([
  127. "u-border-bottom",
  128. "u-textarea--no-radius",
  129. ]));
  130. disabled && classes.push("u-textarea--disabled");
  131. return classes.join(" ");
  132. },
  133. // 组件的样式
  134. textareaStyle() {
  135. const style = {};
  136. // #ifdef APP-NVUE
  137. // 由于textarea在安卓nvue上的差异性,需要额外再调整其内边距
  138. if (uni.$u.os() === "android") {
  139. style.paddingTop = "6px";
  140. style.paddingLeft = "9px";
  141. style.paddingBottom = "3px";
  142. style.paddingRight = "6px";
  143. }
  144. // #endif
  145. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
  146. },
  147. },
  148. methods: {
  149. // 在微信小程序中,不支持将函数当做props参数,故只能通过ref形式调用
  150. setFormatter(e) {
  151. this.innerFormatter = e
  152. },
  153. onFocus(e) {
  154. this.$emit("focus", e);
  155. },
  156. onBlur(e) {
  157. this.$emit("blur", e);
  158. // 尝试调用u-form的验证方法
  159. uni.$u.formValidate(this, "blur");
  160. },
  161. onLinechange(e) {
  162. this.$emit("linechange", e);
  163. },
  164. onInput(e) {
  165. let { value = "" } = e.detail || {};
  166. // 格式化过滤方法
  167. const formatter = this.formatter || this.innerFormatter
  168. const formatValue = formatter(value)
  169. // 为了避免props的单向数据流特性,需要先将innerValue值设置为当前值,再在$nextTick中重新赋予设置后的值才有效
  170. this.innerValue = value
  171. this.$nextTick(() => {
  172. this.innerValue = formatValue;
  173. this.valueChange();
  174. })
  175. },
  176. // 内容发生变化,进行处理
  177. valueChange() {
  178. const value = this.innerValue;
  179. this.$nextTick(() => {
  180. this.$emit("input", value);
  181. // 标识value值的变化是由内部引起的
  182. this.changeFromInner = true;
  183. this.$emit("change", value);
  184. // 尝试调用u-form的验证方法
  185. uni.$u.formValidate(this, "change");
  186. });
  187. },
  188. onConfirm(e) {
  189. this.$emit("confirm", e);
  190. },
  191. onKeyboardheightchange(e) {
  192. this.$emit("keyboardheightchange", e);
  193. },
  194. },
  195. };
  196. </script>
  197. <style lang="scss" scoped>
  198. @import "../../libs/css/components.scss";
  199. .u-textarea {
  200. border-radius: 4px;
  201. background-color: #fff;
  202. position: relative;
  203. @include flex;
  204. flex: 1;
  205. padding: 9px;
  206. &--radius {
  207. border-radius: 4px;
  208. }
  209. &--no-radius {
  210. border-radius: 0;
  211. }
  212. &--disabled {
  213. background-color: #f5f7fa;
  214. }
  215. &__field {
  216. flex: 1;
  217. font-size: 15px;
  218. color: $u-content-color;
  219. width: 100%;
  220. }
  221. &__count {
  222. position: absolute;
  223. right: 5px;
  224. bottom: 2px;
  225. font-size: 12px;
  226. color: $u-tips-color;
  227. background-color: #ffffff;
  228. padding: 1px 4px;
  229. }
  230. }
  231. </style>