u-input.js 7.7 KB

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