seiminSearch.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <view class="serach">
  3. <view class="content" :style="{'border-radius':radius+'px'}">
  4. <!-- HM修改 增加进入输入状态的点击范围 -->
  5. <view class="content-box" :class="{'center':mode === 2}">
  6. <text class="icon icon-serach"></text>
  7. <!-- HM修改 增加placeholder input confirm-type confirm-->
  8. <input :placeholder="placeholder" @input="inputChange" confirm-type="search" @confirm="triggerConfirm"
  9. class="input" :class="{'center':!active && mode === 2}" :focus="isFocus" v-model="inputVal" @focus="focus"
  10. @blur="blur" />
  11. <!-- HM修改 @click换成@click.stop阻止冒泡 -->
  12. <text v-if="isDelShow" class="icon icon-del" @click.stop="clear"></text>
  13. </view>
  14. <view v-show="(active&&show&&button === 'inside')||(isDelShow && button === 'inside')" class="serachBtn"
  15. @click="search">
  16. 搜索
  17. </view>
  18. </view>
  19. <view v-if="button === 'outside'" class="button" :class="{'active':show||active}" @click="search">
  20. <view class="button-item">{{!show?searchName:'搜索'}}</view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. name: 'seiminSearch',
  27. props: {
  28. mode: {
  29. value: Number,
  30. default: 1
  31. },
  32. placeholder: {
  33. value: String,
  34. default: '请输入搜索内容'
  35. },
  36. value: {
  37. type: String,
  38. default: false
  39. },
  40. button: {
  41. value: String,
  42. default: 'outside'
  43. },
  44. show: {
  45. value: Boolean,
  46. default: true
  47. },
  48. radius: {
  49. value: String,
  50. default: 60
  51. }
  52. },
  53. data() {
  54. return {
  55. active: false,
  56. inputVal: '',
  57. searchName: '取消',
  58. isDelShow: false,
  59. isFocus: true
  60. };
  61. },
  62. methods: {
  63. //HM修改 触发组件confirm事件
  64. triggerConfirm() {
  65. this.$emit('confirm', false);
  66. },
  67. //HM修改 触发组件input事件
  68. inputChange(event) {
  69. var keyword = event.detail.value;
  70. this.$emit('input', keyword);
  71. if (this.inputVal) {
  72. this.isDelShow = true;
  73. }
  74. },
  75. focus() {
  76. this.active = true;
  77. //HM修改 增加获取焦点判断
  78. if (this.inputVal) {
  79. this.isDelShow = true;
  80. }
  81. },
  82. blur() {
  83. console.log('blur');
  84. this.isFocus = false;
  85. if (!this.inputVal) {
  86. this.active = false;
  87. }
  88. },
  89. clear() {
  90. //HM修改 收起键盘
  91. uni.hideKeyboard();
  92. this.isFocus = false;
  93. this.inputVal = '';
  94. this.active = false;
  95. //HM修改 清空内容时候触发组件input
  96. this.$emit('input', '');
  97. },
  98. getFocus() {
  99. if (!this.isFocus) {
  100. this.isFocus = true;
  101. }
  102. },
  103. search() {
  104. //HM修改 增加点击取消时候退出输入状态,内容为空时,输入默认关键字
  105. if (!this.inputVal) {
  106. if (!this.show && this.searchName == '取消') {
  107. uni.hideKeyboard();
  108. this.isFocus = false;
  109. this.active = false;
  110. return;
  111. }
  112. }
  113. console.log(this.inputVal);
  114. // this.$emit('search', this.inputVal ? this.inputVal : this.placeholder);
  115. }
  116. },
  117. watch: {
  118. inputVal(newVal) {
  119. if (newVal) {
  120. this.searchName = '搜索';
  121. } else {
  122. this.searchName = '取消';
  123. this.isDelShow = false;
  124. }
  125. },
  126. //HM修改 双向绑定
  127. value(val) {
  128. this.inputVal = val;
  129. },
  130. }
  131. };
  132. </script>
  133. <style lang="scss">
  134. .serach {
  135. display: flex;
  136. width: 100%;
  137. box-sizing: border-box;
  138. font-size: $uni-font-size-base;
  139. .content {
  140. display: flex;
  141. align-items: center;
  142. width: 100%;
  143. height: 60upx;
  144. background: #fff;
  145. overflow: hidden;
  146. transition: all 0.2s linear;
  147. border-radius: 30px;
  148. .content-box {
  149. width: 100%;
  150. display: flex;
  151. align-items: center;
  152. &.center {
  153. justify-content: center;
  154. }
  155. .icon {
  156. padding: 0 15upx;
  157. &.icon-del {
  158. font-size: 38upx;
  159. &:before {
  160. content: "\e644";
  161. }
  162. }
  163. &.icon-serach:before {
  164. content: "\e61c";
  165. }
  166. }
  167. .input {
  168. width: 100%;
  169. max-width: 100%;
  170. line-height: 60upx;
  171. height: 60upx;
  172. transition: all 0.2s linear;
  173. &.center {
  174. width: 600upx;
  175. }
  176. &.sub {
  177. width: auto;
  178. color: grey;
  179. }
  180. }
  181. }
  182. .serachBtn {
  183. height: 100%;
  184. flex-shrink: 0;
  185. padding: 0 30upx;
  186. background: linear-gradient(to right, #72c172, #3bb197);
  187. line-height: 60upx;
  188. color: #fff;
  189. transition: all 0.3s;
  190. }
  191. }
  192. .button {
  193. display: flex;
  194. align-items: center;
  195. justify-content: center;
  196. position: relative;
  197. flex-shrink: 0;
  198. width: 0;
  199. transition: all 0.2s linear;
  200. white-space: nowrap;
  201. overflow: hidden;
  202. &.active {
  203. padding-left: 15upx;
  204. width: 100upx;
  205. }
  206. }
  207. }
  208. //HM修改 把字体改成本地加载
  209. @font-face {
  210. font-family: "iconfont";
  211. src: url('data:application/x-font-woff;charset=utf-8;base64,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');
  212. }
  213. .icon {
  214. font-family: iconfont;
  215. font-size: 32upx;
  216. font-style: normal;
  217. color: #999;
  218. }
  219. </style>