searchPage.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view class="searchPage-wrap">
  3. <!-- 搜索 -->
  4. <u-search shape="square" placeholder="请输入门店名称搜索" v-model="keyword" action-text="取消" @change="change" @search="search" @custom="custom"></u-search>
  5. </view>
  6. </template>
  7. <script>
  8. export default{
  9. data(){
  10. return{
  11. keyword: ''
  12. }
  13. },
  14. methods: {
  15. // 用户点击右侧控件时触发
  16. custom(val){
  17. },
  18. // 输入框内容发生变化时触发
  19. change(val){
  20. let i = this.throttle(this.handle(), 1000)
  21. // console.log(i)
  22. },
  23. // 用户确定搜索时触发,用户按回车键,或者手机键盘右下角的"搜索"键时触发
  24. search(val){
  25. },
  26. // 节流throttle代码(时间戳+定时器)
  27. throttle(fn,delay){
  28. let valid = true
  29. return function() {
  30. if(!valid){
  31. //休息时间 暂不接客
  32. return false
  33. }
  34. // 工作时间,执行函数并且在间隔期内把状态位设为无效
  35. valid = false
  36. setTimeout(() => {
  37. fn()
  38. valid = true;
  39. }, delay)
  40. }
  41. },
  42. handle(){
  43. console.log(12)
  44. }
  45. }
  46. }
  47. </script>
  48. <style lang="scss" scoped>
  49. page {
  50. background-color: #f8f8f8;
  51. height: calc(100vh - 44px);
  52. }
  53. .searchPage-wrap{
  54. }
  55. </style>