u-textarea.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. "use strict";
  2. const uni_modules_uviewPlus_components_uTextarea_props = require("./props.js");
  3. const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
  4. const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
  5. const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
  6. const common_vendor = require("../../../../common/vendor.js");
  7. const _sfc_main = {
  8. name: "u-textarea",
  9. mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uTextarea_props.props],
  10. data() {
  11. return {
  12. // 输入框的值
  13. innerValue: "",
  14. // 是否处于获得焦点状态
  15. focused: false,
  16. // value是否第一次变化,在watch中,由于加入immediate属性,会在第一次触发,此时不应该认为value发生了变化
  17. firstChange: true,
  18. // value绑定值的变化是由内部还是外部引起的
  19. changeFromInner: false,
  20. // 过滤处理方法
  21. innerFormatter: (value) => value
  22. };
  23. },
  24. created() {
  25. },
  26. watch: {
  27. modelValue: {
  28. immediate: true,
  29. handler(newVal, oldVal) {
  30. this.innerValue = newVal;
  31. this.firstChange = false;
  32. this.changeFromInner = false;
  33. }
  34. }
  35. },
  36. computed: {
  37. // 组件的类名
  38. textareaClass() {
  39. let classes = [], { border, disabled } = this;
  40. border === "surround" && (classes = classes.concat(["u-border", "u-textarea--radius"]));
  41. border === "bottom" && (classes = classes.concat([
  42. "u-border-bottom",
  43. "u-textarea--no-radius"
  44. ]));
  45. disabled && classes.push("u-textarea--disabled");
  46. return classes.join(" ");
  47. },
  48. // 组件的样式
  49. textareaStyle() {
  50. const style = {};
  51. return uni_modules_uviewPlus_libs_function_index.deepMerge(style, uni_modules_uviewPlus_libs_function_index.addStyle(this.customStyle));
  52. }
  53. },
  54. emits: ["update:modelValue", "linechange", "focus", "blur", "change", "confirm", "keyboardheightchange"],
  55. methods: {
  56. addStyle: uni_modules_uviewPlus_libs_function_index.addStyle,
  57. addUnit: uni_modules_uviewPlus_libs_function_index.addUnit,
  58. // 在微信小程序中,不支持将函数当做props参数,故只能通过ref形式调用
  59. setFormatter(e) {
  60. this.innerFormatter = e;
  61. },
  62. onFocus(e) {
  63. this.$emit("focus", e);
  64. },
  65. onBlur(e) {
  66. this.$emit("blur", e);
  67. uni_modules_uviewPlus_libs_function_index.formValidate(this, "blur");
  68. },
  69. onLinechange(e) {
  70. this.$emit("linechange", e);
  71. },
  72. onInput(e) {
  73. let { value = "" } = e.detail || {};
  74. const formatter = this.formatter || this.innerFormatter;
  75. const formatValue = formatter(value);
  76. this.innerValue = value;
  77. this.$nextTick(() => {
  78. this.innerValue = formatValue;
  79. this.valueChange();
  80. });
  81. },
  82. // 内容发生变化,进行处理
  83. valueChange() {
  84. const value = this.innerValue;
  85. this.$nextTick(() => {
  86. this.$emit("update:modelValue", value);
  87. this.changeFromInner = true;
  88. this.$emit("change", value);
  89. uni_modules_uviewPlus_libs_function_index.formValidate(this, "change");
  90. });
  91. },
  92. onConfirm(e) {
  93. this.$emit("confirm", e);
  94. },
  95. onKeyboardheightchange(e) {
  96. this.$emit("keyboardheightchange", e);
  97. }
  98. }
  99. };
  100. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  101. return common_vendor.e({
  102. a: $data.innerValue,
  103. b: $options.addUnit(_ctx.height),
  104. c: _ctx.placeholder,
  105. d: $options.addStyle(_ctx.placeholderStyle, "string"),
  106. e: _ctx.placeholderClass,
  107. f: _ctx.disabled,
  108. g: _ctx.focus,
  109. h: _ctx.autoHeight,
  110. i: _ctx.fixed,
  111. j: _ctx.cursorSpacing,
  112. k: _ctx.cursor,
  113. l: _ctx.showConfirmBar,
  114. m: _ctx.selectionStart,
  115. n: _ctx.selectionEnd,
  116. o: _ctx.adjustPosition,
  117. p: _ctx.disableDefaultPadding,
  118. q: _ctx.holdKeyboard,
  119. r: _ctx.maxlength,
  120. s: _ctx.confirmType,
  121. t: _ctx.ignoreCompositionEvent,
  122. v: common_vendor.o((...args) => $options.onFocus && $options.onFocus(...args)),
  123. w: common_vendor.o((...args) => $options.onBlur && $options.onBlur(...args)),
  124. x: common_vendor.o((...args) => $options.onLinechange && $options.onLinechange(...args)),
  125. y: common_vendor.o((...args) => $options.onInput && $options.onInput(...args)),
  126. z: common_vendor.o((...args) => $options.onConfirm && $options.onConfirm(...args)),
  127. A: common_vendor.o((...args) => $options.onKeyboardheightchange && $options.onKeyboardheightchange(...args)),
  128. B: _ctx.count
  129. }, _ctx.count ? {
  130. C: common_vendor.t($data.innerValue.length),
  131. D: common_vendor.t(_ctx.maxlength),
  132. E: _ctx.disabled ? "transparent" : "#fff"
  133. } : {}, {
  134. F: common_vendor.n($options.textareaClass),
  135. G: common_vendor.s($options.textareaStyle)
  136. });
  137. }
  138. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b6c174a6"]]);
  139. wx.createComponent(Component);