u-input.js 6.7 KB

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