u-input.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. "use strict";
  2. const uni_modules_uviewPlus_components_uInput_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-input",
  9. mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uInput_props.props],
  10. data() {
  11. return {
  12. // 清除操作
  13. clearInput: false,
  14. // 输入框的值
  15. innerValue: "",
  16. // 是否处于获得焦点状态
  17. focused: false,
  18. // value是否第一次变化,在watch中,由于加入immediate属性,会在第一次触发,此时不应该认为value发生了变化
  19. firstChange: true,
  20. // value绑定值的变化是由内部还是外部引起的
  21. changeFromInner: false,
  22. // 过滤处理方法
  23. innerFormatter: (value) => value
  24. };
  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. isShowClear() {
  39. const { clearable, readonly, focused, innerValue } = this;
  40. return !!clearable && !readonly && !!focused && innerValue !== "";
  41. },
  42. // 组件的类名
  43. inputClass() {
  44. let classes = [], { border, disabled, shape } = this;
  45. border === "surround" && (classes = classes.concat(["u-border", "u-input--radius"]));
  46. classes.push(`u-input--${shape}`);
  47. border === "bottom" && (classes = classes.concat([
  48. "u-border-bottom",
  49. "u-input--no-radius"
  50. ]));
  51. return classes.join(" ");
  52. },
  53. // 组件的样式
  54. wrapperStyle() {
  55. const style = {};
  56. if (this.disabled) {
  57. style.backgroundColor = this.disabledColor;
  58. }
  59. if (this.border === "none") {
  60. style.padding = "0";
  61. } else {
  62. style.paddingTop = "6px";
  63. style.paddingBottom = "6px";
  64. style.paddingLeft = "9px";
  65. style.paddingRight = "9px";
  66. }
  67. return uni_modules_uviewPlus_libs_function_index.deepMerge(style, uni_modules_uviewPlus_libs_function_index.addStyle(this.customStyle));
  68. },
  69. // 输入框的样式
  70. inputStyle() {
  71. const style = {
  72. color: this.color,
  73. fontSize: uni_modules_uviewPlus_libs_function_index.addUnit(this.fontSize),
  74. textAlign: this.inputAlign
  75. };
  76. return style;
  77. }
  78. },
  79. emits: ["update:modelValue", "focus", "blur", "change", "confirm", "clear", "keyboardheightchange"],
  80. methods: {
  81. // 在微信小程序中,不支持将函数当做props参数,故只能通过ref形式调用
  82. setFormatter(e) {
  83. this.innerFormatter = e;
  84. },
  85. // 当键盘输入时,触发input事件
  86. onInput(e) {
  87. let { value = "" } = e.detail || {};
  88. const formatter = this.formatter || this.innerFormatter;
  89. const formatValue = formatter(value);
  90. this.innerValue = value;
  91. this.$nextTick(() => {
  92. this.innerValue = formatValue;
  93. this.valueChange();
  94. });
  95. },
  96. // 输入框失去焦点时触发
  97. onBlur(event) {
  98. this.$emit("blur", event.detail.value);
  99. uni_modules_uviewPlus_libs_function_index.sleep(150).then(() => {
  100. this.focused = false;
  101. });
  102. uni_modules_uviewPlus_libs_function_index.formValidate(this, "blur");
  103. },
  104. // 输入框聚焦时触发
  105. onFocus(event) {
  106. this.focused = true;
  107. this.$emit("focus");
  108. },
  109. // 点击完成按钮时触发
  110. onConfirm(event) {
  111. this.$emit("confirm", this.innerValue);
  112. },
  113. // 键盘高度发生变化的时候触发此事件
  114. // 兼容性:微信小程序2.7.0+、App 3.1.0+
  115. onkeyboardheightchange(event) {
  116. this.$emit("keyboardheightchange", event);
  117. },
  118. // 内容发生变化,进行处理
  119. valueChange() {
  120. if (this.clearInput) {
  121. this.innerValue = "";
  122. this.clearInput = false;
  123. }
  124. const value = this.innerValue;
  125. this.$nextTick(() => {
  126. this.$emit("update:modelValue", value);
  127. this.changeFromInner = true;
  128. this.$emit("change", value);
  129. uni_modules_uviewPlus_libs_function_index.formValidate(this, "change");
  130. });
  131. },
  132. // 点击清除控件
  133. onClear() {
  134. this.clearInput = true;
  135. this.innerValue = "";
  136. this.$nextTick(() => {
  137. this.valueChange();
  138. this.$emit("clear");
  139. });
  140. },
  141. /**
  142. * 在安卓nvue上,事件无法冒泡
  143. * 在某些时间,我们希望监听u-from-item的点击事件,此时会导致点击u-form-item内的u-input后
  144. * 无法触发u-form-item的点击事件,这里通过手动调用u-form-item的方法进行触发
  145. */
  146. clickHandler() {
  147. }
  148. }
  149. };
  150. if (!Array) {
  151. const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
  152. _easycom_u_icon2();
  153. }
  154. const _easycom_u_icon = () => "../u-icon/u-icon.js";
  155. if (!Math) {
  156. _easycom_u_icon();
  157. }
  158. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  159. return common_vendor.e({
  160. a: _ctx.prefixIcon || _ctx.$slots.prefix
  161. }, _ctx.prefixIcon || _ctx.$slots.prefix ? {
  162. b: common_vendor.p({
  163. name: _ctx.prefixIcon,
  164. size: "18",
  165. customStyle: _ctx.prefixIconStyle
  166. })
  167. } : {}, {
  168. c: common_vendor.s($options.inputStyle),
  169. d: _ctx.type,
  170. e: _ctx.focus,
  171. f: _ctx.cursor,
  172. g: $data.innerValue,
  173. h: _ctx.autoBlur,
  174. i: _ctx.disabled || _ctx.readonly,
  175. j: _ctx.maxlength,
  176. k: _ctx.placeholder,
  177. l: _ctx.placeholderStyle,
  178. m: _ctx.placeholderClass,
  179. n: _ctx.confirmType,
  180. o: _ctx.confirmHold,
  181. p: _ctx.holdKeyboard,
  182. q: _ctx.cursorSpacing,
  183. r: _ctx.adjustPosition,
  184. s: _ctx.selectionEnd,
  185. t: _ctx.selectionStart,
  186. v: _ctx.password || _ctx.type === "password" || false,
  187. w: _ctx.ignoreCompositionEvent,
  188. x: common_vendor.o((...args) => $options.onInput && $options.onInput(...args)),
  189. y: common_vendor.o((...args) => $options.onBlur && $options.onBlur(...args)),
  190. z: common_vendor.o((...args) => $options.onFocus && $options.onFocus(...args)),
  191. A: common_vendor.o((...args) => $options.onConfirm && $options.onConfirm(...args)),
  192. B: common_vendor.o((...args) => $options.onkeyboardheightchange && $options.onkeyboardheightchange(...args)),
  193. C: common_vendor.o((...args) => $options.clickHandler && $options.clickHandler(...args)),
  194. D: $options.isShowClear
  195. }, $options.isShowClear ? {
  196. E: common_vendor.p({
  197. name: "close",
  198. size: "11",
  199. color: "#ffffff",
  200. customStyle: "line-height: 12px"
  201. }),
  202. F: common_vendor.o((...args) => $options.onClear && $options.onClear(...args))
  203. } : {}, {
  204. G: _ctx.suffixIcon || _ctx.$slots.suffix
  205. }, _ctx.suffixIcon || _ctx.$slots.suffix ? {
  206. H: common_vendor.p({
  207. name: _ctx.suffixIcon,
  208. size: "18",
  209. customStyle: _ctx.suffixIconStyle
  210. })
  211. } : {}, {
  212. I: common_vendor.n($options.inputClass),
  213. J: common_vendor.s($options.wrapperStyle)
  214. });
  215. }
  216. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-df79975b"]]);
  217. wx.createComponent(Component);