u-textarea.js 4.5 KB

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