index.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. // input/input.js
  2. import rules from '../behaviors/rules';
  3. Component({
  4. /**
  5. * 组件的属性列表
  6. */
  7. options: {
  8. multipleSlots: true,
  9. },
  10. behaviors: ['wx://form-field', rules],
  11. externalClasses: ['l-class', 'l-label-class','l-error-text','l-error-text-class'],
  12. properties: {
  13. // 表单标题(label)的文本
  14. label: {
  15. type: String,
  16. value: ''
  17. },
  18. // 是否隐藏label
  19. hideLabel:{
  20. type: Boolean,
  21. value: false
  22. },
  23. // 是否自定义label部分
  24. labelCustom: {
  25. type: Boolean,
  26. value: false
  27. },
  28. // 是否显示下划线
  29. showRow: {
  30. type: Boolean,
  31. value: true
  32. },
  33. // 是否必选
  34. required: {
  35. type: Boolean,
  36. value: false
  37. },
  38. // 占位文本
  39. placeholder: {
  40. type: String,
  41. value: ''
  42. },
  43. // 输入框类型
  44. type: {
  45. type: String,
  46. value: 'text'
  47. },
  48. // 输入框的值
  49. value: {
  50. type: String,
  51. value: ''
  52. },
  53. // 是否需要冒号
  54. colon: {
  55. type: Boolean,
  56. value: false
  57. },
  58. // 获取焦点
  59. focus: {
  60. type: Boolean,
  61. value: false
  62. },
  63. // 是否显示清除按钮
  64. clear: {
  65. type: Boolean,
  66. value: false
  67. },
  68. // 最大输入长度
  69. maxlength: {
  70. type: Number,
  71. value: 140
  72. },
  73. // 表单项的宽度,单位rpx
  74. width: {
  75. type: Number,
  76. value: 750
  77. },
  78. // 表单项标题部分的宽度,单位rpx
  79. labelWidth: {
  80. type: Number,
  81. value: 200
  82. },
  83. // label标题的显示位置 left top right
  84. labelLayout: {
  85. type: String,
  86. value: 'left'
  87. },
  88. // 是否禁用
  89. disabled: {
  90. type: Boolean,
  91. value: false
  92. },
  93. // 占位文字的样式
  94. placeholderStyle: {
  95. type: String,
  96. value: ''
  97. },
  98. },
  99. /**
  100. * 组件的初始数据
  101. */
  102. data: {
  103. },
  104. attached() {
  105. this.initRules();
  106. },
  107. /**
  108. * 组件的方法列表
  109. */
  110. methods: {
  111. handleInputChange(event) {
  112. const {
  113. detail = {}
  114. } = event;
  115. const {
  116. value = ''
  117. } = detail;
  118. this.setData({
  119. value
  120. });
  121. this.triggerEvent('lininput', event.detail);
  122. },
  123. handleInputFocus(event) {
  124. this.triggerEvent('linfocus', event.detail);
  125. },
  126. handleInputBlur(event) {
  127. this.validatorData({
  128. value: event.detail.value
  129. });
  130. this.triggerEvent('linblur', event.detail);
  131. },
  132. handleInputConfirm(event) {
  133. const {
  134. detail = {}
  135. } = event;
  136. const {
  137. value = ''
  138. } = detail;
  139. this.setData({
  140. value
  141. });
  142. this.triggerEvent('linconfirm', event.detail);
  143. },
  144. onClearTap(event) {
  145. this.setData({
  146. value: ''
  147. });
  148. this.triggerEvent('linclear', event.detail);
  149. },
  150. }
  151. });