zw-search.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="">
  3. <view :class="['search-box' , fixed ?'fixed-search':'' ]"
  4. :style="{'height':searchHeight + 'rpx' , 'top':nav_status_Height+'px' , 'backgroundColor':bgColor}">
  5. <u-search placeholder="请输入搜索关键字" v-model="keyword" @search="searchData" :show-action="false"
  6. :height="82"></u-search>
  7. </view>
  8. <view :style="{'width': '100%' , 'height' : searchHeight + 'rpx'}" />
  9. </view>
  10. </template>
  11. <script>
  12. import {
  13. boolean
  14. } from 'mathjs';
  15. let app = getApp();
  16. export default {
  17. name: "zw-search",
  18. props: {
  19. placeholder: {
  20. type: String,
  21. default: '搜索'
  22. },
  23. bgColor: {
  24. type: String,
  25. default: '#fff'
  26. },
  27. searchHeight: {
  28. type: Number,
  29. default: 100
  30. },
  31. fixed: {
  32. type: Boolean,
  33. default: true
  34. }
  35. },
  36. data() {
  37. return {
  38. // nav_status_Height: 0,
  39. nav_status_Height: app.globalData.nav_status_Height,
  40. keyword: '',
  41. };
  42. },
  43. created() {
  44. },
  45. methods: {
  46. searchData() {}
  47. }
  48. }
  49. </script>
  50. <style lang="scss" scoped>
  51. .search-box {
  52. padding: 0 30rpx;
  53. display: flex;
  54. align-items: center;
  55. }
  56. .fixed-search {
  57. position: fixed;
  58. left: 0;
  59. right: 0;
  60. z-index: 1;
  61. }
  62. </style>