index.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. // cpn/search-bar/index.js
  2. Component({
  3. /**
  4. * 组件的属性列表
  5. */
  6. externalClasses: [
  7. 'l-class',
  8. 'l-container-class',
  9. 'l-placeholder-class',
  10. 'l-icon-class',
  11. 'l-input-class',
  12. 'l-cancel-class'
  13. ],
  14. options: {
  15. multipleSlots: true // 在组件定义时的选项中启用多slot支持
  16. },
  17. properties: {
  18. confirmType: {
  19. type: String,
  20. value: 'search'
  21. },
  22. placeholder: String,
  23. cancelText: {
  24. type: String,
  25. value: '取消'
  26. },
  27. address: String,
  28. custom: Boolean,
  29. value: String,
  30. type: String,
  31. icon: {
  32. type: String,
  33. value: 'research'
  34. },
  35. iconColor: {
  36. type: String,
  37. value: '#bdbdbd'
  38. },
  39. iconSize: {
  40. type: String,
  41. value: '28'
  42. },
  43. bgColor: {
  44. type: String,
  45. value: '#f3f3f3'
  46. },
  47. showCancel: {
  48. type: Boolean,
  49. value: true
  50. },
  51. shape: {
  52. type: String,
  53. value: 'primary'
  54. },
  55. TextAlign: {
  56. type: String,
  57. value: 'left'
  58. },
  59. adress: String,
  60. // 获取焦点
  61. focus: Boolean,
  62. // 是否显示清除按钮
  63. clear: {
  64. type: Boolean,
  65. value: true
  66. },
  67. // 最大输入长度
  68. maxlength: {
  69. type: Number,
  70. value: 140
  71. },
  72. // 是否禁用
  73. disabled: {
  74. type: Boolean,
  75. value: false
  76. },
  77. // 占位文字的样式
  78. placeholderStyle: {
  79. type: String,
  80. value: ''
  81. }
  82. },
  83. /**
  84. * 组件的初始数据
  85. */
  86. data: {
  87. },
  88. /**
  89. * 组件的方法列表
  90. */
  91. methods: {
  92. onCancel() {
  93. this.triggerEvent('lincancel', {}, {
  94. bubbles: true,
  95. composed: true
  96. });
  97. },
  98. // input属性列表
  99. handleInputChange(event) {
  100. const {
  101. detail = {}
  102. } = event;
  103. const {
  104. value = ''
  105. } = detail;
  106. this.setData({
  107. value
  108. });
  109. this.triggerEvent('linchange', detail);
  110. },
  111. handleInputFocus(event) {
  112. this.triggerEvent('linfocus', event.detail);
  113. },
  114. handleInputBlur(event) {
  115. this.triggerEvent('linblur', event.detail);
  116. },
  117. handleInputConfirm(event) {
  118. const {
  119. detail = {}
  120. } = event;
  121. const {
  122. value = ''
  123. } = detail;
  124. this.setData({
  125. value
  126. });
  127. this.triggerEvent('linconfirm', detail);
  128. },
  129. onClearTap(event) {
  130. this.setData({
  131. value: ''
  132. });
  133. this.triggerEvent('linclear', event.detail, {
  134. bubbles: true,
  135. composed: true
  136. });
  137. }
  138. }
  139. });